/* Aspect-aware mosaics. Cell ratios mirror TOP_PHOTO_LAYOUTS in core.views. */
.top-photos__head { justify-content: space-between; }
.top-photos__title { margin: 0; font: inherit; font-weight: 700; color: var(--text); }
.top-photos-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: var(--top-photos-gap, 12px);
  aspect-ratio: 2 / 1;
  min-width: 0;
}
.top-photos-grid > .top-photos__cell { aspect-ratio: auto; max-width: none; }
.top-photos-grid > .top-photos__cell:first-child { z-index: 1; }
.top-photos__image { object-fit: cover; }

/* LLLL: a large leader and three genuinely landscape supporting cells. */
.top-photos-grid--all-landscape > :nth-child(1) { grid-area: 1 / 1 / 5 / 7; }
.top-photos-grid--all-landscape > :nth-child(2) { grid-area: 1 / 7 / 4 / 13; }
.top-photos-grid--all-landscape > :nth-child(3) { grid-area: 4 / 7 / 7 / 13; }
.top-photos-grid--all-landscape > :nth-child(4) { grid-area: 5 / 1 / 7 / 7; }

.top-photos-grid--lead-landscape > :nth-child(1) { grid-area: 1 / 1 / 5 / 9; }
.top-photos-grid--lead-landscape > :nth-child(2) { grid-area: 1 / 9 / 4 / 13; }
.top-photos-grid--lead-landscape > :nth-child(3) { grid-area: 4 / 9 / 7 / 13; }
.top-photos-grid--lead-landscape > :nth-child(4) { grid-area: 5 / 1 / 7 / 9; }

/* PLLL: the vertical leader owns the full-height rail. */
.top-photos-grid--lead-portrait > :nth-child(1) { grid-area: 1 / 1 / 7 / 5; }
.top-photos-grid--lead-portrait > :nth-child(2) { grid-area: 1 / 5 / 4 / 13; }
.top-photos-grid--lead-portrait > :nth-child(3) { grid-area: 4 / 5 / 7 / 9; }
.top-photos-grid--lead-portrait > :nth-child(4) { grid-area: 4 / 9 / 7 / 13; }

/* LPLL: the second photo gets a tall rail instead of a quarter tile. */
.top-photos-grid--secondary-portrait > :nth-child(1) { grid-area: 1 / 1 / 5 / 9; }
.top-photos-grid--secondary-portrait > :nth-child(2) { grid-area: 1 / 9 / 7 / 13; }
.top-photos-grid--secondary-portrait > :nth-child(3) { grid-area: 5 / 1 / 7 / 5; }
.top-photos-grid--secondary-portrait > :nth-child(4) { grid-area: 5 / 5 / 7 / 9; }

.top-photos-grid--two-portrait > :nth-child(1) { grid-area: 1 / 1 / 7 / 5; }
.top-photos-grid--two-portrait > :nth-child(2) { grid-area: 1 / 5 / 7 / 9; }
.top-photos-grid--two-portrait > :nth-child(3) { grid-area: 1 / 9 / 4 / 13; }
.top-photos-grid--two-portrait > :nth-child(4) { grid-area: 4 / 9 / 7 / 13; }

.top-photos-grid--mostly-square { grid-template: repeat(2, 1fr) / repeat(2, 1fr); }
.top-photos-grid--mostly-square > :nth-child(1) { grid-area: 1 / 1; }
.top-photos-grid--mostly-square > :nth-child(2) { grid-area: 1 / 2; }
.top-photos-grid--mostly-square > :nth-child(3) { grid-area: 2 / 1; }
.top-photos-grid--mostly-square > :nth-child(4) { grid-area: 2 / 2; }

.top-photos-grid--mixed > :nth-child(1) { grid-area: 1 / 1 / 7 / 4; }
.top-photos-grid--mixed > :nth-child(2) { grid-area: 1 / 4 / 7 / 7; }
.top-photos-grid--mixed > :nth-child(3) { grid-area: 1 / 7 / 7 / 10; }
.top-photos-grid--mixed > :nth-child(4) { grid-area: 1 / 10 / 4 / 13; }

