/* =========================================================================
   Safety Interview Template - template-specific styles

   Loaded ONLY on template-safety-interview.php; additive on top of
   safety-experiences.css which provides the shared hero base
   (.interview-hero + .interview-hero-bg + .interview-hero-overlay +
   .interview-hero-content + .sst-hero-scroll-indicator + :root tokens).

   Contains:
   - Interview hero typography (page-title, subtitle)
   - Interview content stack (portrait, name, role, intro)
   - Interview-template hero-size overrides (via body class)
   - Video section + wrapper (-200/-160/-100 px overlap into hero)
   - Interview-only hero entrance animation delays
   - Interview-only @media overrides
   ========================================================================= */

/* Hide standard page hero - the cinematic .interview-hero replaces it. */
.page-template-template-safety-interview #pageHeader {
    display: none;
}

/* -------------------------------------------------------------------------
   Interview-template hero shape

   The Interview template moves .interview-video-wrapper INSIDE .interview-hero
   (as a sibling of .interview-hero-content) so the video visually lives in
   the hero rather than in a follow-up section. Structural changes:

   1. .interview-hero drops its flex centering + overflow:hidden + aspect-
      ratio. It becomes a normal block with padding-top for header clearance;
      content + video simply stack vertically below.
   2. A new .interview-hero-backdrop wraps bg + overlay with its own
      overflow:hidden so the bg's 15% overscale is still contained while the
      hero itself is free to let .interview-video-wrapper protrude below.
   3. .interview-video-wrapper uses margin-bottom: -X to protrude X pixels
      below the hero's reported end. The (now empty) .interview-video-section
      sibling continues the dark background beneath that protruding half.
   ------------------------------------------------------------------------- */

.page-template-template-safety-interview .interview-hero {
    display: block;
    overflow: visible;
    /* Vertical spacing is editor-controlled via the page-level
       hero_padding ACF group. The padding-top slider sets actual
       padding-top (gap from page top to hero text). The padding-bottom
       slider is wired to the .interview-video-wrapper's margin-top
       below - it sets the gap between the hero text and the video
       card. The hero's own CSS padding-bottom stays 0 because the
       wrapper's negative margin-bottom would otherwise swallow it. */
    padding-top:    var(--hero-pt-d, 305px);
    padding-right:  20px;
    padding-bottom: 0;
    padding-left:   20px;
    text-align: center;
}

.interview-hero-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* Position + centering only here. The actual max-width comes from the
   per-template rule in safety-experiences.css that reads the
   --hero-content-width slider value (default 58 = 720 px). */
.page-template-template-safety-interview .interview-hero-content {
    position: relative;
    z-index: 2;
    margin: 0 auto;
}

/* -------------------------------------------------------------------------
   Hero typography
   ------------------------------------------------------------------------- */

.interview-page-title {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.15;
}

.interview-subtitle {
    font-size: clamp(14px, 1.8vw, 18px);
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, .5);
    margin: 0 0 44px;
    font-weight: 400;
}

/* -------------------------------------------------------------------------
   Portrait + content stack
   ------------------------------------------------------------------------- */

.interview-portrait {
    width: 270px;
    height: 270px;
    margin: 0 auto 24px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, .8);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
    position: relative;
}
.interview-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter .35s ease, transform .35s ease;
}

/* When the portrait is wrapped in a smooth-scroll link to the video
   (.has-play modifier), it becomes a clickable target. The whole
   .interview-portrait-link anchor is the hit area; the figure stays
   the visual element. Hover lifts brightness on the photo, scales the
   play-badge, and warms the border to sky-cyan. */
.interview-portrait-link {
    display: inline-block;
    text-decoration: none;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}
.interview-portrait-link:hover .interview-portrait,
.interview-portrait-link:focus-visible .interview-portrait {
    border-color: rgba(120, 197, 219, .9);
    box-shadow:
        0 14px 48px rgba(0, 0, 0, .45),
        0 0 0 6px rgba(120, 197, 219, .18);
}
.interview-portrait-link:hover .interview-portrait img,
.interview-portrait-link:focus-visible .interview-portrait img {
    filter: brightness(.85);
    transform: scale(1.04);
}
.interview-portrait-link:focus-visible {
    outline: 2px solid rgba(120, 197, 219, .9);
    outline-offset: 6px;
}

