/* ================================================================
   HOMEPAGE.CSS — MIDHiA percorsi 1.0
   Autore: Marco Lamorte

   Caricato SOLO sulla homepage del sito percorso
   (condizione $isHomepage in layout.phtml).
   Variabili, navbar e footer sono in style.css.

   RIDIMENSIONAMENTO 80%:
   Tutti i valori dimensionali (font-size, padding, margin, gap,
   width, height in px) sono stati scalati ×0.8 rispetto
   all'originale. Non toccati: border-width, box-shadow, opacity,
   z-index, line-height unitless, %, vh/vw, transizioni.

   STRUTTURA:
     Hero FlexSlider (altezza naturale dall'immagine) con box
     titolo sovrapposto, poi griglia sidebar (1/4) + contenuto (3/4).

   INDICE:
    1. Reset homepage
    2. Hero percorso
    3. Griglia homepage (sidebar + contenuto)
    4. Sidebar (indice della pagina)
    5. Contenuto (#content homepage)
    6. Responsive
   ================================================================ */


/* ================================================================
   1. RESET HOMEPAGE
   ================================================================ */

button.o-icon-search {
    display: none;
}


/* ================================================================
   2. HERO PERCORSO
   Usa FlexSlider come contenitore immagine.
   L'altezza è determinata naturalmente dall'immagine nello slider
   (come Cennino): nessun height/vh fissato.
   Box nero semitrasparente sovrapposto in position: absolute,
   centrato verticalmente, contiene il titolo del percorso.
   ================================================================ */

.hero-percorso {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* FlexSlider: reset decorazioni Cennino.
   Altezza responsiva ×0.8: scala con la viewport, mai sotto 224px
   né sopra 360px. L'immagine copre sempre l'intera area. */
.hero-percorso .hero-slider {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    height: clamp(224px, 33vw, 360px);  /* era clamp(280px, 33vw, 450px) */
}

.hero-percorso .hero-slider .slides > li {
    display: block;
    height: 100%;
}

.hero-percorso .hero-slider .slides img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/*
   Box sovrapposto allo slider — position: absolute + inset: 0
   si estende su tutta l'area dell'immagine.
   Centrato verticalmente (align-items: center),
   posizionato a sinistra con padding laterale.
*/
.hero-percorso-content {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 0 clamp(26px, 8vw, 96px);  /* era clamp(32px, 8vw, 120px) */
    pointer-events: none;
}

/*
   Box overlay — padding contenuto per aderire al testo.
   pointer-events: auto per rendere il box cliccabile se necessario.
*/
.hero-percorso-box {
    background: rgba(0, 0, 0, 0.85);
    padding: clamp(22px, 4vh, 35px) clamp(16px, 3vw, 32px) clamp(19px, 3.5vh, 32px);
    max-width: 640px;               
    width: fit-content;
    pointer-events: auto;
}

/*
   Titolo hero — Cormorant Garamond.
   text-wrap: balance distribuisce le righe in modo uniforme.
*/
.hero-percorso-title {
    font-family: var(--font-heading);
    font-size: clamp(29px, 5.2vw, 51px);  
    line-height: 1.1;
    font-weight: 500;
    color: var(--midhia-bianco);
    letter-spacing: normal;
    text-wrap: balance;
    margin: 0;
}


/* ================================================================
   3. GRIGLIA HOMEPAGE — Sidebar + Contenuto
   ================================================================ */

.homepage-layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 0 38px;                    /* era 0 48px */
    max-width: 960px;               /* era 1200px */
    margin: 0 auto;
    padding: 35px var(--gutter) 58px;  /* era 44px _ 72px */
    align-items: start;
}


/* ================================================================
   4. SIDEBAR — Indice della pagina
   ================================================================ */

.homepage-sidebar {
    padding-right: 13px;            /* era 16px */
}

