/* Solo /guide/: ricerca e sei argomenti nella schermata iniziale.
   Altezza minima, mai un limite: zoom e finestre estreme restano leggibili. */
@media screen {
    .guide-hub-page {
        --guide-hub-height: 100vh;
        /* La comparsa dei risultati non deve ancorare lo scorrimento alle
           categorie o al footer che vengono spostati più in basso. */
        overflow-anchor: none;
    }
    @supports (height: 100svh) {
        .guide-hub-page { --guide-hub-height: 100svh; }
    }
    @supports (height: 100dvh) {
        .guide-hub-page { --guide-hub-height: 100dvh; }
    }
    .guide-hub-page #top { padding: 0; overflow: visible; scroll-margin-top: var(--guide-header-height); }
    .guide-hub-page #top > .modern-container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: clamp(16px, calc(var(--guide-hub-height) * .026), 32px);
        min-height: max(0px, calc(var(--guide-hub-height) - var(--guide-header-height) - 1px));
        padding-block: clamp(16px, calc(var(--guide-hub-height) * .028), 32px) max(20px, env(safe-area-inset-bottom));
    }
    .guide-hub-page #top .guide-breadcrumbs { margin: 0; font-size: .8125rem; line-height: 1.4; }
    .guide-hub-page .guide-directory-opening {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(24px, 4vw, 56px);
    }
    .guide-hub-page .guide-directory-opening > * { min-width: 0; }
    .guide-hub-page #top .guide-kicker { margin-bottom: 12px; font-size: .75rem; line-height: 1.5; }
    .guide-hub-page #top h1 { font-size: clamp(1.875rem, min(3.5vw, calc(var(--guide-hub-height) * .058)), 3.25rem); line-height: 1.08; }
    .guide-hub-page .guide-directory-lead { margin-top: 16px; font-size: 1rem; line-height: 1.55; }
    .guide-hub-page .guide-search-form { width: 100%; max-width: none; margin: 0; }
    .guide-hub-page .guide-search-controls { flex-wrap: nowrap; gap: 8px; }
    .guide-hub-page .guide-search-controls input { flex: 1 1 0; width: 0; min-height: 48px; padding: 11px 12px; }
    .guide-hub-page .guide-search-controls button { flex: 0 0 auto; padding: 10px 14px; }
    .guide-hub-page .guide-search-reset-icon { display: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
    .guide-hub-page .guide-search-form p { font-size: .875rem; line-height: 1.45; }
    .guide-hub-page .guide-search-form .guide-search-status {
        min-height: var(--guide-search-status-height, 2.9em);
        margin-top: 9px;
    }
    /* Lo spazio dei messaggi serve durante la ricerca, non nella schermata vuota. */
    .guide-hub-page .guide-search-form .guide-search-status:empty { min-height: 0; margin-top: 0; }
    .guide-hub-page .guide-search-examples { gap: 6px; margin-top: 12px; }
    .guide-hub-page .guide-search-examples > span { flex-basis: 100%; font-size: .8125rem; line-height: 1.4; }
    .guide-hub-page .guide-search-example { padding: 8px 12px; font-size: .875rem; line-height: 1.4; }
    .guide-hub-page #guide-browse { margin: 0; }
    .guide-hub-page #guide-browse h2 { margin: 0 0 10px; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.2; }
    .guide-hub-page #guide-browse .guide-section-intro { margin: 0 0 16px; font-size: .9375rem; line-height: 1.45; }
    .guide-hub-page .guide-topic-grid { --hub-topic-gap: clamp(10px, 1.4vw, 18px); gap: var(--hub-topic-gap); }
    .guide-hub-page .guide-topic-card { padding: clamp(14px, calc(var(--guide-hub-height) * .02), 22px); border-top-color: var(--topic-accent); }
    .guide-hub-page .guide-topic-count { font-size: .8125rem; line-height: 1.4; }
    .guide-hub-page .guide-topic-card h3 { margin: 8px 0; padding-right: 0; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.25; }
    .guide-hub-page .guide-topic-card p { font-size: .9375rem; line-height: 1.45; }
    .guide-hub-page .guide-topic-arrow { top: 12px; right: 16px; font-size: 20px; }

    /* Sugli iPad le sei categorie occupano due righe, con parole sempre intere. */
    @media (min-width: 768px) {
        .guide-hub-page .guide-topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 900px) and (min-height: 601px) {
        .guide-hub-page:where(:not([data-hub-height])) .guide-directory-opening { grid-template-columns: minmax(0, 1fr); gap: 20px; }
        .guide-hub-page:where(:not([data-hub-height])) #top h1 { max-width: 24ch; font-size: clamp(1.875rem, 4.5vw, 2.75rem); }
        .guide-hub-page:where(:not([data-hub-height])) .guide-search-examples > span { flex-basis: auto; }
    }
    @media (max-width: 900px) {
        .guide-hub-page:where([data-hub-tall]) .guide-directory-opening { grid-template-columns: minmax(0, 1fr); gap: 20px; }
        .guide-hub-page:where([data-hub-tall]) #top h1 { max-width: 24ch; font-size: clamp(1.875rem, 4.5vw, 2.75rem); }
        .guide-hub-page:where([data-hub-tall]) .guide-search-examples > span { flex-basis: auto; }
    }
    @media (max-width: 640px) {
        .guide-hub-page #top > .modern-container { gap: 18px; padding-block: 14px max(16px, env(safe-area-inset-bottom)); }
        .guide-hub-page .guide-directory-opening { grid-template-columns: minmax(0, 1fr); gap: 16px; }
        .guide-hub-page #top h1 { max-width: none; font-size: clamp(1.75rem, 7.2vw, 2.25rem); }
        .guide-hub-page #top .guide-kicker { display: none; }
        .guide-hub-page .guide-directory-lead { margin-top: 10px; font-size: .9375rem; line-height: 1.4; }
        .guide-hub-page .guide-search-form label { margin-bottom: 6px; font-size: .9375rem; }
        .guide-hub-page .guide-search-controls button { padding-inline: 10px; font-size: .875rem; }
        .guide-hub-page .guide-search-examples { display: none; }
        /* Due colonne normalmente; una sola se il testo ingrandito lo richiede. */
        .guide-hub-page .guide-topic-grid { --hub-topic-gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(7rem, calc((100% - 8px) / 2))), 1fr)); }
        .guide-hub-page .guide-topic-card { display: flex; flex-direction: column; justify-content: center; min-height: 80px; padding: 10px; }
        .guide-hub-page .guide-topic-card h3 { margin: 5px 0 0; font-size: 1rem; }
        .guide-hub-page .guide-topic-count { font-size: .75rem; }
        .guide-hub-page .guide-topic-card p,
        .guide-hub-page .guide-topic-arrow,
        .guide-hub-page #guide-browse .guide-section-intro { display: none; }
    }

    /* Densità scelta misurando il contenuto, anche dopo il caricamento dei font. */
    .guide-hub-page #top[data-opening-density] > .modern-container { gap: 14px; padding-block: 12px max(12px, env(safe-area-inset-bottom)); }
    .guide-hub-page #top[data-opening-density] .guide-directory-opening { gap: 12px 28px; }
    .guide-hub-page #top[data-opening-density] .guide-directory-lead { margin-top: 10px; }
    .guide-hub-page #top[data-opening-density] .guide-search-examples,
    .guide-hub-page #top[data-opening-density] .guide-kicker,
    .guide-hub-page #top[data-opening-density] #guide-browse .guide-section-intro { display: none; }
    .guide-hub-page #top[data-opening-density] .guide-topic-card { padding: 12px; }
    .guide-hub-page #top[data-opening-density] .guide-topic-card h3 { margin-block: 6px; }
    .guide-hub-page #top[data-opening-density="minimal"] .guide-directory-lead,
    .guide-hub-page #top[data-opening-density="minimal"] .guide-topic-card p,
    .guide-hub-page #top[data-opening-density="minimal"] .guide-topic-arrow,
    .guide-hub-page #top[data-opening-density="minimal"] #guide-search-hint { display: none; }
    .guide-hub-page #top[data-opening-density="minimal"] h1 { font-size: clamp(1.5rem, 3.8vw, 2.25rem); }
    .guide-hub-page #top[data-opening-density="minimal"] .guide-topic-card { min-height: 64px; padding: 8px 10px; }
    .guide-hub-page #top[data-opening-density="minimal"] .guide-topic-card h3 { margin-block: 4px 0; }
    @media (max-height: 500px) and (min-width: 440px) {
        /* Le misure in rem permettono il riflusso anche con zoom del solo testo. */
        .guide-hub-page:where(:not([data-hub-height])) .guide-directory-opening { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
        .guide-hub-page:where(:not([data-hub-height])) .guide-topic-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(8rem, calc((100% - var(--hub-topic-gap) * 2) / 3))), 1fr)); }
        .guide-hub-page:where(:not([data-hub-height])) #top .guide-breadcrumbs { display: none; }
        .guide-hub-page:where(:not([data-hub-height])) #top[data-opening-density="minimal"] .guide-topic-card { min-height: 56px; }
        .guide-hub-page:where(:not([data-hub-height])) #top[data-opening-density="minimal"] .guide-topic-count { display: none; }
    }
    @media (min-width: 440px) {
        /* Le misure in rem permettono il riflusso anche con zoom del solo testo. */
        .guide-hub-page:where([data-hub-landscape]) .guide-directory-opening { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
        .guide-hub-page:where([data-hub-landscape]) .guide-topic-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(8rem, calc((100% - var(--hub-topic-gap) * 2) / 3))), 1fr)); }
        .guide-hub-page:where([data-hub-landscape]) #top .guide-breadcrumbs { display: none; }
        .guide-hub-page:where([data-hub-landscape]) #top[data-opening-density="minimal"] .guide-topic-card { min-height: 56px; }
        .guide-hub-page:where([data-hub-landscape]) #top[data-opening-density="minimal"] .guide-topic-count { display: none; }
    }
    @media (max-height: 360px) and (min-width: 440px) {
        .guide-hub-page:where(:not([data-hub-height])) .nav-shell { min-height: 56px; }
        .guide-hub-page:where(:not([data-hub-height])) #top[data-opening-density] > .modern-container { gap: 8px; padding-block: 8px max(8px, env(safe-area-inset-bottom)); }
        .guide-hub-page:where(:not([data-hub-height])) #top[data-opening-density] .guide-directory-opening { gap: 16px; }
        .guide-hub-page:where(:not([data-hub-height])) #top[data-opening-density="minimal"] .guide-topic-card { min-height: 48px; padding: 6px 8px; }
        .guide-hub-page:where(:not([data-hub-height])) #top[data-opening-density="minimal"] .guide-topic-card h3 { margin: 0; font-size: .9375rem; }
        .guide-hub-page:where(:not([data-hub-height])) #guide-browse h2 { margin-bottom: 8px; font-size: 1.125rem; }
    }
    @media (min-width: 440px) {
        .guide-hub-page:where([data-hub-low]) .nav-shell { min-height: 56px; }
        .guide-hub-page:where([data-hub-low]) #top[data-opening-density] > .modern-container { gap: 8px; padding-block: 8px max(8px, env(safe-area-inset-bottom)); }
        .guide-hub-page:where([data-hub-low]) #top[data-opening-density] .guide-directory-opening { gap: 16px; }
        .guide-hub-page:where([data-hub-low]) #top[data-opening-density="minimal"] .guide-topic-card { min-height: 48px; padding: 6px 8px; }
        .guide-hub-page:where([data-hub-low]) #top[data-opening-density="minimal"] .guide-topic-card h3 { margin: 0; font-size: .9375rem; }
        .guide-hub-page:where([data-hub-low]) #guide-browse h2 { margin-bottom: 8px; font-size: 1.125rem; }
    }
    @media (max-height: 500px) and (min-width: 440px) and (max-width: 640px) {
        /* Il campo mantiene spazio per scrivere; il reset resta un bersaglio
           touch di 48px con nome accessibile e suggerimento espliciti. */
        .guide-hub-page:where(:not([data-hub-height])) .guide-search-controls button { display: grid; place-items: center; width: 48px; min-width: 48px; padding: 0; }
        .guide-hub-page:where(:not([data-hub-height])) .guide-search-reset-label { display: none; }
        .guide-hub-page:where(:not([data-hub-height])) .guide-search-reset-icon { display: block; }
    }
    @media (min-width: 440px) and (max-width: 640px) {
        /* Il campo mantiene spazio per scrivere; il reset resta un bersaglio
           touch di 48px con nome accessibile e suggerimento espliciti. */
        .guide-hub-page:where([data-hub-landscape]) .guide-search-controls button { display: grid; place-items: center; width: 48px; min-width: 48px; padding: 0; }
        .guide-hub-page:where([data-hub-landscape]) .guide-search-reset-label { display: none; }
        .guide-hub-page:where([data-hub-landscape]) .guide-search-reset-icon { display: block; }
    }
    @media (max-width: 360px) {
        .guide-hub-page .guide-topic-card h3 { font-size: .9375rem; }
    }
    @media (max-height: 560px) and (max-width: 479px) {
        .guide-hub-page:where(:not([data-hub-height])) #top[data-opening-density="minimal"] .guide-breadcrumbs,
        .guide-hub-page:where(:not([data-hub-height])) #top[data-opening-density="minimal"] .guide-topic-count { display: none; }
        .guide-hub-page:where(:not([data-hub-height])) #top[data-opening-density="minimal"] .guide-topic-card { min-height: 56px; }
    }
    @media (max-width: 479px) {
        .guide-hub-page:where([data-hub-short]) #top[data-opening-density="minimal"] .guide-breadcrumbs,
        .guide-hub-page:where([data-hub-short]) #top[data-opening-density="minimal"] .guide-topic-count { display: none; }
        .guide-hub-page:where([data-hub-short]) #top[data-opening-density="minimal"] .guide-topic-card { min-height: 56px; }
    }
    /* Barre del browser e finestre affiancate possono lasciare meno altezza
       anche in verticale: recupera spazio senza ridurre testo o controlli. */
    @media (max-height: 560px) and (max-width: 439px) {
        .guide-hub-page:where(:not([data-hub-height])) #top[data-opening-density="minimal"] > .modern-container {
            gap: 8px;
            padding-block: 8px max(8px, env(safe-area-inset-bottom));
        }
        .guide-hub-page:where(:not([data-hub-height])) #top[data-opening-density="minimal"] .guide-directory-opening { row-gap: 8px; }
        .guide-hub-page:where(:not([data-hub-height])) #top[data-opening-density="minimal"] #guide-browse h2 { margin-bottom: 8px; }
    }
    @media (max-width: 439px) {
        .guide-hub-page:where([data-hub-short]) #top[data-opening-density="minimal"] > .modern-container {
            gap: 8px;
            padding-block: 8px max(8px, env(safe-area-inset-bottom));
        }
        .guide-hub-page:where([data-hub-short]) #top[data-opening-density="minimal"] .guide-directory-opening { row-gap: 8px; }
        .guide-hub-page:where([data-hub-short]) #top[data-opening-density="minimal"] #guide-browse h2 { margin-bottom: 8px; }
    }

    /* I risultati non partecipano alla misura della schermata iniziale.
       L'attributo viene rimosso nello stesso aggiornamento, prima del disegno. */
    .guide-hub-page #top[data-measuring-opening] #guide-search-results { display: none !important; }
    /* Anche dopo una rotazione misura la stessa apertura della ricerca vuota.
       Conserva la larghezza per calcolare lo spazio dei messaggi reali. */
    .guide-hub-page #top[data-measuring-opening] #guide-search-status {
        height: 0;
        min-height: 0;
        margin-top: 0;
        overflow: hidden;
    }
    .guide-hub-page #guide-search-results {
        min-width: 0;
        margin: 0;
        padding-block: 12px 24px;
        overflow-anchor: none;
    }
    /* Dopo le varianti responsive: il campo conserva la propria posizione,
       seguito dai risultati e poi dalle categorie, nello stesso ordine del DOM. */
    .guide-hub-page #top[data-search-active] > .modern-container {
        min-height: 0;
        justify-content: flex-start;
        padding-top: var(--guide-search-padding);
        row-gap: 0;
    }
    .guide-hub-page #top[data-search-active] .guide-directory-opening {
        align-items: start;
        align-content: start;
        margin-top: var(--guide-search-gap);
        min-height: var(--guide-search-opening-height);
    }
    .guide-hub-page #top[data-search-active] .guide-directory-intro { margin-top: var(--guide-search-intro-offset); }
    .guide-hub-page #top[data-search-active] .guide-search-form { margin-top: var(--guide-search-form-offset); }
    /* Lo spazio distribuito nell'apertura resta sopra il campo. Risultati e
       categorie seguono con una distanza regolare, anche sugli schermi alti. */
    .guide-hub-page #top[data-search-active] #guide-search-results,
    .guide-hub-page #top[data-search-active] #guide-browse {
        margin-top: 24px;
    }
    .guide-hub-page .guide-directory-main { overflow-anchor: none; }
}