/* ==========================================================================
   Horizone — home page
   ========================================================================== */

/* ---------- hero: 100svh, image inset by half the gutter ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:calc(var(--header-h) + 20px) calc(clamp(20px,3.6vh,44px) + var(--hero-inset));
}
.hero-media{position:absolute;inset:var(--hero-inset);z-index:-1;border-radius:var(--r-xl);overflow:hidden;background:#27313a}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 8%,rgba(0,0,0,.02) 22%,rgba(0,0,0,.06) 50%,rgba(0,0,0,.34) 76%,rgba(0,0,0,.5) 100%);
}
.hero-body{display:flex;flex-direction:column;gap:clamp(14px,2vw,22px)}
.hero-kicker{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:.78rem}
.hero-kicker b{display:inline-flex;align-items:center;gap:4px;background:#fff;color:var(--ink);border-radius:999px;padding:2px 8px;font-size:.72rem;font-weight:600}
.hero-kicker .ico{width:12px;height:12px}
.hero-title{color:#fff;font-weight:500;letter-spacing:-.04em;font-size:clamp(2.1rem,1.3rem + 2.8vw,3.6rem);line-height:1.05;max-width:24ch;text-shadow:0 2px 26px rgba(0,0,0,.26)}

.cat-filter{display:flex;gap:7px;flex-wrap:wrap;max-width:100%;min-width:0}
.hero-search-slot:empty{min-height:128px}

/* ---------- category tiles ---------- */
.cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.cat{position:relative;display:flex;flex-direction:column;background:var(--studio);border-radius:var(--r-lg);padding:14px 14px 0;overflow:hidden;transition:background-color .24s var(--ease)}
.cat b{font-size:.95rem;font-weight:600;letter-spacing:-.02em}
.cat small{font-size:.76rem;color:var(--muted)}
.cat img{margin:4px -14px 0;width:calc(100% + 28px);max-width:none;aspect-ratio:10/7;object-fit:cover}

