/* Apertura delle singole guide. I testi integrali restano nell'articolo;
   zoom e finestre eccezionalmente basse possono aumentare l'altezza naturale. */
.guide-reading-media:empty { display: none; }
.guide-reading-intro { min-width: 0; margin-bottom: 28px; }
/* Una misura comune mantiene allineati apertura, dettagli e informazioni.
   L'altezza resta naturale anche con testo ingrandito e schermi stretti. */
.guide-reading-intro > .guide-introduction {
    max-width: 42rem;
    margin: 0;
    color: #485871;
    font-size: 1.0625rem;
    line-height: 1.7;
}
.guide-reading-intro > .guide-introduction--opening {
    color: #33465f;
    font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
    font-weight: 600;
    line-height: 1.6;
}
.guide-reading-intro > .guide-introduction--detail {
    margin-top: 12px;
    font-size: 1rem;
}
.guide-reading-intro > .guide-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 20px;
    max-width: 42rem;
    margin-block: 18px 24px;
}
.guide-reading-intro > .guide-article-meta > span {
    display: block;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #5b687b;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.6;
    white-space: normal;
}
.guide-reading-intro > .guide-article-meta > span:first-child {
    flex: 1 1 100%;
    color: #485871;
    font-size: .9375rem;
}
.guide-reading-intro .guide-meta-label {
    color: #43536c;
    font-weight: 600;
}
@media (max-width: 480px) {
    .guide-reading-intro > .guide-introduction { font-size: 1rem; }
    .guide-reading-intro > .guide-introduction--opening { font-size: 1.0625rem; }
    .guide-reading-intro > .guide-article-meta { gap: 6px 16px; }
}
.guide-reading-intro > .guide-web-support { margin-block: 24px; }
.guide-reading-media > .guide-article-visual { margin: 24px auto; max-width: 680px; }
/* Il riquadro segue le proporzioni native: foto intera e senza fasce vuote.
   Gli attributi HTML width/height riservano lo spazio prima del caricamento,
   anche quando la foto viene spostata dall'apertura al corpo della guida. */
