/* =====================================================================
   ALOLDAL
   A design/mockup/5-aloldal-kismedencei.html jóváhagyott változatából.
   A fooldal.css UTÁN töltődik: csak azt tartalmazza, ami a főoldalon nincs.
   A tervben három-három elrendezésváltozat készült szekciónként; itt
   kizárólag a választott változatok (1/B, 2/A, 3/A, 4/A) szabályai vannak.
   ===================================================================== */

/* ── 1. Fejléc, definíció, tünetek ──────────────────────────────────── */
.h1x{font-family:var(--display); font-weight:600; font-size:clamp(2.4rem,4.4vw,4.1rem); line-height:1.04; letter-spacing:-.03em}
.crumb{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--mute)}
.crumb a{text-decoration:none; color:inherit}
.crumb a:hover{color:var(--acc)}
.crumb .ico{width:15px; height:15px}
.acts{display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center}

.a1-lead{font-size:clamp(18px,1.5vw,21px); line-height:1.55; color:var(--mute); margin-top:20px; max-width:52ch}
.b1-head{max-width:760px}
.b1-head .acts{margin-top:30px}
.b1-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.b1-band{position:relative; margin-top:clamp(40px,5vw,72px); border-radius:34px; overflow:hidden; height:clamp(280px,30vw,420px)}
.b1-band img{position:absolute; inset:0; object-position:50% 62%}
.b1-band figcaption{position:absolute; left:18px; bottom:18px}
.b1-quote{margin-top:clamp(64px,7vw,104px)}
.b1-quote .in{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:32px clamp(40px,6vw,88px); align-items:center}
.b1-quote p.big{font-family:var(--display); font-weight:500; font-size:clamp(22px,2.2vw,31px); line-height:1.3; letter-spacing:-.01em}
.b1-quote p.sub{color:var(--on-deep-mute); font-size:16.5px; line-height:1.6}
.t3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:44px}
.t3 li{padding:26px; border-radius:26px; display:flex; flex-direction:column; gap:16px; font-size:16px; line-height:1.45}
.t3 .mini{width:56px; height:56px}
@media (max-width:1000px){ .t3{grid-template-columns:1fr 1fr} .b1-quote .in{grid-template-columns:1fr} }
@media (max-width:620px){ .t3{grid-template-columns:1fr} }

