/* =========================================================
   PPIL Signage - site.css (signage-first, no scrollbars)
   Slideshow-first layout (one slide visible at a time)
   Flexible container system (future-proof)
   ========================================================= */

/* ---- Global reset / predictability ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* Default page typography (kept sane, but minimal) */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---- Signage layout clamps (no scrollbars ever) ---- */
.signage-body {
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden; /* kill all scrollbars */
}

.signage-main {
    width: 100%;
    height: 100%;
    overflow: hidden; /* belt + suspenders */
}

/* Fullscreen stage for every signage page */
.signage-screen {
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* ---------------------------------------------------------
   Container system (flexible, future-proof)
   --------------------------------------------------------- */

/* Every container block (slot) */
.slot {
    width: 100%;
    min-height: 0; /* critical: allow children to shrink without overflow */
    overflow: hidden; /* signage-first: no accidental scrollbars */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

    /* Slideshow mode: a slide should fill the entire screen when visible.
   Your JS toggles display:none / display:flex; this ensures visible slides fill. */
    .slot.slide {
        width: 100%;
        height: 100%;
        min-height: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

/* Optional hooks (you can target these later if ever needed) */
.slot-ppil {
}

.slot-welcome {
}

.slot-goodbye {
}

/* ---------------------------------------------------------
   Per-slide style knobs (CSS variables)
   These defaults match your current template.
   Razor can override them per slide via style="--logoMaxH:...;"
   --------------------------------------------------------- */

.slot.slide {
    --logoMaxH: 62vh;
    --logoMaxW: 92vw;
    --imgMaxH: 86vh;
    --imgMaxW: 96vw;
    --blockGap: 2.2vh;
    --blockPadY: 4vh;
    --hScale: 4.8vw;
    --tScale: 2.6vw;
    --xScale: 6vw;
    --hMaxW: 92vw;
    --tMaxW: 92vw;
    --align: center;
}

/* ---------------------------------------------------------
   Brand slide layout (logo + header + tagline)
   --------------------------------------------------------- */

.brand-block {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--blockGap);
    padding: var(--blockPadY) 5vw;
    text-align: var(--align);
}

/* Logos (brand blocks)
   - Removed the 900px cap (it makes 65" screens look tiny)
   - Sized for "one slide at a time"
   - Now controlled by CSS variables */
.brand-logo,
.signage-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: var(--logoMaxW);
    max-height: var(--logoMaxH);
    object-fit: contain;
    flex: 0 1 auto;
}

/* Brand header + tagline (readable from distance)
   - Now controlled by CSS variables */
.brand-header {
    max-width: var(--hMaxW);
    font-size: clamp(40px, var(--hScale), 120px);
    font-weight: 650;
    letter-spacing: 0.08em;
    color: rgba(235, 235, 235, 0.96);
    line-height: 1.05;
    margin: 0;
    padding: 0 3vw;
}

.brand-tagline {
    max-width: var(--tMaxW);
    font-size: clamp(22px, var(--tScale), 64px);
    font-weight: 320;
    letter-spacing: 0.06em;
    color: rgba(230, 230, 230, 0.78);
    line-height: 1.15;
    margin: 0;
    padding: 0 6vw;
}

/* ---------------------------------------------------------
   Generic image / GIF slides
   --------------------------------------------------------- */

.signage-image {
    display: block;
    width: auto;
    height: auto;
    max-width: var(--imgMaxW);
    max-height: var(--imgMaxH);
    object-fit: contain;
    flex: 0 1 auto;
}

/* ---------------------------------------------------------
   Text slides
   --------------------------------------------------------- */

.signage-text {
    font-size: clamp(48px, var(--xScale), 160px);
    font-weight: 320;
    letter-spacing: 0.08em;
    color: rgba(235, 235, 235, 0.90);
    line-height: 1.08;
    padding: 0 7vw;
    text-align: var(--align);
}

/* Legacy welcome style (kept; you can map it to TextBlock later if you want) */
.signage-welcome {
    margin-top: 2rem;
    font-size: clamp(36px, 4.2vw, 110px);
    font-weight: 300;
    letter-spacing: 0.12em;
    color: rgba(230, 230, 230, 0.80);
    line-height: 1.1;
}

/* ---- Utility helpers (future screens) ---- */
.signage-muted {
    color: rgba(230, 230, 230, 0.60);
}

.signage-title {
    font-size: clamp(44px, 5vw, 140px);
    font-weight: 700;
    color: rgba(230, 230, 230, 0.92);
    margin: 0 0 1rem 0;
    padding: 0 5vw;
}

.signage-subtitle {
    font-size: clamp(26px, 3vw, 78px);
    font-weight: 320;
    color: rgba(230, 230, 230, 0.76);
    margin: 0;
    padding: 0 6vw;
}

/* ---- Safety: if any page accidentally uses template containers ---- */
.signage-body .container,
.signage-body .container-fluid,
.signage-body main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* ---- Debug helper (optional)
   Uncomment if you ever need to see slide boundaries on the TV.
.slot { outline: 2px solid rgba(255,255,255,0.08); }
*/