/* provider-viator.css — booking card + alt-tours grid for VIATOR sites.

   Loaded automatically by layouts/partials/head.html when
   hugo.toml [params] affiliateProvider = "viator". A GetYourGuide site never
   requests it, so it costs those builds nothing.

   Why it is a separate FILE and not a per-site hand-port: on
   rotoruamaoriexperience.com all 17 classes emitted by booking-card.html and
   alt-tours-grid.html had NO rule anywhere, so the cards rendered on inherited
   styles alone -- .booking-card-cta computed `display: block`, putting the
   price and the CTA 4px apart on one line. The templates got ported; the CSS is
   the half that gets forgotten, and a source grep cannot see a class that was
   never defined. Name-space check:

     diff <(grep -ohE '(booking-card|alt-tour)[a-z0-9-]*'               layouts/partials/booking-card.html layouts/partials/alt-tours-grid.html | sort -u)           <(grep -oE '\.(booking-card|alt-tour)[a-z0-9-]*'               static/css/main.css static/css/provider-viator.css | tr -d '.' | sort -u)

   Tokens only, no literals, so a :root palette swap reaches every colour here.
   (Codified from rotoruamaoriexperience.com 2026-08-28.) */

.booking-card {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
@media (min-width: 768px) { .booking-card { grid-template-columns: 5fr 7fr; } }
.booking-card-media img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block; }
.booking-card-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.booking-card-title { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.25; color: var(--deep-canal); margin: 0; }
.booking-card-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 1rem; color: var(--slate); }
.booking-card-facts li { display: inline-flex; align-items: center; gap: var(--space-1); }
/* A star must read as a star: --star-on-dark is the WARM token, kept separate
   from the cool --gold accent this niche uses. */
.booking-card-star { color: var(--gold-text); }
.booking-card-includes { font-size: 1rem; color: var(--slate); margin: 0; }
.booking-card-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: auto; }
.booking-card-price { display: inline-flex; align-items: baseline; gap: var(--space-1); color: var(--deep-canal); }
.booking-card-price .price-amount { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; }
.booking-card-price .price-from, .booking-card-price .price-per { font-size: 0.85rem; color: var(--stone); }
.booking-card-note { font-size: 0.875rem; color: var(--stone); margin: 0; }

.alt-tours-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) { .alt-tours-grid { grid-template-columns: repeat(3, 1fr); } }
.alt-tour-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-lg);
  overflow: hidden;
  color: inherit; text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.alt-tour-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.alt-tour-card img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block; }
.alt-tour-body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); }
.alt-tour-title { font-weight: 600; color: var(--deep-canal); font-size: 1rem; line-height: 1.35; }
.alt-tour-meta { font-size: 0.875rem; color: var(--slate); }
.alt-tour-price { font-weight: 700; color: var(--gold-text); font-size: 1rem; }
.alt-tours-more { text-align: center; margin-top: var(--space-5); font-size: 1rem; }
.alt-tours-more a { color: var(--gold-text); font-weight: 600; }
.alt-tours-more a:hover { text-decoration: underline; }

/* ── FLAT design + inline secondary card (mountcooktours.com 2026-09-22) ──
   The flat system is square and unelevated everywhere; these cards arrived
   from the Viator provider sheet with a radius, a shadow and a hover lift. */
.booking-card, .alt-tour-card, .booking-card-media img, .alt-tour-card img { border-radius: 0; }
.booking-card, .alt-tour-card, .alt-tour-card:hover { box-shadow: none; }
.alt-tour-card:hover { transform: none; }
.viator-card-wrap { margin-block: var(--space-8); }
.booking-card--inline .booking-card-title { font-size: 1.2rem; }
.booking-card--inline .booking-card-media img { min-height: 200px; }
.booking-card .btn-primary { text-decoration: none; }

/* Inline card inside the editorial article (mountcooktours.com 2026-09-22):
   .editorial-prose styles every <a>, <ul> and <li> in the body, so without
   these the card's CTA inherited the prose link colour (teal ink on the orange
   fill) and its fact list picked up prose bullets and indents. */
.editorial-prose .booking-card a.btn-primary,
.editorial-prose .booking-card a.btn-primary:hover { color: var(--on-accent); text-decoration: none; }
.editorial-prose .booking-card-facts { list-style: none; padding-left: 0; margin: 0; }
.editorial-prose .booking-card-facts li { margin: 0; padding-left: 0; }
.editorial-prose .booking-card-facts li::before { content: none; }
.editorial-prose .booking-card-title { margin: 0; }
.editorial-prose .booking-card p { margin: 0; }
/* A comparison-only Viator product ships no photos: collapse the media column. */
.booking-card:not(:has(.booking-card-media)) { grid-template-columns: 1fr; }