/* ==========================================================================
   about-mobile-refresh.css
   Mobile fixes for about.html. Everything is inside max-width:767px, so
   desktop is untouched.

   MUST LOAD LAST on about.html (after about-nav-mobile-fix.css and
   about-story-mobile-fix.css, which carry 148 and 238 !important rules).

   Fixes, in page order:
     1. Hero had NO visible text. about-nav-mobile-fix.css:177 hides
        .hero-content on mobile in favour of a .hero-text-mobile block, but
        that block carries an inline style="display:none" which beats the
        stylesheet. Net result: both were hidden. Restore the overlay copy.
     2. Tab labels overlapped. Each tab is a 90px box with white-space:nowrap
        and overflow:visible, so "Where We Work" (145px of text) printed 55px
        over its neighbours.
     3. Photos: four portrait images forced into 305x220 landscape boxes.
   ========================================================================== */

@media (max-width: 767px) {

  /* HERO: now handled by css/hero-mobile-shared.css, which applies the
     blog-style poster hero to about, process, projects, and careers. */


  /* TABS: moved to css/hero-mobile-shared.css, since process.html and
     projects.html use the same .about-tabs markup and need the same fix. */


  /* ==================================================================
     3. PHOTOS
     Four portrait images (0.67 aspect) were being placed in 305x220
     landscape boxes, a 108% aspect mismatch. object-fit:cover meant they
     were centre-cropped rather than squashed, but on portrait sources that
     crops out heads and detail. Give them a portrait-friendly box.
     ================================================================== */
  .tab-content.active .offset-photos-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* The desktop rule declares four explicit 220px rows. With four photos in
       a 2-column grid only two rows are needed, so the other two stayed as
       460px of empty space below the images. `auto` sizes to content. */
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    /* 0 not 20px: the section already provides the gutter, and the story
       image and copy above sit at x=35, so an extra 20px here made the grid
       start at a different x than everything else in the tab. */
    padding: 0 !important;
    margin: 24px 0 !important;
    width: 100% !important;
  }
  /* style.css:1881-1898 places these on a 12-COLUMN desktop grid
     (grid-column 1/7, 7/13, 1/5, 5/13). This mobile grid only has 2 columns,
     so every span past column 2 clamped back to column 1 and all four photos
     stacked in a single column at the same x. Clear the assignments and let
     auto-placement fill the 2x2. */
  .tab-content.active .offset-photos-grid .photo-item {
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;   /* several carry offset transforms */
    top: auto !important;
    left: auto !important;
    position: relative !important;
  }
  .tab-content.active .offset-photos-grid .photo-item img {
    width: 100% !important;
    /* 3:4 keeps portrait sources close to their native 0.67 ratio, so the
       crop is a trim rather than a decapitation */
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    display: block !important;
    border-radius: 2px !important;
  }

  /* The full-width banner image below the grid */
  .full-width-image img {
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
    object-position: center 35% !important;
  }
  .full-width-image {
    margin: 0 !important;
  }
  .full-width-image .image-overlay {
    padding: 20px !important;
  }
  .full-width-image .image-overlay h2 {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
  }
  .full-width-image .image-overlay p {
    font-size: 0.9rem !important;
  }


  /* ==================================================================
     4. BODY COPY
     about-story-mobile-fix.css centres these paragraphs. Three long centred
     paragraphs ragged on both edges are hard to track in a 375px column.
     ================================================================== */
  .story-text,
  .story-text p,
  .about-lead-text {
    text-align: left !important;
  }

  /* The story image and copy sat at x=35 while the photo grid sat at x=20,
     so nothing in this tab shared a left edge. Pull them all to one gutter. */
  .tab-content.active .story-hero-section,
  .tab-content.active .story-content-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .tab-content.active .story-image,
  .tab-content.active .story-image img,
  .tab-content.active .story-text {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* One left-aligned scale for every heading inside the tab content.
     about-story-mobile-fix.css and about-tabs.css centre several of these
     individually, so target them broadly rather than one at a time. */
  .about-content h2,
  .about-content .section-title,
  /* about-story-mobile-fix.css:80 uses `.story-text h2.section-title`
     (element + class), which outranks a plain `.story-text .section-title`.
     Match that specificity exactly. */
  .story-text h2.section-title,
  .full-width-image .image-overlay h2 {
    text-align: left !important;
    font-size: 1.65rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 14px !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Some of these headings sit in flex rows that centre their contents. */
  .about-content .team-header,
  .about-content .story-hero-section,
  .where-we-work-header {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .story-text p,
  .about-lead-text {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  /* Team member cards and section headings on the same scale as the rest
     of the site's mobile layer. */
  .team-header .section-title,
  .team-category-title {
    text-align: left !important;
    font-size: 1.65rem !important;
    line-height: 1.15 !important;
  }
  .team-intro,
  .team-category-description {
    text-align: left !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  /* Team photos are portraits; give them a portrait box too.
     Scoped to .tab-content.active: an unscoped rule sized these images to
     338x506 inside the HIDDEN "Meet the Team" panel, and those boxes still
     answered hit-testing, landing on top of the tab row and swallowing every
     tab click. Only style the panel that is actually on screen. */
  .tab-content.active .team-member-photo img {
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center 25% !important;
  }
  /* Belt and braces: inactive panels must never intercept taps. */
  .tab-content:not(.active) {
    pointer-events: none !important;
  }
  /* The tab row sits above any stray content boxes. */
  .about-tabs-container,
  .about-tabs,
  .about-tabs .tab-item {
    position: relative;
    z-index: 5;
  }

  /* CLOSED TEAM MODALS: moved to css/hero-mobile-shared.css. */

}