/* ---------- steps ---------- */
.steps{display:grid;column-gap:clamp(24px,3vw,48px);row-gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}
.step{border-top:1px solid var(--ink);padding-top:18px}
.step-no{display:block;font-size:.8rem;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.step h3{margin-top:22px;font-size:1.08rem;font-weight:600;letter-spacing:-.02em}
.step p{margin-top:8px;color:var(--muted);font-size:.9rem;max-width:40ch}

/* ---------- cities ---------- */
.city-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}
.city-card{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/5;padding:16px;border-radius:var(--r-lg);overflow:hidden;color:#fff;background:#222}
.city-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s var(--ease)}
.city-card:hover img{transform:scale(1.035)}
.city-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 100%)}
.city-card small{font-size:.74rem;color:rgba(255,255,255,.78)}
.city-card b{font-size:1.15rem;font-weight:600;letter-spacing:-.02em}
.city-card span{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:.78rem;color:rgba(255,255,255,.85)}
.city-card span .ico{width:16px;height:16px}
.cities{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- deals carousel ---------- */
.deals{--deal-gap:16px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*var(--deal-gap))/3);gap:var(--deal-gap);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.deals::-webkit-scrollbar{display:none}
.deal{position:relative;scroll-snap-align:start;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/11;min-height:250px;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,1.5vw,22px);color:#fff;isolation:isolate}
.deal--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.deal--photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.7) 100%)}
.deal-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.deal h3{font-size:clamp(.98rem,.9rem + .35vw,1.14rem);font-weight:500;letter-spacing:-.025em;line-height:1.28;max-width:23ch}
.tag{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:4px 12px;font-size:.7rem;font-weight:500}
.deal-code{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;letter-spacing:.04em;background:#fff;color:var(--ink);border-radius:var(--r-sm);padding:6px 10px;position:relative;z-index:2}
.deal-code .ico{width:13px;height:13px}
.deal--dark{background:var(--ink)}
.deal--accent{background:linear-gradient(145deg,#1b1b1b 0%,#2a1a0f 42%,#8a3d0a 100%);justify-content:space-between}
.deal--accent .valid{align-self:flex-end;font-size:.72rem;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:4px 11px}
.deal-accent-body{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.deal-mark{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:var(--accent);margin-bottom:8px}
.deal-mark .ico{width:15px;height:15px;fill:#fff;stroke:none}
.deal-lead{font-size:.85rem;line-height:1.35;color:rgba(255,255,255,.9);max-width:30ch}
.deal-big{font-size:clamp(2.4rem,1.6rem + 2.8vw,3.2rem);font-weight:600;letter-spacing:-.045em;line-height:1}
.deal-fine{font-size:.74rem;color:rgba(255,255,255,.74);margin-bottom:6px}
.deal-link::after{content:"";position:absolute;inset:0;z-index:1}

/* ---------- logos ---------- */
.logos{padding-block:clamp(24px,3vw,40px);border-block:1px solid var(--line-2)}
.logos-label{text-align:center;font-size:.74rem;color:var(--muted-2);letter-spacing:.05em;text-transform:uppercase;margin-bottom:18px}
.logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(20px,3.6vw,56px);color:#bfbfbf}
.logo-row li{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:600;letter-spacing:-.02em}
.logo-row svg{width:20px;height:20px}

/* ---------- why / stats ---------- */
.why-shell{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3vw,56px);align-items:start}
.why-list{margin-top:clamp(22px,2.4vw,32px);border-bottom:1px solid var(--line)}
.why-list li{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1.6fr);gap:6px 24px;padding:16px 0;border-top:1px solid var(--line)}
.why-list h3{font-size:.94rem;font-weight:600;letter-spacing:-.02em}
.why-list p{color:var(--muted);font-size:.88rem}

/* ---------- banner ---------- */
.banner-sec{padding-block:clamp(8px,1.6vw,20px)}
.banner{position:relative;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;min-height:clamp(320px,42vw,480px);display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(26px,4.4vw,64px)}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 54%;z-index:-2}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.46)),radial-gradient(58% 56% at 50% 50%,rgba(0,0,0,.42),rgba(0,0,0,0) 74%)}
.banner-body{color:#fff;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(720px,100%)}
.banner-body h2{font-size:clamp(1.45rem,1rem + 2vw,2.4rem);font-weight:500;letter-spacing:-.035em;line-height:1.16}
.banner-body p{color:rgba(255,255,255,.82);font-size:.94rem;max-width:44ch}
.banner-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn-glass{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);color:#fff}
.btn-glass:hover{background:rgba(255,255,255,.22)}

/* ---------- reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.review{background:var(--surface);border-radius:var(--r-lg);padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;gap:14px}
.review blockquote{font-size:.93rem;letter-spacing:-.012em;line-height:1.5}
.review figcaption{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:4px}
.review figcaption img{width:38px;height:38px;border-radius:999px;object-fit:cover;flex:none}
.review figcaption span{display:flex;flex-direction:column}
.review figcaption strong{font-size:.87rem;font-weight:600}
.review figcaption em{font-style:normal;font-size:.78rem;color:var(--muted)}
.rating-sum{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--muted)}
.rating-sum strong{font-size:1.5rem;font-weight:600;color:var(--ink);letter-spacing:-.03em}

/* ---------- faq ---------- */
.faq-shell{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(22px,3vw,56px);align-items:start}
.faq-intro .btn{margin-top:18px}

/* ---------- responsive ---------- */
@media (max-width:1360px){
  .deals{grid-auto-columns:calc((100% - var(--deal-gap))/2)}
  .cats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px){
  .hero{padding-block:clamp(190px,34vw,330px) calc(clamp(20px,3vh,36px) + var(--hero-inset))}
  .why-shell,.faq-shell{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;row-gap:22px}
  .step h3{margin-top:10px}
  .city-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .city-card{aspect-ratio:16/11}
}
@media (max-width:860px){
  .reviews{grid-template-columns:1fr}
  .hero-title{max-width:16ch}
}
@media (max-width:680px){
  .hero{padding-block:clamp(210px,54vw,320px) calc(12px + var(--hero-inset))}
  /* a full-height portrait crop only shows a sliver of the car, and the booking panel
     covers the lower half anyway — so the photo takes the top band, framed on the car,
     and fades into the dark panel area below */
  .hero-media{background:#141619}
  .hero-media img{height:43%;object-position:61% center;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .deals{grid-auto-columns:86%}
  .deal{aspect-ratio:4/3}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logo-row{gap:18px 28px}
  .logo-row li{font-size:.92rem}
}
@media (max-width:480px){
  .why-list li{grid-template-columns:1fr}
  .cat-filter{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;flex-wrap:nowrap;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .cat-filter::-webkit-scrollbar{display:none}
  .cat-filter .chip{white-space:nowrap}
  .city-cards{grid-template-columns:1fr 1fr;gap:10px}
  .city-card{aspect-ratio:4/5;padding:12px}
}