/* ============================================================================
   Digitour — destinations.css
   Destination index (comparison) and destination landing pages.
   ========================================================================== */

/* ── Index cards ─────────────────────────────────────────────────────────── */
.comparegrid { display: grid; gap: 24px; }
@media (min-width: 1024px) { .comparegrid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; } }

.bigdest {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2);
}
.bigdest__media { display: block; border-radius: 0; position: relative; }
.bigdest__media:hover img { transform: scale(1.04); }
.bigdest__flag {
  position: absolute; left: 16px; bottom: 14px; line-height: 0;
  border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.4);
}
.bigdest__body { padding: 20px; display: flex; flex-direction: column; flex: 1; gap: 12px; }
.bigdest__body h2 a { text-decoration: none; }
.bigdest__body h2 a:hover { color: var(--g700); }

.bigdest__facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 2px; }
.bigdest__facts dt { font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.bigdest__facts dd { font-size: .875rem; font-weight: 600; margin-top: 2px; }
.bigdest__visa {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .75rem; color: var(--muted); line-height: 1.55;
  background: var(--g50); border-radius: var(--r-sm); padding: 10px 12px;
}
.bigdest__visa .i { flex-shrink: 0; margin-top: 2px; color: var(--g600); }
.bigdest__body .btn { margin-top: auto; }

/* ── Destination landing hero ────────────────────────────────────────────── */
.phero--dest {
  position: relative;
  padding: calc(var(--header-h) + 40px) 0 40px;
  min-height: 52vh;
  min-height: 52svh;
  display: flex; align-items: flex-end;
}
@media (min-width: 768px) { .phero--dest { padding: calc(var(--header-h) + 72px) 0 56px; min-height: 58vh; } }
/* Once a live search has actually run (Maldives results page), the visitor
   came here for resort prices, not the destination photo — the full-height
   decorative hero just pushes real results below the fold. Drops the
   enforced viewport-height minimum so the section shrinks to fit its
   content (breadcrumb, title, search bar) instead of padding out to 58vh.

   Mobile CLS fix: this used to be `min-height: 0` outright. Measured against
   the real Maldives hero markup at a 350px mobile content width (390px
   viewport minus the 20px gutter each side), the breadcrumb + flag + h1 +
   tagline + stats + search panel alone (i.e. before the board-basis chips,
   the flight-note fieldset and the Green Tax paragraph, which push it much
   taller still) already renders at ~535px, +~100px of this rule's own
   padding = ~635px. `min-height: 0` never actually starts this section at 0
   — everything here is server-rendered synchronously, nothing is injected
   after first paint — but it also reserves no floor at all, so any late
   height change (a webfont metrics swap, a locale string that wraps
   differently, a future conditional block) is free to shift the results
   grid below by its full delta. 600px gives that content a stable floor on
   phone-width screens without recreating the full-height decorative hero
   `.phero--dest` is for — it's comfortably under the ~635px "core" content
   height above, and well under the ~915-1015px this section actually
   renders at once the boards/flight-note/Green-Tax paragraph are counted,
   so it never looks like extra empty space. */
.phero--compact { min-height: 600px; padding: calc(var(--header-h) + 20px) 0 20px; }
@media (min-width: 768px) { .phero--compact { padding: calc(var(--header-h) + 24px) 0 24px; min-height: 0; } }
.phero__bg { position: absolute; inset: 0; z-index: 0; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; }
.phero__content { position: relative; z-index: 1; }
.phero__flag { display: inline-block; margin: 16px 0 10px; line-height: 0; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.phero__tagline { color: var(--g100); font-size: 1rem; margin-top: 8px; max-width: 44ch; }
.phero__stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; }
.phero__stats span { font-size: .8125rem; color: var(--on-dark); }
.phero__stats b { font-family: var(--serif); font-size: 1.125rem; color: var(--gold); margin-right: 4px; }

/* ── Destination intro ───────────────────────────────────────────────────── */
.dest__intro { display: grid; gap: 12px; }
@media (min-width: 1024px) { .dest__intro { grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; } }
.dest__intro .t-h2 { margin: 2px 0 0; max-width: 20ch; }
.dest__facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.dest__facts > div { background: var(--white); padding: 8px 14px; }
.dest__facts dt { display: flex; align-items: center; gap: 8px; font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.dest__facts dt .i { color: var(--g600); }
.dest__facts dd { font-size: .875rem; margin-top: 5px; line-height: 1.55; }

/* The whole destination card is clickable, not just the 24px heading link. */
.bigdest { position: relative; }
.bigdest__body h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bigdest__body .btn, .bigdest__media { position: relative; z-index: 2; }

/* ── Maldives results: filter sidebar + client-side pagination ──────────────
   Layout comes from packages.css's .results__layout (272px aside + fluid
   main, collapsing under 1024px) and the .filters / .check components
   already shipped for the packages page but not wired up there yet — this
   page is their first real usage. Everything below is just the bits those
   files don't already cover: price inputs, the count line, the empty state
   and the aside's own spacing. maldives-results.js does the actual
   filtering/paging by toggling [hidden] on already-rendered tiles. ───────── */
.mdresults__aside > .filters__toggle { margin-bottom: 12px; }

.mdresults__count { font-size: .8125rem; color: var(--muted); margin: 0 0 14px; }
.mdresults__count strong { color: var(--g900); font-weight: 700; }

.mdresults__empty[hidden], .hotelgrid[hidden] { display: none; }

.filters__opts--scroll { max-height: 260px; overflow-y: auto; padding-right: 4px; }

.filters__price { display: flex; align-items: flex-end; gap: 10px; }
.filters__pricefield { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: .75rem; color: var(--muted); min-width: 0; }
.filters__pricefield .input { min-height: 40px; padding: 8px 10px; font-size: .8125rem; }

/* ── Payment method toggle ───────────────────────────────────────────────
   Sits on the dark live-availability panel. Two options: plain bank
   transfer (the baseline price, as already shown everywhere) and a
   promoted 0% installment loan — visually bigger/highlighted since it's
   the option we want to draw attention to, not a neutral either/or. */
/* This block sits in the section--sand wrap below the dark availability
   panel, not inside the panel itself — light background, so it needs the
   same light-page token set the flight-toggle/board-chip components use
   for their own light variant (search.css's .search--light rules), not
   the on-dark colors the darker components nearby use. */
.paymentmethod { margin-top: 12px; }
.paymentmethod__eyebrow { color: var(--muted); margin-bottom: 6px; }
.paymentmethod__options { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
@media (max-width: 640px) { .paymentmethod__options { grid-template-columns: 1fr; } }
.paymentmethod__option {
  position: relative; text-align: left; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: var(--r-lg); border: 1.5px solid var(--line);
  background: var(--white); cursor: pointer;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.paymentmethod__option:hover { border-color: var(--g600); background: var(--g50); }
.paymentmethod__option.is-active { border-color: var(--g700); box-shadow: 0 0 0 1px var(--g700); }
.paymentmethod__option--promo { padding: 12px 16px; border-color: var(--gold); }
.paymentmethod__option--promo.is-active { box-shadow: 0 0 0 1px var(--gold); }
.paymentmethod__badge { position: absolute; top: -9px; right: 14px; }
.paymentmethod__title { font-weight: 700; color: var(--ink); font-size: .8125rem; }
.paymentmethod__option--promo .paymentmethod__title { font-size: .875rem; }
.paymentmethod__desc { font-size: .6875rem; color: var(--muted); line-height: 1.4; }
.filters__pricesep { padding-bottom: 10px; color: var(--muted); }