/* =========================================================
   Vecsés Dental — Rólunk (redesign demo)
   Kiegészítő réteg a közös vd designrendszer (demo.css) fölé.
   Nem definiál újra tokent, gombot, headert, footert.
   Saját prefix: ab-  (0 ütközés a közös rendszerrel)
   ========================================================= */

/* ---------------- hero ---------------- */
.ab-hero{
  position:relative;
  padding-block:clamp(34px,4vw,58px) clamp(26px,3vw,42px);
  background:radial-gradient(120% 90% at 18% 0%,#eef7fc 0%,#fff 64%);
  overflow:hidden;
}
.ab-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(26,140,190,.10),transparent) 88% 16%/240px 240px no-repeat,
    radial-gradient(closest-side,rgba(26,140,190,.07),transparent) 97% 66%/170px 170px no-repeat;
}
.ab-hero__in{position:relative;z-index:1;max-width:720px}
.ab-hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:800;margin:12px 0 16px;line-height:1.08}
.ab-hero__lead{font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.65;max-width:58ch;color:var(--body)}
.ab-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,30px)}

/* ---------------- kozos szekcio-fej ---------------- */
.ab-head{margin-bottom:clamp(22px,2.6vw,32px);max-width:70ch}
.ab-head h2{
  font-family:var(--f-head);
  font-size:clamp(1.5rem,2.4vw,2.05rem);font-weight:800;color:var(--ink);
  line-height:1.2;margin-top:10px;
}
.ab-head__lead{margin-top:12px;font-size:1rem;line-height:1.65;color:var(--body);max-width:62ch}

/* ---------------- kuldetesunk ---------------- */
.ab-sec--mission{padding-block:clamp(30px,3.4vw,48px)}
.ab-mission{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:clamp(22px,3.4vw,48px);
  padding:clamp(26px,3vw,44px) clamp(24px,3.4vw,52px);
  background:linear-gradient(150deg,var(--tint-2) 0%,#f4fafd 100%);
  border:1px solid #dbeaf4;
  border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);
}
.ab-mission__vis{flex:0 0 auto}
.ab-mission__tile{
  display:grid;place-items:center;
  width:clamp(84px,8vw,116px);height:clamp(84px,8vw,116px);
  border-radius:clamp(24px,2.4vw,32px);
  background:#fff;color:var(--brand);
  box-shadow:var(--sh-sm);
}
.ab-mission__tile svg{width:46%;height:46%}
.ab-mission__body h2{
  font-family:var(--f-head);
  font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:800;color:var(--ink);
  margin-bottom:12px;
}
.ab-mission__body p{font-size:1rem;line-height:1.7;color:var(--body);max-width:76ch}

/* ---------------- miert minket valasszon ---------------- */
.ab-sec--why{padding-block:clamp(34px,4vw,60px)}
.ab-why{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,1.6vw,22px);
  align-items:stretch;
}
.ab-why__card{
  display:flex;flex-direction:column;height:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(20px,1.8vw,26px);
  box-shadow:var(--sh-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.ab-why__card:hover{transform:translateY(-3px);border-color:#cfe2ee;box-shadow:var(--sh)}
.ab-why__ico{
  display:grid;place-items:center;flex:0 0 auto;
  width:48px;height:48px;border-radius:15px;
  background:var(--tint-2);color:var(--brand);
  margin-bottom:16px;
}
.ab-why__ico svg{width:23px;height:23px}
.ab-why__card h3{
  font-family:var(--f-head);
  font-size:1.02rem;font-weight:700;color:var(--ink);
  line-height:1.3;margin-bottom:9px;
}
.ab-why__card p{font-size:.875rem;line-height:1.62;color:var(--body)}

/* ---------------- csapatunk ---------------- */
.ab-sec--team{padding-block:clamp(34px,4vw,60px)}
.ab-team{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(16px,1.6vw,22px);
  align-items:stretch;
}
.ab-person{
  display:flex;flex-direction:column;height:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.ab-person:hover{transform:translateY(-3px);border-color:#cfe2ee;box-shadow:var(--sh)}

/* a portrek mind 1:1 aranyuak -> negyzetes keret = 0 vagas, 0 torzulas */
.ab-person__photo{
  display:block;position:relative;
  aspect-ratio:1/1;
  background:var(--tint);
  overflow:hidden;
}
.ab-person__photo img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center top;
}

.ab-person__body{
  display:flex;flex-direction:column;flex:1 1 auto;
  padding:clamp(14px,1.2vw,18px) clamp(14px,1.2vw,18px) clamp(15px,1.3vw,19px);
  text-align:center;
}
.ab-person__roles{
  display:flex;flex-direction:column;gap:2px;
  flex:1 1 auto;
}
.ab-person__roles span{
  font-size:.775rem;font-weight:600;line-height:1.45;
  letter-spacing:.02em;color:var(--brand);
  overflow-wrap:break-word;
}
.ab-person__name{
  font-family:var(--f-head);
  font-size:.95rem;font-weight:700;line-height:1.3;color:var(--ink);
  margin-bottom:7px;
  overflow-wrap:break-word;
}

/* ---------------- zaro CTA ---------------- */
.ab-sec--cta{padding-block:clamp(10px,1.4vw,20px) clamp(56px,6vw,88px)}
.ab-cta{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,44px);
  padding:clamp(24px,2.6vw,36px) clamp(24px,3vw,44px);
  background:linear-gradient(150deg,var(--tint-2) 0%,#f4fafd 100%);
  border:1px solid #dbeaf4;
  border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);
}
.ab-cta__t{min-width:0}
.ab-cta h2{
  font-family:var(--f-head);
  font-size:clamp(1.2rem,1.9vw,1.6rem);font-weight:800;color:var(--ink);
  line-height:1.25;margin-bottom:8px;
}
.ab-cta p{font-size:.95rem;line-height:1.6;color:var(--body);max-width:62ch;margin:0}
.ab-cta__btn{flex:0 0 auto}

/* ---------------- reszponziv ---------------- */
@media (max-width:1327px){
  .ab-team{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1099px){
  .ab-team{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ab-why{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-hero__in{max-width:none}
}
@media (max-width:820px){
  .ab-mission{grid-template-columns:1fr;text-align:left;gap:20px}
  .ab-mission__tile{width:76px;height:76px;border-radius:22px}
}
@media (max-width:760px){
  .ab-cta{flex-direction:column;align-items:flex-start}
  .ab-cta__btn{width:100%}
}
@media (max-width:599px){
  .ab-team{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .ab-why{grid-template-columns:1fr}
  .ab-hero__cta .btn{width:100%}
  .ab-person__roles span{font-size:.75rem}
  .ab-person__name{font-size:.92rem}
}

@media (prefers-reduced-motion:reduce){
  .ab-why__card,.ab-person{transition:none}
  .ab-why__card:hover,.ab-person:hover{transform:none}
}