/* ============================================================
   css/landing.css
   Components used only by the root landing page (/). They build on
   the shared vocabulary in tokens/base/sections/media; nothing here
   redefines a primitive that other pages already use.

     .notice-bar    scrolling notice marquee ("trending" strip)
     .hero-slider   full-bleed crossfade slider with dots + progress
     .jumpnav       sticky in-page section nav (scroll-spy)
     .count-band    incrementing figures
     .rail-scroll   snap-scrolling card slider with arrow controls
     .mosaic        asymmetric photo grid
     .trend-rail    continuously scrolling card marquee
     .review-slider quote slider (shares the [data-slider] engine)

   Every moving element pauses on hover/focus, obeys
   html[data-motion="paused"] (the page's motion toggle) and stops
   entirely under prefers-reduced-motion.
   ============================================================ */

/* Anchor targets clear the fixed header and the sticky jump nav. */
main [id] { scroll-margin-block-start: calc(var(--header-h) + 4.25rem); }

/* The [hidden] attribute has to beat component display rules (.slider-arrows
   button is display:grid, for instance) or a control the script decided not to
   enable would still be visible. */
[hidden] { display: none !important; }

/* Shared marquee keyframe. A track holds exactly two identical sets, so
   translating -50% loops seamlessly. */
@keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------------------------------- notice bar ---- */
.notice-bar {
  background: var(--color-ink);
  color: #dfe9e7;
  border-block-end: 1px solid var(--color-line-dark);
  /* The header is fixed, so the strip starts beneath it — the nav then reads
     as the first band of the page and the marquee as the second.
     padding-block-end reserves the motion control's height: the button is
     absolutely positioned within this strip and carries the 44 px touch floor,
     so without the reservation it hangs below the band and prints over the
     hero image. */
  padding-block: calc(var(--header-h) + var(--space-2)) 2.75rem;
  overflow: hidden;
  position: relative;
}
.notice-bar__track {
  display: flex;
  inline-size: max-content;
  animation: marquee-x 64s linear infinite;
  will-change: transform;
}
.notice-bar:hover .notice-bar__track,
.notice-bar:focus-within .notice-bar__track { animation-play-state: paused; }
html[data-motion="paused"] .notice-bar__track { animation-play-state: paused; }
.notice-bar__set {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0 var(--space-6) 0 0;
}
.notice-bar__set li {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  white-space: nowrap;
  font-size: var(--text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.notice-bar__set li + li::before {
  content: "";
  inline-size: 0.3rem;
  block-size: 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  margin-inline-end: 0.55em;
}
.notice-bar__set { gap: var(--space-5); }
.notice-bar a { color: inherit; text-decoration: none; }
.notice-bar a:hover { color: #e9c98f; }
.notice-bar__live { color: #e9c98f; font-weight: var(--weight-semibold); }
.notice-bar__live::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--radius-pill);
  background: #e9c98f;
  margin-inline-end: 0.5em;
  animation: live-pulse 2.6s var(--ease-inout) infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
/* Sits in the marquee's own band, below the fixed header, so the header cannot
   swallow the click (it did, when this was pinned to inset-block: 0).

   The offset is the strip's own padding-block-start (--header-h plus one space
   unit), which is where the ticker band actually begins. Centring on 50% was
   wrong: that 50% includes the 76 px of header clearance, so the control was
   lifted up into the header and appeared to float over the hero. The strip also
   reserves padding-block-end for the control's height (see the small-screen
   block below), so the band is always tall enough to hold it. */
.notice-bar__motion {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(var(--header-h) + var(--space-2));
  display: grid;
  place-items: center;
  padding-inline: var(--space-3);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(to right, transparent, var(--color-ink) 40%);
  color: #c3d4d3;
}
.notice-bar__motion:hover { color: #e9c98f; }

/* Below 62em the ticker text and a full "PAUSE MOTION" label compete for the
   same band, and the label wrapped to two lines — over the ticker at phone
   widths, and over the strip's own edge at tablet widths (768 px measured).

   font-size: 0 collapses the label's visual box without removing it from the
   accessibility tree, which keeps the button's name intact for screen readers
   and for the JS toggle that rewrites the label. (A .visually-hidden clip on
   the inner <span> was not enough: the markup is `<span>Pause</span> motion`,
   so only the first word was hidden and the rest still printed. The ::before
   glyph carries the visible affordance and is sized independently.) */
@media (max-width: 62em) {
  .notice-bar__motion {
    font-size: 0;
    letter-spacing: 0;
    padding-inline: var(--space-4);
  }
  .notice-bar__motion::before {
    content: "❚❚";
    font-size: 0.85rem;
    line-height: 1;
    letter-spacing: 0;
  }
}

/* The persistent copy of the same control, living in the sticky jump nav. */
.jumpnav__motion {
  flex: none;
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  padding: 0.4em 0.6em;
  border-radius: var(--radius-small);
  white-space: nowrap;
}
.jumpnav__motion:hover { color: var(--color-ocean); background: var(--color-ocean-wash); }

/* --------------------------------------------------------- hero slider ---- */
.hero-slider {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-block-size: min(100svh, 54rem);
  display: grid;
  align-items: end;
  color: #f8f4ea;
  background: var(--color-ocean-deep);
}
.hero-slider__slides {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
}
.hero-slider__slide img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 9s linear;
}
.hero-slider__slide[data-active="true"] { opacity: 1; }
.hero-slider__slide[data-active="true"] img { transform: scale(1); }
/* No JavaScript: the first frame is simply the hero, and the rest are removed
   from the flow so they cannot be read out or scrolled past. */
html:not(.js) .hero-slider__slide { display: none; }
html:not(.js) .hero-slider__slide:first-child { display: block; opacity: 1; }
.hero-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(13 58 65 / 0.52), rgb(13 58 65 / 0.06) 34%, rgb(13 58 65 / 0.8) 90%),
    linear-gradient(78deg, rgb(13 58 65 / 0.5) 0%, transparent 58%);
}
.hero-slider__content {
  position: relative;
  display: grid;
  gap: var(--space-4);
  max-width: 48rem;
  padding-block: var(--space-7) var(--space-8);
}
.hero-slider__content .hero__eyebrow,
.hero-slider__content .hero__title,
.hero-slider__content .hero__lede,
.hero-slider__content .hero__actions { animation: none; }
.hero-slider__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e9c98f;
  border: 1px solid rgb(233 201 143 / 0.45);
  border-radius: var(--radius-pill);
  padding: 0.4em 1em;
  justify-self: start;
}
.hero-slider__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #dbe7e6;
  margin-block-start: var(--space-2);
}
.hero-slider__facts li { display: inline-flex; align-items: center; gap: 0.5em; }
.hero-slider__facts li::before { content: "✦"; color: var(--color-accent); font-size: 0.7em; }