.top-photos__more { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: rgba(10,18,7,.62); color: #fff; transition: background .2s; }
.top-photos__more strong { font: 700 30px/1 var(--ff-display); }
.top-photos__more small { margin-top: 5px; font-size: 13px; }
.top-photos__cell--has-more:hover .top-photos__more { background: rgba(10,18,7,.72); }

/* Mobile has its own templates; it never shrinks the twelve-column desktop grid. */
@media (max-width: 640px) {
  .top-photos-grid { margin: 0 16px; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  /* Each composition owns exactly the rows it uses.  Keeping eight rows on
     the base grid left unused tracks below the six- and seven-row mosaics. */
  .top-photos-grid[data-mobile-layout="mobile-wide"] {
    grid-template-rows: repeat(6, minmax(0, 1fr));
    aspect-ratio: 2 / 3;
  }
  .top-photos-grid[data-mobile-layout="mobile-wide-portraits"] {
    grid-template-rows: repeat(7, minmax(0, 1fr));
    aspect-ratio: 4 / 7;
  }
  .top-photos-grid[data-mobile-layout="mobile-portrait"],
  .top-photos-grid[data-mobile-layout="mobile-portrait-pair"] {
    grid-template-rows: repeat(6, minmax(0, 1fr));
    aspect-ratio: 2 / 3;
  }
  .top-photos-grid[data-mobile-layout="mobile-alternate"] {
    grid-template-rows: repeat(8, minmax(0, 1fr));
    aspect-ratio: 1 / 2;
  }
  .top-photos-grid[data-mobile-layout="mobile-wide"] > :nth-child(1),
  .top-photos-grid[data-mobile-layout="mobile-wide-portraits"] > :nth-child(1) { grid-area: 1 / 1 / 3 / 5; }
  .top-photos-grid[data-mobile-layout="mobile-wide"] > :nth-child(2) { grid-area: 3 / 1 / 5 / 3; }
  .top-photos-grid[data-mobile-layout="mobile-wide"] > :nth-child(3) { grid-area: 3 / 3 / 5 / 5; }
  .top-photos-grid[data-mobile-layout="mobile-wide"] > :nth-child(4) { grid-area: 5 / 1 / 7 / 5; }
  .top-photos-grid[data-mobile-layout="mobile-wide-portraits"] > :nth-child(2) { grid-area: 3 / 1 / 6 / 3; }
  .top-photos-grid[data-mobile-layout="mobile-wide-portraits"] > :nth-child(3) { grid-area: 3 / 3 / 6 / 5; }
  .top-photos-grid[data-mobile-layout="mobile-wide-portraits"] > :nth-child(4) { grid-area: 6 / 1 / 8 / 5; }
  .top-photos-grid[data-mobile-layout^="mobile-portrait"] > :nth-child(1),
  .top-photos-grid[data-mobile-layout="mobile-alternate"] > :nth-child(1) { grid-area: 1 / 1 / 7 / 3; }
  .top-photos-grid[data-mobile-layout^="mobile-portrait"] > :nth-child(2) { grid-area: 1 / 3 / 3 / 5; }
  .top-photos-grid[data-mobile-layout^="mobile-portrait"] > :nth-child(3) { grid-area: 3 / 3 / 5 / 5; }
  .top-photos-grid[data-mobile-layout^="mobile-portrait"] > :nth-child(4) { grid-area: 5 / 3 / 7 / 5; }
  .top-photos-grid[data-mobile-layout="mobile-alternate"] > :nth-child(2) { grid-area: 1 / 3 / 4 / 5; }
  .top-photos-grid[data-mobile-layout="mobile-alternate"] > :nth-child(3) { grid-area: 4 / 3 / 7 / 5; }
  .top-photos-grid[data-mobile-layout="mobile-alternate"] > :nth-child(4) { grid-area: 7 / 1 / 9 / 5; }
  .top-photos-grid[data-mobile-layout="mobile-squares"] { grid-template: repeat(2, 1fr) / repeat(2, 1fr); aspect-ratio: 1; }
  .top-photos-grid[data-mobile-layout="mobile-squares"] > :nth-child(1) { grid-area: 1 / 1; }
  .top-photos-grid[data-mobile-layout="mobile-squares"] > :nth-child(2) { grid-area: 1 / 2; }
  .top-photos-grid[data-mobile-layout="mobile-squares"] > :nth-child(3) { grid-area: 2 / 1; }
  .top-photos-grid[data-mobile-layout="mobile-squares"] > :nth-child(4) { grid-area: 2 / 2; }
}