/* =========================================================================
   SEZIONE — Hero
   Due formati: "full" (viewport intera, home e pillar) e "compact"
   (intestazione delle pagine interne).
   ========================================================================= */

.ex-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: var(--ex-hero-bg);
    background-size: cover;
    background-position: center;
}

/* Sfumatura che riporta lo sfondo al colore di pagina sopra e sotto:
   garantisce contrasto sul testo qualunque sia l'immagine caricata. */
.ex-hero__backdrop {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, var(--ex-bg) 0%, rgba(18, 19, 20, 0.35) 35%, rgba(18, 19, 20, 0.55) 70%, var(--ex-bg) 100%),
        linear-gradient(to right, rgba(18, 19, 20, 0.85) 0%, rgba(18, 19, 20, 0.2) 70%);
    pointer-events: none;
}

.ex-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* --- Formato a schermo intero ------------------------------------------- */

.ex-hero--full {
    min-height: 100vh;
    min-height: 100svh;
    margin-top: calc(var(--ex-header-h) * -1);
    padding-top: calc(var(--ex-header-h) + var(--ex-space-2xl));
    padding-bottom: var(--ex-space-3xl);
}

.ex-hero--full .ex-hero__inner > * {
    max-width: 62rem;
}

.ex-hero--full .ex-hero__title {
    margin-bottom: var(--ex-space-xl);
}

.ex-hero--full .ex-hero__lead {
    max-width: 42rem;
    margin-bottom: var(--ex-space-2xl);
}

/* --- Formato compatto --------------------------------------------------- */

.ex-hero--compact {
    padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    border-bottom: 1px solid var(--ex-border-hairline);
}

.ex-hero--compact .ex-hero__title {
    max-width: 24ch;
    margin-bottom: var(--ex-space-lg);
}

.ex-hero--compact .ex-hero__lead {
    margin-bottom: var(--ex-space-xl);
}

.ex-hero--compact .ex-hero__backdrop {
    background: linear-gradient(to bottom, rgba(18, 19, 20, 0.7), var(--ex-bg));
}

/* --- Briciole di pane --------------------------------------------------- */

.ex-breadcrumbs {
    margin-bottom: var(--ex-space-lg);
    font-family: var(--ex-font-label);
    font-size: var(--ex-fs-xs);
    letter-spacing: 0.08em;
    color: var(--ex-text-dim);
}

.ex-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ex-breadcrumbs__item + .ex-breadcrumbs__item::before {
    content: '/';
    margin-right: 0.5rem;
    color: var(--ex-border-strong);
}

.ex-breadcrumbs a:hover {
    color: var(--ex-gold);
}

/* Yoast stampa una sequenza di link separati: stessa resa visiva. */
.ex-breadcrumbs #breadcrumbs,
.ex-breadcrumbs .ex-breadcrumbs__list {
    color: var(--ex-text-dim);
}

/* --- Pannello di stato tecnico ------------------------------------------ */

.ex-hero__status {
    position: absolute;
    right: var(--ex-gutter);
    bottom: var(--ex-space-2xl);
    z-index: 1;
    display: none;
    padding-right: var(--ex-space-md);
    border-right: 2px solid var(--ex-gold);
    text-align: right;
    font-family: var(--ex-font-label);
    font-size: var(--ex-fs-2xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.65;
}

.ex-hero__status-title {
    color: var(--ex-text-dim);
    margin-bottom: 0.35rem;
}

.ex-hero__status li {
    font-weight: 700;
    color: var(--ex-cream);
    line-height: 1.9;
}

.ex-hero__status-val {
    color: var(--ex-gold);
}

@media (min-width: 1024px) {
    .ex-hero__status {
        display: block;
    }
}