/* Slider controls */
.hero-slider__ui {
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--space-5);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  pointer-events: none;
}
.hero-slider__ui > * { pointer-events: auto; }
.slider-dots { display: flex; align-items: center; gap: var(--space-2); }
.slider-dots button {
  inline-size: 2.1rem;
  block-size: 0.35rem;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.35);
  transition: background-color var(--dur-fast) var(--ease-out), inline-size var(--dur-med) var(--ease-out);
}
.slider-dots button:hover { background: rgb(255 255 255 / 0.6); }
.slider-dots button[aria-current="true"] { background: #e9c98f; inline-size: 3.2rem; }
.slider-arrows { display: flex; gap: var(--space-2); }
.slider-arrows button {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid rgb(255 255 255 / 0.4);
  color: #f8f4ea;
  font-size: 1.1rem;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.slider-arrows button:hover { background: rgb(255 255 255 / 0.16); border-color: #fff; }
.hero-slider__status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #dbe7e6;
}
.slider-progress {
  position: relative;
  inline-size: 6rem;
  block-size: 2px;
  background: rgb(255 255 255 / 0.28);
  overflow: hidden;
}
.slider-progress span {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: #e9c98f;
  transform: scaleX(0);
}
.slider-progress span[data-running="true"] { animation: slider-fill var(--slider-interval, 7200ms) linear forwards; }
@keyframes slider-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html[data-motion="paused"] .slider-progress span { animation-play-state: paused; }

/* ------------------------------------------------------------ jump nav ---- */
.jumpnav {
  position: sticky;
  inset-block-start: var(--header-h);
  z-index: 40;
  background: color-mix(in srgb, var(--color-paper) 93%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--color-line);
}
.jumpnav__inner { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-2); }
.jumpnav__label {
  flex: none;
  font-size: var(--text-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  display: none;
}
@media (min-width: 62em) { .jumpnav__label { display: block; } }
.jumpnav__list {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 1px;
}
.jumpnav__list::-webkit-scrollbar { display: none; }
.jumpnav__list a {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-2);
  border-block-end: 2px solid transparent;
  color: var(--color-fg-muted);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.jumpnav__list a:hover { color: var(--color-ocean); }
.jumpnav__list a[aria-current="true"] { color: var(--color-ocean); border-block-end-color: var(--color-accent); }
.jumpnav__cta { flex: none; display: none; }
@media (min-width: 62em) { .jumpnav__cta { display: inline-flex; } }

/* ----------------------------------------------------------- count band ---- */
.count-band {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  text-align: center;
}
.count { display: grid; gap: var(--space-1); justify-items: center; }
.count__num {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.1rem + 3.4vw, 3.1rem);
  line-height: 1;
  color: var(--color-ocean);
  font-variant-numeric: lining-nums;
}
.count__num small { font-size: 0.42em; letter-spacing: 0.04em; }
.count__rule { inline-size: 2.2rem; block-size: 2px; background: var(--color-accent); }
.count__label { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-fg-muted); }
.section--ink .count__num { color: #f7f3ea; }
.section--ink .count__label { color: #a9bcba; }

/* ---------------------------------------------------------- rail slider ---- */
.rail-wrap { position: relative; }
.rail-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(80%, 19rem), 1fr);
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block-end: var(--space-4);
  scrollbar-width: thin;
}
.rail-scroll > * { scroll-snap-align: start; }
@media (min-width: 56em) { .rail-scroll { grid-auto-columns: minmax(18rem, 1fr); } }
.rail-scroll .card { block-size: 100%; }
.rail-nav {
  position: absolute;
  inset-block-start: -3.9rem;
  inset-inline-end: 0;
  display: none;
  gap: var(--space-2);
}
@media (min-width: 48em) { .rail-nav { display: flex; } }
.rail-nav button {
  inline-size: 2.6rem;
  block-size: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 1rem;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.rail-nav button:hover { background: var(--color-ocean-wash); transform: translateY(-1px); }
.section--ink .rail-nav button,
.section--ocean .rail-nav button { background: rgb(255 255 255 / 0.08); border-color: var(--color-line-dark); color: #f7f3ea; }
.rail-hint { font-size: var(--text-xs); color: var(--color-fg-muted); }

/* -------------------------------------------------------------- mosaic ---- */
.mosaic {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 48em) { .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mosaic figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-medium);
  background: var(--media-gradient);
  aspect-ratio: 4 / 3;
}
@media (min-width: 48em) {
  .mosaic [data-span="2"] { grid-column: span 2; aspect-ratio: 2 / 1; }
  .mosaic [data-span="3"] { grid-column: span 3; aspect-ratio: 3 / 1; }
}
/* The mosaic doubles as the lightbox group (initGallery binds .gallery-grid a),
   so neutralise the column-layout rules that would otherwise leak in. */
.mosaic.gallery-grid { columns: auto; column-gap: normal; }
.mosaic.gallery-grid figure { margin-block-end: 0; }
.mosaic a { display: block; block-size: 100%; }
.mosaic img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.mosaic a:hover img { transform: scale(1.04); }
.mosaic figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  padding: var(--space-5) var(--space-4) var(--space-3);
  font-size: var(--text-xs);
  color: #f6f2ea;
  background: linear-gradient(to top, rgb(13 58 65 / 0.9), transparent);
}

