/* Oldal: Méhnyak-diagnosztika és kolposzkópia Szegeden. Dr. Badó Attila.
   Az aloldal.css UTÁN töltődik, csak ezen az oldalon. Forrás: a jóváhagyott végleges oldal
   (design/mockup/valtozatok/), a közös drbado.css-ből és az oldal saját CSS-éből kiválogatva.
   Kézzel ne írd át: ha valami nem egyezik, a mérés (ellenorzes.py) mutatja meg, hol. */

/* ---- a jóváhagyott mockup közös stíluslapjából (drbado.css), ami élesben még nincs meg ---- */
.g2c-band{position:relative; margin-top:clamp(72px,8vw,116px); border-radius:34px; overflow:hidden; height:clamp(260px,26vw,380px)}
.g2c-band img{position:absolute; inset:0; object-position:50% 46%}
.g2c-band .lab{position:absolute; left:20px; top:20px; right:20px; max-width:560px; padding:16px 20px; border-radius:22px}
.g2c-band .lab b{display:block; font-family:var(--display); font-weight:600; font-size:clamp(19px,1.8vw,24px); line-height:1.2}
.g2c-band .lab span{display:block; color:var(--mute); font-size:15px; margin-top:6px}
@media (max-width:560px){
  .g2c-band .lab{left:12px; right:12px; top:12px}
}
.g3c-price{margin-top:clamp(72px,8vw,120px)}

/* ---- az oldal saját szabályai ---- */
.m1-check{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(32px,5vw,72px); margin-top:26px}
.m1-check li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; align-items:start; padding:16px 0; border-top:1px solid var(--line); font-size:16.5px; line-height:1.45}
.m1-check .ico{width:24px; height:24px; color:var(--acc); margin-top:1px}
.m1-check.one{grid-template-columns:1fr; margin-top:14px}
.m1-check.one li:first-child{border-top:0}
.m1c-top{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:40px clamp(40px,6vw,96px); align-items:start}
.m1c-card{border-radius:30px; padding:clamp(24px,3vw,36px); background:#fff; border:1px solid var(--outline); box-shadow:var(--shadow-float)}
.m1c-card h2{font-weight:600; font-size:clamp(21px,1.8vw,25px); line-height:1.2}
.m1c-top+.g2c-band{margin-top:clamp(48px,6vw,88px)}
.m2c-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px clamp(40px,6vw,96px); align-items:center}
.m2c-lens{justify-self:center; width:min(100%,460px); aspect-ratio:1; border-radius:50%; overflow:hidden; box-shadow:0 0 0 12px rgba(255,255,255,.7), 0 0 0 13px var(--outline), 0 40px 70px -40px rgba(15,35,39,.6)}
.m2c-steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:clamp(56px,6vw,88px); position:relative}
.m2c-steps::before{content:""; position:absolute; left:8%; right:8%; top:44px; height:2px; background:linear-gradient(90deg,var(--acc),rgba(35,115,126,.2))}
.m2c-steps li{position:relative; padding:24px; display:flex; flex-direction:column; gap:12px}
.m2c-steps .n{position:absolute; right:22px; top:18px; font-family:var(--display); font-weight:600; font-size:34px; color:#A9CDD3}
.m2c-steps b{font-weight:600; font-size:18px; line-height:1.25}
.m2c-steps .d{color:var(--mute); font-size:15px}
.m3a-note{border-radius:28px; padding:clamp(22px,2.6vw,32px); background:rgba(211,234,238,.65); border:1px solid rgba(255,255,255,.9); display:grid; grid-template-columns:56px minmax(0,1fr); gap:6px 18px; align-items:start}
.m3a-note .mini{width:56px; height:56px; grid-row:span 2}
.m3a-note h3{font-weight:600; font-size:19px}
.m3a-note p{color:var(--ink); font-size:16px; line-height:1.55}
.m3c-flow{margin-top:clamp(32px,4vw,52px); display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.15fr) auto minmax(0,1fr) auto minmax(0,1.2fr); gap:12px; align-items:center}
.m3c-flow .nd{border-radius:22px; padding:18px; background:#fff; border:1px solid var(--outline); display:flex; flex-direction:column; gap:8px; min-height:100%}
.m3c-flow .nd .mini{width:48px; height:48px}
.m3c-flow .nd b{font-weight:600; font-size:16.5px; line-height:1.3}
.m3c-flow .nd span{color:var(--mute); font-size:14px; line-height:1.4}
.m3c-flow .nd.sm{padding:14px 16px}
.m3c-flow .ar{display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--acc)}
.m3c-flow .ar .ico{width:24px; height:24px}
.m3c-flow .ar small{font-size:12px; font-weight:600; white-space:nowrap}
.m3c-flow .split{display:flex; flex-direction:column; gap:8px}
.m3c-flow .split .or{align-self:center; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mute)}
.m3c-bot{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:32px clamp(40px,6vw,88px); align-items:start; margin-top:clamp(40px,5vw,64px)}
.g4a-box{max-width:620px}
@media (max-width:1100px){
  .m3c-flow{grid-template-columns:1fr; justify-items:stretch}
  .m3c-flow .ar{flex-direction:row; justify-content:center; transform:rotate(0)}
  .m3c-flow .ar .ico{transform:rotate(90deg)}
}
@media (max-width:900px){
  .m1c-top, .m2c-top, .m3c-bot{grid-template-columns:1fr}
  .m1-check{grid-template-columns:1fr}
  .m2c-steps{grid-template-columns:1fr}
  .m2c-steps::before{display:none}
}
@media (max-width:560px){
  .m3a-note{grid-template-columns:1fr}
}
.drbado-page img.kep-meh-fejlec{object-position:50% 46%}
.drbado-page img.kep-meh-hogyan{object-position:50% 50%}
.drbado-page img.kep-meh-zaro{object-position:50% 44%}
@media (max-width:640px){
  .drbado-page img.kep-meh-zaro{object-position:74% 50%}
}
@media (max-width:560px){
  .menu4 li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px}
  .menu4 .ld{display:none}
}