/* ==========================================================================
   Trips — the index cards and the detail template
   Linked only by upcoming-trips.html and the trip detail pages.
   ========================================================================== */

.trips { display: grid; gap: var(--section); }

.trip-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 60em) { .trip-card { grid-template-columns: 1fr; } }

/* Alternate which side the picture sits on, so a list of trips has rhythm. */
.trip-card:nth-child(even) .trip-card__media { order: 2; }
@media (max-width: 60em) { .trip-card:nth-child(even) .trip-card__media { order: 0; } }

.trip-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--l99-radius-md);
  transition: transform var(--l99-dur-transition) var(--l99-ease-standard);
}
/* This file had no transitions at all in 12.8 KB, and the card -- the main way
   into a tour -- acknowledged nothing at all. The photograph moves rather than
   the whole card, so the text stays put and nothing reflows: it is a transform
   inside a clipped box.

   :focus-within does the same for the keyboard, because the card is not
   focusable -- its links are. Without it the effect would exist for mice only.
   No border-radius here: --radius-block is 0 by design in this direction, so
   overflow alone is what clips the zoom. */
.trip-card__media { overflow: hidden; }
@media (hover: hover) {
  .trip-card:hover .trip-card__media img { transform: scale(1.03); }
}
.trip-card:focus-within .trip-card__media img { transform: scale(1.03); }

/* No photograph for this trip yet, so the slot becomes a typographic plate
   rather than a grey box or — worse — a stock photo of somewhere else. */
.trip-card__plate {
  display: grid;
  place-content: center;
  aspect-ratio: 4 / 3;
  padding: var(--space-8);
  background: var(--green-deep);
  border-radius: var(--l99-radius-md);
  text-align: center;
}
.trip-card__plate span {
  font-family: var(--l99-font-signage);
  font-size: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--green-bright);
}

.trip-card h2 { margin-bottom: var(--space-3); }
.trip-card h2 a { color: inherit; text-decoration: none; }
.trip-card h2 a:hover { color: var(--green); }

.trip-card__dates {
  font-family: var(--l99-font-signage);
  font-size: var(--text-base);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
}

.trip-card p { margin-bottom: var(--space-6); }

/* SOLD OUT is a typographic state, not a badge. */
.trip-status {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding-bottom: 0.2em;
  font-family: var(--l99-font-signage);
  font-size: var(--text-base);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ochre);
  border-bottom: var(--rule-thick) solid var(--ochre);
}

/* ---- Trip detail hero --------------------------------------------------- */
.trip-hero { padding-block: var(--space-16) var(--space-12); }
.trip-hero h1 { margin-block: var(--space-4) var(--space-6); }
.trip-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  margin: 0;
  padding-top: var(--space-6);
  border-top: var(--rule-thick) solid var(--green-display);
}
.trip-hero__meta div { min-width: 8rem; }
.trip-hero__meta dt {
  font-family: var(--l99-font-signage);
  font-size: var(--text-sm);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.trip-hero__meta dd {
  margin: var(--space-1) 0 0;
  font-family: var(--l99-font-signage);
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--green-deep);
}

.trip-figure { margin: 0; }
/* In a hero slot the plate matches the photograph's ratio; it inherits the
   card's 4:3 otherwise and towers over the page. */
/* Inside a polaroid the frame owns the radius and the stock; the image just
   fills it. Keeping the 16:9 crop so the frame stays a landscape print. */
.trip-figure.polaroid img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1px; }
/* Inside a polaroid the FRAME sizes the caption, not the viewport -- see the
   note on --polaroid-cap in components.css. Without this the rule below and the
   marginalia group in pages.css both score (0,1,1), tie with `.polaroid
   figcaption`, and win purely because this file loads later. Same specificity
   trap that left Steve's pull quote at 18px; scoping to the polaroid is how
   trips.css already resolves it for the image above. */
.trip-figure.polaroid figcaption { font-size: var(--polaroid-cap); }

