/* RideNord — homepage layer (stage 1)
   Desktop: Book now button, quick picks, trust strip.
   Phones: full-screen hero, booking form as a bottom sheet, bottom tab bar.
   Load AFTER style.css. Needs assets/home.js (loaded BEFORE i18n.js). */

/* ---------- all widths: header Book now ---------- */
.book-now{
  display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap;
  background:var(--gold);color:#14100A;padding:10px 20px;border-radius:100px;font-weight:700;font-size:.92rem;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.book-now:hover{background:#D2B06B;transform:translateY(-1px)}
.site-header .lang-switch{order:3}
.site-header .book-now{order:4;margin-left:14px}
.site-header .call{order:5;margin-left:10px}

/* ---------- all widths: quick picks under the headline ---------- */
.quick{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.quick button{
  font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;color:var(--sand);
  background:rgba(8,14,16,.4);border:1px solid rgba(224,198,140,.55);border-radius:100px;padding:10px 18px;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.quick button:hover,.quick button:focus-visible{background:var(--gold);color:#14100A;border-color:var(--gold);outline:none}

/* ---------- all widths: trust strip ---------- */
.trust{padding:0;background:var(--night);border-top:1px solid rgba(255,255,255,.06)}
.trust-list{list-style:none;margin:0;padding:22px 0;display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.trust-list li{display:flex;flex-direction:column;gap:2px;font-size:.8rem;line-height:1.35;color:#98A39F}
.trust-list b{color:var(--sand);font-size:.9rem}
@media (max-width:980px){ .trust-list{grid-template-columns:repeat(3,1fr)} }
@media (max-width:681px){ .site-header .nav{order:2} }

/* booking form needs a visible nudge when a quick pick fills it */
.panel.rn-flash{box-shadow:0 0 0 2px var(--gold),0 24px 60px rgba(0,0,0,.42);transition:box-shadow .3s}

@media (max-width:680px){

  /* ---------- base ---------- */
  .wrap{padding:0 18px}
  section{padding:40px 0}
  .section-head{margin-bottom:18px}
  .section-head p{font-size:.95rem}
  h2{font-size:1.75rem}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}   /* room for the tab bar */
  body.sheet-open{overflow:hidden}

  /* ---------- header: slim, logo inside the bar ---------- */
  .site-header .wrap{height:58px;gap:8px}
  .logo{height:58px}
  .logo img,.logo svg{height:48px;margin:0;filter:none}
  .nav-toggle,.nav{display:none!important}          /* the tab bar replaces the menu */
  .lang-switch{margin:0 0 0 auto;padding:6px 8px;order:3}
  .call{order:5;margin-left:0}
  .call{
    display:inline-flex;width:40px;height:40px;padding:0;justify-content:center;font-size:0;border-radius:50%;
  }
  .call::before{
    content:"";width:18px;height:18px;background:#0B1113;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  /* ---------- hero: one screen, photo first ---------- */
  .hero{padding:0;min-height:calc(100svh - 58px - 62px);display:flex;align-items:flex-end}
  .hero::before{background:linear-gradient(180deg,rgba(8,14,16,.25) 0%,rgba(8,14,16,.35) 40%,rgba(8,14,16,.95) 100%)}
  .hero .wrap{display:block;width:100%;padding-bottom:26px}
  .hero-copy{padding-top:0}
  .kicker{margin-bottom:12px;background:rgba(8,14,16,.45)}
  .hero h1{font-size:2.05rem;line-height:1.06}
  .hero .lede{font-size:.95rem;margin-top:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hero-facts{display:none}
  .hero .lede{-webkit-line-clamp:2}
  .book-now{display:none}
  .quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
  .quick button{padding:10px 4px;font-size:.78rem;line-height:1.2;border-radius:10px;min-height:48px}
  .trust-list{grid-template-columns:1fr 1fr;gap:14px 16px;padding:20px 0}
  .rn-cta{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:20px}
  .rn-cta .btn{min-height:54px;font-size:1.02rem}
  .rn-cta a.rn-call{
    display:flex;align-items:center;justify-content:center;padding:0 20px;border-radius:100px;
    border:1px solid rgba(255,255,255,.35);color:#EDF1EE;text-decoration:none;font-weight:700;
  }
  .rn-trust{display:flex;gap:14px;margin-top:14px;font-size:.78rem;color:#AEB9B5;flex-wrap:wrap}
  .rn-trust span::before{content:"\2713  ";color:var(--gold)}

  /* ---------- booking form as a bottom sheet ---------- */
  .panel-shell{
    position:fixed;left:0;right:0;bottom:0;z-index:120;max-height:90svh;overflow-y:auto;
    opacity:1;animation:none;transform:translateY(105%);visibility:hidden;
    transition:transform .32s var(--ease),visibility 0s linear .32s;   /* hidden sheet is not focusable */
    overscroll-behavior:contain;
  }
  body.sheet-open .panel-shell{transform:none;visibility:visible;transition:transform .32s var(--ease)}
  .panel{border-radius:18px 18px 0 0;background:#0E1A1D;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0}
  .rn-sheet-top{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 4px;background:#0E1A1D;color:#EDF1EE;font-weight:700}
  .rn-sheet-top::before{content:"";position:absolute;left:50%;top:6px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:rgba(255,255,255,.25)}
  .rn-close{background:none;border:0;color:#EDF1EE;font-size:1.6rem;line-height:1;padding:4px 6px;cursor:pointer}
  .rn-scrim{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s}
  body.sheet-open .rn-scrim{opacity:1;pointer-events:auto}
  .panel-body{padding:14px 16px calc(20px + env(safe-area-inset-bottom,0px))}
  .panel .row{grid-template-columns:1fr 1fr;gap:10px}
  .panel .row:has(select[name=vehicle]){grid-template-columns:.62fr 1.38fr}
  .panel .field{margin-bottom:10px}
  .panel input,.panel select,.panel textarea{font-size:16px;padding:11px 10px;min-height:46px}  /* no iOS zoom */
  .panel .btn{min-height:52px;font-size:1rem}
  .tab{font-size:.8rem;padding:12px 4px}

  /* ---------- services: compact list, price on the right ---------- */
  .service-x{
    display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline;padding:15px 16px;
  }
  .service-x h3{font-size:1.06rem;margin:0}
  .service-x .price{grid-column:2;grid-row:1;padding:0;margin:0;font-size:.8rem;text-align:right;white-space:nowrap}
  .service-x>p{grid-column:1 / -1;padding-right:18px;font-size:.86rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .service-x details{display:none}
  .service-x::after{content:"\203A";position:absolute;right:14px;bottom:12px;color:var(--gold);font-size:1.2rem}

  /* ---------- fleet: horizontal swipe ---------- */
  .fleet-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -18px;padding:0 18px 6px;scroll-padding-left:18px;scrollbar-width:none}
  .fleet-row::-webkit-scrollbar{display:none}
  .fleet-item{flex:0 0 78%;scroll-snap-align:start}
  .fleet-item img{height:170px}

  /* ---------- tours ---------- */
  .tours-grid{gap:18px}
  .tours h2{margin-bottom:12px}
  .tours .btn-ghost{margin-top:12px}
  .tour-list h3{font-size:1.08rem}
  .tour-list span{font-size:.84rem}

  /* ---------- rates: table becomes stacked rows, nothing cut off ---------- */
  .rates thead{display:none}
  .rates,.rates tbody{display:block}
  .rates tr{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .rates tbody tr:last-child{border-bottom:0}
  .rates th,.rates td{padding:0!important;border:0!important}
  .rates td:first-child{grid-column:1 / -1;font-size:.92rem;line-height:1.35}
  .rates td:nth-child(2){font-size:.82rem;color:var(--ink-soft)}
  .rates td:last-child{font-size:.92rem;color:#8E7237;white-space:nowrap}

  /* ---------- steps: horizontal ---------- */
  .steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -18px;padding:0 18px;scrollbar-width:none;scroll-padding-left:18px}
  .steps::-webkit-scrollbar{display:none}
  .step{flex:0 0 74%;scroll-snap-align:start}
  .info-grid{gap:18px}

  /* ---------- bottom tab bar ---------- */
  .wa{display:none}
  .rn-tabs{
    position:fixed;left:0;right:0;bottom:0;z-index:100;display:grid;grid-template-columns:repeat(5,1fr);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    background:rgba(8,14,16,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.1);
  }
  .rn-tabs a{
    display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0;
    font-size:.68rem;font-weight:700;color:#AFBAB6;text-decoration:none;
  }
  .rn-tabs a.rn-primary{color:var(--gold)}
  .rn-tabs a.rn-wa{color:#25D366}
  .rn-tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .rn-tabs a.rn-wa svg{fill:currentColor;stroke:none}
}

/* desktop never sees the mobile-only parts */
@media (min-width:681px){ .rn-tabs,.rn-cta,.rn-trust,.rn-sheet-top,.rn-scrim{display:none!important} }

/* ---------- stage 2: rates as price zones ---------- */
.zones-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start}
.zone-map{margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line)}
.zone-map img{display:block;width:100%;height:auto}
.zone-check{background:var(--night);color:#EDF1EE;border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:16px}
.zone-check label{display:block;font-weight:700;margin-bottom:8px}
.zc-row{display:flex;gap:8px}
.zc-row input{flex:1;min-width:0;font:inherit;font-size:16px;padding:11px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#EDF1EE}
.zc-row .btn{flex:0 0 auto;width:auto;padding:0 22px;white-space:nowrap}
.zc-out{margin:10px 0 0;min-height:1.4em;font-size:.92rem;color:var(--sand)}
.zones-table td:first-child b{color:#8E7237;margin-right:2px}
@media (max-width:980px){ .zones-grid{grid-template-columns:1fr} }
@media (max-width:680px){
  .zone-map{margin:0 -18px;border-radius:0;border-left:0;border-right:0;overflow-x:auto}
  .zone-map img{width:760px;max-width:none}            /* swipe the map sideways on phones */
  .zones-table tr{grid-template-columns:1fr 1fr}
  .zones-table td:nth-child(2),.zones-table td:nth-child(3){color:#8E7237;font-size:.92rem;text-align:left}
  .zones-table td[data-v]::before{content:attr(data-v) " ";color:var(--ink-soft);font-size:.8rem}
}