/* About story additions (sections/about-story.php).
   pages.css styles the mockup's markup; this file loads after it and adds
   what the mockup did not have: a portrait in each leader card, the leader
   cards in a row of their own, and the strip of store photos.
   Tokens only (tokens.css). Author: SSO, 30 September 2026. */

/* ================= LAYOUT =================
   The story and the arch photo keep the mockup's two columns. The leader
   cards and the photo strip each take a full row beneath them; the grid's
   own gap separates the rows. */
.about-story__grid > .leader-grid,
.about-story__grid > .about-story__gallery {
  grid-column: 1 / -1;
}

/* ================= LEADER CARDS =================
   Role and name share a group so they can sit beside the portrait while the
   bio runs underneath (phones) or beside it (wider screens). */
.leader-card__id {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* With portraits the cards need the width: one per row until the page has
   room for two. */
.leader-grid.leader-grid--photos {
  grid-template-columns: minmax(0, 1fr);
}

.leader-card.leader-card--photo {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  grid-template-areas:
    "photo id"
    "bio   bio";
  align-items: center;
  gap: var(--space-s);
}

/* The portraits are 400 x 350 files, so they are never shown wider than
   20rem (200px): sharp on a 2x screen. */
.leader-card__photo {
  grid-area: photo;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 8 / 7;
  object-fit: cover;
  border-radius: var(--radius-m);
}
.leader-card--photo .leader-card__id { grid-area: id; }
.leader-card--photo .leader-card__bio { grid-area: bio; }

@media (min-width: 576px) {
  .leader-card.leader-card--photo {
    grid-template-columns: minmax(0, min(20rem, 36%)) minmax(0, 1fr);
    grid-template-areas:
      "photo id"
      "photo bio";
    /* The bio row takes the spare height, so the text starts level with the
       top of the portrait and the role labels line up from card to card. */
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: var(--space-m);
    row-gap: var(--space-xs);
  }
}

@media (min-width: 992px) {
  .leader-grid.leader-grid--photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ================= STORE PHOTO STRIP =================
   Small tiles on purpose: the photos are 400 x 300. Three across on
   phones, six across from tablets up. */
.about-story__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
}

.about-story__tile {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-s);
  background: var(--bg-semi-light);
}

@media (min-width: 768px) {
  .about-story__gallery {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-s);
  }
  .about-story__tile { border-radius: var(--radius-m); }
}