/* The adventures mosaic: a magazine spread of the photographs at mixed sizes,
   the words on them. Four columns (Manatees 2x2, Bespoke 2x1, six singles =
   three full rows), two on tablets (five full rows), a two-column spread of
   squares on phones. The words sit in flow at the bottom of the tile so a long
   line can never be clipped; only the photograph and the scrim are absolute. */

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(15rem, 1fr);
  gap: 0.75rem;
  margin-top: var(--xl);
}

.tile {
  position: relative;
  display: flex;                      /* after site.css, so this beats .zoom's display: block */
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.1rem;
  min-height: 15rem;
  color: var(--white);
}

.tile.big { grid-column: span 2; grid-row: span 2; }
.tile.wide { grid-column: span 2; grid-row: span 2; }   /* the last two tiles close the four-column spread as a pair of large squares */
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Two scrims: the site's light one for depth, and a short dense band at the
   bottom, sized to the words (h3 + two lines), so the text reads on any photo */
.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 23, 32, 0.82) 0, rgba(13, 23, 32, 0.6) 4rem, rgba(13, 23, 32, 0) 9rem), var(--scrim);
}
.tile h3, .tile p { position: relative; z-index: 1; color: var(--white); }
.tile h3 { font-size: 1.5rem; margin-bottom: 0.2rem; }
.tile.big h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.tile p { font-size: var(--small); opacity: 0.9; }

/* Wide screens: the spread grows past the wrap to the header's width and
   becomes a loose composition on twelve columns and eight short rows (about
   750px, a landscape band). Tiles are placed by name and shaped for their
   photograph; the empty cells are the whitespace, so the edges stay ragged:
   the mantas hang a row below the manatee, the sponges and the spearfisher run three rows under the sharks and the
   coral, the pearls rise beside the treasure, the bottom row steps in from the left, and Bespoke closes
   the spread bottom right. */
@media (min-width: 1450px) {
  .mosaic {
    margin-inline: calc((100% - var(--full)) / 2);   /* 100% is the wrap's content width */
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(8, 5rem);
    grid-template-areas:
      'manatees manatees   manatees   .          .          .          .          sharks        sharks        sharks        restoration  restoration'
      'manatees manatees   manatees   manta-rays manta-rays manta-rays manta-rays sharks        sharks        sharks        restoration  restoration'
      'manatees manatees   manatees   manta-rays manta-rays manta-rays manta-rays sponge-diving sponge-diving spearfishing  spearfishing spearfishing'
      'manatees manatees   manatees   manta-rays manta-rays manta-rays manta-rays sponge-diving sponge-diving spearfishing  spearfishing spearfishing'
      'manatees manatees   manatees   treasure   treasure   pearl-diving pearl-diving sponge-diving sponge-diving spearfishing spearfishing spearfishing'
      '.        delicacies delicacies treasure   treasure   pearl-diving pearl-diving bespoke   bespoke       bespoke       bespoke      bespoke'
      '.        delicacies delicacies shipwrecks shipwrecks pearl-diving pearl-diving bespoke   bespoke       bespoke       bespoke      bespoke'
      '.        delicacies delicacies shipwrecks shipwrecks .          .          bespoke       bespoke       bespoke       bespoke      bespoke';
    gap: 1rem;
  }
  .tile.manatees { grid-area: manatees; }
  .tile.manta-rays { grid-area: manta-rays; }
  .tile.sharks { grid-area: sharks; }
  .tile.treasure { grid-area: treasure; }
  .tile.shipwrecks { grid-area: shipwrecks; }
  .tile.delicacies { grid-area: delicacies; }
  .tile.restoration { grid-area: restoration; }
  .tile.pearl-diving { grid-area: pearl-diving; }
  .tile.sponge-diving { grid-area: sponge-diving; }
  .tile.spearfishing { grid-area: spearfishing; }
  .tile.bespoke { grid-area: bespoke; }
  .tile { padding: 1.2rem; min-height: 0; }   /* the rows are fixed; the base 15rem would push a two-row tile under its neighbour */
  .tile h3, .tile.big h3 { font-size: 1.6rem; }            /* two sizes only: every tile (Manatees included), and Bespoke */
  .tile.bespoke h3 { font-size: 2.1rem; }
}

/* Wider still: the same composition a little taller, and two tiles reach past
   the band's edges (Restoration to the right, Delicacies to the left, as far
   as the viewport allows); Delicacies also stops a row short of the bottom */
@media (min-width: 1600px) {
  .mosaic {
    --reach: clamp(3rem, (100vw - 1440px) / 2 - 2rem, 8rem);
    margin-inline: calc((100% - 1440px) / 2);
    grid-template-rows: repeat(8, 5.5rem);
  }
  .tile.delicacies { grid-column-start: 1; margin-left: calc(-1 * var(--reach)); grid-row-end: 8; }   /* from the band's first column, then past it */
  /* The right cluster re-dealt (Costa, 2026-09-11): the sponges top right on the
     band's edge, the spearfisher in the narrow slot under the sharks, the coral
     in the wide slot beside it reaching past the edge (row-start / col-start /
     row-end / col-end) */
  .tile.sponge-diving { grid-area: 1 / 11 / 3 / 13; }
  .tile.spearfishing { grid-area: 3 / 8 / 6 / 10; }
  .tile.restoration { grid-area: 3 / 10 / 6 / 13; margin-right: calc(-1 * var(--reach)); }
}

/* Below the wide compositions, Shipwrecks takes Spearfishing's large slot at
   the end of the spread and the spearfisher becomes a square (Costa, 2026-09-11);
   `order` moves the tile without touching the data */
@media (min-width: 701px) and (max-width: 1449px) {
  .tile.spearfishing { grid-column: span 1; grid-row: span 1; }
  .tile.shipwrecks { grid-column: span 2; grid-row: span 2; order: 1; }
  .tile.bespoke { order: 2; }
}

/* Tablets: two columns, the big and the wide tile span both for one row each */
@media (max-width: 1100px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile.big, .tile.wide, .tile.shipwrecks { grid-row: span 1; }
  .tile.big { min-height: 22rem; }
}

/* Phones: two columns of squares, every tile the same except Bespoke, which
   closes the spread full width */
@media (max-width: 700px) {
  .mosaic { grid-auto-rows: auto; gap: 0.5rem; }
  .tile, .tile.big { min-height: auto; }   /* clears the tablet 22rem, or the ratio would derive a width from it */
  .tile, .tile.big, .tile.wide { grid-column: span 1; grid-row: span 1; aspect-ratio: 1; padding: 0.8rem; }
  .tile h3, .tile.big h3 { font-size: clamp(1.1rem, 5vw, 1.5rem); }   /* one size for every square ("Restoration" at 1.5rem would clip a 150px tile) */
  .tile.bespoke { grid-column: span 2; aspect-ratio: 16 / 10; }
}

/* Small phones: the squares show the name only, under a shorter, lighter band */
@media (max-width: 480px) {
  .tile:not(.bespoke) p { display: none; }
  .tile:not(.bespoke)::after { background: linear-gradient(to top, rgba(13, 23, 32, 0.6) 0, rgba(13, 23, 32, 0.35) 2.5rem, rgba(13, 23, 32, 0) 5.5rem), var(--scrim); }
}