/* ==========================================================================
   GRANDTOUR (PVT) LTD — RESPONSIVE
   Every breakpoint lives here, in one place, ascending.
   Tested targets: 320 · 375 · 390 · 430 · 768 · 1024 · 1440 · 1920
   The reference design had only 1024 and 640; 768 and 1440 are new.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 1440 — nothing shrinks yet; the container simply stops growing.
   Above this the wide container is capped so content never floats on a 27".
   -------------------------------------------------------------------------- */
@media (min-width: 1441px) {
  :root { --container: 1300px; --container-wide: 1480px; }
}

/* --------------------------------------------------------------------------
   ≥ 1200 — the hero portrait, enlarged.
   On wide screens the image was capped at 420px inside a column 492-539px
   wide, with 225px of unused height beneath it: real room going to waste.

   It is scaled rather than widened because the badge is pinned to the
   bottom edge of that column. Widening the image makes the column taller,
   the column is vertically centred, and the badge would drop ~33px. A
   transform paints larger without occupying more space, so every other box
   in the hero keeps its exact position — verified: of 58 boxes in the
   section, only the image itself changes.

   Why 1200 and not lower: below it the image already fills its column, so
   scaling has nothing to grow into. It would clip against the hero edge at
   1160 and at 320-390, and in the stacked layout it grows upward into the
   trust chips. 1.15 is also the largest factor that still fits inside the
   narrowest column here (492px at 1200), and 483px rendered is within a
   pixel of what the 964px source can serve sharply at 2x.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .hero__visual img {
    transform: scale(1.15);
    transform-origin: bottom center;
  }
}

/* --------------------------------------------------------------------------
   ≤ 1160 — the desktop nav stops fitting before the tablet breakpoint does.
   Drop the header phone number first; the CTA and logo are worth more.
   -------------------------------------------------------------------------- */
@media (max-width: 1160px) {
  .site-header__phone { display: none; }
  .nav__link { padding-inline: var(--sp-3); }
  .panel__inner { gap: var(--sp-5); }

  /* The hero stays two columns down to 1024, and at 1025 the copy column had
     narrowed to 487px against 451px of trust chips — so they wrapped onto a
     second line. Give the copy a larger share here rather than shrinking the
     chips' type: the portrait beside it is already scaled to fit and loses
     nothing, and the row keeps a comfortable margin instead of 3px. */
  .hero__grid { grid-template-columns: 1.22fr 0.78fr; }

  .chips { column-gap: var(--sp-4); }
  .chips li { gap: 6px; }
  .chips svg { width: 16px; height: 16px; }
}