/* Centered play-badge over the portrait. Always visible (subtle dark
   ring + white triangle) so guests immediately know the portrait is a
   video link; pops to sky-cyan + scales up on hover. */
.interview-portrait-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.interview-portrait-play::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(10, 37, 64, .60);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.interview-portrait-play svg {
    position: relative;
    width: 26px;
    height: 26px;
    color: #fff;
    transform: translateX(1px);    /* optical centering of the triangle */
    transition: transform .35s ease;
}
.interview-portrait-link:hover .interview-portrait-play::before,
.interview-portrait-link:focus-visible .interview-portrait-play::before {
    background: #78c5db;
    box-shadow: 0 8px 24px rgba(120, 197, 219, .55);
    transform: scale(1.12);
}
.interview-portrait-link:hover .interview-portrait-play svg,
.interview-portrait-link:focus-visible .interview-portrait-play svg {
    color: #0a2540;
}

@media (prefers-reduced-motion: reduce) {
    .interview-portrait img,
    .interview-portrait-play::before,
    .interview-portrait-play svg {
        transition: none !important;
    }
    .interview-portrait-link:hover .interview-portrait img,
    .interview-portrait-link:focus-visible .interview-portrait img {
        transform: none;
    }
    .interview-portrait-link:hover .interview-portrait-play::before,
    .interview-portrait-link:focus-visible .interview-portrait-play::before {
        transform: none;
    }
}

.interview-person-name {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.interview-person-role {
    font-size: 16px;
    color: rgba(255, 255, 255, .55);
    letter-spacing: 1px;
    margin-bottom: 32px;
}

.interview-hero .interview-intro {
    max-width: 650px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .7);
    text-align: center;
}

.interview-hero .interview-intro p {
    margin: 0 0 12px;
}

/* -------------------------------------------------------------------------
   Interview-template hero sizing (hero sits at y=0, must clear ~275 px
   effective site header at narrow-desktop widths) and reserves bottom
   padding for the video-wrapper's negative-margin overlap.
   ------------------------------------------------------------------------- */

/* Scroll arrow: deleted from the template markup for the interview
   variant (the overlapping video card below the hero content is a
   stronger visual anchor). This rule is kept as a defensive no-op in
   case the element is re-introduced. */
.page-template-template-safety-interview .sst-hero-scroll-indicator {
    display: none;
}

.page-template-template-safety-interview .interview-portrait {
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
}
.page-template-template-safety-interview .interview-page-title {
    font-size: clamp(30px, 4vw, 48px);
    margin-bottom: 6px;
}
.page-template-template-safety-interview .interview-subtitle {
    margin-bottom: 28px;
}
.page-template-template-safety-interview .interview-person-role {
    margin-bottom: 24px;
}

@media (max-width: 1199px) {
    .page-template-template-safety-interview .interview-hero {
        padding-top:    var(--hero-pt-t, 240px);
        padding-bottom: 0;
    }
}
/* Tablet narrow (769-992): editor-controllable via tablet_narrow
   sliders; fallback inherits the tablet-wide values so unset sliders
   reproduce the previous cascade behaviour. */
@media (max-width: 991px) {
    .page-template-template-safety-interview .interview-hero {
        padding-top:    var(--hero-pt-tn, 240px);
        padding-bottom: 0;
    }
}