.sidebar-title {
    font-family: var(--font-body);
    font-size: 11px;                /* era 14px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--midhia-nero);
    margin: 0 0 16px;               /* era 0 0 20px */
    padding-bottom: 10px;           /* era 12px */
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.sidebar-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-links li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.sidebar-links li:last-child {
    border-bottom: none;
}

.sidebar-links a,
.sidebar-links a:link,
.sidebar-links a:visited {
    display: block;
    padding: 8px 0;                 /* era 10px 0 */
    font-family: var(--font-body);
    font-size: 12px;                /* era 15px */
    font-weight: 400;
    line-height: 1.4;
    color: var(--midhia-nero);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sidebar-links a:hover {
    color: var(--midhia-navy);
}


/* ================================================================
   5. CONTENUTO — #content sulla homepage
   Colonna destra. Tipografia coerente con il portale.
   Il selettore .homepage-content scoped evita interferenze
   con le pagine interne dove #content è full-width.
   ================================================================ */

.homepage-content {
    min-width: 0;
    padding: 0;
    max-width: none;
}

/*
   rimuove il padding/max-width globale perché qui
   la griglia .homepage-layout gestisce già gli spazi.
*/
.homepage-layout #content {
    padding: 0;
    max-width: none;
    margin: 0;
}

/* Titoli sezione nel contenuto */
.homepage-content h1,
.homepage-content h2 {
    font-family: var(--font-heading);
    font-size: 22px;                /* era 28px */
    line-height: 1.25;
    font-weight: 500;
    color: var(--midhia-nero);
    letter-spacing: normal;
    margin: 0 0 19px;               /* era 0 0 24px */
}

/* Prima heading: nessun margine superiore (allineata alla sidebar) */
.homepage-content h1:first-child,
.homepage-content h2:first-child,
.homepage-content .blocks > *:first-child h1,
.homepage-content .blocks > *:first-child h2 {
    margin-top: 0;
}

.homepage-content h3 {
    font-family: var(--font-heading);
    font-size: 18px;                /* era 22px */
    line-height: 1.3;
    font-weight: 500;
    color: var(--midhia-nero);
    margin: 26px 0 13px;            /* era 32px 0 16px */
}

.homepage-content p {
    font-family: var(--font-body);
    font-size: 14px;                /* era 17px */
    line-height: 1.65;
    color: var(--midhia-nero);
    margin-bottom: 13px;            /* era 16px */
    text-align: justify;
    hyphens: auto;
}

.homepage-content a {
    color: var(--midhia-navy);
}

.homepage-content a:hover {
    color: var(--midhia-nero);
}

/*
   Next / Previous dentro #content: rimossi.
   Selettori multipli per coprire ogni variante Omeka.
*/
.homepage-content a[rel="next"],
.homepage-content a[rel="prev"],
.homepage-content a[rel="previous"],
.homepage-content .next-previous,
.homepage-content .navigate-before,
.homepage-content .navigate-after,
.homepage-content .navigate-next,
.homepage-content .navigate-prev,
.homepage-content a.next,
.homepage-content a.prev,
.homepage-content a.previous,
.homepage-content li.next,
.homepage-content li.prev,
.homepage-content .next,
.homepage-content .prev,
.homepage-content .previous {
    display: none !important;
}


/* ================================================================
   6. RESPONSIVE
   Stessi breakpoint del portale MIDHiA:
   1024px (tablet), 768px (mobile), 480px (small mobile).
   ================================================================ */


/* --- Tablet ≤ 1024px ---
   La griglia passa a colonna singola.
   La sidebar va sopra il contenuto come blocco orizzontale.
   ------------------------------------------------------------ */

@media (max-width: 1024px) {

    .homepage-layout {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 32px var(--gutter) 45px;  /* era 40px _ 56px */
    }

    .homepage-sidebar {
        position: static;
        padding-right: 0;
        margin-bottom: 26px;        /* era 32px */
        padding-bottom: 19px;       /* era 24px */
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    /*
       Su tablet la sidebar diventa orizzontale:
       le voci si dispongono in riga con wrap.
    */
    .sidebar-title {
        margin-bottom: 11px;        /* era 14px */
        padding-bottom: 0;
        border-bottom: none;
    }

    .sidebar-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 19px;                /* era 0 24px */
    }

    .sidebar-links li {
        border-bottom: none;
    }

    .sidebar-links a {
        padding: 5px 0;             /* era 6px 0 */
        font-size: 11px;            /* era 14px */
    }
}


/* --- Mobile ≤ 768px --- */

@media (max-width: 768px) {

    .hero-percorso-content {
        padding: 0 19px;            /* era 0 24px */
    }

    .hero-percorso-box {
        padding: 22px 19px 19px;    /* era 28px 24px 24px */
        max-width: none;
    }

    .hero-percorso-title {
        font-size: 27px;            /* era 34px */
    }

    .homepage-layout {
        padding: 26px var(--gutter) 35px;  /* era 32px _ 44px */
    }

    .homepage-sidebar {
        margin-bottom: 19px;        /* era 24px */
        padding-bottom: 16px;       /* era 20px */
    }

    .sidebar-links {
        gap: 0 13px;                /* era 0 16px */
    }

    .sidebar-links a {
        font-size: 10px;            /* era 13px */
        padding: 4px 0;             /* era 5px 0 */
    }

    .homepage-content h1,
    .homepage-content h2 {
        font-size: 19px;            /* era 24px */
    }

    .homepage-content h3 {
        font-size: 16px;            /* era 20px */
    }

    .homepage-content p {
        font-size: 12px;            /* era 15px */
        line-height: 1.6;
    }
}


/* --- Small mobile ≤ 480px --- */

@media (max-width: 480px) {

    .hero-percorso-content {
        padding: 0 16px;            /* era 0 20px */
    }

    .hero-percorso-box {
        padding: 19px 16px 16px;    /* era 24px 20px 20px */
    }

    .hero-percorso-title {
        font-size: 22px;            /* era 28px */
    }

    .homepage-layout {
        padding: 19px var(--gutter) 29px;  /* era 24px _ 36px */
    }

    .sidebar-title {
        font-size: 10px;            /* era 13px */
    }

    /*
       Su schermi molto piccoli la sidebar
       torna verticale per leggibilità.
    */
    .sidebar-links {
        flex-direction: column;
        gap: 0;
    }

    .sidebar-links li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .sidebar-links li:last-child {
        border-bottom: none;
    }

    .sidebar-links a {
        padding: 6px 0;             /* era 8px 0 */
        font-size: 11px;            /* era 14px */
    }
}