/* F1 — homepage host-face stage.
 *
 * Twin of use-door-alive.css (W6-S1): one fixed-size stage holds both faces
 * of the host — the static portrait (the permanent fallback, painted by the
 * server) and, when the package applies, the mounted <netshow-alive>. Fixed
 * dimensions mean the swap is layout-shift-free at every width.
 *
 * Tokens are the page's own --td-* set (declared on .td in homepage-3door),
 * which resolve through design-system.css's --ns-* family — the same token
 * family the nsk kit reads. ui-kit.css is deliberately NOT loaded here: the
 * homepage carries its own scoped block and a kit import would restyle the
 * whole front door for a 300px stage.
 */

.td__hero {
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    margin-bottom: 56px;
}

.td__hero-copy {
    flex: 1 1 auto;
    min-width: 0;
}

/* the copy block owns the hero's bottom rhythm now — the subtitle's own
   56px would double it inside the row. */
.td__hero .td__subtitle {
    margin-bottom: 0;
}

/* ── the stage ──────────────────────────────────────────────────────── */

/* Centering column, not a bare box: it lets the figure be wider than the
   stage (so the caption has room to stay on one line) while the stage
   itself stays a fixed square. The mount centers on the same axis. */
.td__face {
    position: relative;
    flex: 0 0 auto;
    width: 300px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.td__face-still,
.td__face-mount {
    display: block;
    width: 300px;
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--td-border-strong, #525252);
    background: var(--td-surface, #2f3437);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

.td__face-still img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
}

/* the live face takes the stage the static portrait was holding */
.td__face-mount {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* The portrait is the only thing in normal flow, so it — not the absolutely
   positioned mount — is what gives .td__face its height. Hiding it with
   display:none collapses the figure and the live face escapes the stage
   (it lands over the door cards, which then paint on top of it). Keep the
   box, drop only the paint: visibility:hidden also removes the portrait
   from the accessibility tree, so the mounted face's aria-label is the one
   announcement either way.

   This yields via a CLASS, not the `hidden` attribute the use door uses:
   Bootstrap's reboot is on this page and ships `[hidden] { display: none
   !important }`, which no plain rule of ours can outrank. The mount below
   still yields on `hidden` — there display:none is what we want anyway. */
.td__face-still--yielded {
    visibility: hidden;
}

.td__face-mount[hidden] {
    display: none;
}

.td__face-mount netshow-alive {
    display: block;
    width: 100%;
    height: 100%;
}

.td__face-cap {
    margin-top: 12px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--td-text-mute, #6b7280);
}

/* Print: never leave a blank stage — drop the live mount, restore the
   static portrait even if the face had hidden it. */
@media print {
    .td__face-mount { display: none !important; }
    .td__face-still--yielded { visibility: visible !important; }
}

/* ── stacked widths ─────────────────────────────────────────────────── */

/* 768-class: the row is still a row, the stage just gives ground. */
@media (max-width: 1023.98px) {
    .td__face,
    .td__face-still,
    .td__face-mount {
        width: 232px;
    }

    .td__face-still,
    .td__face-mount {
        height: 232px;
    }
}

/* 375-class: the host greets first, the copy follows. */
@media (max-width: 767.98px) {
    .td__hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }

    /* full-width figure, fixed-size stage centered in it — at 200px the
       caption would otherwise break "NetShow Alive" onto a second line. */
    .td__face {
        order: -1;
        width: 100%;
    }

    .td__face-still,
    .td__face-mount {
        width: 200px;
        height: 200px;
    }
}