/* Home page: the Teams row (a .story-teaser it shares with the row layout used elsewhere) carries
   a bleed teams-table photo on the right per docs/design/photo-language.md: a plain edge-to-edge
   rectangle filling its own grid column, no radius, no scrim, no caption; the teaser copy beside it
   narrates directly (variant:'bleed' on the photoSlot call supplies the flat, unrounded frame).
   Scoped under body.photo-hero. photoCard()'s shared-team-memory card (docs/design/
   photo-treatments.md section 3) floats bottom-left, since the scene's focal (100% 30%) weights
   the group toward the right, leaving bottom-left the emptiest quadrant. position:relative anchors
   it; the card's own CSS (experience.css) handles its box, position class and the <900px static
   fallback beneath the photo. */
body.photo-hero .teams-teaser-photo {
  position: relative;
}
body.photo-hero .teams-teaser-photo .photo {
  width: 100%;
  overflow: hidden;
}

@media (max-width: 700px) {
  body.photo-hero .teams-teaser {
    row-gap: 28px;
  }
}

/* Between 900px and 1300px the .story-teaser grid is still two columns (.9fr/1.1fr) but the photo
   column has narrowed enough that the shared-team-memory card's copy wraps to three lines instead
   of two (verified: card height jumps from ~147px to ~166px right at the 1300px viewport width
   where the wrap resolves back to two lines), growing the card tall enough to reach the top third
   of the frame and cover the leftmost teammate's face. The shared .photo-card fallback in
   experience.css only fires below 900px, so this instance switches to the same static, full-width,
   below-photo treatment across the whole band where the extra wrapped line causes the overlap. */
@media (max-width: 1300px) and (min-width: 901px) {
  body.photo-hero .teams-teaser-photo .photo-card {
    position: static;
    width: 100%;
    margin-top: 24px;
    box-shadow: 0 12px 32px #2021240b;
  }
}