/* --------------------------------------------------------- trend marquee ---- */
.trend-rail { overflow: hidden; }
.trend-rail__track {
  display: flex;
  gap: var(--space-4);
  inline-size: max-content;
  animation: marquee-x 78s linear infinite;
}
.trend-rail:hover .trend-rail__track,
.trend-rail:focus-within .trend-rail__track { animation-play-state: paused; }
html[data-motion="paused"] .trend-rail__track { animation-play-state: paused; }
.trend-rail__set { display: flex; gap: var(--space-4); padding-inline-end: var(--space-4); }
.trend-card {
  inline-size: 16.5rem;
  flex: none;
  display: grid;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-medium);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
a.trend-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.trend-card__img { aspect-ratio: 3 / 2; position: relative; overflow: hidden; background: var(--media-gradient); }
.trend-card__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.trend-card__body { padding: 0 var(--space-4) var(--space-4); display: grid; gap: var(--space-1); }
.trend-card__tag {
  font-size: var(--text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.trend-card__title { font-family: var(--font-display); font-size: var(--text-md); }
.trend-card__meta { font-size: var(--text-xs); color: var(--color-fg-muted); }
.trend-card__rank {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 2;
  inline-size: 2rem;
  block-size: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: rgb(13 58 65 / 0.85);
  color: #e9c98f;
  font-family: var(--font-display);
  font-size: var(--text-sm);
}

/* ------------------------------------------------------- review slider ---- */
.review-slider { position: relative; }
.review-slider__slides { display: grid; }
.review-slider__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-out); }
.review-slider__slide[data-active="true"] { opacity: 1; visibility: visible; }
html:not(.js) .review-slider__slide:first-child { opacity: 1; visibility: visible; }
.review-slider__slide .review { border-block-start: 2px solid var(--color-accent); padding-block-start: var(--space-4); max-width: 62ch; }
.review-slider__slide .review p { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); }
.review-slider__ui { display: flex; align-items: center; gap: var(--space-4); margin-block-start: var(--space-5); }
.review-slider__ui .slider-dots button { background: var(--color-line); }
.review-slider__ui .slider-dots button:hover { background: var(--color-sand-deep); }
.review-slider__ui .slider-dots button[aria-current="true"] { background: var(--color-accent); }
.review-slider__ui .slider-arrows button { border-color: var(--color-line); color: var(--color-ink); }
.review-slider__ui .slider-arrows button:hover { background: var(--color-ocean-wash); border-color: var(--color-ocean); }
.review-slider__ui .slider-arrows button { inline-size: 2.4rem; block-size: 2.4rem; font-size: 1rem; }
.review-slider__count { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-fg-muted); }

