/* ==========================================================================
   Vecsés Dental — „ISMERJEN MEG MINKET" szekció 2.0  (Design 2.0 demó)
   Saját réteg, prefix: abt-  (nem ütközik a Clean 1.x `intro__`/`trust__` névtérrel)
   Nulla külső függőség, nulla vendor-kód, nulla ikonkönyvtár — a saját sprite.

   Kompozíció: EGY nagy, kétosztatú blokk. Bal fél fehér (szöveg + CTA-k),
   jobb fél halvány kék (4 előny). A két fél teljes szélességben összeér,
   nincsenek külön kártyák, keretek, árnyékok.
   ========================================================================== */

/* JAVÍTVA (2026-09-01): korábban a két oszlop a TELJES viewportot osztotta 44/56 arányban,
   és mindkét .abt__inner a --wrap felére (640px) volt korlátozva, az osztásvonalhoz zárva.
   Így a tényleges tartalom az OSZTÁSVONALRA (44%) centrálódott, nem a viewport közepére:
   1920px-en 114px, 2560px-en 153px balra tolódott, és 427/785px üres kék maradt jobbra.
   Most a tartalom EGY középre zárt 1280px-es blokk, a világoskék háttér pedig a tartalom
   oszlophatárától fut ki a viewport jobb széléig. */
.abt{position:relative;overflow:hidden;background:#fff}
.abt__grid{position:relative;
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:44fr 56fr;align-items:stretch}

.abt__col{display:flex;position:relative}
.abt__col--list::before{content:"";position:absolute;top:0;bottom:0;left:0;width:100vw;
  background:var(--tint)}   /* halvány kék */

/* A belső tartalom a site közös 1280-as sávjához igazodik: a bal oszlop
   jobbra, a jobb oszlop balra zár, így a két fél a lap közepén találkozik. */
.abt__inner{position:relative;z-index:1;width:100%;
  padding-block:clamp(48px,6vw,92px)}
.abt__col--text .abt__inner{padding-inline:0 clamp(28px,4vw,64px)}
.abt__col--list .abt__inner{padding-inline:clamp(28px,4vw,64px) 0}

/* --- bal oldal --- */
.abt__eyebrow{display:block;font-size:.78rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brand);margin-bottom:14px}
.abt__title{margin:0 0 22px;font-family:var(--f-head);font-weight:900;
  font-size:clamp(1.6rem,calc(1.1rem + 1.5vw),2.5rem);line-height:1.1;
  letter-spacing:-.01em;text-transform:uppercase;color:#1d1d1b}
.abt__p{margin:0 0 18px;font-size:clamp(.98rem,calc(.92rem + .2vw),1.12rem);
  line-height:1.65;color:var(--body);max-width:46ch}
.abt__p:last-of-type{margin-bottom:clamp(26px,3.4vw,40px)}
.abt__cta{display:flex;flex-wrap:wrap;gap:14px}
.abt__cta .btn{min-height:44px}                  /* touch target */

/* --- jobb oldal: 4 előny, kártya nélkül --- */
.abt__list{display:flex;flex-direction:column;gap:clamp(24px,3vw,36px);
  margin:0;padding:0;list-style:none}
.abt__item{display:grid;grid-template-columns:auto 1fr;
  gap:clamp(16px,1.6vw,24px);align-items:start}
.abt__ico{width:64px;height:64px;flex:0 0 auto;display:inline-flex;
  align-items:center;justify-content:center;border-radius:50%;
  background:rgba(14,96,142,.14);color:var(--brand)}
.abt__ico svg{width:40px;height:40px}
.abt__h{margin:0 0 8px;font-family:var(--f-head);font-weight:700;
  font-size:clamp(.95rem,calc(.9rem + .18vw),1.08rem);letter-spacing:.03em;
  text-transform:uppercase;color:#1d1d1b;line-height:1.25}
.abt__d{margin:0;font-size:clamp(.9rem,calc(.86rem + .14vw),1rem);
  line-height:1.6;color:var(--body)}

@media (max-width:1024px){
  .abt__grid{grid-template-columns:1fr 1fr}
  .abt__ico{width:56px;height:56px}
  .abt__ico svg{width:35px;height:35px}
}

/* Mobilon egymás alá: szöveg + CTA-k, majd a 4 előny. */
@media (max-width:768px){
  .abt__grid{grid-template-columns:1fr}
  .abt__col--text .abt__inner,
  .abt__col--list .abt__inner{padding-inline:0}
  .abt__col--text .abt__inner{padding-bottom:clamp(30px,7vw,48px)}
  .abt__col--list .abt__inner{padding-block:clamp(34px,8vw,56px)}
  .abt__p{max-width:none}
  .abt__cta .btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:430px){
  .abt__item{gap:14px}
  .abt__ico{width:48px;height:48px}
  .abt__ico svg{width:31px;height:31px}
  .abt__cta{flex-direction:column}
  .abt__cta .btn{width:100%}
}