/* Copyright © Rob Art | Illustration 2026 */
/**
 * BriefliWP — Frontend Layout Module CSS
 *
 * Architecture (A/B/C/D regions):
 *   A = .blwp-wrap        Main grid container — full viewport, three rows
 *   B = .blwp-region--top      Top region (above-logo timer only)
 *   C = .blwp-region--centre   Centred main content (logo, rule, heading, body, etc.)
 *   D = .blwp-region--bottom   Bottom stack (email, social, branding, copyright)
 *
 * Holders sit inside C (and B/D) and collapse cleanly when empty.
 * Floaters (top-right, bottom-right social) are absolute, outside grid.
 *
 * This file owns ONLY layout structure. Element-specific styles
 * (countdown, status, email, social) live with their respective modules.
 */

/* ── Reset ──────────────────────────────────────────────────────────── */
.blwp-wrap *,
.blwp-wrap *::before,
.blwp-wrap *::after {
    box-sizing: border-box;
}

/* ── A: Main wrap — three-row grid ─────────────────────────────────── */
.blwp-wrap {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "top"
        "centre"
        "bottom";
    text-align: center;
    padding: 0 20px;
}

/* ── B: Top region (above-logo timer only) ──────────────────────────── */
.blwp-region--top {
    grid-area: top;
    min-height: 30px;
    padding-top: 30px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.blwp-region--top:empty { display: none; }

/* ── C: Centred main content ────────────────────────────────────────── */
.blwp-region--centre {
    grid-area: centre;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    gap: 20px;
    animation: blwpFadeUp 0.9s ease both;
}
/* Typography elements span the column so per-element text-align (left/centre/right/justify) works. */
.blwp-region--centre > .blwp-heading,
.blwp-region--centre > .blwp-subheading,
.blwp-region--centre > .blwp-body { width: 100%; }
.blwp-region--bottom > .blwp-footer { width: 100%; }
/* Subheading is rendered empty so live-push has a target; hide when empty so
   it doesn't take vertical space (margin/gap stacking). */
.blwp-subheading:empty { display: none; }

/* ── D: Bottom stack ────────────────────────────────────────────────── */
.blwp-region--bottom {
    grid-area: bottom;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-bottom: 30px;
}

/* ── Holders — collapsible slots inside regions ─────────────────────── */
.blwp-holder {
    width: 100%;
    text-align: center;
}
.blwp-holder:empty { display: none; }
.blwp-holder:not(:empty) {
    animation: blwpHolderOpen 0.4s ease-out both;
}

/* ── Floaters (corners, outside grid flow) ──────────────────────────── */
/* Override the base .blwp-holder { width:100%; text-align:center } — floaters
   should hug the corner, not span the viewport and centre their content. */
.blwp-holder--top-right,
.blwp-holder--bottom-right {
    position: fixed;
    right: 24px;
    z-index: 3;
    width: auto;
    text-align: right;
}
.blwp-holder--top-right    { top: 24px; }
.blwp-holder--bottom-right { bottom: 24px; }

/* ── Animations ─────────────────────────────────────────────────────── */
@keyframes blwpFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes blwpHolderOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}