/* ── 2. Okok és konzervatív kezelés ─────────────────────────────────── */
.subh{font-family:var(--display); font-weight:500; font-size:clamp(19px,1.7vw,24px); line-height:1.25; color:var(--acc); margin-top:10px}
.g2a-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:clamp(32px,4vw,52px)}
.g2a-card{padding:clamp(24px,2.6vw,34px); display:grid; grid-template-columns:64px minmax(0,1fr); gap:6px 22px; align-items:start}
.g2a-card .mini{grid-row:span 2; width:64px; height:64px}
.g2a-card h3{font-weight:600; font-size:clamp(19px,1.6vw,22px); line-height:1.2; letter-spacing:normal}
.g2a-card p{color:var(--mute); font-size:15.5px; margin-top:4px}
.g2a-ter{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:44px clamp(40px,6vw,96px); align-items:center; margin-top:clamp(80px,9vw,132px)}
.g2a-ter .photo{min-height:clamp(420px,42vw,560px)}
.g2a-ter .photo img{object-position:50% 35%}
.g2a-list{margin-top:30px}
.g2a-list li{display:grid; grid-template-columns:56px minmax(0,1fr); gap:6px 20px; padding:18px 0; border-top:1px solid var(--line)}
.g2a-list li:first-child{border-top:0}
.g2a-list .n{font-family:var(--display); font-weight:600; font-size:30px; line-height:1; color:#A9CDD3; letter-spacing:-.02em; grid-row:span 2}
.g2a-list b{font-weight:600; font-size:18px; line-height:1.25}
.g2a-list span{color:var(--mute); font-size:15.5px}
@media (max-width:900px){ .g2a-cards, .g2a-ter{grid-template-columns:1fr} .g2a-ter .photo{order:-1; min-height:340px} }
@media (max-width:480px){ .g2a-card{grid-template-columns:1fr} .g2a-card .mini{grid-row:auto} }

/* ── 3. Műtét, vizsgálat, ár ────────────────────────────────────────── */
.pricebox{border-radius:30px; background:#fff; border:1px solid var(--outline); padding:clamp(24px,3vw,40px)}
.pricebox .foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
.pricebox .foot p{color:var(--mute); font-size:14.5px; max-width:46ch}
.g3a-band{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:36px clamp(36px,5vw,80px); align-items:center}
.g3a-band p{color:var(--on-deep-mute); font-size:clamp(16.5px,1.3vw,18px); line-height:1.6}
.g3a-band p + p{margin-top:16px}
.g3a-band .chipx{background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.g3a-band .chipx .ico{color:#9FD6DE}
.g3a-ph{border-radius:26px; overflow:hidden; aspect-ratio:1; position:relative}
.g3a-ph img{position:absolute; inset:0}
.g3a-viz{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:44px clamp(40px,6vw,96px); align-items:center; margin-top:clamp(72px,8vw,120px)}
.g3a-viz .photo{min-height:clamp(420px,42vw,560px)}
.g3a-viz .photo img{object-position:50% 50%}
.g3a-steps{margin-top:28px}
.g3a-steps li{display:grid; grid-template-columns:56px minmax(0,1fr); gap:6px 20px; align-items:center; padding:18px 0; border-top:1px solid var(--line)}
.g3a-steps li:first-child{border-top:0}
.g3a-steps .mini{width:56px; height:56px; grid-row:span 2}
.g3a-steps b{font-weight:600; font-size:18px; line-height:1.25}
.g3a-steps span{color:var(--mute); font-size:15.5px}
.g3a-price{margin-top:clamp(72px,8vw,120px)}
@media (max-width:900px){ .g3a-band, .g3a-viz{grid-template-columns:1fr} .g3a-viz .photo{order:-1; min-height:320px} }
@media (max-width:560px){ .g3a-steps li{grid-template-columns:1fr} .g3a-steps .mini{grid-row:auto} }

/* ── 4. Gyakori kérdések és lezárás ─────────────────────────────────── */
.g4-faq{margin:0 auto; max-width:880px}
.g4-faq .sec-c{text-align:center}
.g4-faq .faq{margin-top:34px}
.g4-after{margin-top:26px; text-align:center; color:var(--mute)}
.g4-after a{color:var(--acc); font-weight:600; text-decoration:none; white-space:nowrap}
.g4a-cta{position:relative; margin-top:clamp(72px,8vw,120px); border-radius:34px 34px 0 0; overflow:hidden; min-height:clamp(340px,34vw,460px); display:grid; align-items:center; padding:clamp(24px,3vw,44px)}
.g4a-cta img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:64% 40%}
.g4a-cta::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(150,205,214,.22),rgba(120,190,200,.34)); mix-blend-mode:multiply; pointer-events:none}
.g4a-box{position:relative; z-index:2; max-width:620px; padding:clamp(24px,3vw,38px); border-radius:28px}
.g4a-box h2{font-weight:600; font-size:clamp(26px,2.8vw,38px); line-height:1.08; letter-spacing:-.02em}
.g4a-box .acts{margin-top:24px}
@media (max-width:640px){ .g4a-cta img{object-position:70% 30%} }

/* ── Az oldal ritmusa ───────────────────────────────────────────────── */
/* A fooldal.css ugyanezt a `.drbado-page` konténert állítja be; itt csak az
   aloldal eltérése van: az első szekció feljebb kezdődik, mert nincs hero. */
.drbado-page.drbado-aloldal > .zone:first-child{padding-top:clamp(20px,3vw,40px)}