/**
 * Travel Vista — template stylesheet.
 *
 * Loaded after the shared front-end foundation and before the site's own
 * compiled design tokens, so this file can restyle anything the foundation
 * provides while the site owner's colour and font choices still win over
 * both.
 *
 * **No colour, radius, or spacing value is hardcoded here.** Everything reads
 * a custom property, so the Live Design Panel can recolour the whole site by
 * redefining a handful of tokens rather than editing markup.
 *
 * The recurring motif here is a dashed "flight path" with a travelling dot —
 * this template's whole ornament budget, standing in for the single accent
 * bar, hairline, or glyph every earlier template used as its heading mark
 * (Hotel Aurelia's gilt double-rule, Portfolio Mono's outlined glyph). Cards
 * throughout the site pick up a tilted white "postcard" border to match.
 */

/* ------------------------------------------------------------------ */
/* Section rhythm                                                     */
/* ------------------------------------------------------------------ */

[data-section-id]:nth-of-type(even) > div:not([class*="bg-"]) {
  background-color: var(--ui-surface-muted);
}

/* ------------------------------------------------------------------ */
/* Header                                                             */
/* ------------------------------------------------------------------ */

.site-header-accent {
  background: var(--ui-brand-900);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

header[data-scrolled="true"] {
  box-shadow: var(--ui-shadow-md);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                            */
/* ------------------------------------------------------------------ */

/* Pill-shaped regardless of the site's chosen corner roundness — a boarding
   pass button, not a rectangle with rounded corners. */
.vista-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8125rem 1.875rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 700;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

/* Background sits on brand-600, not the lighter brand-500 the rest of the
   ramp might suggest for a "primary" shade: this button carries white text,
   and brand-600 is the first step down the ramp that clears WCAG AA's 4.5:1
   text-contrast minimum against white. Hover goes a step darker still
   (brand-700) rather than lighter — lightening would drop the white label
   below that same minimum right when a visitor is looking straight at it. */
.vista-hero-btn-primary {
  background-color: var(--ui-brand-600);
  color: white;
  box-shadow: 0 8px 20px -8px color-mix(in oklch, var(--ui-brand-600) 70%, transparent);
}

.vista-hero-btn-primary:hover,
.vista-hero-btn-primary:focus-visible {
  background-color: var(--ui-brand-700);
  transform: translateY(-1px);
}

.vista-hero-btn-outline {
  border: 2px solid rgb(255 255 255 / 0.55);
  color: white;
}

.vista-hero-btn-outline:hover,
.vista-hero-btn-outline:focus-visible {
  border-color: white;
  background-color: rgb(255 255 255 / 0.12);
}

/* The same pill shape, and the same brand-600/700 pairing for the same
   contrast reason, stands in for every primary button on the page, not just
   the hero's — a section's "Book now" or "Enquire" button included. */
.site-btn-primary {
  border-radius: 999px;
  background-color: var(--ui-brand-600);
}

.site-btn-primary:hover,
.site-btn-primary:focus-visible {
  background-color: var(--ui-brand-700);
}

.site-btn-outline {
  border-radius: 999px;
}

/* ------------------------------------------------------------------ */
/* Section headings                                                   */
/* ------------------------------------------------------------------ */

.site-heading {
  position: relative;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

/* An ambient dusk-over-water gradient — warm terracotta at the top fading
   through the page's own dark ground into a teal foot, so the hero reads as
   a horizon even with no photograph behind it. */
.vista-hero-horizon {
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--ui-brand-700) 92%, transparent) 0%,
      var(--ui-brand-900) 55%,
      color-mix(in oklch, var(--ui-accent-600) 55%, var(--ui-brand-900)) 100%
    );
}

/* Once a photograph is set, the horizon wash becomes its scrim: warm at the
   edges, clear through the middle, so the image still reads as part of this
   palette instead of sitting under a generic dark overlay. */
.vista-hero-scrim {
  background:
    linear-gradient(
      100deg,
      color-mix(in oklch, var(--ui-brand-900) 88%, transparent) 0%,
      color-mix(in oklch, var(--ui-brand-900) 45%, transparent) 40%,
      color-mix(in oklch, var(--ui-brand-900) 20%, transparent) 65%,
      color-mix(in oklch, var(--ui-accent-600) 55%, var(--ui-brand-900)) 100%
    );
}

.vista-hero .site-section {
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
}

.vista-hero-heading {
  font-family: var(--site-font-heading);
  letter-spacing: -0.01em;
}

/* The flight path: a dashed line the eye reads left to right, with a dot
   sitting a third of the way along it rather than centred or at either end —
   a route already under way, not a static rule. */
.vista-route {
  position: relative;
  width: 5.5rem;
  height: 2px;
  background-image: repeating-linear-gradient(
    90deg,
    rgb(255 255 255 / 0.75) 0 6px,
    transparent 6px 11px
  );
}

.vista-route-dot {
  position: absolute;
  top: 50%;
  left: 32%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background-color: var(--ui-accent-400);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--ui-accent-400) 25%, transparent);
}

/* ------------------------------------------------------------------ */
/* Postcard gallery (views/sections/gallery.php)                      */
/* ------------------------------------------------------------------ */

.vista-postcard {
  border-radius: var(--site-radius);
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.vista-postcard-left {
  transform: rotate(-2.5deg);
}

.vista-postcard-right {
  transform: rotate(2.5deg);
}

.vista-postcard:hover,
.vista-postcard:focus-visible {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: var(--ui-shadow-lg);
}

.vista-postcard-img {
  transition: transform 500ms ease;
}

.vista-postcard:hover .vista-postcard-img,
.vista-postcard:focus-visible .vista-postcard-img {
  transform: scale(1.04);
}

/* A small pin standing in for tape or a thumbtack, top-centre of the card —
   the detail that reads "pinned to a corkboard" rather than "cropped tile". */
.vista-postcard-pin {
  position: absolute;
  top: -0.375rem;
  left: 50%;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background-color: var(--ui-accent-500);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.25);
  transform: translateX(-50%);
}

/* ------------------------------------------------------------------ */
/* Cards — Destinations, Tour Packages, and everything else that      */
/* reuses the shared card component                                   */
/* ------------------------------------------------------------------ */

.site-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ui-surface-sunken);
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.site-card-hover:hover,
.site-card-hover:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--ui-shadow-lg);
}

.site-card img {
  transition: transform 600ms ease;
}

.site-card:hover img,
.site-card:focus-within img {
  transform: scale(1.05);
}

/* ------------------------------------------------------------------ */
/* Testimonials                                                       */
/* ------------------------------------------------------------------ */

[data-section-type="testimonials"] blockquote {
  position: relative;
}

[data-section-type="testimonials"] blockquote::before {
  content: "\201C";
  position: absolute;
  top: -2rem;
  left: -0.25rem;
  font-family: var(--site-font-heading);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--ui-accent-500);
  opacity: 0.35;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Counters                                                           */
/* ------------------------------------------------------------------ */

[data-counter] {
  font-variant-numeric: tabular-nums;
  color: var(--ui-brand-600);
}

/* ------------------------------------------------------------------ */
/* Print                                                              */
/* ------------------------------------------------------------------ */

@media print {
  header,
  footer,
  .site-btn,
  [data-nav-toggle] {
    display: none !important;
  }

  .site-section {
    padding-block: 1rem;
  }

  .vista-postcard-left,
  .vista-postcard-right {
    transform: none;
  }

  .site-prose a::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
}