/* ============================================================ PRENUMERATA — HERO variantai (atskiras „Hero" switcheris) Nepriklauso nuo puslapio versijos (data-pren) — veikia per / (localStorage: prenumerataHeroVariant). Hero V1 = bazinis, be paveikslo (stiliai puslapio faile). Hero V2 = podkasto tipo: turinys kairėje, zurnalai-flat.png dešinėje container'io ribose. Hero V3 = tas pats, bet dešinėje zurnalai-full.png per visą hero aukštį iki pat lango krašto (full-bleed, ne container). Hero V4 = V1 layout (pilnos benefitų eilutės), tik su V3 full-bleed paveikslu dešinėje (66/33 split). Hero V5 = V4 layout + juodas hero fonas (balti tekstai). V2 ir V3 benefitai — kompaktišku sąrašu kaip podkasto hero „checks". ============================================================ */ /* ---------- BENDRA V2/V3: kompaktiškas benefitų sąrašas ---------- */ html:is([data-hero="v2"],[data-hero="v3"]) .offer-hero{padding:2.5rem 0 2.25rem} html:is([data-hero="v2"],[data-hero="v3"]) .offer-addons{margin-top:1.5rem;margin-bottom:0} /* brūkšniukai tarp eilučių — border-bottom iš bazės, viršuje pirmam; subtilūs, ne v3 tamsieji */ html:is([data-hero="v2"],[data-hero="v3"]) .offer-addon{border-bottom-color:var(--border)} html:is([data-hero="v2"],[data-hero="v3"]) .offer-addon:first-child{border-top:1px solid var(--border)} html:is([data-hero="v2"],[data-hero="v3"]) .offer-addon-row{padding:7px 0;gap:12px;align-items:flex-start} /* ikonos apibrauktuose skrituliukuose — kaip podkasto hero ✓ */ html:is([data-hero="v2"],[data-hero="v3"]) .offer-plus{width:22px;height:22px;min-width:22px;margin-top:2px;border-radius:50%;background:var(--accent-muted);color:var(--accent);font-size:var(--fs-caption);font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0} html:is([data-hero="v2"],[data-hero="v3"]) .offer-gift svg{width:13px;height:13px} html:is([data-hero="v2"],[data-hero="v3"]) .offer-addon-title{font-size:var(--fs-base);line-height:1.4} /* kompaktiškumui — slepiam ilgus aprašus, bet „Plačiau" atskleidimai lieka */ html:is([data-hero="v2"],[data-hero="v3"]) .offer-addon-desc{display:none} html:is([data-hero="v2"],[data-hero="v3"]) .offer-expand{margin-top:2px} html:is([data-hero="v2"],[data-hero="v3"]) .offer-deadline{margin-top:1.5rem} /* ---------- HERO V2: du stulpeliai, paveikslas container'io ribose ---------- */ html[data-hero="v2"] .offer-hero .container{display:grid;grid-template-columns:1.05fr 0.95fr;gap:3.5rem;align-items:center} html[data-hero="v2"] .offer-hero-visual{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;margin-inline:auto} html[data-hero="v2"] .offer-hero-visual-full{display:none} /* ---------- HERO V3: paveikslas full-bleed iki lango krašto ---------- */ html[data-hero="v3"] .offer-hero{position:relative;overflow:hidden} html[data-hero="v3"] .offer-hero-main{max-width:52%} html[data-hero="v3"] .offer-hero-visual-full{display:block;position:absolute;top:0;right:0;height:100%;width:44%;object-fit:cover;object-position:left center;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 28%);mask-image:linear-gradient(to right,transparent 0,#000 28%)} /* ---------- HERO V4 (ir V5 bazė): V1 layout + V3 full-bleed paveikslas, 66/33 split ---------- */ html:is([data-hero="v4"],[data-hero="v5"]) .offer-hero{position:relative;overflow:hidden} html:is([data-hero="v4"],[data-hero="v5"]) .offer-hero h1{font-size:var(--fs-h3)} /* turinio dešinė riba = 67vw minus 2.5rem tarpas iki paveikslo; atimamas container'io offset'as (max-width 1260px + 1.5rem padding iš base.css), kad plotis būtų matuojamas nuo lango, kaip ir absoliučiai pozicionuotas paveikslas */ html:is([data-hero="v4"],[data-hero="v5"]) .offer-hero-main{max-width:calc(67vw - 4rem - max(0px, (100vw - 1260px)/2))} html:is([data-hero="v4"],[data-hero="v5"]) .offer-addon-title{font-size:var(--fs-lead)} html:is([data-hero="v4"],[data-hero="v5"]) .offer-deadline{font-weight:400} html:is([data-hero="v4"],[data-hero="v5"]) .offer-hero-visual-full{display:block;position:absolute;top:0;right:0;height:100%;width:33%;object-fit:cover;object-position:left center;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 28%);mask-image:linear-gradient(to right,transparent 0,#000 28%)} /* ---------- HERO V5: V4 layout + juodas fonas ---------- */ html[data-hero="v5"] .offer-hero{background:var(--black)} html[data-hero="v5"] .offer-hero .sec-label{color:rgba(255,255,255,0.6)} html[data-hero="v5"] .offer-hero h1{color:var(--white)} html[data-hero="v5"] .offer-hero-sub{color:rgba(255,255,255,0.6)} html[data-hero="v5"] .offer-addon{border-bottom-color:rgba(255,255,255,0.18)} html[data-hero="v5"] .offer-addon-title{color:var(--white)} html[data-hero="v5"] .offer-addon-desc{color:rgba(255,255,255,0.6)} html[data-hero="v5"] .offer-addon-body p{color:rgba(255,255,255,0.7)} html[data-hero="v5"] .offer-expand{color:rgba(255,255,255,0.8)} html[data-hero="v5"] .offer-deadline{color:var(--white)} @media(max-width:900px){ html[data-hero="v2"] .offer-hero .container{grid-template-columns:1fr;gap:1.75rem} html[data-hero="v2"] .offer-hero-visual{max-height:400px} html:is([data-hero="v3"],[data-hero="v4"],[data-hero="v5"]) .offer-hero-main{max-width:none} html:is([data-hero="v3"],[data-hero="v4"],[data-hero="v5"]) .offer-hero-visual-full{position:static;width:100vw;max-width:none;height:auto;max-height:420px;margin:1.75rem 0 0 calc(50% - 50vw);object-fit:cover;object-position:center;-webkit-mask-image:none;mask-image:none} }