/* ==========================================================================
   Tour Ceylon +94 — Photo grid — destination tiles, link tile, moments mosaic
   Ported from the static design's pages.css. Every length, colour and
   duration resolves through a theme.json token, so Global Styles still
   re-skins this section.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Destination tiles
   -------------------------------------------------------------------------- */
.tc94-dest-grid {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) {
  .tc94-dest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .tc94-dest-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Two tiles break the grid so it does not read as a plain matrix */
  .tc94-dest-grid > li:nth-child(1),
  .tc94-dest-grid > li:nth-child(8) { grid-column: span 2; }
}

.tc94-dest {
  position: relative;
  display: block;
  border-radius: var(--wp--custom--radius--md);
  overflow: hidden;
  background-color: var(--wp--preset--color--surface-darker);
  height: 100%;
  min-height: 11rem;
}

.tc94-dest img {
  width: 100%;
  height: 100%;
  min-height: 11rem;
  object-fit: cover;
  transition: transform var(--wp--custom--duration--slow) var(--wp--custom--ease--out);
}

.tc94-dest:hover img { transform: scale(1.05); }

.tc94-dest__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  background: linear-gradient(to top, var(--wp--custom--alpha--dark-80), transparent);
  color: var(--wp--preset--color--base);
  font-weight: var(--wp--custom--weight--semibold);
  font-size: var(--wp--preset--font-size--base);
  letter-spacing: var(--wp--custom--tracking--snug);
}

/* --------------------------------------------------------------------------
   Destination tile that links out instead of showing a photograph
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .tc94-dest-grid > li:last-child { grid-column: span 2; }
}

.tc94-dest--link {
  display: flex;
  align-items: center;
  background-color: var(--wp--custom--alpha--white-08);
  border: 1px solid var(--wp--custom--color--border-on-dark);
  text-decoration: none;
  transition: background-color var(--tc94-transition-base), border-color var(--tc94-transition-base);
}

.tc94-dest--link:hover,
.tc94-dest--link:focus-visible {
  background-color: var(--wp--custom--alpha--white-12);
  border-color: var(--wp--preset--color--highlight);
}

.tc94-dest__link-inner {
  display: block;
  padding: var(--wp--preset--spacing--60);
}

.tc94-dest--link .tc94-icon {
  color: var(--wp--preset--color--highlight);
  margin-bottom: var(--wp--preset--spacing--30);
}

.tc94-dest__link-title {
  display: block;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--custom--color--heading-on-dark);
  letter-spacing: var(--wp--custom--tracking--snug);
}

.tc94-dest__link-note {
  display: block;
  margin-top: var(--wp--preset--spacing--20);
  color: var(--wp--custom--color--on-dark-muted);
  font-size: var(--wp--preset--font-size--sm);
}

.tc94-dest--link .tc94-link-arrow { margin-top: var(--wp--preset--spacing--40); }

/* --------------------------------------------------------------------------
   Guest moments mosaic (About)
   Deliberately small tiles: every photograph here is an owner-supplied web
   copy, 408px wide at most, so the tile is sized to stay sharp rather than
   the photograph stretched to fill a larger one.
   -------------------------------------------------------------------------- */
.tc94-moments {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 30rem) {
  .tc94-moments { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 40rem) {
  .tc94-moments { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .tc94-moments { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

.tc94-moments > li {
  overflow: hidden;
  border-radius: var(--wp--custom--radius--sm);
  background-color: var(--wp--preset--color--surface-darker);
}

.tc94-moments img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--wp--custom--duration--slow) var(--wp--custom--ease--out);
}

.tc94-moments > li:hover img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .tc94-moments img { transition: none; }
  .tc94-moments > li:hover img { transform: none; }
}