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

   Caricato SOLO sulla homepage (condizione 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.

   RITMO VERTICALE: tutte le sezioni usano 64px come unità
   di spaziatura comune (era 80px).

   INDICE:
    1. Reset homepage
    2. Hero full-image
    3. Sezione "Il progetto" (#content)
    4. Percorsi tematici (card ad arco)
    5. Animazioni
    6. Responsive
   ================================================================ */


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

.midhia-homepage {
    background: var(--midhia-bianco);
}


/* ================================================================
   2. HERO FULL-IMAGE
   ================================================================ */

.hero {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--navbar-height));
    min-height: 400px;              /* era 500px */
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 clamp(48px, 12vw, 160px);  /* hero box più internalizzato */
}


.hero-box {
    background: rgba(0, 0, 0, 0.85);
    padding: 42px 45px 38px;        /* era 52px 56px 48px */
    max-width: 432px;               /* era 540px */
    width: fit-content;
}


.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(32px, 5.8vw, 62px);  /* era clamp(40px, 5.8vw, 78px) */
    line-height: 1.0;
    font-weight: 500;
    color: var(--midhia-bianco);
    letter-spacing: normal;
    margin: 0 0 11px;               /* era 0 0 14px */
}


.hero-subtitle {
    font-family: var(--font-body);
    font-size: 14px;                /* era 18px */
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 29px;               /* era 0 0 36px */
}

/*
   Pulsante "Scopri ↓" — 14px (era 17px), proporzionato al titolo.
   I selettori :link/:visited/:hover sono necessari per vincere
   sulle regole globali a:link/a:visited/a:hover in style.css
   (specificità 0,1,1 vs 0,1,0 di .hero-scroll semplice).
*/
.hero-scroll,
.hero-scroll:link,
.hero-scroll:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;                       /* era 8px */
    font-family: var(--font-body);
    font-size: 14px;                /* era 17px */
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #FFFFFFBF;
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.3s ease;
}

.hero-scroll:hover,
.hero-scroll:focus {
    color: #FFFFFFFF;
    opacity: 1;
}


.hero-arrow-icon {
    width: 12px;                    /* era 15px */
    height: 16px;                   /* era 20px */
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: arrowBounceSimple 2s ease-in-out infinite;
}


.hero-scroll-arrow {
    display: inline-block;
    width: 12px;                    /* era 15px */
    height: 16px;                   /* era 20px */
    position: relative;
    flex-shrink: 0;
    animation: arrowBounceSimple 2s ease-in-out infinite;
}

.hero-scroll-arrow::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 1.5px;
    height: 10px;                   /* era 13px */
    background: currentColor;
    border-radius: 1px;
}

.hero-scroll-arrow::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    width: 6px;                     /* era 8px */
    height: 6px;                    /* era 8px */
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateX(-50%) rotate(45deg);
}

.hero-scroll svg {
    animation: arrowBounceSimple 2s ease-in-out infinite;
    flex-shrink: 0;
}


/* ================================================================
   3. #CONTENT — Sezione "Il progetto"
   ================================================================ */


.midhia-homepage #content {
    background: var(--midhia-bianco);
    padding: 45px var(--gutter) 58px;    /* era 56px _ 72px */
    margin-top: 0;
    scroll-margin-top: 0;
}

.midhia-homepage #content .blocks,
.midhia-homepage #content > * {
    max-width: 920px;               /* era 816px — meno aria laterale */
    margin-left: auto;
    margin-right: auto;
}

.midhia-homepage #content h1,
.midhia-homepage #content h2 {
    font-family: var(--font-heading);
    font-size: 26px;                /* era 32px */
    line-height: 1.25;
    font-weight: 500;
    color: var(--midhia-nero);
    letter-spacing: normal;
    margin-bottom: 22px;            /* era 28px */
}

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

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

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


/* ================================================================
   4. PERCORSI TEMATICI — Card ad arco
   ================================================================ */

.percorsi {
    background: var(--midhia-crema);
    padding: 51px 0 96px;           /* era 64px 0 120px */
}

.percorsi-inner {
    max-width: 920px;               /* era 816px — allineato a #content */
    margin: 0 auto;
}

/* Header sezione */
.percorsi-header {
    text-align: left;
    margin-bottom: 32px;            /* era 40px */
}

.percorsi-header h2 {
    font-family: var(--font-heading);
    font-size: 26px;                /* era 32px */
    line-height: 1.25;
    font-weight: 500;
    color: var(--midhia-nero);
    letter-spacing: normal;
    margin-bottom: 0;
}

.percorsi-header p {
    font-family: var(--font-body);
    font-size: 14px;                /* era 17px */
    line-height: 1.5;
    color: var(--midhia-grigio-scuro);
    max-width: 540px;               /* proporzionato alla griglia 920px */
    margin-top: 8px;                /* era 10px */
}

/* Griglia card — ogni card gestisce
   i propri spazi indipendentemente dalle altre. */
.percorsi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 29px;                    /* era 0 36px */
}

/* Singola card — flexbox verticale, ogni card ha
   i propri margini interni indipendenti. */
.percorso-card {
    background: transparent;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s ease;
    min-width: 0;
}

.percorso-card:hover {
    transform: translateY(-5px);    /* era -6px */
}

.percorso-card:visited {
    color: inherit;
}

.percorso-card-image {
    padding: 0;
    width: 100%;
}

.percorso-card-image-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 2.6;
    overflow: hidden;
    border-radius: 999px 999px 0 0;
}

.percorso-card-image-inner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.6s ease;
}

.percorso-card:hover .percorso-card-image-inner img {
    transform: scale(1.06);
}

/* Card body — spaziatura armonica interna,
   indipendente dalle altre card. */
