/* v29 — Stage 2: premium UI/UX layer. Visual-only: no markup, data or logic is changed.
   Loaded LAST so it refines main/components/design-v22/sections-v23. */
:root{--r-xl:24px;--sp1:8px;--sp2:16px;--sp3:24px;--sp4:40px;--ease:cubic-bezier(.22,.8,.3,1);--sh3:0 18px 44px #0e1a1f26}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{-webkit-font-smoothing:antialiased}
img{max-width:100%}

/* ---------- Header & navigation ---------- */
header{position:sticky;top:0;z-index:50;-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);box-shadow:0 1px 0 #ffffff14,0 6px 22px #0e1a1f33}
header .hd{min-height:64px;gap:10px}
nav a{border-radius:999px;transition:background .2s,color .2s}
nav a:not(.cta):hover{background:#ffffff1f}
nav a.cta{border-radius:999px;box-shadow:0 6px 16px #0e1a1f33;transition:transform .2s var(--ease),filter .2s}
nav a.cta:hover{transform:translateY(-1px);filter:brightness(1.06)}
.ib{border-radius:14px;min-width:44px;min-height:44px;transition:background .2s,transform .15s}
.ib:active{transform:scale(.94)}
@media(max-width:1060px){
  nav{border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--sh3);max-height:calc(100vh - 70px);overflow:auto;gap:2px}
  nav.open{animation:v29d .22s var(--ease)}
  nav a{padding:13px 16px;min-height:48px;display:flex;align-items:center}
}
@keyframes v29d{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- Buttons, forms: one consistent size & radius ---------- */
.btn{min-height:48px;border-radius:var(--r-sm);transition:transform .15s var(--ease),filter .2s,box-shadow .2s}
.btn:hover{box-shadow:var(--sh2)}.btn:active{transform:scale(.98)}
.fld input,.fld select,.cs select,.cs input,.xf select,.xf input{min-height:52px;border-radius:var(--r-sm)}
.bc{border-radius:var(--r-lg);box-shadow:var(--sh2)}
.blk{border-radius:var(--r-xl)}
.blk h2{text-wrap:balance}
.lead{max-width:64ch;margin-left:auto;margin-right:auto;text-wrap:pretty}

/* ---------- Card grids: equal heights, deliberate columns per device ---------- */
.xg,.tgrid,#fc,#fv{align-items:stretch}
.xc,.tcd,.card{height:100%}
/* Tour / club cards (.xg): 2 on phones, 3 on tablets, 4 on desktop */
.xg{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:640px){.xg{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media(min-width:1024px){.xg{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.xc{border-radius:var(--r-md)}
.xc .xi{aspect-ratio:4/3}
.xc .xt b{min-height:2.5em}
@media(max-width:559px){
  .xc .xt{padding:10px 10px 12px}.xt b{font-size:14px}.xt small{font-size:12px}
  .xd{height:40px;font-size:13px;border-radius:12px}
}
/* Tour builder cards (.tgrid): 3 on phones, 3 on tablets, 4 on desktop */
.tgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(min-width:900px){.tgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.tcd{border-radius:var(--r-md)}
.tcd .art{border-radius:var(--r-md) var(--r-md) 0 0}
.tb b{overflow-wrap:anywhere}
@media(max-width:559px){
  .tcd .art{height:64px}
  .tb{padding:8px 8px 10px}.tb small{font-size:9.5px;letter-spacing:.03em}.tb b{font-size:12.5px;line-height:1.25}
  .tb em{display:none}
  .tf{flex-direction:column;align-items:stretch;gap:6px;margin-top:6px}.tf i{font-size:13px}
  .tf u{text-align:center;padding:6px 4px;font-size:11px}
  .tcd .dy{left:6px;top:6px;font-size:10px}.tcd .ck{width:22px;height:22px;right:6px;top:6px}
}
/* Fleet: vehicles 3 per row on phones, 4 on desktop; categories 2 / 3 / 4 */
#fv{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#fc{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:640px){#fc{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media(min-width:1024px){#fv,#fc{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
#fv .card,#fc .card{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--r-md);box-shadow:var(--sh1);transition:transform .25s var(--ease),box-shadow .25s}
#fv .card:hover,#fc .card:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
#fv .card h3,#fc .card h3{overflow-wrap:anywhere}
@media(max-width:559px){#fv .card{padding:12px 8px}#fv .card h3{font-size:13px}#fv .card p{font-size:12px}#fc .card{padding:14px 12px}#fc .card .ci{width:44px;height:44px}}

/* ---------- Collapsible panels (toggled by js/ui-v29.js) ---------- */
.bx.v29c>h3:first-child{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;user-select:none;-webkit-tap-highlight-color:transparent}
.bx.v29c>h3:first-child:after{content:"";flex:none;width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease);opacity:.6}
.bx.v29c.shut>h3:first-child:after{transform:rotate(-45deg)}
.bx.v29c>.v29b{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s var(--ease)}
.bx.v29c.shut>.v29b{grid-template-rows:0fr}
.bx.v29c>.v29b>.v29i{min-height:0;overflow:hidden}
.bx.v29c.shut>.v29b>.v29i{visibility:hidden}

/* ---------- Motion & accessibility ---------- */
:is(a,button,input,select,summary,.xd,.tcd):focus-visible{outline:3px solid var(--mint);outline-offset:2px}
@media(hover:none){.xc:hover,.tcd:hover,#fv .card:hover,#fc .card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.xc,.tcd,.btn,nav.open,.bx.v29c>.v29b{animation:none!important;transition:none!important}}
@media(min-width:1280px){.wrap{padding-left:8px;padding-right:8px}}

/* compact tour-builder cards: tidy overlays, no clipped text */
@media(max-width:559px){
  .tcd .art .wl{width:26px!important;height:26px!important;right:5px!important;top:5px!important;left:auto!important}
  .tcd .art .wl svg{width:14px!important;height:14px!important}
  .tcd .dy{left:5px;top:5px;padding:3px 7px;font-size:10px;border-radius:999px}
  .tcd .ck{display:none}
  .tf i{white-space:nowrap;font-size:11.5px;letter-spacing:-.01em}
  .tf u{white-space:normal;line-height:1.2;font-size:10.5px;padding:6px 3px;border-radius:10px}
}