/* Oldal: Érdemes-e felnőttként beadatni a HPV elleni oltást? 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. */


/* ---- az oldal saját szabályai ---- */
.bl-kat{margin-top:18px; padding:5px 14px 5px 5px}
.bl-kat .mini{width:30px; height:30px}
.bl-kat .mini .disc::after{display:none}
.bl-h1{margin-top:18px; max-width:20ch}
.bl-sub{font-family:var(--display); font-weight:500; font-size:clamp(20px,2vw,27px); line-height:1.3; color:var(--mute); margin-top:14px; max-width:40ch}
.bl-meta{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:22px; font-size:14.5px; color:var(--mute)}
.bl-meta .au{font-weight:600; color:var(--ink)}
.bl-meta span+span::before{content:"·"; margin-right:18px; color:#A9C7CC}
.bl1b{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:40px clamp(40px,6vw,96px); align-items:center}
.bl1b-ph{min-height:clamp(440px,42vw,580px)}
.bl-body{max-width:720px; margin:0 auto; font-size:18px; line-height:1.7; color:#23383C}
.bl-body.wide{max-width:980px}
.bl-body>p, .bl-body .bl-sec>p{margin-top:18px; max-width:68ch}
.bl-body .bl-lead{font-size:clamp(20px,1.7vw,23px); line-height:1.55; color:var(--ink); margin-top:0}
.bl-body strong{font-weight:650; color:var(--ink)}
.bl-sec{margin-top:clamp(48px,5vw,72px); scroll-margin-top:24px}
.bl-sec h2{font-family:var(--display); font-weight:600; font-size:clamp(26px,2.4vw,34px); line-height:1.15; letter-spacing:-.02em; color:var(--ink); max-width:26ch}
.bl-ul{margin-top:20px; display:flex; flex-direction:column; gap:14px; max-width:68ch}
.bl-ul li{position:relative; padding-left:28px}
.bl-ul li::before{content:""; position:absolute; left:4px; top:.72em; width:9px; height:9px; border-radius:50%; background:var(--acc)}
.bl-9{margin:26px 0 0; padding:22px 24px; border-radius:24px; background:#fff; border:1px solid var(--outline); max-width:560px}
.bl-9 .row{display:grid; grid-template-columns:repeat(9,1fr); gap:10px}
.bl-9 .d{aspect-ratio:1; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 3px #A9CDD3}
.bl-9 .d.hi{background:var(--acc); box-shadow:none}
.bl-9 figcaption{display:flex; flex-direction:column; gap:6px; margin-top:16px; font-size:14.5px; color:var(--mute); line-height:1.4}
.bl-9 figcaption span{display:flex; gap:10px; align-items:center}
.bl-9 .k{display:inline-block; width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 2px #A9CDD3; flex:none}
.bl-9 .k.hi{background:var(--acc); box-shadow:none}
.bl-dose{margin:26px 0 8px; padding:26px 30px 22px; border-radius:24px; background:#fff; border:1px solid var(--outline); max-width:600px}
.bl-dose .axis{position:relative; height:74px; margin:0 24px}
.bl-dose .axis::before{content:""; position:absolute; left:0; right:0; top:21px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--acc),#A9CDD3)}
.bl-dose .pt{position:absolute; left:calc(var(--x) * 100%); top:0; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px}
.bl-dose .pt b{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--acc); color:#fff; font-family:var(--display); font-size:17px; box-shadow:0 0 0 6px #fff}
.bl-dose .pt small{font-size:13.5px; font-weight:600; color:var(--mute); white-space:nowrap}
.bl2c-split{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:28px; align-items:start}
.bl2c-split{margin-top:16px}
.bl2c-split p{margin-top:0}
.bl2c-split .bl-9{margin-top:0}
div>footer.b6-foot{border-radius:34px; border-top:1px solid var(--outline)}
.bl2c-cards{display:grid; gap:14px; margin-top:22px}
.bl2c-cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.bl2c-cards.one{grid-template-columns:1fr}
.bl2c-cards .c{border-radius:24px; padding:22px; display:flex; flex-direction:column; gap:8px; font-size:15.5px; line-height:1.55}
.bl2c-cards .mini{width:48px; height:48px}
.bl2c-cards b{font-family:var(--display); font-weight:600; font-size:18px; line-height:1.3; color:var(--ink)}
.bl2c-cards span{color:var(--mute)}
.bl2c-two{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px}
.bl2c-two .m{position:relative; border-radius:24px; padding:26px 26px 24px 72px; background:linear-gradient(135deg,#fff 0%,var(--h1) 100%); border:1px solid var(--outline); font-size:15.5px; line-height:1.55}
.bl2c-two .x{position:absolute; left:22px; top:22px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff; font-size:20px; line-height:1}
.bl2c-two b{display:block; font-family:var(--display); font-weight:600; font-size:18px; color:var(--ink)}
.bl2c-two span{display:block; color:var(--mute); margin-top:6px}
.bl2c-end{padding:28px 32px; border-radius:28px; background:#fff; border:1px solid var(--outline)}
.bl2c-end h2{margin:0}
.bl-end{max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:16px}
.bl-srcbox{padding:4px 0}
.bl-srcbox h3{font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--acc)}
.bl-src{margin-top:12px; display:flex; flex-direction:column; gap:8px; counter-reset:s; font-size:14.5px; color:var(--mute); line-height:1.5}
.bl-src li{counter-increment:s; display:grid; grid-template-columns:26px minmax(0,1fr)}
.bl-src li::before{content:counter(s) "."; font-weight:700; color:var(--acc)}
.bl-src li strong, .bl-src li em{grid-column:2}
.bl-src li em{font-style:italic}
.bl-author{display:grid; grid-template-columns:84px minmax(0,1fr); gap:20px; align-items:center; border-radius:28px; padding:20px 24px}
.bl-author .pp{position:relative; width:84px; height:84px; border-radius:50%; overflow:hidden; margin:0}
.bl-author .pp img{position:absolute; inset:0; object-position:50% 20%}
.bl-author .lb{display:block; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--acc)}
.bl-author b{display:block; font-family:var(--display); font-weight:600; font-size:22px; margin-top:4px}
.bl-author span:not(.lb){color:var(--mute)}
.bl-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 28px; border-radius:28px; padding:24px 28px; background:linear-gradient(135deg,#fff 0%,var(--h1) 60%,var(--h2) 100%)}
.bl-cta b{display:block; font-weight:600; font-size:17px}
.bl-cta .pr{display:block; font-family:var(--display); font-weight:600; font-size:clamp(34px,3.2vw,44px); letter-spacing:-.02em; line-height:1.05; margin-top:4px}
.bl-cta .muted{font-size:13.5px; margin-top:6px}
@media (max-width:900px){
  .bl1b, .bl2c-split{grid-template-columns:minmax(0,1fr)}
  .bl2c-cards.three, .bl2c-two{grid-template-columns:1fr}
  .bl1b-ph{min-height:380px}
}
@media (max-width:560px){
  .bl-meta{flex-direction:column; gap:2px}
  .bl-meta span+span::before{display:none}
  .bl-body{font-size:17px}
  .bl-9 .row{gap:6px}
  .bl-dose{padding:22px 16px 18px}
  .bl-dose .axis{margin:0 22px}
}
.bl-q2{margin:28px 0 0; padding:20px 24px; border-radius:22px; background:rgba(255,255,255,.72); border:1px solid var(--outline); max-width:54ch}
.bl-q2 figcaption{font-size:14.5px; color:var(--mute); line-height:1.45}
.bl-q2 blockquote{margin:8px 0 0; font-family:var(--display); font-weight:500; font-size:clamp(19px,1.7vw,23px); line-height:1.35; letter-spacing:-.01em; color:var(--ink)}
.bl1b-ph img{position:absolute; inset:0}