/* ------------------------------------------------------- editorial bits ---- */
/* Numbered "how a stay runs" list reuses .timeline; the day band below is
   the landing page's own: three columns of prose with a rail between them. */
.day-band { display: grid; gap: var(--space-5); }
@media (min-width: 48em) { .day-band { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.day { display: grid; gap: var(--space-3); padding-inline-start: var(--space-4); border-inline-start: 2px solid var(--color-line); }
.day:hover { border-inline-start-color: var(--color-accent); }
.day__time { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); }
.day h3 { font-size: var(--text-md); }

/* Photo-led CTA pair */
.pair-cta { display: grid; gap: var(--space-4); }
@media (min-width: 48em) { .pair-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pair-cta a {
  position: relative;
  display: grid;
  align-content: end;
  min-block-size: 16rem;
  padding: var(--space-5);
  border-radius: var(--radius-medium);
  overflow: hidden;
  isolation: isolate;
  color: #f8f4ea;
  text-decoration: none;
}
.pair-cta img { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.pair-cta a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(13 58 65 / 0.88), rgb(13 58 65 / 0.2) 70%);
}
.pair-cta a:hover img { transform: scale(1.05); }
.pair-cta h3 { color: #fdfaf3; font-size: var(--text-lg); }
.pair-cta p { color: #d8e2e0; font-size: var(--text-sm); }
.pair-cta .link-more { border-block-end-color: #e9c98f; color: #f4efe5; }

/* --------------------------------------------------------- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .notice-bar__track,
  .trend-rail__track,
  .slider-progress span { animation: none !important; }
  /* With the loop stopped, the duplicated set is redundant. */
  .notice-bar__set[aria-hidden="true"],
  .trend-rail__set[aria-hidden="true"] { display: none; }
  .notice-bar, .trend-rail { overflow-x: auto; }
  .hero-slider__slide img { transform: none; transition: none; }
  .rail-scroll { scroll-behavior: auto; }
}

/* ---------------------------------------------------------- small screens ---- */
@media (max-width: 47.99em) {
  .hero-slider__ui { justify-content: center; }
  .hero-slider__facts { font-size: var(--text-2xs); letter-spacing: 0.08em; }
  .trend-card { inline-size: 15rem; }
}