/* ==========================================================================
   responsive.css — mobile-first breakpoints (min-width)
   (home hero breakpoints live with the hero in style.css)
   ========================================================================== */

/* ≥ 600px — large phones / small tablets */
@media (min-width: 600px) {
  .masonry { columns: 2; }
  .spec-strip { display: grid; grid-template-columns: repeat(4, 1fr); }
  .dest-list { grid-template-columns: repeat(2, 1fr); }
  .form__grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
  .hud-coords { display: inline; }
  .page-hero { min-height: 380px; }
  .page-hero .lead { font-size: 16px; }
  .page-hero .btn-row .btn + .btn { display: inline-flex; }
}

/* ≥ 768px — tablets */
@media (min-width: 768px) {
  :root { --header-h: 76px; --sec: 64px; }
  .section--compact { --sec: 52px; }
  .brand img { width: 148px; }
  .hotspot__dot { width: 28px; height: 28px; font-size: 10px; box-shadow: 0 0 0 6px rgba(255, 106, 43, 0.22); }
  .fab a { width: 54px; height: 54px; }
  .exp__list { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
  .split { grid-template-columns: 1fr 1fr; gap: 48px; }
  .split--reverse .split__media { order: 2; }
  .cols { grid-template-columns: 0.9fr 1.1fr; gap: 48px; }
  .contact-grid { grid-template-columns: 0.85fr 1.15fr; gap: 48px; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-map { grid-column: 1 / -1; aspect-ratio: 21 / 6; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
  .why__item { grid-template-columns: 84px 1fr; }
  .page-hero { min-height: 400px; padding-bottom: 40px; }
  .page-hero--short { min-height: 360px; }
}

/* ≥ 1024px — laptop / desktop */
@media (min-width: 1024px) {
  :root { --sec: 80px; }
  .section--compact { --sec: 60px; }
  .exp__stage { max-width: 1040px; margin-left: auto; margin-right: auto; }
  .stories-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
  .stories-wrap .section-head { margin-bottom: 0; }

  .exp__list { grid-template-columns: repeat(5, 1fr); column-gap: 24px; }
  .exp__item { grid-template-columns: 1fr; border-bottom: 0; }
  .exp__item .num { grid-row: auto; }

  /* Tour: tabs as vertical list on the left */
  .tour { grid-template-columns: 300px 1fr; grid-template-areas: "tabs frame" "panel frame"; gap: 28px 56px; align-items: start; }
  .tour__tabs { grid-area: tabs; }
  .tour__viewport { grid-area: frame; position: sticky; top: calc(var(--header-h) + 20px); }
  .tour__panels { grid-area: panel; }
  .tour__tabs { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 0; border-top: 1px solid var(--line-d); }
  .tour__tab { border: 0; border-bottom: 1px solid var(--line-d); padding: 15px 0; gap: 16px; position: relative; }
  .tour__tab::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--coral); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
  .tour__tab[aria-selected="true"] { background: none; color: var(--white); padding-left: 10px; }
  .tour__tab[aria-selected="true"] small { color: var(--coral); }
  .tour__tab[aria-selected="true"]::after { transform: scaleX(1); }
  .tour__tab { transition: padding 0.5s var(--ease), color 0.3s; }

  /* Route map: winding SVG on desktop */
  .route__rail { display: none; }
  .route__svg { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
  .route__svg path { fill: none; vector-effect: non-scaling-stroke; }
  .route__svg .route__base { stroke: var(--line-d2); stroke-width: 2; stroke-dasharray: 4 8; }
  .route__svg .route__draw { stroke: var(--coral); stroke-width: 3; }
  .route__stops { gap: 0; }
  .stop { padding: 0; min-height: 270px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 96px; }
  .stop__marker { left: 50%; top: 50%; margin: -12px 0 0 -12px; }
  .stop__body { grid-column: 1; text-align: right; justify-self: end; }
  .stop__body p { margin-left: auto; }
  .stop__media { grid-column: 2; margin: 0; }
  .stop:nth-child(even) .stop__body { grid-column: 2; grid-row: 1; text-align: left; justify-self: start; }
  .stop:nth-child(even) .stop__body p { margin-left: 0; }
  .stop:nth-child(even) .stop__media { grid-column: 1; grid-row: 1; justify-self: end; }

  /* Why: sticky intro + offset list */
  .why { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; }
  .why__intro { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
  .why__list { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .why__item:nth-child(even) { transform: translateY(36px); }
  .why__list { padding-bottom: 36px; }
  .why__item { grid-template-columns: 1fr; align-content: start; }
  .why__num { grid-row: auto; margin-bottom: 10px; }

  .masonry { columns: 3; column-gap: 16px; }
  .masonry__item { margin-bottom: 16px; }

  .page-hero { min-height: clamp(400px, 46vh, 500px); padding-bottom: 40px; }
  .page-hero--short { min-height: clamp(380px, 45vh, 460px); }
  .page-hero .lead { font-size: 17px; }
  .spec-row { grid-template-columns: 72px 1fr 1.2fr; align-items: baseline; }
  .spec-row p { grid-column: 3; }
  .steps { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .step { margin: 0; padding: 48px 24px 0 0; border-left: 0; border-top: 1px solid var(--line-d); }
  .step::before { left: 0; top: -19px; }
  .dest-list { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 0.8fr 1fr 1.3fr; }
  .footer-map { grid-column: auto; aspect-ratio: 4 / 3; }
  .site-footer { padding: 64px 0 36px; }
  .fab { right: 24px; bottom: 24px; }
}

/* Full navigation needs ~1200px for eight links on one line */
@media (min-width: 1200px) {
  .nav { display: block; }
  .header-cta { display: inline-flex; }
  .menu-toggle, .mobile-nav { display: none; }
}
@media (min-width: 1360px) {
  .nav__link { font-size: 14px; }
}

/* Touch devices: captions always visible */
@media (hover: none) {
  .masonry__item figcaption { opacity: 1; transform: none; }
}

/* Short landscape phones */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 560px; }
}