/*
 * Localsite Landing - custom sections (Contenuti -> Sezioni personalizzate).
 * Loaded only when the landing has at least one visible custom section, or
 * in the editor's live preview: without custom sections the page is exactly
 * as before.
 *
 * Typography, colours, buttons and spacing come from front.css
 * (.lsl-section, .lsl-shell, .lsl-section-kicker, .lsl-btn). The hero
 * <section> of the landing is never closed, so in the DOM every section of
 * the page - custom ones included - sits inside .lsl-hero: a custom section
 * therefore sets its own background, colour and stacking explicitly and
 * never shows the hero's gradient or orbs. Padding is .lsl-section's.
 *
 * Breakpoint 1050px: the one at which the landing already stacks the hero,
 * "Τι περιλαμβάνει" and the FAQ. Visibility is CSS only (page cache safe).
 */
.lsl-v2 .lsl-cs{position:relative;z-index:1;background:#fff;color:var(--navy)}
.lsl-cs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.lsl-cs--no-media .lsl-cs-grid{grid-template-columns:minmax(0,1fr);max-width:820px}
.lsl-cs--img-right .lsl-cs-media{order:2}
.lsl-cs-media img{display:block;width:100%;height:auto;max-width:100%;border-radius:18px}
.lsl-cs-copy h2{font-size:clamp(34px,4vw,50px);line-height:1.12;letter-spacing:-.04em;margin:13px 0 16px}
.lsl-cs-text{color:var(--muted);font-size:16px;line-height:1.7;margin:0 0 24px}
.lsl-cs-text a{color:var(--blue)}
.lsl-cs-copy>:last-child{margin-bottom:0}
@media(max-width:1050px){
    .lsl-cs-grid{grid-template-columns:minmax(0,1fr);gap:28px}
    .lsl-cs--img-right .lsl-cs-media{order:0}
    .lsl-cs--only-desktop{display:none}
}
@media(min-width:1051px){
    .lsl-cs--only-mobile{display:none}
}