/* ==========================================================================
   Page composition.
   The source artboard is a fixed 1600px canvas (1440px content inside 80px
   gutters). Those measurements are kept at full width and then allowed to
   reflow: the four-up card rows step 4 → 2 → 1, and the three-column
   Explore/Plan sections stack.
   ========================================================================== */

.page {
  max-width: var(--page-max);
  margin-inline: auto;
  background: var(--surface-page);
}

.section {
  padding: var(--space-11) var(--page-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
}

/* A row of four equal cards: 4 × 342 + 3 × 24 = 1440 at full width. */
.card-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}

/* --- Navigation ----------------------------------------------------------- */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-11);
  height: 128px;
  padding: var(--space-11) var(--page-gutter);
}
.site-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-11);
}
.site-nav__burger,
.nav-panel { display: none; }

.site-nav__item { position: relative; }
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font: var(--type-nav);
  color: var(--text-primary);
  /* The three menu triggers are buttons, so reset them to match the links. */
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.site-nav__link:hover { opacity: 0.85; }
.site-nav__link .icon {
  --icon-size: 16px;
  color: var(--icon-default);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.site-nav__link[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* --- Navigation menus -----------------------------------------------------
   Disclosures like the hero fields — same open/placement contract, so they
   share setupDisclosure() and close one another — but a list of links rather
   than a filter panel, so rows are tighter and separated by hover instead of
   rules.
   -------------------------------------------------------------------------- */
.nav-menu {
  position: absolute;
  left: 0;
  z-index: 30;
  width: 380px;
  max-width: calc(100vw - 2 * var(--page-gutter));
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    visibility 0s linear var(--duration-base);
}
.nav-menu,
.nav-menu[data-placement="below"] {
  top: calc(100% + var(--space-5));
  bottom: auto;
  transform: translateY(calc(-1 * var(--space-4))) scale(0.98);
  transform-origin: top left;
}
.nav-menu[data-placement="above"] {
  top: auto;
  bottom: calc(100% + var(--space-5));
  transform: translateY(var(--space-4)) scale(0.98);
  transform-origin: bottom left;
}
.nav-menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.nav-menu__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-standard);
}
.nav-menu__item:hover { opacity: 1; background: var(--surface-subtle); }
.nav-menu__title {
  font: var(--weight-bold) 15px/1.2 var(--font-sans);
  color: var(--text-primary);
}
.nav-menu__note {
  font: var(--weight-regular) 13px/1.3 var(--font-sans);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.site-nav__toggle { display: none; }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding: 0 var(--page-gutter); }
.hero__frame {
  position: relative;
  height: 840px;
  border-radius: var(--radius-lg);
  background: var(--nordra-black) url("../img/hero-fjord.jpg") center / cover no-repeat;
  /* Deliberately not `overflow: hidden` — border-radius already clips the
     background image, and the scrim below inherits the radius. Clipping here
     would trap the date dropdown inside the hero. */
}
.hero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--scrim-hero);
  pointer-events: none;
}
.hero__content {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: 0 var(--space-11);
}
/* The artboard sets this to 459px, which assumes Kepler at weight 400. The kit
   currently serves only weight 900, which is wide enough to push the line to a
   third line at that width. Expressed in em so it tracks the responsive
   font-size steps below, and balanced so the two lines rag evenly whichever
   weight the kit ends up serving. */
.hero__title {
  max-width: 10em;
  font: var(--type-hero);
  color: var(--text-on-image);
  text-wrap: balance;
}
.hero__lede {
  max-width: 503px;
  font: var(--weight-regular) 18px/var(--line-height-body) var(--font-sans);
  color: var(--text-on-image);
  text-wrap: pretty;
}

/* --- Date dropdown --------------------------------------------------------
   The "Check in and out dates" field is a disclosure. The picker prefers to open
   below the field and flips above when the viewport has no room, measured in
   app.js on open and again while scrolling. Revealed with opacity and a short
   rise; visibility is delayed out so the panel is not focusable while closed.
   The global prefers-reduced-motion rule collapses the transition.
   -------------------------------------------------------------------------- */