/* The full-width plate on a trip page stands in for a photograph nobody has
   sent yet. At 16/9 that is 684px of near-empty colour at 1440 -- measured as
   the single largest dead-space gap on the site, and it lands on Scotland,
   which is an open tour. Sized by its own content instead, with a floor, so
   it reads as a typographic plate rather than a missing image. */
.trip-figure .trip-card__plate {
  aspect-ratio: auto;
  min-height: clamp(12rem, 22vw, 20rem);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  align-content: center;
}
.trip-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--l99-radius-md);
}
/* Shares the marginalia treatment defined in pages.css. */
.trip-figure figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-hand);
  transform: rotate(-0.8deg);
  transform-origin: left center;
}

/* ---- Spec lists --------------------------------------------------------- */
.spec { margin: 0; }
.spec > div {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: var(--rule-hair) solid var(--paper-edge);
}
@media (max-width: 40em) { .spec > div { grid-template-columns: 1fr; gap: var(--space-1); } }
.spec dt {
  font-family: var(--l99-font-signage);
  font-size: var(--text-base);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.spec dd { margin: 0; }

.section--brand .spec > div { border-bottom-color: color-mix(in srgb, var(--cream) 30%, var(--forest)); }
.section--brand .spec dt { color: var(--mint); }
.section--brand .spec dd { color: var(--cream); }

/* ---- Brochure ----------------------------------------------------------- */
.brochure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-8);
  border: var(--rule-thick) solid var(--green-display);
  border-radius: var(--radius-block);
}
.brochure p { margin: 0; }

/* ---- Prose beside a spec list ------------------------------------------ */
.trip-body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 60em) { .trip-body { grid-template-columns: 1fr; } }

/* ==========================================================================
   Booking detail: itinerary, fares, inclusions, and the before-you-book block.

   All of this content lived only inside the brochure PDFs until 2026-08-24.
   Two of the five PDFs are image scans, so for those tours this markup is the
   only machine-readable copy that exists.
   ========================================================================== */

/* ---- Day by day ---------------------------------------------------------
   A numbered list that reads as an itinerary rather than a list: the day
   marker sits in its own column so the eye can run down the left edge and
   find "day 7" without reading anything else. */
.days { list-style: none; margin: 0; padding: 0; counter-reset: none; }

.day {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0 var(--space-8);
  padding-block: var(--space-8);
  border-top: 1px solid var(--paper-edge);
}
.day:last-child { border-bottom: 1px solid var(--paper-edge); }

.day__n { margin: 0; }
.day__num {
  display: block;
  font-family: var(--l99-font-signage);
  font-size: var(--text-lg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
}
.day__date {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--ink-faint);
}
.day h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  letter-spacing: 0;
}
.day p { margin: 0; max-width: 64ch; }

/* Stacked on narrow screens: a 9.5rem gutter leaves ~11rem of measure at
   440px, which is roughly 18 characters a line. */
@media (max-width: 48em) {
  .day { grid-template-columns: 1fr; gap: var(--space-3); padding-block: var(--space-6); }
  .day__n { display: flex; align-items: baseline; gap: var(--space-3); }
  .day__date { margin-top: 0; }
}

.days__note {
  margin-top: var(--space-6);
  /* Was --text-sm. These carry fare footnotes, deposit terms and air-pricing
     rules on a product costing four figures, for an audience that skews 60+.
     Muted colour is enough to mark them as secondary; 14px was not. */
  font-size: var(--text-base);
  color: var(--ink-faint);
  max-width: 60ch;
}

/* ---- Fares --------------------------------------------------------------
   Tabular figures so the columns line up on the decimal, and a real <table>
   because these are genuinely two-dimensional: room type by occupancy. */
.price-lede {
  margin: 0 0 var(--space-8);
  font-size: var(--text-lg);
  max-width: 46ch;
}
.price-lede strong { color: var(--green); }

.fares { margin-bottom: var(--space-12); }
/* Three columns of tabular figures with row headers like "Middle outside
   cabin". Below ~34em the headers wrap to three lines each and the figures
   collide, so the table scrolls inside its own frame rather than breaking the
   page. The shadow is the affordance that says there is more to the right. */
