/* ============================================================
   Spoilery — assets/css/pages/landing.css
   Cartella: /assets/css/pages/
   Stili della landing page per gli ospiti.
   ============================================================ */

/* ---------- Hero ---------- */
.st-hero {
    position: relative;
    padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2.5rem, 6vw, 5rem);
    overflow: hidden;
}
/* Bagliore dello schermo acceso nella stanza buia */
.st-hero::before {
    content: "";
    position: absolute;
    top: -45%;
    right: -12%;
    width: 60vw;
    max-width: 760px;
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(218, 9, 21, .16), transparent);
    pointer-events: none;
}

.st-hero-grid {
    position: relative;
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
}
@media (min-width: 992px) {
    .st-hero-grid { grid-template-columns: 1.05fr .95fr; }
}

.st-hero-title {
    max-width: 12ch;
    margin-bottom: 1.25rem;
    font-size: clamp(2.6rem, 1.6rem + 4.6vw, 4.6rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -0.035em;
}
.st-hero-text {
    max-width: 44ch;
    margin-bottom: 2rem;
    color: #D4D4D8;
    font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
    line-height: 1.55;
}
.st-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.st-hero-note { margin: 1rem 0 0; color: var(--st-muted); font-size: .9rem; }

/* ---------- Post d'esempio (templates/partials/demo-post.php) ----------
   La scheda usa le stesse classi dei post veri (assets/css/posts.css):
   qui solo larghezza, ombra e la prova dello Spoiler Shield. */
.st-demo {
    width: 100%;
    max-width: 520px;
    justify-self: center;
}
.st-demo .st-demo-card {
    margin: 0;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
}
.st-demo .st-react-btn,
.st-demo .st-react-summary,
.st-demo .st-post-act { cursor: default; }

/* Testo e copertura sovrapposti: il riquadro prende l'altezza del più alto */
.st-demo-spoiler { display: grid; }
.st-demo-spoiler > .st-spoiler-content,
.st-demo-spoiler > .st-spoiler-cover { grid-area: 1 / 1; }
.st-demo-spoiler .st-spoiler-content { transition: filter .45s ease; }
.st-demo-spoiler .st-spoiler-cover { position: relative; inset: auto; }

/* Stato "episodio visto" */
.st-demo-spoiler.is-revealed .st-spoiler-content { filter: none; user-select: auto; pointer-events: auto; }
.st-demo-spoiler.is-revealed { min-height: 0; }
.st-demo-spoiler.is-revealed .st-spoiler-cover { display: none; }

.st-demo-cover {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--st-muted);
    font-size: .85rem;
    text-decoration: underline;
    text-underline-offset: .2em;
}
.st-demo-cover:hover { color: var(--st-text); }

/* ---------- Sezioni ---------- */
.st-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.st-section-title { margin-bottom: 1.75rem; }
.st-muted-text { color: var(--st-muted); max-width: 44ch; }