.field--dropdown { position: relative; }

.field__dropdown {
  position: absolute;
  left: 0;
  z-index: 30;
  width: 440px;
  max-width: min(440px, calc(100vw - 2 * var(--page-gutter)));
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    visibility 0s linear var(--duration-base);
}

/* Below the field by default; app.js flips it to "above" when the viewport has
   no room underneath. Each placement rises out of the field it is attached to. */
.field__dropdown,
.field__dropdown[data-placement="below"] {
  top: calc(100% + var(--space-4));
  bottom: auto;
  transform: translateY(calc(-1 * var(--space-4))) scale(0.98);
  transform-origin: top left;
}
.field__dropdown[data-placement="above"] {
  top: auto;
  bottom: calc(100% + var(--space-4));
  transform: translateY(var(--space-4)) scale(0.98);
  transform-origin: bottom left;
}

.field__dropdown[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
/* The floating instance uses the design system's elevation; only the inline
   picker in "Plan your trip" carries a border instead. */
.field__dropdown .datepicker {
  width: 100%;
  border: none;
  box-shadow: var(--shadow-float);
}

/* Region: the picker's preferred-season checklist, tightened. The season list is
   a two-item panel with room to breathe; this one carries four rows, so the type
   steps down a little, the places line drops to secondary, and the row gap comes
   out of the list gap and into the row padding so the dividers sit flush. */
.field__dropdown .option-list {
  width: 100%;
  gap: 0;
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-float);
}
.field__dropdown .option-list .usp {
  gap: var(--space-6);
  padding: var(--space-6) var(--space-2);
}
.field__dropdown .option-list .usp__text { gap: var(--space-2); }
.field__dropdown .option-list .usp__title {
  font: var(--weight-bold) 16px/1.2 var(--font-sans);
}
.field__dropdown .option-list .usp__body {
  font: var(--weight-regular) 14px/1.3 var(--font-sans);
  color: var(--text-secondary);
}

/* Header carrying the select-all toggle. */
.option-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 0 var(--space-2) var(--space-6);
}
.option-list__label { font: var(--type-label); color: var(--text-primary); }
.option-list__action {
  padding: 0;
  border: none;
  background: none;
  color: var(--text-primary);
  font: var(--weight-medium) 13px/100% var(--font-sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.option-list__action:hover { opacity: 0.65; }

/* Guests: the same party block as "Plan your trip", restyled for the dropdown —
   the counts are set larger and bolder with the age qualifier stepped back, and
   Rooms is separated from the headcounts by a rule. */
.field__dropdown .plan__party {
  width: 100%;
  gap: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-float);
}
.field__dropdown .plan__party-row {
  height: auto;
  padding: var(--space-6);
  gap: var(--space-9);
}
.field__dropdown .plan__label {
  font: var(--weight-bold) 16px/var(--line-height-body) var(--font-sans);
  color: var(--text-primary);
}
.field__dropdown .plan__label-note {
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}
.field__dropdown .plan__party-row:last-child {
  margin-top: var(--space-6);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
}

/* A solid surface card sitting over the photograph. Because it follows the
   theme rather than staying dark, everything inside it uses the ordinary
   surface and text tokens and reads correctly in both themes. */
.hero__search {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
}
.hero__fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.hero__filters {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.hero__filter-list {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: var(--space-6);
}
.hero__filter-label { font: var(--type-label); color: var(--text-primary); }
.hero__chips {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.hero__rule {
  width: 1px;
  height: 10px;
  background: var(--border-strong);
}
.hero__view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: none;
  background: none;
  color: var(--text-primary);
  font: var(--type-label);
  white-space: nowrap;
  cursor: pointer;
}
.hero__view-all .icon { --icon-size: 18px; }

/* --- Perks ---------------------------------------------------------------- */
.perks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  align-items: center;
  padding: 60px var(--page-gutter);
}
.perks__title { font: var(--type-section); color: var(--text-heading); }

/* --- Explore Norway ------------------------------------------------------- */
.explore__layout {
  display: grid;
  grid-template-columns: 476px 464px 342px;
  justify-content: space-between;
  gap: 79px;
  align-items: start;
}
.explore__map { position: relative; }
.explore__map-svg {
  display: block;
  width: 100%;
  aspect-ratio: 460 / 546;
}
.explore__region {
  fill: var(--map-fill);
  transition: fill var(--duration-fast) var(--ease-standard);
  cursor: pointer;
}
.explore__region:hover { fill: var(--map-fill-hover); }
.explore__map-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  transform: translate(-50%, calc(-100% - 10px));
  height: 24px;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  background: var(--nordra-black);
  color: var(--nordra-white);
  font: var(--weight-regular) 11px/20px var(--font-sans);
  white-space: nowrap;
  pointer-events: none;
}
.explore__map-tooltip[hidden] { display: none; }

