/* ==========================================================================
   RESPONSIVE — loaded last so it wins over base/components/sections/tiers.
   ========================================================================== */

/* ===== Chrome height constants per breakpoint =====
   Every top offset in the app derives from these three numbers, so they are
   declared, never measured. If you change a bar's contents, change its
   height here too — don't reintroduce runtime measurement. */

@media (max-width:1080px){
  .nav-item{ padding:10px 9px; font-size:.82rem; }
}

/* the demo-bar label is the first thing to go — it's showcase chrome,
   not client content, and dropping it keeps the bar to one row */
@media (max-width:900px){
  .demo-label{ display:none; }
  .demo-bar .wrap{ justify-content:flex-end; }
}

@media (max-width:980px){
  /* keeps the picker strip to a single 48px row */
  .pick-bar-note{ display:none; }
}

/* Short laptop screens: the Premium hero has to keep the featured portrait AND
   the switcher row inside one screen, so both shrink rather than overflow. */
@media (min-width:981px) and (max-height:860px){
  html[data-tier="premium"] .hero-thumb-wrap{ width:210px; height:265px; margin-top:20px; }
  html[data-tier="premium"] .dest-pill-thumb{ width:190px; height:126px; }
  html[data-tier="premium"] .dest-switcher{ gap:24px; bottom:36px; }
  html[data-tier="premium"] .hero-content{ padding-bottom:32px; }
}
@media (min-width:981px) and (max-height:740px){
  html[data-tier="premium"] .hero-thumb-wrap{ display:none; }
}

@media (max-width:600px){
  :root{ --bar-h:104px; }
  html[data-tier="basic"]{ --pick-h:72px; }

  .demo-bar .wrap{ flex-direction:column; justify-content:center; gap:8px; }
  .demo-right{ flex-direction:column; align-items:stretch; gap:8px; width:100%; }
  .ticket-switch{ justify-content:space-between; }
  .ticket-switch button{ padding:9px 12px; flex:1; justify-content:center; }
  .owner-toggle{ justify-content:center; }

  .pick-bar .wrap{ flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; }
  .pick-bar-label span{ display:none; }
}

@media (max-width:1300px){
  /* pull the review arrows inward before they hang off-screen, but keep them
     clear of the card edge */
  .slider-arrow.prev{ left:-18px; }
  .slider-arrow.next{ right:-18px; }
}

@media (max-width:980px){
  nav.main-nav{ display:none; }
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-nav{ display:flex; }

  .about-grid, .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .card-grid, .card-grid.cols-3{ grid-template-columns:repeat(2,1fr); }
  .dest-grid, .blog-grid, .about-values{ grid-template-columns:repeat(2,1fr); }

  /* one review per page below tablet, so a slide is never a cramped 3-up */
  .review-grid{ grid-template-columns:1fr; }
  .car-track > *{ flex-basis:clamp(230px, 62%, 280px); }
  .car-btn{ top:-58px; }
  .stat-row{ grid-template-columns:repeat(2,1fr); gap:24px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .gallery-tile.wide{ grid-column:span 2; }

  .hero-content h1,
  html[data-tier="basic"] .hero-content h1{ font-size:2.4rem; }
  .block{ padding-top:70px; padding-bottom:70px; }

  .post-layout{ grid-template-columns:1fr; gap:36px; }
  .post-sidebar{ position:static; }

  .visa-intro-grid{ grid-template-columns:1fr; gap:40px; }
  .post-hero{ height:220px; }
  .post-body h1{ font-size:1.9rem; }

  /* The hero still fills a screen on mobile — min-height carries over. What
     changes is the Premium composition: it stacks instead of using the desktop
     absolute layout, and is allowed to grow past the fold rather than clip the
     switcher row off the bottom. */
  html[data-tier="premium"] .hero{ flex-direction:column; align-items:stretch; }
  html[data-tier="premium"] .hero-inner{ padding-left:0; }
  html[data-tier="premium"] .hero-content{ padding:130px 24px 32px; max-width:none; }
  html[data-tier="premium"] .hero-thumb-wrap{ width:180px; height:230px; margin:26px 0 0; }
  html[data-tier="premium"] .dest-switcher{
    position:static; margin:24px 0 0; padding:0 24px 6px; max-width:none;
    justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; gap:18px;
    /* fade the row's own trailing edge so it reads as "scroll for more"
       rather than an abrupt cut — a mask, not a painted-on box, so it
       works over the hero photo underneath */
    -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent 100%);
    mask-image:linear-gradient(90deg, #000 88%, transparent 100%);
  }
  .dest-pill{ flex-shrink:0; }
  .dest-pill-thumb{ width:150px; height:100px; }

  .pick-bar .wrap{ gap:10px; }
  .pick-bar-note{ margin-left:0; flex-basis:100%; }
}

@media (max-width:600px){
  /* .cols-2 must be listed explicitly — it out-specifies a bare .card-grid */
  .card-grid, .card-grid.cols-3, .card-grid.cols-2,
  .dest-grid, .blog-grid, .review-grid, .about-values{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr; grid-auto-rows:200px; }
  .gallery-tile.wide, .gallery-tile.tall{ grid-column:auto; grid-row:auto; }

  .brand-name span{ display:none; }
  .visa-stats{ grid-template-columns:1fr; }
  html[data-tier="premium"] .hero-thumb-wrap{ display:none; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost{ text-align:center; }
  .footer-grid{ grid-template-columns:1fr; }
  .review-summary{ flex-direction:column; text-align:center; gap:8px; }
}