/* Honorees: mosaic of cards sized by each photo's real proportion.
   Landscape (4:3), portrait (3:4) and tall phone photos (about 9:16) get different spans.
   Row unit = 1/4 of a column, so a 4-col x 21-row card is 3:4, a 6-col x 18-row card is 4:3 and
   a 4-col x 26-row card is a tall phone photo. The text sits over the photo, so landscape cards
   always take 6 columns (or more) and never share a column with another card. */
.honorees {
  position: relative; z-index: 2;
  background: var(--white); color: var(--ink);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin-top: calc(var(--radius-xl) * -1);
  padding-block: var(--section-y);
}
.honorees__head {
  display: grid; gap: 1.75rem clamp(2rem, 6vw, 5rem); align-items: end;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.honorees__title { max-width: 12ch; }
.honorees__lede { max-width: 30rem; color: rgb(32 32 92 / .86); }
@media (min-width: 860px) { .honorees__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }

.mosaic-wrap { container-type: inline-size; }
.mosaic {
  display: grid; margin: -.5rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: calc((100cqw + 1rem) / 48);
}
.honoree { position: relative; min-width: 0; padding: .5rem; outline: none; }
.honoree__card {
  position: relative; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-lg); background: var(--gray-200);
  box-shadow: 0 10px 24px -14px rgb(16 16 45 / .4);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.honoree__card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform 1s var(--ease-out);
}
.honoree__body {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
  padding: 3.5rem 1.5rem 1.4rem; color: var(--white);
  background: linear-gradient(to top, rgb(16 16 45 / .97) 0%, rgb(16 16 45 / .95) 62%, rgb(16 16 45 / 0) 100%);
}
.honoree__name { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.honoree__desc p { font-size: .96875rem; line-height: 1.5; text-wrap: pretty; }
.honoree__name { margin-bottom: .5rem; }

/* The description is always shown in full; hover and keyboard focus only lift the card. */
@media (hover: hover) and (pointer: fine) {
  .honoree:hover .honoree__card, .honoree:focus-visible .honoree__card {
    transform: translateY(-10px); box-shadow: 0 34px 50px -22px rgb(16 16 45 / .55);
  }
  .honoree:hover .honoree__card img, .honoree:focus-visible .honoree__card img { transform: scale(1.05); }
}
.on-light .honoree:focus-visible { outline: none; } /* the ring goes on the card, not on the padded cell */
.honoree:focus-visible .honoree__card { outline: 3px solid var(--navy-500); outline-offset: 3px; }

.honorees__print { margin-top: clamp(2.5rem, 5vw, 4rem); font-size: .9375rem; color: rgb(32 32 92 / .86); }

/* Desktop: 12 columns, five bands of cards. The description is always shown over the photo, so
   every card is sized to leave the photo visible above the text (body <= ~65% of the card). */
@media (min-width: 1024px) {
  /* Band 1, landscape pair (6 x 18 = 4:3) */
  .honoree--rayna   { grid-area: 1  / 1 / span 18 / span 6; }
  .honoree--johnson { grid-area: 1  / 7 / span 18 / span 6; }
  /* Band 2, portrait trio (4 x 21 = 3:4) */
  .honoree--nicolas { grid-area: 19 / 1 / span 21 / span 4; }
  .honoree--mya     { grid-area: 19 / 5 / span 21 / span 4; }
  .honoree--essence { grid-area: 19 / 9 / span 21 / span 4; }
  /* Band 3, tall trio (4 x 26, phone photos); Laeton, a 3:4 photo, sits in the middle */
  .honoree--destiny { grid-area: 40 / 1 / span 26 / span 4; }
  .honoree--laeton  { grid-area: 40 / 5 / span 26 / span 4; }
  .honoree--hannah  { grid-area: 40 / 9 / span 26 / span 4; }
  /* Band 4, landscape pair */
  .honoree--kaitoi  { grid-area: 66 / 1 / span 18 / span 6; }
  .honoree--keon    { grid-area: 66 / 7 / span 18 / span 6; }
  /* Band 5, portrait (4 cols) beside landscape (8 cols), one shared height */
  .honoree--meela   { grid-area: 84 / 1 / span 22 / span 4; }
  .honoree--melody  { grid-area: 84 / 5 / span 22 / span 8; }
}

/* Tablet: 6 columns. Landscape photos take the full width, portraits go in 3 + 3 pairs;
   the seventh portrait (Meela) takes the full width with a squarer crop so no cell stays empty. */
@media (min-width: 720px) and (max-width: 1023px) {
  .mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: calc((100cqw + 1rem) / 24); }
  .honoree--rayna   { grid-area: 1   / 1 / span 18 / span 6; }
  .honoree--nicolas { grid-area: 19  / 1 / span 16 / span 3; }
  .honoree--mya     { grid-area: 19  / 4 / span 16 / span 3; }
  .honoree--johnson { grid-area: 35  / 1 / span 18 / span 6; }
  .honoree--destiny { grid-area: 53  / 1 / span 21 / span 3; }
  .honoree--hannah  { grid-area: 53  / 4 / span 21 / span 3; }
  .honoree--kaitoi  { grid-area: 74  / 1 / span 18 / span 6; }
  .honoree--essence { grid-area: 92  / 1 / span 16 / span 3; }
  .honoree--laeton  { grid-area: 92  / 4 / span 16 / span 3; }
  .honoree--keon    { grid-area: 108 / 1 / span 18 / span 6; }
  .honoree--meela   { grid-area: 126 / 1 / span 22 / span 6; }
  .honoree--melody  { grid-area: 148 / 1 / span 18 / span 6; }
  .honoree__name { font-size: 1.5rem; }
}

/* Mobile: one column, sizes still vary by photo */
@media (max-width: 719px) {
  .mosaic { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; margin: 0; gap: 1rem; }
  .honoree { grid-area: auto; padding: 0; }
  .honoree__card { height: auto; }
  .is-l .honoree__card { aspect-ratio: 5 / 4; }
  /* On narrow phones the full description wraps to more lines, so landscape cards get squarer */
  @media (max-width: 479px) { .is-l .honoree__card { aspect-ratio: 1 / 1; } }
  @media (max-width: 359px) { .is-l .honoree__card { aspect-ratio: 5 / 6; } }
  .is-p .honoree__card { aspect-ratio: 3 / 4; }
  .is-t .honoree__card { aspect-ratio: 9 / 16; }
  /* Mya's description is the longest: over the photo, its text block reaches up over the check.
     Her card stacks instead: the photo keeps its full 3:4 frame (nothing is cropped) and only the
     text block's fade overlaps the bottom of it, below the check. */
  .honoree--mya .honoree__card { aspect-ratio: auto; display: grid; background: var(--navy-900); }
  .honoree--mya .honoree__card img { position: static; height: auto; aspect-ratio: 3 / 4; }
  .honoree--mya .honoree__body { position: relative; margin-top: -3.25rem; }
  .is-p, .is-t { width: 88%; }
  .is-p:nth-child(even), .is-t:nth-child(even) { justify-self: end; }
  .honoree__body { padding: 3.25rem 1.1rem 1.1rem; }
  .honoree__name { font-size: 1.5rem; }
  .honoree__desc p { font-size: .9rem; line-height: 1.45; }
}