.explore__detail { display: flex; flex-direction: column; gap: var(--space-9); }
.explore__intro { display: flex; flex-direction: column; gap: var(--space-6); }
.explore__heading {
  max-width: 312px;
  font: var(--type-section);
  color: var(--text-heading);
}
.explore__intro p {
  font: var(--weight-regular) 14px/var(--line-height-body) var(--font-sans);
  color: var(--text-secondary);
  text-wrap: pretty;
}
.explore__more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-2);
  font: var(--weight-medium) 14px/100% var(--font-sans);
  color: var(--nordra-black);
}
.explore__more .icon { --icon-size: 14px; transform: rotate(-90deg); }

.explore__block { display: flex; flex-direction: column; gap: var(--space-6); }
.explore__block-title {
  font: var(--weight-bold) 16px/100% var(--font-sans);
  color: var(--text-primary);
}
.explore__pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-9);
}
.explore__inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-9);
}
.explore__person {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font: var(--weight-regular) 14px/100% var(--font-sans);
}
.explore__person img {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  object-fit: cover;
}
.explore__fact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--weight-regular) 13px/100% var(--font-sans);
}
.explore__fact .icon { --icon-size: 14px; color: var(--icon-muted); }

.explore__aside { display: flex; flex-direction: column; gap: var(--space-9); }
/* 16:9 rather than a fixed 60px band. At the width the aside gives it that
   height came out around 5.5:1 — a letterbox slot too short to read as a
   photograph of anywhere. The ratio holds at every width, desktop included. */
.explore__gallery {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  background: url("../img/gallery-arctic.jpg") center / cover;
  overflow: hidden;
}
.explore__gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-gallery);
}
.explore__gallery span {
  position: absolute;
  bottom: 10px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font: var(--weight-medium) 13px/100% var(--font-sans);
  color: var(--text-on-image);
}
.explore__gallery .icon { --icon-size: 14px; }

.explore__notes { display: flex; flex-direction: column; gap: var(--space-6); }
.explore__note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
}
.explore__note dt {
  font: var(--weight-bold) 14px/100% var(--font-sans);
  color: var(--text-primary);
}
.explore__note dd {
  margin: 0;
  font: var(--weight-regular) 13px/var(--line-height-body) var(--font-sans);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* --- Plan your trip ------------------------------------------------------- */
.plan__layout {
  display: grid;
  grid-template-columns: 440px 440px 1fr;
  gap: var(--grid-gap);
  align-items: start;
}
.plan__column { display: flex; flex-direction: column; gap: var(--space-9); }
.plan__group { display: flex; flex-direction: column; gap: var(--space-6); }
.plan__label { font: var(--type-label); color: var(--text-primary); }

.plan__party {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.plan__party-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--control-height-lg);
  padding: 0 var(--space-6);
}