/* Passaggi E01 → E03 */
.st-steps {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 768px) { .st-steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.st-step {
    padding: 1.25rem 0 0;
    border-top: 2px solid var(--st-line);
}
.st-step .st-ep-code { margin-bottom: 1rem; }
.st-step h3 { margin-bottom: .5rem; }
.st-step p { margin: 0; color: var(--st-muted); }

/* Avvisi dei nuovi episodi e consigli (pagina "Come funziona") */
.st-features { display: grid; gap: 1rem; }
@media (min-width: 992px) { .st-features { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.st-feature {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
}
.st-feature-ico {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: rgba(218, 9, 21, .12);
    color: #FF4D57;
    font-size: 1.3rem;
}
.st-feature h3 { margin-bottom: .5rem; font-size: 1.2rem; }
.st-feature p { margin: 0; color: var(--st-muted); max-width: 52ch; }

/* Tipi di post e reazioni */
.st-split { display: grid; gap: 3rem; }
@media (min-width: 992px) { .st-split { grid-template-columns: 1.2fr 1fr; gap: 4rem; } }

.st-types { margin: 0; padding: 0; list-style: none; }
.st-types-item { padding: 1.1rem 0; border-bottom: 1px solid var(--st-line); }
.st-types-item:first-child { padding-top: 0; }
.st-types-item .st-type { gap: .55rem; font-size: 1.05rem; margin-bottom: .35rem; }
.st-types-item p { margin: 0; color: var(--st-muted); max-width: 52ch; }

.st-reactions-box {
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    align-self: start;
}
.st-reactions-box .st-section-title { margin-bottom: .75rem; font-size: 1.5rem; }
.st-reactions-show {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    text-align: center;
    font-size: .85rem;
    font-weight: 600;
}
.st-reactions-show li { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.st-reaction-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--st-r) 14%, transparent);
    font-size: 1rem;
}
.st-reaction-bubble .st-ico { width: 40px; height: 40px; }

/* Scaffale delle serie */
.st-shelf {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(130px, 160px);
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .75rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.st-shelf-item {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    color: var(--st-text);
    text-decoration: none;
    scroll-snap-align: start;
}
.st-shelf-item .st-poster { margin-bottom: .4rem; transition: transform .2s ease; }
.st-shelf-item:hover .st-poster { transform: translateY(-3px); }
.st-shelf-item strong { font-size: .95rem; line-height: 1.25; }
.st-shelf-item span { color: var(--st-muted); font-size: .8rem; }

/* Invito finale */
.st-final {
    padding: clamp(2rem, 5vw, 3.5rem);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-surface);
}
.st-final h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; }
.st-final p { max-width: 46ch; margin: .75rem 0 1.75rem; color: #D4D4D8; font-size: 1.1rem; }

.st-page-landing .st-footer { margin-top: 1rem; }

/* ============================================================
   HOME DEGLI OSPITI (pages/landing.php): solo accesso
   ============================================================ */
.st-page-gate { min-height: 100vh; }
.st-gate { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.st-gate::before {
    content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
    background: radial-gradient(circle, rgba(218, 9, 21, .22), transparent 62%); pointer-events: none;
}
.st-gate-grid {
    flex: 1; display: grid; align-items: center; justify-items: center; gap: 3rem;
    padding-top: calc(2.5rem + var(--st-safe-top)); padding-bottom: 2rem; position: relative;
}
.st-gate-visual { display: none; width: 100%; }
@media (min-width: 992px) {
    .st-gate-grid { grid-template-columns: 1.1fr .9fr; gap: 4rem; }
    .st-gate-visual { display: block; }
}
/* Titolo e testo sopra la scheda d'esempio (solo computer, come .st-gate-visual) */
.st-gate-intro { max-width: 560px; margin: 0 auto 1.25rem; }
.st-gate-title { margin: 0 0 .75rem; font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; color: #fff; }
.st-gate-text { margin: 0; color: var(--st-muted); font-size: 1.1rem; line-height: 1.55; }
.st-gate-preview { display: block; max-width: 560px; margin: 0 auto; }
.st-gate-preview img { display: block; width: 100%; height: auto; }
.st-gate-panel { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
.st-gate-card { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: var(--st-radius-lg); padding: 2rem 1.75rem 1.75rem; }
@media (max-width: 575.98px) {
    .st-gate-card { background: transparent; border: 0; padding: 0; }
    .st-gate-grid { padding-top: calc(3.5rem + var(--st-safe-top)); }
}
.st-gate-brand { margin: 0 0 .5rem; text-align: center; }
.st-gate-brand img { height: 48px; width: auto; display: inline-block; }
.st-gate-tagline { text-align: center; color: var(--st-muted); margin: 0 0 1.5rem; font-size: .98rem; line-height: 1.45; }
.st-gate-form { display: flex; flex-direction: column; gap: .7rem; }
.st-gate-form .form-control-lg { font-size: 1rem; padding-top: .75rem; padding-bottom: .75rem; }
.st-gate-form .btn { margin-top: .3rem; }
.st-gate-forgot { align-self: center; font-size: .88rem; margin-top: .25rem; }
.st-gate-or { display: flex; align-items: center; gap: .8rem; margin: 1.25rem 0; color: var(--st-muted); font-size: .85rem; text-transform: lowercase; }
.st-gate-or::before, .st-gate-or::after { content: ""; flex: 1; height: 1px; background: var(--st-line); }
.st-gate-about { align-self: center; color: var(--st-muted); font-size: .9rem; text-decoration: none; }
.st-gate-about + .st-gate-about { margin-top: -.5rem; }
.st-gate-about:hover { color: var(--st-text); }
.st-gate-foot { position: relative; padding: 1.5rem 1rem calc(1.5rem + var(--st-safe-bottom)); text-align: center; color: var(--st-muted); font-size: .8rem; }
/* Frase sotto il logo (titolo h2) e serie più discusse */
h2.st-gate-tagline { font-family: var(--st-font-body); font-weight: 400; letter-spacing: 0; }
/* Prima riga: cos'è Spoilery (in evidenza), seconda riga: cosa ci fai */
.st-gate-tagline-lead { display: block; margin-bottom: .3rem; color: var(--st-text); font-size: 1.12rem; font-weight: 700; line-height: 1.3; }
.st-gate-popular { max-width: 720px; margin: 0 auto 1.2rem; }
.st-gate-popular h2 { margin: 0 0 .4rem; font-family: var(--st-font-body); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--st-muted); }
.st-gate-popular p { margin: 0; line-height: 1.9; }
.st-gate-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.1rem; margin-bottom: .6rem; }
.st-gate-foot a { color: var(--st-muted); text-decoration: none; }
.st-gate-foot a:hover, .st-gate-foot a.is-active { color: var(--st-text); }
.st-gate-langs { display: inline-flex; gap: .6rem; align-items: center; }
.st-gate-foot p { margin: 0 auto; max-width: 720px; opacity: .8; }
.st-page-gate .st-cookie { bottom: calc(16px + var(--st-safe-bottom)); }

/* Mostra / nascondi password (come nelle pagine di accesso) */
.st-password { position: relative; }
.st-password .form-control { padding-right: 3rem; }
.st-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 3rem;
    height: var(--st-field-h, calc(2.8rem + 2px));
    border: 0;
    background: none;
    color: var(--st-muted);
    font-size: 1.1rem;
}
.st-password-toggle:hover { color: var(--st-text); }
.st-gate-alt { display: flex; flex-direction: column; gap: .7rem; }

/* Riquadro "Cerchiamo investitori" in fondo a "Come funziona" (pages/about.php) */
.st-invest-box {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.2rem 1.4rem;
    border: 1px solid rgba(218, 9, 21, .4); border-radius: var(--st-radius-lg);
    background: linear-gradient(135deg, rgba(218, 9, 21, .14), var(--st-surface)); color: var(--st-text); text-decoration: none;
}
.st-invest-box:hover { color: var(--st-text); border-color: var(--st-accent); }
.st-invest-icon {
    display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0;
    border-radius: 14px; background: rgba(218, 9, 21, .18); color: var(--st-accent-hi); font-size: 1.4rem;
}
.st-invest-text { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 240px; }
.st-invest-text strong { font-size: 1.1rem; }
.st-invest-text span { color: var(--st-muted); font-size: .92rem; }