.fares__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
@media (max-width: 34em) {
  .fares__scroll { background: linear-gradient(to right, transparent 85%, color-mix(in srgb, var(--ink) 8%, transparent)); }
  .fare-table { min-width: 22rem; }
  .fare-table th, .fare-table td { padding: var(--space-2) var(--space-3); }
}
.fare-table {
  width: 100%;
  max-width: 40rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.fare-table th,
.fare-table td {
  padding: var(--space-3) var(--space-4);
  text-align: right;
  border-bottom: 1px solid var(--paper-edge);
}
.fare-table thead th {
  font-family: var(--l99-font-signage);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom-width: var(--rule-thick);
  border-bottom-color: var(--green-display);
}
.fare-table tbody th {
  text-align: left;
  font-weight: 500;
  padding-left: 0;
}
.fare-table td { font-size: var(--text-lg); }

.fare--save th,
.fare--save td { color: var(--green); font-weight: 600; }
.fare--save th span {
  display: block;
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--ink-faint);
}

/* ---- Included / not included ------------------------------------------- */
.incl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-10) clamp(2rem, 5vw, 4rem);
  margin-bottom: var(--space-12);
}
.incl h3 { margin: 0 0 var(--space-4); }

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: var(--space-8);
  margin-bottom: var(--space-3);
}
/* Mark drawn in CSS rather than set as a character: the tick and the cross
   have to read at the same optical weight, and no font gives you that. */
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.85em;
  height: 0.45em;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.ticks--no li::before {
  top: 0.5em;
  height: 0.85em;
  border: 0;
  background:
    linear-gradient(to bottom, currentColor, currentColor) center/2px 100% no-repeat,
    linear-gradient(to right, currentColor, currentColor) center/100% 2px no-repeat;
  color: var(--ink-faint);
  transform: rotate(45deg);
}
.ticks--plain li::before { display: none; }
.ticks--plain li { padding-left: 0; }

/* ---- Optional extras and the booking action ---------------------------- */
.extras { margin-bottom: var(--space-12); }
.extras h3 { margin: 0 0 var(--space-4); }
.extras li { margin-bottom: var(--space-3); }

.book {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8);
  background: var(--paper-deep);
  border-left: var(--rule-thick) solid var(--green-display);
}
.book p { margin: 0; flex: 1 1 18rem; color: var(--ink-soft); }

.book__note {
  margin: 0;
  padding: var(--space-8);
  background: var(--paper-deep);
  border-left: var(--rule-thick) solid var(--ochre);
  max-width: 60ch;
}

/* ---- Before you book ---------------------------------------------------- */
.practical {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-10) clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.practical h3 { margin: 0 0 var(--space-4); }
.practical h3 + p { margin-top: 0; }
.practical p { max-width: 58ch; }
.practical > div > h3 ~ h3 { margin-top: var(--space-10); }

/* The things someone has to read before they spend four figures. Ochre rather
   than red: this is a caution, not an error. */
.practical__flag {
  padding-left: var(--space-6);
  border-left: var(--rule-thick) solid var(--ochre);
  color: var(--ink-soft);
}

/* ---- Archive cards ------------------------------------------------------
   Returned tours reuse .trip-card, which is a half-width photograph beside a
   paragraph. None of them have a photograph yet, so each one rendered a tall
   empty plate next to three lines of text -- measured as 155-167px of dead
   space per card on a phone and 312px on desktop, making past-trips the
   emptiest page on the site.

   The archive is a list you scan, not a set of offers you weigh, so it gets a
   denser grid and a plate that no longer sets the row height. */
.trips--archive {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-12) clamp(1.5rem, 3vw, 2.5rem);
}
.trips--archive .trip-card {
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-content: start;
}
.trips--archive .trip-card:nth-child(even) .trip-card__media { order: 0; }
.trips--archive .trip-card__plate { aspect-ratio: 3 / 2; }
.trips--archive .trip-card__plate span { font-size: var(--text-lg); }
.trips--archive .trip-card h2 { font-size: var(--text-xl); }
.trips--archive .trip-card p { margin-bottom: var(--space-5); }