/* --------------------------------------------------------------------------
   ≤ 1024 — tablet landscape. Desktop nav gives way to the mobile sheet.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --header-h: 68px; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .stats { grid-template-columns: repeat(2, 1fr); }

  .facts__row { grid-template-columns: 170px 1fr; }

  .marquee__tile { width: 300px; }

  /* Chrome */
  .nav { display: none; }
  .burger { display: grid; }
  .site-header.is-stuck .site-header__bar { height: 60px; }
  .site-header__bar { justify-content: space-between; }

  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--sp-7) var(--sp-6); }
  .site-footer__brand { grid-column: 1 / -1; }

  /* Three columns need ~300px each to hold a title like "Sigiriya Rock
     Fortress (UNESCO Heritage)" on two lines. At tablet width they would
     be ~210px, so the long list steps down to two here and to one at 768. */
  .highlights--3 { grid-template-columns: repeat(2, 1fr); }
  .highlights--3 li:nth-child(3) { border-top: 1px solid var(--line); }

  .factbar { grid-template-columns: repeat(2, 1fr); }
  .factbar > div:nth-child(2) { border-right: 0; }
  .factbar > div:nth-child(-n+2) { border-bottom: 1px solid rgba(251,246,236,.1); }
  .listing { grid-template-columns: repeat(2, 1fr); }

  .feature-strip { grid-template-columns: repeat(2, 1fr); }
  .feature-strip li:nth-child(2) { border-right: 0; }
  .feature-strip li:nth-child(-n+2) { border-bottom: 1px solid rgba(251,246,236,.1); }

  /* Hero stacks: copy first, portrait beneath.
     This used to happen at 768, which left 769-1024 with a two-column hero
     whose copy column fell to ~410px — too narrow for the headline AND the
     trust chips, which wrapped onto a second line. Stacking at the same
     breakpoint where the desktop nav gives way to the mobile sheet keeps the
     page in one mode instead of two, and gives the copy the full width. */
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 400px; margin-inline: auto; }
  .hero__badge { position: static; max-width: none; width: 100%; margin-top: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   ≤ 768 — tablet portrait. The gap the reference design skipped entirely.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root { --sp-section: clamp(3rem, 8vw, 4.5rem); }

  .grid--2 { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .section__head { margin-bottom: var(--sp-6); }

  .review { padding: var(--sp-6) var(--sp-5); }

  .accordion__panel p { padding-right: var(--sp-5); }

  .partners__strip img { aspect-ratio: 1920 / 420; }

  .site-footer__inner { padding-block: var(--sp-8) var(--sp-6); }

  /* The portrait tightens again on a phone; the stacking itself happens at
     1024 — see that block. */
  .hero__visual { max-width: 340px; }

  /* Internal pages */
  .inquiry-layout { grid-template-columns: 1fr; }
  .cert-layout { grid-template-columns: 1fr; }
  .feature-post { grid-template-columns: 1fr; }
  .feature-post .card__media { aspect-ratio: 16 / 9; }
  .feature-post .card__body { padding: var(--sp-5); }
  .inquiry-aside { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
  .platforms { grid-template-columns: 1fr; }
  .page-hero__grid { grid-template-columns: 1fr; }
  .day { grid-template-columns: 1fr; gap: var(--sp-5); }
  .day:nth-child(even) .day__media { order: 0; }
  .day__media img { aspect-ratio: 16 / 9; }
  .highlights { grid-template-columns: 1fr; }
  .highlights li + li { border-top: 1px solid var(--line); }
  .highlights li:nth-child(2) { border-top: 1px solid var(--line); }

  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic > :first-child { grid-column: span 2; grid-row: auto; }
  .mosaic > :first-child .card__media { aspect-ratio: 2 / 1; }

  .payment { grid-template-columns: 1fr; }
  .quick-form__row { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   ≤ 640 — phone. Layouts are rebuilt, not shrunk.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-4); }
  .stat__num { font-size: var(--step-4); }

  /* Stacked CTAs go full width — thumb-friendly, no orphan buttons */
  .cluster--stack-sm { flex-direction: column; align-items: stretch; }
  .cluster--stack-sm .btn { width: 100%; }

  .section__head { margin-bottom: var(--sp-5); }

  /* A break that only applies once the cards sit side by side. On one
     column the card is full width and the title reads fine on a line. */
  .br-wide { display: none; }

  .facts__row { grid-template-columns: 1fr; gap: var(--sp-1); }

  .review { padding: var(--sp-5) var(--sp-4); }
  .review__text--clamp { -webkit-line-clamp: 9; }

  .accordion__trigger { font-size: var(--step-0); padding-block: var(--sp-4); gap: var(--sp-4); }
  .accordion__panel p { padding-right: 0; }

  .marquee__tile { width: 260px; }

  .partners__strip img { aspect-ratio: 1920 / 560; }

  .choice span { padding-inline: var(--sp-4); }

  /* Chrome — the header CTA is the one thing that must never disappear */
  .site-header__cta { display: none; }
  .logo__mark { width: 30px; height: 30px; }
  .logo__name { font-size: 1.16rem; }
  .logo__sub { font-size: 0.55rem; letter-spacing: 0.22em; }

  .site-footer__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .site-footer__watermark { width: 220px; height: 220px; right: -60px; }

  .factbar { grid-template-columns: 1fr; }
  .factbar > div { border-right: 0; border-bottom: 1px solid rgba(251,246,236,.1); }
  .factbar > div:last-child { border-bottom: 0; }
  .listing, .listing--2 { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .timeline > div { grid-template-columns: 1fr; gap: 0; }
  .timeline dt { margin-bottom: 2px; }
  .group-head { flex-direction: column; gap: var(--sp-1); }

  .feature-strip { grid-template-columns: 1fr; }
  .feature-strip li { border-right: 0; border-bottom: 1px solid rgba(251,246,236,.1); }
  .feature-strip li:last-child { border-bottom: 0; }

  .mosaic { grid-template-columns: 1fr; }
  .mosaic > :first-child { grid-column: auto; }
  .mosaic > :first-child .card__media { aspect-ratio: 3 / 2; }
  .mosaic > :first-child .h3 { font-size: var(--step-2); }

  .quick-form__row { grid-template-columns: 1fr; }
  .verify { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   ≤ 660 — the hero's two CTAs, which stay side by side further down than the
   generic .cluster--stack-sm rule allows.

   Two problems were in the way. Below 640 the generic rule stacked them full
   width even though they still fitted. And from 641 to about 658 the base
   .cluster wrapped them onto two ragged left-aligned lines, because their
   40px inline padding put the pair at 580px against a ~575px column — worse
   looking than either a clean row or a clean stack.

   Easing the padding to 24px brings the pair to 516px, and the flex-basis is
   set to the widest button's own content width: the row therefore forms
   exactly while both buttons can hold their labels, and breaks to full-width
   stacking the moment one cannot. No breakpoint arithmetic to go stale.
   -------------------------------------------------------------------------- */
@media (max-width: 660px) {
  .hero .cluster--stack-sm {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .hero .cluster--stack-sm .btn {
    flex: 1 1 16.5rem;
    width: auto;
    padding-inline: var(--sp-5);
  }
}

/* --------------------------------------------------------------------------
   ≤ 380 — 320/375 safety. Stop type and padding compounding into overflow.
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  :root { --gutter: 1rem; }

  .stats { grid-template-columns: 1fr; }

  .card__body { padding: var(--sp-4); }

  .btn { padding-inline: var(--sp-5); }
  .btn--lg { min-height: 52px; padding: var(--sp-4) var(--sp-6); font-size: var(--step-0); }

  .marquee__tile { width: 232px; }

  .choice-grid { gap: var(--sp-2); }
}

/* --------------------------------------------------------------------------
   Pointer-coarse — give every tap target real estate regardless of width
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .link { padding-block: var(--sp-2); }
  .dots button { width: 32px; height: 32px; }
  .dots button::before { width: 10px; height: 10px; }
}

/* --------------------------------------------------------------------------
   Print — itineraries get printed by travellers more than you'd think
   -------------------------------------------------------------------------- */
@media print {
  :root { --sp-section: 1.5rem; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .btn, .dots, .marquee, .carousel { display: none !important; }
  .card, .trust-card, .review { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .accordion__panel { grid-template-rows: 1fr !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}