/* ==========================================================================
   COMPONENT — .c-tours
   Four days out, four photographs.

   Four identical cards, two across. Varying the widths made one day out look
   more important than another, which none of them is.

   The photography here is licensed Creative Commons of the actual places, NOT
   stills from the channel: a tour card should show the destination, and the
   channel's thumbnails carry baked-in title graphics.

   ATTRIBUTION. The per-card credit badge has been removed at the client's
   request. CC BY and CC BY-SA both REQUIRE attribution, so a single compact
   credit line remains at the foot of the section and the full record stays in
   assets/img/tours/CREDITS.json. That line can go the moment these four are
   replaced with the client's own photographs — and not before.

   WP Phase 2 target: template-parts/sections/tours.php
   ========================================================================== */

.c-tours {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--slate-950);
  color: var(--stone-50);
  overflow: clip;
}

.c-tours .c-head__title { color: var(--stone-50); }
.c-tours .c-head__standfirst { color: var(--stone-300); }
.c-tours .c-head__index { color: var(--c-accent-text); }

.c-tours__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-8);
  align-items: start;
}

/* Four identical cards. Varying the widths made one day out look more
   important than another, which is not true of any of them. */
.c-tours__card { grid-column: span 6; }

/* --------------------------------------------------------------------------
   The card
   -------------------------------------------------------------------------- */

.c-tours__card {
  position: relative;
  display: block;
  transition: transform var(--dur-base) var(--ease-out);
}

.c-tours__card:hover { transform: translateY(-0.35rem); }

.c-tours__frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--slate-800);
  outline: var(--bw-hair) solid color-mix(in oklab, var(--stone-50) 16%, transparent);
  transition: outline-color var(--dur-base) var(--ease-out);
}

.c-tours__card:hover .c-tours__frame { outline-color: var(--c-accent-text); }

.c-tours__frame img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.06) brightness(0.94);
  transform: scale(1.02);
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-base) var(--ease-out);
}

.c-tours__card:hover .c-tours__frame img { transform: scale(1.06); filter: saturate(1.22) contrast(1.08) brightness(1); }

.c-tours__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    color-mix(in oklab, var(--slate-950) 78%, transparent) 0%,
    color-mix(in oklab, var(--slate-950) 14%, transparent) 44%,
    transparent 68%);
  pointer-events: none;
}

.c-tours__name {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--sp-5);
  inset-inline: var(--sp-5);
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: var(--fw-light);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--stone-50);
  text-wrap: balance;
}

.c-tours__name em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--c-accent-text);
}

/* --- Body ---------------------------------------------------------------- */

.c-tours__body { padding-block-start: var(--sp-4); }

.c-tours__body p {
  max-inline-size: none;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--stone-300);
  text-wrap: pretty;
}

.c-tours__stops {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-block-start: var(--sp-4);
}

.c-tours__stops li {
  padding: var(--sp-1) var(--sp-3);
  border: var(--bw-hair) solid color-mix(in oklab, var(--stone-50) 20%, transparent);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--stone-300);
  line-height: 1.7;
  white-space: nowrap;
}

/* --- Footer of the section ------------------------------------------------ */

.c-tours__foot {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: var(--sp-5);
  margin-block-start: var(--sp-7);
  padding-block-end: var(--sp-7);
  border-block-end: var(--bw-hair) solid color-mix(in oklab, var(--stone-50) 18%, transparent);
  text-align: center;
}

.c-tours__cta {
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--fs-mono-sm);
}

.c-tours__foot p {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-normal);
  line-height: 1.7;
  color: var(--slate-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 68rem) {
  .c-tours__card { grid-column: span 6; }
}

@media (max-width: 44rem) {
  .c-tours__card { grid-column: span 12 !important; }
  .c-tours__name { font-size: var(--fs-xl); }
}


/* --------------------------------------------------------------------------
   PHONE: the stop chips

   Four chips of different widths wrapping freely gave 3 + 1, or 2 + 2 ragged
   with a gap down one side. A fixed two-by-two grid is even, centred and
   reads as a set rather than as text that happened to run on.
   -------------------------------------------------------------------------- */

@media (max-width: 44rem) {
  .c-tours__stops {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
    justify-items: stretch;
  }

  .c-tours__stops li {
    display: grid;
    place-content: center;
    min-block-size: 2.5rem;
    text-align: center;
  }
}