/* ==========================================================================
   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;
}

/* Identical cards, two to a row. Varying the widths made one day out look
   more important than another, which is not true of any of them.

   Two cards now rather than four — south and Gozo came off on 2 Sep 2026 —
   and span 6 still fills exactly one row, so nothing needed changing. It
   holds at three or four again if either comes back. */
.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);
  /* No rule under the CTA, and no 40px beneath it.

     Both were closing the section off, from back when what followed was
     another dark rectangle and something had to say where one ended. What
     follows now is a photograph, which says it far better. Together they
     left about 95px of empty black between the button and the picture, and
     the hairline read as a divider inside one long section rather than as
     the seam between two. */
  margin-block-start: var(--sp-7);
  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;
  }

  /* AN ODD LAST CHIP TAKES THE WHOLE ROW.
     
     The two-by-two grid above assumes four. "Your own itinerary" has three,
     so the last one sat alone in the left-hand column at half width with a
     hole beside it — and it is "Anywhere on the island", the longest label
     of the lot, squeezed into the narrowest space on the page.
     
     :last-child:nth-child(odd) is true for the third of three and false for
     the fourth of four, so this needs no per-card class and stays correct if
     a tour gains or loses a stop. */
  .c-tours__stops li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    /* It has the full width now, but at 320px a tracked mono line this long
       still does not fit. Wrapping is the necessary kind. */
    white-space: normal;
    text-wrap: balance;
  }
}

/* --------------------------------------------------------------------------
   THE ONE LABEL TOO LONG FOR A 320px SCREEN

   `.c-action` is on the tier-2 no-wrap list, and the rule that put it there
   says everything we author is kept short enough not to need a second line.
   "Request a private tour quote" is twenty-eight characters of tracked mono
   uppercase; at 320px it needs 313 of the 256 available and put a horizontal
   scrollbar on the entire document.

   The no-wrap rule is about UNNECESSARY wrapping. This one is necessary, so
   it is allowed — at this width only, and only for this button.
   -------------------------------------------------------------------------- */

@media (max-width: 26rem) {
  .c-tours__cta {
    white-space: normal;
    text-align: center;
    text-wrap: balance;
  }
}

/* --------------------------------------------------------------------------
   UNDER THE CARDS, CENTRED

   The line of copy and the row of chips were ranged left under a photograph
   that fills the card edge to edge, so each card had a heavy centred image
   above a light left-hung caption. Centred, the card reads as one object.
   -------------------------------------------------------------------------- */

.c-tours__body { text-align: center; }
.c-tours__stops { justify-content: center; }