.plan__budget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.plan__budget-head .segmented { width: 150px; }
.plan__budget {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-9) var(--space-8) var(--space-8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.plan__scale { display: flex; flex-direction: column; gap: 3px; }
.plan__scale-row { display: flex; justify-content: space-between; gap: var(--space-4); }
.plan__scale-row:first-child span {
  font: var(--weight-medium) 14px/100% var(--font-sans);
}
.plan__scale-row:last-child span {
  font: var(--weight-regular) 12px/100% var(--font-sans);
  color: var(--text-secondary);
}
.plan__scale-row span:nth-child(2) { text-align: center; }
.plan__scale-row span:last-child { text-align: right; }

.plan__filters {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-9);
  min-width: 0;
}
.plan__filter-group { display: flex; flex-direction: column; gap: var(--space-4); }
.plan__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.plan__submit { align-self: flex-end; }

/* --- Testimonials --------------------------------------------------------- */
.testimonials__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  align-items: stretch;
}
.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
  padding: var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
}
.testimonial__score { display: inline-flex; align-items: center; gap: var(--space-4); }
.testimonial__score .icon { --icon-size: 20px; }
.testimonial__score span { font: var(--weight-bold) 16px/16px var(--font-sans); }
.testimonial__quote { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); }
.testimonial__headline {
  font: var(--weight-medium) 18px/24px var(--font-sans);
  text-wrap: pretty;
}
.testimonial__body {
  font: var(--weight-regular) 18px/var(--line-height-body) var(--font-sans);
  color: var(--text-secondary);
  text-wrap: pretty;
}
.testimonial__author { font: var(--weight-medium) 16px/100% var(--font-sans); }
.testimonial__guide { display: inline-flex; align-items: center; gap: var(--space-6); }
.testimonial__guide img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--nordra-mid-grey);
}
.testimonial__guide-name { display: flex; flex-direction: column; gap: 2px; }
.testimonial__guide-name span {
  font: var(--weight-medium) 14px/100% var(--font-sans);
}
.testimonial__guide-role { color: var(--text-secondary); }

/* --- Inspiration ---------------------------------------------------------- */
.inspiration { border-top: 1px solid var(--border-subtle); }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  padding: 60px var(--page-gutter);
  background: var(--surface-subtle);
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(var(--page-gutter) + (50vw - 50%));
}
.site-footer__top,
.site-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-9);
}
.site-footer__social { display: flex; align-items: center; gap: var(--space-9); }
.site-footer__social a {
  font: var(--weight-medium) 12px/20px var(--font-sans);
  color: var(--text-secondary);
}
.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}
.site-footer__column { display: flex; flex-direction: column; gap: var(--space-6); }
.site-footer__column h2 {
  font: var(--weight-bold) 18px/100% var(--font-sans);
  color: var(--text-primary);
}
.site-footer__column a {
  font: var(--weight-regular) 16px/100% var(--font-sans);
  color: var(--text-secondary);
}
.site-footer__legal span {
  font: var(--weight-regular) 16px/100% var(--font-sans);
  color: var(--text-secondary);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1440px) {
  :root { --page-gutter: 48px; }
  .explore__layout {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr) minmax(0, 320px);
    gap: var(--space-11);
  }
}

@media (max-width: 1180px) {
  .card-row,
  .testimonials__row,
  .site-footer__columns { grid-template-columns: repeat(2, 1fr); }

  .perks { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-10); }

  .explore__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .explore__map { grid-column: 1 / -1; }

  .plan__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plan__filters { grid-column: 1 / -1; }
  .plan__submit { align-self: flex-start; }

  .hero__frame { height: 720px; }
  .hero__title { font: var(--weight-regular) 48px/52px var(--font-display); }
}

