/* =========================================================
   Vecsés Dental — főoldali hero-slider (Clean 1.x Final)
   Saját, nulláról írt komponens. Nulla külső függőség.
   Prefix: hs-  (0 ütközés a közös rendszerrel)
   ========================================================= */

.hs{
  position:relative;
  padding-block:clamp(34px,4vw,60px) clamp(52px,6vw,84px);
  background:radial-gradient(120% 90% at 14% 0%,#eef7fc 0%,#fff 62%);
  overflow:hidden;
}
.hs::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(26,140,190,.10),transparent) 92% 14%/260px 260px no-repeat,
    radial-gradient(closest-side,rgba(26,140,190,.06),transparent) 99% 70%/180px 180px no-repeat;
}

/* Minden dia UGYANABBAN a rácscellában ül -> a konténer magassága a
   legmagasabb diához igazodik, így diaváltáskor nincs elmozdulás (CLS 0). */
.hs__viewport{position:relative;z-index:1;display:grid}
.hs__slide{
  grid-area:1/1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(28px,5vw,60px);
  align-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease),visibility .55s var(--ease);
}
.hs__slide[data-active]{opacity:1;visibility:visible}

.hs__text{min-width:0}
.hs__eyebrow{
  font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);
}
.hs__title{
  font-family:var(--f-head);
  font-size:clamp(2rem,4vw,3.15rem);font-weight:800;line-height:1.1;
  color:var(--ink);margin:12px 0 16px;
}
.hs__lead{
  font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.6;
  color:var(--body);max-width:44ch;margin-bottom:clamp(22px,2.6vw,30px);
}
.hs__cta{display:flex;flex-wrap:wrap;gap:12px}

.hs__media{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--sh-lg);
  background:var(--tint);
}
.hs__media img{
  display:block;width:100%;
  height:clamp(300px,36vw,470px);
  object-fit:cover;object-position:center 42%;
}

/* ---------------- vezérlők ---------------- */
.hs__controls{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:14px;
  margin-top:clamp(20px,2.4vw,30px);
}
.hs__nav{
  display:grid;place-items:center;flex:0 0 auto;
  width:44px;height:44px;border-radius:50%;
  background:#fff;color:var(--brand);
  border:1px solid #dbeaf4;box-shadow:var(--sh-sm);
  cursor:pointer;
  transition:background-color .22s var(--ease),color .22s var(--ease),
             border-color .22s var(--ease),transform .22s var(--ease);
}
.hs__nav svg{width:19px;height:19px}
.hs__nav--prev svg{transform:rotate(180deg)}
.hs__nav:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:translateY(-1px)}
.hs__nav:focus-visible{outline:3px solid var(--brand-2);outline-offset:3px}

.hs__dots{display:flex;align-items:center;gap:6px;margin-left:2px}
.hs__dot{
  position:relative;
  width:36px;height:44px;padding:0;
  border:0;background:none;cursor:pointer;
}
.hs__dot::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:28px;height:4px;border-radius:99rem;
  background:#cfe2ee;
  transition:background-color .25s var(--ease),width .25s var(--ease);
}
.hs__dot[aria-selected="true"]::before{background:var(--brand);width:36px}
.hs__dot:hover::before{background:var(--brand-2)}
.hs__dot:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px;border-radius:6px}

.hs__count{
  margin-left:auto;
  font-size:.85rem;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ---------------- reszponzív ---------------- */
@media (max-width:900px){
  .hs__slide{grid-template-columns:1fr;gap:clamp(20px,3vw,28px)}
  .hs__media{order:-1}
  .hs__media img{height:clamp(230px,44vw,330px)}
  .hs__lead{max-width:none}
}
@media (max-width:560px){
  .hs__cta .btn{width:100%}
  .hs__count{display:none}
  .hs__media img{height:220px}
}

/* JS nélkül: az első dia látszik, a vezérlők nem jelennek meg */
.hs__controls{display:none}
.hs[data-hs-ready] .hs__controls{display:flex}

@media (prefers-reduced-motion:reduce){
  .hs__slide{transition:none}
  .hs__nav,.hs__dot::before{transition:none}
  .hs__nav:hover{transform:none}
}

/* ---------------- "Ismerjen meg minket" (eredeti főoldali blokk) ---------------- */
.intro{padding-block:clamp(34px,4vw,58px)}
.intro__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,56px);align-items:start;
}
.intro__t h2{
  font-family:var(--f-head);
  font-size:clamp(1.6rem,2.6vw,2.15rem);font-weight:800;color:var(--ink);
  line-height:1.2;margin-top:10px;
}
.intro__b p{font-size:1rem;line-height:1.72;color:var(--body);margin-bottom:14px}
.intro__b p:last-of-type{margin-bottom:0}
.intro__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,28px)}
@media (max-width:900px){
  .intro__grid{grid-template-columns:1fr;gap:18px}
}
@media (max-width:560px){
  .intro__cta .btn{width:100%}
}

/* H1-sáv a slider fölött: az oldal identitása, a diák üzenete alatta */
.hs__intro{position:relative;z-index:1;margin-bottom:clamp(22px,2.8vw,34px);max-width:60ch}
.hs__intro h1{
  font-family:var(--f-head);
  font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:800;color:var(--ink);
  line-height:1.15;margin-top:10px;
}