@media (max-width: 991px) {
    .interview-portrait {
        width: 225px;
        height: 225px;
    }
    .interview-portrait-play::before { width: 28px; height: 28px; }
    .interview-portrait-play svg     { width: 22px; height: 22px; }
    .interview-person-name {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .page-template-template-safety-interview .interview-hero {
        padding-top:    var(--hero-pt-m, 195px);   /* clears ~164 px fixed mobile header + ~30 breathing */
        padding-bottom: 0;
        padding-left:   16px;
        padding-right:  16px;
    }
    .page-template-template-safety-interview .interview-portrait {
        width: 160px;
        height: 160px;
        margin-bottom: 14px;
    }
    .interview-portrait-play::before { width: 22px; height: 22px; }
    .interview-portrait-play svg     { width: 18px; height: 18px; }
    .page-template-template-safety-interview .interview-page-title {
        font-size: clamp(24px, 6vw, 34px);
    }
    .page-template-template-safety-interview .interview-subtitle {
        margin-bottom: 20px;
    }
    .page-template-template-safety-interview .interview-person-role {
        margin-bottom: 18px;
    }
    .interview-portrait {
        width: 180px;
        height: 180px;
    }
    .interview-person-name {
        font-size: 22px;
    }
}

/* -------------------------------------------------------------------------
   Video wrapper - NOW a DIRECT CHILD of .interview-hero (see template-
   safety-interview.php). Sits 50 px below the hero content (margin-top)
   and protrudes below the hero's logical bottom via margin-bottom: -X so
   roughly half of the video extends into the sibling section.

   margin-bottom X values are tuned per breakpoint against the actual
   rendered wrapper height at that viewport (wrapper width = viewport
   - 2 x side padding, height = width / aspect_ratio, so half_h = h / 2).
   ------------------------------------------------------------------------- */

.interview-video-wrapper {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1240px;
    /* margin-top reads the hero_padding "Padding Bottom Desktop"
       slider via the same CSS var the hero uses; semantic = "space
       between hero text and video card". margin-bottom: -349px =
       ~50% protrusion of a 698 px (1240/1.778) tall block into the
       sibling .interview-video-section dark band. */
    margin-top:    var(--hero-pb-d, 50px);
    margin-right:  auto;
    margin-bottom: -349px;
    margin-left:   auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, .25),
        0 40px 80px -15px rgba(0, 0, 0, .7),
        0 -2px 20px rgba(0, 0, 0, .25);
}

/* -------------------------------------------------------------------------
   Video background section - below the hero, matches #0a2540 so the
   protruding lower half of .interview-video-wrapper sits on a seamless
   dark field that continues the hero visually. Min-height reserves
   enough vertical space for both the protrusion and some breathing room
   before the next page section (typically Contact).
   ------------------------------------------------------------------------- */

.interview-video-section {
    position: relative;
    /* Soft top-to-bottom gradient from deep midnight-navy at the top
       (darker than the hero, so the video card sits on a richer field
       and pops more) down to a lighter mid-navy at the bottom, easing
       the visual into the next page section instead of a hard edge. */
    background: linear-gradient(180deg, #051526 0%, #0d3156 100%);
    min-height: 489px;           /* 349 wrapper-protrusion + 140 breathing */
}

@media (max-width: 1199px) {
    .interview-video-wrapper {
        margin-top:    var(--hero-pb-t, 50px);
        margin-bottom: -277px;                          /* ~50% of 553 */
    }
    .interview-video-section { min-height: 387px; }
}
@media (max-width: 991px) {
    .interview-video-wrapper {
        margin-top:    var(--hero-pb-tn, 50px);
    }
}
@media (max-width: 768px) {
    .interview-video-wrapper {
        margin-top:    var(--hero-pb-m, 40px);
        margin-bottom: -97px;                           /* ~50% of 193; narrower viewport = narrower video */
        border-radius: 14px;
    }
    .interview-video-section { min-height: 177px; }
}

/* -------------------------------------------------------------------------
   Hero entrance animation - per-element stagger delays for the interview
   content stack. Base `animation: sst-exp-hero-in` is defined on
   .interview-hero-content > * in safety-experiences.css; here we only add
   the delays for interview-specific children.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .interview-page-title     { animation-delay: .10s; }
    .interview-subtitle       { animation-delay: .22s; }
    .interview-portrait-wrap,
    .interview-portrait       { animation-delay: .34s; }
    .interview-person-name    { animation-delay: .46s; }
    .interview-person-role    { animation-delay: .58s; }
    .interview-hero .interview-intro { animation-delay: .70s; }
}

/* -------------------------------------------------------------------------
   Reveal animation on the video-wrapper (matches the .exp-card reveal
   pattern from safety-experiences.css).
   ------------------------------------------------------------------------- */

.reveal-enabled .interview-video-wrapper {
    opacity: 0;
    transform: translateY(42px) scale(.965);
    filter: blur(6px);
    transition: opacity .95s var(--exp-ease-soft) var(--reveal-delay, 0ms),
                transform .95s var(--exp-ease-soft) var(--reveal-delay, 0ms),
                filter   .7s var(--exp-ease-soft) var(--reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}
.reveal-enabled .interview-video-wrapper.is-visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    .interview-video-wrapper,
    .reveal-enabled .interview-video-wrapper {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}