@media (max-width: 860px) {
  :root { --page-gutter: 20px; }

  /* Hamburger, centred logo, Sign In. The menus move into the panel below. */
  .site-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: auto;
    padding: var(--space-8) var(--page-gutter);
  }
  .site-nav > a { justify-self: center; }
  .site-nav__menu { justify-self: end; gap: var(--space-8); }
  .site-nav__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    width: 40px;
    height: 40px;
    margin-left: calc(var(--space-5) * -1);
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-primary);
    cursor: pointer;
  }
  .site-nav__burger .icon { --icon-size: 26px; }
  .site-nav__item,
  .site-nav__link--solo,
  .site-nav__menu [data-theme-switch] { display: none; }

  /* Full bleed: no gutter and no rounded corners, so the photograph runs to
     both edges. The scrim inherits the radius, so it squares off too. */
  .hero { padding: 0; }
  .hero__frame {
    /* 26rem tall, with the copy anchored to the foot of the frame so the
       photograph takes whatever is left. `min-height` rather than `height` so
       the frame still grows if the copy ever outruns it. */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: auto;
    min-height: 26rem;
    border-radius: 0;
  }
  /* One gutter, the page's own, so the title, lede and search field line up
     with every section below instead of sitting on a stack of three insets. */
  .hero__content {
    position: relative;
    /* The desktop rule insets this with left/right/bottom offsets. Under
       `relative` those would shift the box instead, adding a second gutter. */
    inset: auto;
    gap: var(--space-9);
    padding: var(--space-9) var(--page-gutter) var(--page-gutter);
    /* Contains the underlay below. Without a stacking context here its
       negative z-index would drop it behind the frame's photograph, where it
       would darken nothing. */
    isolation: isolate;
  }

  /* The full-bleed crop puts the title and lede over the busiest part of the
     photograph — ridgeline and broken water — where white text on the scrim
     alone sits right at the edge of legible. This grounds the whole group,
     fading in from nothing so it reads as the photograph darkening rather
     than as a panel with a top edge. */
  .hero__content::before {
    content: "";
    position: absolute;
    inset: -40px 0 0 0;
    z-index: -1;
    background: linear-gradient(
      180deg,
      rgba(13, 13, 13, 0) 0%,
      rgba(13, 13, 13, 0.45) 38%,
      rgba(13, 13, 13, 0.72) 100%
    );
    pointer-events: none;
  }
  .hero__copy { padding: 0; }
  .hero__title { font: var(--weight-regular) 40px/44px var(--font-display); }
  .hero__lede {
    font: var(--weight-regular) 16px/var(--line-height-body) var(--font-sans);
  }
  .hero__fields { grid-template-columns: 1fr; }
  /* In flow rather than floating: the hero is auto-height here and clips its
     overflow, so an absolutely placed panel would be cut off. */
  .field__dropdown {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: var(--space-4);
    transform: none;
    transition: none;
  }
  .field__dropdown:not([data-open="true"]) { display: none; }
  .hero__filters { flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .hero__filter-list { flex-direction: column; align-items: flex-start; }

  .section { padding: var(--space-10) var(--page-gutter); gap: var(--space-10); }
  .perks,
  .explore__layout,
  .plan__layout,
  .site-footer__columns { grid-template-columns: minmax(0, 1fr); }

  /* --- Swipeable card rows -------------------------------------------------
     Featured packages, guides, testimonials and inspiration become horizontal
     scrollers. The row bleeds out to both screen edges with negative margins
     and pads itself back in, so a card can scroll flush to the edge while the
     first one still lines up with the section's gutter. Cards are sized to
     leave the next one showing by ~50px, which is what signals the swipe. */
  .card-row,
  .testimonials__row {
    display: flex;
    gap: var(--grid-gap);
    overflow-x: auto;
    margin-inline: calc(var(--page-gutter) * -1);
    padding-inline: var(--page-gutter);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--page-gutter);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* No scrollbar: the peeking card is the affordance. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .card-row::-webkit-scrollbar,
  .testimonials__row::-webkit-scrollbar { display: none; }

  /* The artboard's media heights are absolute, which stops being square once
     the card narrows. Drive them from the ratio instead so featured cards stay
     1:1 and guide / blog cards keep their 342 × 228. */
  .card__media {
    height: auto;
    aspect-ratio: var(--card-media-ratio, 1);
  }

  /* The "View all" link moves below the cards. `display: contents` lifts the
     heading, chips and link out of the header and into the section's own
     column, so the link can simply be ordered after the card row — no second
     copy of it in the markup, and the header is untouched above 860px. */
  .section-header,
  .section-header__bar { display: contents; }
  .section-header__chips:empty { display: none; }
  /* The section's gap is wider than the header's was; pull the chips back up
     under their heading. */
  .section-header__chips { margin-top: calc(var(--space-7) - var(--space-10)); }
  .section-header__action {
    order: 1;
    align-self: flex-start;
  }

  .card-row > *,
  .testimonials__row > * {
    flex: 0 0 auto;
    /* Sized so the next card always shows by the gutter plus one --space-10,
       i.e. ~52px, at every phone width. Capped at the design's own card width
       so the cards do not balloon on a wide screen — past ~438px the cap takes
       over and simply reveals more of the next card. */
    width: min(calc(100% - var(--grid-gap) - var(--space-10)), var(--card-width));
    scroll-snap-align: start;
  }

  .explore__pairs { grid-template-columns: 1fr; }
  .plan__budget-head { flex-wrap: wrap; }

  .site-footer__top,
  .site-footer__legal { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .site-footer__social { flex-wrap: wrap; }
}

/* ==========================================================================
   Mobile search flow
   Below the desktop breakpoint the hero's search panel collapses to a single
   "Start exploring" field, which opens a full-screen hub: one row per filter,
   each leading to its own screen with Select / Cancel. Everything here is
   inert above 860px — the flow is display:none and the trigger is hidden.
   ========================================================================== */

.hero__collapsed-search { display: none; }

.search-flow { display: none; }

@media (max-width: 860px) {
  /* The desktop panel and its dropdowns give way to the collapsed field. */
  .hero__search { display: none; }

  .hero__collapsed-search {
    display: flex;
    align-items: center;
    gap: var(--space-7);
    width: 100%;
    min-height: var(--control-height-lg);
    padding: var(--space-6) var(--space-7);
    border: none;
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-placeholder);
    font: var(--type-input);
    text-align: left;
    cursor: pointer;
  }
  .hero__collapsed-search .icon { --icon-size: 24px; color: var(--icon-default); }

  .search-flow {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    background: var(--surface-page);
  }
  .search-flow[hidden] { display: none; }

  .search-flow__screen {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
  .search-flow__screen[hidden] { display: none; }

  .search-flow__head {
    display: flex;
    align-items: center;
    /* Left-aligned so the back chevron leads the title; the hub has no back
       control, and pushes its close button over with an auto margin instead. */
    justify-content: flex-start;
    gap: var(--space-2);
    flex-shrink: 0;
    padding: var(--space-8) var(--page-gutter) var(--space-7);
    border-bottom: 1px solid var(--border-subtle);
  }
  .search-flow__title { font: var(--type-section); color: var(--text-heading); }

  .search-flow__back {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    /* Pull the glyph out to the gutter so the title keeps its alignment. */
    margin-left: calc(var(--space-5) * -1);
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-primary);
    cursor: pointer;
  }
  .search-flow__back .icon { --icon-size: 20px; transform: rotate(90deg); }

  .search-flow__close {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-primary);
    cursor: pointer;
  }
  .search-flow__close .icon { --icon-size: 18px; }

  /* The only scrolling region, so the footer stays put. */
  .search-flow__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-8) var(--page-gutter);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }
  .search-flow__body--rows { padding: 0 var(--page-gutter); gap: 0; }

  .search-flow__foot {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-7) var(--page-gutter) var(--space-10);
    border-top: 1px solid var(--border-subtle);
  }
  .search-flow__submit { width: 100%; height: 56px; }
  .search-flow__cancel {
    height: 48px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-secondary);
    font: var(--weight-medium) 16px/100% var(--font-sans);
    cursor: pointer;
  }

  /* --- Hub rows ----------------------------------------------------------- */
  .search-row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
    padding: var(--space-8) 0;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    background: none;
    text-align: left;
    cursor: pointer;
  }
  .search-row:last-child { border-bottom: none; }
  .search-row__label {
    font: var(--weight-bold) 16px/1.2 var(--font-sans);
    color: var(--text-primary);
  }
  .search-row__value {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    font: var(--weight-regular) 16px/1.2 var(--font-sans);
    color: var(--text-primary);
    text-align: right;
  }
  .search-row__chevron {
    --icon-size: 18px;
    flex-shrink: 0;
    color: var(--icon-muted);
    transform: rotate(-90deg);
  }

  /* --- Screen-specific ---------------------------------------------------- */
  .stay-dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .field__control--static { cursor: default; }

  .chip-search {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    height: 56px;
    padding: 0 var(--space-7);
    border-radius: var(--radius-sm);
    background: var(--control-fill);
  }
  .chip-search .icon { --icon-size: 22px; flex-shrink: 0; color: var(--icon-default); }
  .chip-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    color: var(--text-primary);
    font: var(--type-input);
    -webkit-appearance: none;
    appearance: none;
  }
  .chip-search input:focus { outline: none; }
  .chip-search:focus-within { box-shadow: inset 0 0 0 2px var(--text-primary); }

  /* Cloned controls fill the screen rather than sitting at artboard widths. */
  .search-flow .datepicker,
  .search-flow .plan__party,
  .search-flow .plan__group {
    width: 100%;
    border: none;
    padding: 0;
    box-shadow: none;
    background: none;
  }
  .search-flow .plan__budget { border: none; padding: var(--space-8) 0 0; }
  /* The screen title already names the group. */
  .search-flow .plan__budget-head .plan__label { display: none; }
  .search-flow .plan__budget-head { justify-content: flex-end; }
  .search-flow .plan__chips { gap: var(--space-4); }
  .search-flow .chip { height: 44px; padding: 2px 18px; font: var(--type-input); }
  .search-flow .chip[hidden] { display: none; }
  .search-flow .calendar__day { height: 44px; }
  .search-flow .calendar__week { height: 44px; }
}

