/*
 * Bridge for a Figma page that also carries legacy sections (the About page).
 *
 * app.css has to load there for those sections, but it sizes `body` and makes
 * every heading bold, which the Figma sections were never built to survive.
 * This sheet loads after it and puts the Figma side back — nothing here should
 * ever reach the legacy markup, so every selector is inside .fh-page's Figma
 * sections or the header the nav renders.
 */

/* app.css: h1-h6{font-weight:bold}. The design has no bold anywhere. */
.fh-header h1, .fh-header h2, .fh-header h3,
[class^="fh-"] h1, [class^="fh-"] h2, [class^="fh-"] h3,
[class^="fh-"] h4, [class^="fh-"] h5, [class^="fh-"] h6,
[class^="fs-"] h1, [class^="fs-"] h2, [class^="fs-"] h3,
[class^="fi-"] h1, [class^="fi-"] h2, [class^="fi-"] h3,
[class^="fw-"] h1, [class^="fw-"] h2, [class^="fw-"] h3,
h1[class^="fh-"], h2[class^="fh-"], h3[class^="fh-"],
h1[class^="fs-"], h2[class^="fs-"], h3[class^="fs-"],
h1[class^="fi-"], h2[class^="fi-"], h3[class^="fi-"],
h1[class^="fw-"], h2[class^="fw-"], h3[class^="fw-"] {
  font-weight: 400;
}

/* header.php gives the legacy layout `.body{margin-top:13.3rem}` to clear the
   fixed bar; the Figma templates have no `.body`, so the page wrapper carries
   it — but only where legacy sections actually need it. */
.fh-page--legacy { padding-top: 51px; }   /* 133 of legacy air, less the 82 the in-flow nav already gives */

/* On the standalone page the section sits 73px under the nav; after a run of
   legacy sections it needs a full section gap instead — the same 128/56/40
   rhythm its own list uses below the title. */
.fh-page--legacy .fw-wrap { padding-top: 128px; }

@media (max-width: 820px) {
  .fh-page--legacy .fw-wrap { padding-top: 56px; }
}

@media (max-width: 480px) {
  .fh-page--legacy .fw-wrap { padding-top: 40px; }
}

/* ---------- About: the team on a phone ----------
   Thirty-nine names in one grey column, each with its discipline repeated
   under it, ran to nearly four thousand pixels, and the photographs only
   appeared on hover, so a phone never showed a face. Here the whole team is
   one strip of portrait cards that swipes sideways and runs on both ways,
   neighbours peeking in on either side (figma-home.js joins the lists). */
@media (max-width: 767.98px) {
  .team-list { margin-top: 88px; margin-bottom: 0; }
  .team-list > h2 { margin-bottom: 32px; }
  .team-list .team-cat { margin-bottom: 40px; }
  .team-list .team-cat:last-child { margin-bottom: 0; }
  .team-list .team-cat:not(:has(li)) { display: none; }

  .team-list .team-cat ul {
    display: flex;
    gap: 12px;
    margin: 0 -20px;
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .team-list .team-cat ul::-webkit-scrollbar { display: none; }

  .team-list .team-cat li,
  .team-list .team-cat.no-space ul li {
    flex: 0 0 56vw;
    min-width: 0;
    margin: 0;
    padding: 0;
    scroll-snap-align: center;
    font-size: 16px;
    line-height: 20px;
    color: #000;
  }
  .team-list .team-cat li .name { margin-bottom: 4px; }
  .team-list .team-cat li .role { color: #757575; }

  /* The photo sits above the name it belongs to. */
  .team-list .team-cat .in { display: flex; flex-direction: column-reverse; gap: 12px; }
  .team-list .team-cat .over {
    display: block;
    position: static;
    width: 100%;
    aspect-ratio: 360 / 228;
    overflow: hidden;
    opacity: 1;
    background: #eee;
  }
  .team-list .team-cat .over img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: none;
  }
}

@media (min-width: 768px) {
  .team-cat li.is-clone { display: none; }
}

/* A tap on a tablet left the hover photo stuck over the next three names. */
@media (hover: none) and (min-width: 768px) {
  .team-cat li:hover .over { opacity: 0; }
}

/* The legacy top air on a phone put the About heading 84px lower than every
   other page's. */
@media (max-width: 767.98px) {
  .fh-page--legacy { padding-top: 0; }
}

/* About's legacy headings and copy, in the Figma pages' phone styles, and
   17px running copy as everywhere else. */
@media (max-width: 767.98px) {
  .fh-page--legacy .section-page { margin-top: 40px; }
  /* Caps headings take the section-title style the other pages use on a
     phone, the "Stay in the loop" size. */
  .fh-page--legacy .section-page h1,
  .team-list > h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 26px;
    letter-spacing: -1.1px;
    text-transform: uppercase;
  }
  .fh-page--legacy .text-row p { font-size: 17px; line-height: 23px; }
}