/* ==========================================================================
   hero-mobile-shared.css
   Mobile hero treatment for about, process, projects, and careers, matching
   the blog listing hero: static background image, navy scrim, centred copy,
   no video.

   Everything is inside max-width:767px, so desktop keeps its video heroes.
   MUST LOAD LAST on each page.

   The blog pattern being matched (css/blog-listing.css:7-35):
     min-height 45vh, background-image cover, rgba(28,63,96,.65) overlay,
     centred text, padding 120px 5% 60px.

   Why: the video heroes were 812px tall on mobile (a full screen before any
   content), downloaded 4 to 6MB each, and their tight crops read as
   unidentifiable close-ups at 375px. Poster frames are pulled from the same
   videos, so the mobile hero looks like a still of what desktop plays.
   ========================================================================== */

@media (max-width: 767px) {

  /* ------------------------------------------------------------------
     Navbar clearance must match the navbar's real height.
     about.html offsets main by 70px while the mobile navbar is 100px tall,
     so its hero tucked 30px under the nav. process/projects/careers have no
     such offset and their content starts at 100px correctly. Match the
     navbar height here rather than removing the offset, since removing it
     put the hero entirely behind the nav.
     ------------------------------------------------------------------ */
  body.page-about main {
    margin-top: 100px !important;
  }

  /* ------------------------------------------------------------------
     Shared shell for the three video heroes.
     ------------------------------------------------------------------ */
  .hero.about-hero {
    position: relative !important;
    height: auto !important;
    /* One fixed height for every hero. A viewport fraction swings with the
       iOS URL bar, and 45vh differs page to page. */
    min-height: 340px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    /* SYMMETRIC padding so align-items:center actually centres. The previous
       96px/44px split was clearing the fixed navbar, but combined with
       center alignment it pushed all copy 52px below true centre on every
       page. The page layout already reserves space for the fixed navbar, so
       no extra top offset is needed here. */
    padding: 36px 20px !important;
    background-color: #1c3f60 !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
  }

  /* Kill the video. The <source> is also withheld by JS on about/process/
     projects so the file is never fetched. */
  .hero.about-hero .hero-video {
    display: none !important;
  }

  /* Navy scrim at the blog's 65%, as an ::after so it works regardless of
     what .hero-overlay is doing on a given page (on about it computed to
     z-index:-1, i.e. behind the video). */
  .hero.about-hero .hero-overlay {
    display: none !important;
  }
  .hero.about-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(28, 63, 96, 0.62);
    z-index: 1;
  }

  .hero.about-hero .hero-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    display: block !important;
    inset: auto !important;
  }
  /* mobile-optimizations.css:164-169 applies a frosted-glass panel to
     .hero-text-container on mobile: backdrop-filter:blur(15px) plus
     background:rgba(0,0,0,.4). That rendered as a pale, hard-edged rectangle
     behind the copy, blurring the photo only inside the text box. Removing
     the background alone was not enough; the blur is the visible artifact.
     The ::after scrim handles legibility, so neither is needed. */
  .hero.about-hero .hero-text-container,
  .hero.about-hero .hero-content > *,
  .hero.about-hero .hero-content {
    background: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* This container is display:flex + flex-direction:column +
     align-items:flex-start, so its children shrink to their content and pin
     to the left. text-align:center has no effect on a box that is already
     narrower than its parent, which is why process/projects/careers headlines
     sat left while about only looked centred because its headline happened to
     fill the width. Centre the flex items, and make each child full width so
     text-align can do its job. */
  .hero.about-hero .hero-text-container {
    padding: 0 !important;
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  .hero.about-hero .hero-text-container > * {
    width: 100% !important;
  }
  .hero.about-hero h1 {
    font-size: 1.75rem !important;
    line-height: 1.14 !important;
    letter-spacing: -0.01em !important;
    color: #fff !important;
    margin: 0 0 10px !important;
    text-align: center !important;
    text-shadow: none !important;
  }
  .hero.about-hero .hero-content p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin: 0 auto !important;
    max-width: 32ch;
    text-align: center !important;
    text-shadow: none !important;
    font-style: normal !important;
  }

  /* Per-page poster frames, extracted from each page's own hero video so the
     mobile still matches what desktop plays. */
  /* Posters are pre-cropped to the box's exact device resolution (750x680,
     i.e. 375x340 at DPR 2), so background-position is centre for all of them:
     the framing is baked into the file. Previously these were 1200x676 and
     `cover` upscaled roughly 1.25x to fill 750 device pixels, which is what
     made them look soft. */
  body.page-about    .hero.about-hero { background-image: url('../assets/images/hero-posters/about-hero.webp') !important;    background-position: center center !important; }
  body.page-process  .hero.about-hero { background-image: url('../assets/images/hero-posters/process-hero.webp') !important;  background-position: center center !important; }
  body.page-projects .hero.about-hero { background-image: url('../assets/images/hero-posters/projects-hero.webp') !important; background-position: center center !important; }

  /* Duplicate of the hero copy that about.html ships with an inline
     display:none; keep it hidden. */
  .hero-text-mobile {
    display: none !important;
  }


  /* ------------------------------------------------------------------
     CAREERS
     Different markup (.careers-hero, no video, no image) but should read
     the same.
     ------------------------------------------------------------------ */
  .careers-hero {
    position: relative !important;
    min-height: 340px !important;   /* same as the other heroes */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 36px 20px !important;  /* symmetric, see note above */
    background-color: #1c3f60 !important;
    /* Its own frame, not a reuse of the projects poster: side by side, two
       pages sharing one photo reads as a mistake. */
    background-image: url('../assets/images/hero-posters/careers-hero.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
  }
  .careers-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(28, 63, 96, 0.68);
    z-index: 1;
  }
  .careers-hero-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
    /* same flex shrink-to-fit issue as .hero-text-container above */
    align-items: center !important;
  }
  .careers-hero-content > * {
    width: 100% !important;
  }
  .careers-hero-content,
  .careers-hero-content > * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: none !important;
  }
  .careers-hero .section-label {
    color: #c99f62 !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.2em !important;
    text-align: center !important;
    margin-bottom: 10px !important;
  }
  .careers-hero h1 {
    /* This headline is 47 characters and wrapped to 4 lines at 28px, which
       made the careers hero 520px against 340px everywhere else. */
    font-size: 1.5rem !important;
    line-height: 1.14 !important;
    letter-spacing: -0.01em !important;
    color: #fff !important;
    margin: 0 0 12px !important;
    text-align: center !important;
  }
  .careers-hero-content p:not(.section-label) {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin: 0 auto !important;
    max-width: 38ch;
    text-align: center !important;
    /* The full 300-character intro belongs in the body, not the hero. Show
       the first three lines here; the section below repeats the detail. */
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }


  /* ==================================================================
     2. TABS
     Labels overlapped because each item is pinned to a ~90px box while its
     text is up to 145px wide with nowrap and visible overflow. Let each tab
     size to its own text and scroll the row horizontally instead.
     ================================================================== */
  .about-tabs,
  .about-tabs.wide-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    padding: 0 20px !important;
    /* full-bleed so the row can scroll edge to edge */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .about-tabs::-webkit-scrollbar { display: none; }

  .about-tabs .tab-item {
    /* was flex:0 0 auto inside a 90px box; size to content instead */
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
    border-bottom: 2px solid transparent !important;
  }
  .about-tabs .tab-item.active {
    border-bottom-color: #b5894e !important;
    background: transparent !important;
    color: #1c3f60 !important;
    font-weight: 700 !important;
  }
  /* Hairline under the row so the active underline reads as a tab, not a
     floating mark. */
  .about-tabs-container {
    border-bottom: 1px solid rgba(28, 63, 96, 0.12);
    padding-left: 0 !important;
    padding-right: 0 !important;
  }



  /* ==================================================================
     CLOSED TEAM MODALS WERE SWALLOWING EVERY TAP
     style.css hides .team-modal-backdrop with visibility:hidden and
     opacity:0 but leaves display:flex and pointer-events:auto, and there
     are three of them at position:fixed, z-index:9000, covering the whole
     viewport. Nothing underneath was clickable, tabs included. This is
     pre-existing (reproduced with this stylesheet removed), not a
     regression from the changes above.

     pointer-events:none on the closed state lets taps through; the .active
     rule restores them so the modals still work when opened.
     ================================================================== */
  .team-modal-backdrop {
    pointer-events: none !important;
  }
  .team-modal-backdrop.active {
    pointer-events: auto !important;
  }

}