/* ==========================================================================
   Mobile navigation panel
   Full-screen, like the search flow. The three bar menus become accordion
   sections; Sign In and the theme switch sit in the footer.
   ========================================================================== */

@media (max-width: 860px) {
  .nav-panel {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    background: var(--surface-page);
  }
  .nav-panel[hidden] { display: none; }

  .nav-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-shrink: 0;
    padding: var(--space-8) var(--page-gutter);
    border-bottom: 1px solid var(--border-subtle);
  }
  .nav-panel__head .logo { color: var(--text-primary); }
  .nav-panel__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-primary);
    cursor: pointer;
  }
  .nav-panel__close .icon { --icon-size: 18px; }

  .nav-panel__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--page-gutter);
  }

  .nav-panel__section { border-bottom: 1px solid var(--border-subtle); }
  .nav-panel__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    width: 100%;
    padding: var(--space-8) 0;
    border: none;
    background: none;
    color: var(--text-primary);
    font: var(--weight-bold) 20px/1.2 var(--font-sans);
    text-align: left;
    cursor: pointer;
  }
  .nav-panel__summary .icon {
    --icon-size: 20px;
    flex-shrink: 0;
    color: var(--icon-muted);
    transition: transform var(--duration-fast) var(--ease-standard);
  }
  .nav-panel__summary[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .nav-panel__summary--link {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
  }

  .nav-panel__items {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--space-6);
  }
  .nav-panel__items[hidden] { display: none; }
  .nav-panel__items .nav-menu__item { padding: var(--space-5) 0; }

  .nav-panel__foot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-7) var(--page-gutter) var(--space-10);
    border-top: 1px solid var(--border-subtle);
  }
  .nav-panel__signin { flex: 1; height: 56px; }
  .nav-panel__foot .segmented { display: inline-flex; }
}