.percorso-card-body {
    padding: 16px 3px 0;            /* era 20px 4px 0 */
    display: flex;
    flex-direction: column;
    flex: 1;
}

.percorso-card-body h3 {
    font-family: var(--font-heading);
    font-size: 19px;                /* era 24px */
    line-height: 1.25;
    font-weight: 500;
    color: var(--midhia-nero);
    letter-spacing: normal;
    margin-bottom: 8px;             /* era 10px */
}

.percorso-card-body p {
    font-family: var(--font-body);
    font-size: 12px;                /* era 15px */
    line-height: 1.55;
    color: var(--midhia-grigio-scuro);
    margin-bottom: 11px;            /* era 14px */
}

/* Link "Esplora il percorso →" */
.percorso-link {
    font-family: var(--font-body);
    font-size: 12px;                /* era 15px */
    font-weight: 500;
    color: var(--midhia-navy);
    display: inline-flex;
    align-items: center;
    gap: 5px;                       /* era 6px */
    transition: gap 0.3s ease;
    text-decoration: none;
    margin-top: auto;
    padding-bottom: 13px;           /* era 16px */
}

.percorso-card:hover .percorso-link {
    gap: 10px;                      /* era 12px */
}


/* ================================================================
   5. ANIMAZIONI
   ================================================================ */

@keyframes arrowBounceSimple {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }   /* era 5px */
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll-arrow,
    .hero-arrow-icon,
    .hero-scroll svg {
        animation: none;
    }

    .percorso-card,
    .percorso-card-image-inner img,
    .percorso-link {
        transition: none;
    }
}


/* ================================================================
   6. RESPONSIVE
   ================================================================ */

/* --- Tablet ≤1024px --- */

@media (max-width: 1024px) {

    .percorsi-grid {
        grid-template-columns: 1fr;
        gap: 19px 0;                /* era 24px 0 */
        max-width: 560px;           /* era 700px */
        margin-left: auto;
        margin-right: auto;
    }

    .percorso-card {
        flex-direction: row;
        align-items: stretch;
        min-height: 144px;          /* era 180px */
    }

    .percorso-card-image {
        flex: 0 0 160px;            /* era 200px */
    }

    .percorso-card-image-inner {
        border-radius: 0;
        aspect-ratio: unset;
        height: 100%;
        min-height: 144px;          /* era 180px */
    }

    .percorso-card-body {
        padding: 16px 19px;         /* era 20px 24px */
        justify-content: center;
    }

    .percorso-card-body h3 {
        font-size: 18px;            /* era 22px */
        line-height: 1.25;
    }

    /* Nasconde la descrizione su tablet */
    .percorso-card-body p {
        display: none;
    }

    .percorso-link {
        font-size: 11px;            /* era 14px */
        padding-bottom: 0;
    }
}


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

@media (max-width: 768px) {

    .hero {
        min-height: 336px;          /* era 420px */
        height: 70vh;
        max-height: 416px;          /* era 520px */
    }

    .hero-bg {
        object-position: center center;
    }

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

    .hero-box {
        padding: 29px 26px 24px;    /* era 36px 32px 30px */
        max-width: none;
    }

    .hero-title {
        font-size: 32px;            /* era 40px */
    }

    .hero-subtitle {
        font-size: 12px;            /* era 15px */
        line-height: 1.5;
    }

    .hero-scroll {
        font-size: 11px;            /* era 14px */
    }

    .midhia-homepage #content {
        padding: 35px var(--gutter) 45px;  /* era 44px _ 56px */
    }

    .midhia-homepage #content h1,
    .midhia-homepage #content h2 {
        font-size: 21px;            /* era 26px */
    }

    .percorsi {
        padding: 38px var(--gutter) 51px;  /* era 48px _ 64px */
    }

    .percorsi-header {
        margin-bottom: 26px;        /* era 32px */
    }

    .percorsi-header h2 {
        font-size: 19px;            /* era 24px */
        line-height: 1.25;
    }

    .percorsi-header p {
        font-size: 12px;            /* era 15px */
    }

    .percorso-card {
        min-height: 120px;          /* era 150px */
    }

    .percorso-card-image {
        flex: 0 0 112px;            /* era 140px */
    }

    .percorso-card-image-inner {
        min-height: 120px;          /* era 150px */
    }

    .percorso-card-body {
        padding: 13px 16px;         /* era 16px 20px */
    }

    .percorso-card-body h3 {
        font-size: 16px;            /* era 20px */
        line-height: 1.25;
        margin-bottom: 5px;         /* era 6px */
    }

    .percorso-card-body p {
        font-size: 10px;            /* era 13px */
        line-height: 1.5;
        margin-bottom: 8px;         /* era 10px */
    }

    .percorso-link {
        font-size: 10px;            /* era 13px */
    }
}


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

@media (max-width: 480px) {

    .hero {
        min-height: 288px;          /* era 360px */
        height: 65vh;
        max-height: 368px;          /* era 460px */
    }

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

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

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

    .hero-subtitle {
        font-size: 11px;            /* era 14px */
        line-height: 1.5;
        margin-bottom: 16px;        /* era 20px */
    }

    .hero-scroll {
        font-size: 10px;            /* era 13px */
    }

    .percorso-card {
        min-height: 104px;          /* era 130px */
    }

    .percorso-card-image {
        flex: 0 0 88px;             /* era 110px */
    }

    .percorso-card-image-inner {
        min-height: 104px;          /* era 130px */
    }

    .percorso-card-body h3 {
        font-size: 14px;            /* era 18px */
        line-height: 1.25;
    }

    .percorsi {
        padding: 32px var(--gutter) 45px;  /* era 40px _ 56px */
    }
}