.guide-article-page .guide-opening-media .guide-article-visual img,
.guide-article-page .guide-reading-media .guide-article-visual img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media screen {
    .guide-article-page { --guide-screen-height: 100vh; }
    @supports (height: 100svh) { .guide-article-page { --guide-screen-height: 100svh; } }
    @supports (height: 100dvh) { .guide-article-page { --guide-screen-height: 100dvh; } }

    .guide-article-page .site-nav { min-width: 0; flex-wrap: wrap; justify-content: center; }
    .guide-article-page .nav-cta { flex-shrink: 0; }
    @media (min-width: 1025px) {
        .guide-article-page .nav-shell { flex-wrap: wrap; }
        .guide-article-page .site-nav { flex: 1; }
    }

    .guide-article-page .guide-article-hero {
        display: flex;
        min-height: max(0px, calc(var(--guide-screen-height) - var(--guide-header-height)));
        padding: 0;
        overflow: visible;
    }
    .guide-article-page .guide-article-hero > .modern-container {
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding-block: clamp(16px, 3vh, 36px) max(20px, env(safe-area-inset-bottom));
    }
    .guide-article-page .guide-article-hero .guide-breadcrumbs {
        flex: 0 0 auto;
        gap: 6px;
        margin: 0 0 16px;
        font-size: .8125rem;
        line-height: 1.4;
    }
    /* Il titolo completo e gia nell'h1: evita di ripeterlo nel percorso. */
    .guide-article-page .guide-article-hero .guide-breadcrumbs > span:last-child,
    .guide-article-page .guide-article-hero .guide-breadcrumbs > span:nth-last-child(2) { display: none; }
    .guide-article-page .guide-article-hero-grid {
        flex: 1 0 auto;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        align-content: center;
        gap: clamp(24px, 4vw, 56px);
        min-width: 0;
    }
    .guide-article-page .guide-article-hero .guide-kicker {
        margin: 0 0 12px;
        font-size: .8125rem;
        line-height: 1.4;
        letter-spacing: .05em;
    }
    .guide-article-page .guide-article-hero h1 {
        max-width: 24ch;
        font-size: clamp(1.75rem, min(4vw, 6vh), 3.25rem);
        line-height: 1.08;
        letter-spacing: -.035em;
    }
    .guide-article-page .guide-article-hero .guide-article-lead {
        margin: 16px 0 0;
        font-size: clamp(1rem, 1.35vw, 1.125rem);
        line-height: 1.55;
    }
    .guide-article-page .guide-opening-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
    .guide-article-page .guide-opening-read {
        display: inline-block;
        min-height: 44px;
        padding: 12px 18px;
        border: 1px solid #0856b9;
        border-radius: 12px;
        color: #fff;
        background: #0856b9;
        font-size: .9375rem;
        font-weight: 800;
        line-height: 1.3;
        text-align: center;
    }
    .guide-article-page .guide-opening-read::after { content: "\00a0\2193"; content: "\00a0\2193" / ""; white-space: nowrap; }
    .guide-article-page .guide-opening-read:focus-visible { outline: 3px solid #0f66e8; outline-offset: 4px; }
    .guide-article-page .guide-opening-read:hover { background: #064590; }
    .guide-article-page .guide-opening-readtime { color: #51627a; font-size: .875rem; line-height: 1.4; }
    .guide-article-page .guide-opening-media { min-width: 0; }
    .guide-article-page .guide-opening-media > .guide-article-visual { width: 100%; max-width: none; margin-inline: auto; }
    .guide-article-page .guide-opening-media .guide-article-visual figcaption { padding: 12px 14px; font-size: .8125rem; line-height: 1.45; }
    .guide-article-page .guide-article-hero[data-guide-media="below"] .guide-opening-media { display: none; }
    .guide-article-page .guide-article-hero[data-guide-media="below"] .guide-article-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .guide-article-page .guide-article-hero[data-guide-media="below"] .guide-article-hero-grid > div:first-child { width: 100%; max-width: 850px; margin-inline: auto; }
    .guide-article-page .guide-article-main { padding-top: clamp(24px, 4vw, 56px); }

    @media (max-width: 700px), (max-width: 900px) and (min-height: 900px) {
        .guide-article-page .guide-article-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
        .guide-article-page .guide-article-hero h1 { max-width: none; font-size: clamp(1.625rem, min(5vw, 4.5vh), 2.5rem); }
        .guide-article-page .guide-article-hero .guide-article-lead { font-size: 1rem; line-height: 1.5; }
        .guide-article-page .guide-opening-actions { margin-top: 16px; }
    }
    @media (max-width: 700px) {
        .guide-article-page .guide-article-hero > .modern-container { padding-block: 14px max(14px, env(safe-area-inset-bottom)); }
        .guide-article-page .guide-article-hero .guide-breadcrumbs { margin-bottom: 12px; font-size: .75rem; }
        .guide-article-page .guide-article-hero .guide-kicker { margin-bottom: 8px; font-size: .75rem; }
    }
    /* Riduce prima gli spazi; l'illustrazione passa nell'articolo solo se serve. */
    .guide-article-page .guide-article-hero[data-guide-density="compact"] > .modern-container { padding-block: 10px max(10px, env(safe-area-inset-bottom)); }
    .guide-article-page .guide-article-hero[data-guide-density="compact"] .guide-breadcrumbs { margin-bottom: 8px; }
    .guide-article-page .guide-article-hero[data-guide-density="compact"] .guide-article-hero-grid { gap: 14px 24px; }
    .guide-article-page .guide-article-hero[data-guide-density="compact"] h1 { font-size: clamp(1.5rem, min(3.6vw, 5.4vh), 2.625rem); }
    .guide-article-page .guide-article-hero[data-guide-density="compact"] .guide-article-lead { margin-top: 10px; font-size: .9375rem; line-height: 1.45; }
    .guide-article-page .guide-article-hero[data-guide-density="compact"] .guide-kicker { margin-bottom: 6px; font-size: .75rem; }
    .guide-article-page .guide-article-hero[data-guide-density="compact"] .guide-opening-actions { margin-top: 12px; }
    /* L'anteprima e duplicata integralmente nella sezione raggiunta dal link. */
    .guide-article-page .guide-article-hero[data-guide-preview="below"] .guide-article-lead { display: none; }
    /* Sui telefoni piu stretti anche le parole lunghe entrano intere nel titolo.
       Il limite in rem conserva lo zoom del testo scelto dal lettore. */
    @media (max-width: 319px) {
        .guide-article-page .guide-article-hero h1,
        .guide-article-page .guide-article-hero[data-guide-density="compact"] h1 {
            font-size: clamp(1.375rem, 8vw, 1.5rem);
        }
    }
    @media (max-height: 420px) {
        .guide-article-page .guide-article-hero .guide-breadcrumbs { font-size: .75rem; }
        .guide-article-page .guide-article-hero .guide-kicker { display: none; }
        .guide-article-page .guide-article-hero h1 { max-width: none; }
    }
    @media (forced-colors: active) {
        .guide-article-page .guide-opening-read { border-color: LinkText; }
    }
}

@media print {
    .guide-opening-actions, .guide-article-hero .guide-article-lead { display: none; }
}