/* ==========================================================================
   SOTTOMODA — Componenti
   Indice:
   1. Header e stella        6. News: griglia e card     11. Pagina Articolo
   2. Menu a tutto schermo   7. Newsletter               12. Hover (solo puntatore fine)
   3. Masthead               8. Bottoni e pillole        13. Movimento ridotto
   4. Pila di card           9. Footer
   5. News: testata e filtri 10. Pagina News
   Tutti gli :hover stanno nella sezione 12.
   ========================================================================== */

/* ---- 1. HEADER E STELLA ---------------------------------------------- */
.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-total);
  padding: var(--safe-top) var(--gutter-r) 0 var(--gutter-l);
  display: flex;
  align-items: center;
  background: var(--c-nero);
}

.menu-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--c-filetto);
  border-radius: 50%;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}

.menu-toggle__line {
  position: absolute;
  left: 13px;
  right: 13px;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-fast);
}
.menu-toggle__line:nth-child(1) { transform: translateY(-5px); }
.menu-toggle__line:nth-child(3) { transform: translateY(5px); }

.menu-open .menu-toggle__line:nth-child(1) { transform: rotate(45deg); }
.menu-open .menu-toggle__line:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle__line:nth-child(3) { transform: rotate(-45deg); }

.menu-toggle:active { color: var(--c-attivo); border-color: var(--c-attivo); }

/* La stella vive nell'header: con is-docked è ferma al centro.
   Sulla home, prima dell'aggancio, masthead.js la porta sul logotipo. */
.site-header__star {
  --box: var(--star-box, var(--star-docked));
  position: absolute;
  left: 50%;
  top: calc(var(--safe-top) + var(--header-h) / 2);
  width: var(--box);
  height: var(--box);
  margin: calc(var(--box) / -2) 0 0 calc(var(--box) / -2);
  color: var(--c-rosa);
  pointer-events: none;
  transition: opacity var(--dur-med), color var(--dur-fast);
}
.site-header__star svg { width: 100%; height: 100%; }
/* Da agganciata è già 44px, come il pulsante del menu: l'area di tocco coincide */
/* Anche agganciata resta la stella originale, non la variante small */
.site-header__star .star-small { display: none; }

.is-docked .site-header__star { pointer-events: auto; }
.site-header__star:active { color: var(--c-attivo); }

/* Sulla home senza JS la stella dell'header resta nascosta: sta nel logotipo */
.has-masthead:not(.js-scrub):not(.is-docked) .site-header__star { opacity: 0; }
.menu-open .site-header__star { opacity: 0; }
.menu-open.is-docked .site-header__star { opacity: 1; }


/* ---- 2. MENU A TUTTO SCHERMO ----------------------------------------- */
.menu {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-total) + 24px) var(--gutter-r) calc(var(--safe-bottom) + 32px) var(--gutter-l);
  background: var(--c-nero);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;     /* in chiusura non deve intercettare i tocchi */
  transition: opacity var(--dur-med), visibility 0s linear var(--dur-med);
}

.menu-open .menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--dur-med), visibility 0s;
}

.menu__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.12em 0;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(2.5rem, 11vw, 7rem);
  line-height: 1;
  letter-spacing: var(--track-display);
  transition: color var(--dur-fast);
}
.menu__link[aria-current="page"],
.menu__link:active { color: var(--c-attivo); }


/* ---- 3. MASTHEAD ----------------------------------------------------- */
.hero {
  position: relative;
  padding-top: var(--header-total);
}

/* Fermo sotto l'header mentre si comprime. Sta sopra la prima card, così le lettere
   si vedono convergere nella stella; non intercetta i tocchi diretti alla card. */
.masthead {
  position: sticky;
  z-index: 2;
  pointer-events: none;
  top: var(--header-total);
  height: calc(var(--svh) * 15);
  min-height: 96px;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--gutter-r) 14px var(--gutter-l);
  transition: opacity var(--dur-med);
}

.masthead__inner {
  width: 100%;
  container-type: inline-size;
}

/* Il divisore 6.7 è la larghezza del logotipo in em (Archivo 125/800),
   misurata nel browser: va aggiornato con il font definitivo. */
.logotype {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(3rem, calc((100vw - 48px) / 6.7), 26rem);
  font-size: calc(100cqw / 6.7);
  line-height: 0.82;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.logotype__word { display: block; }
/* Lettere separate da masthead.js: si chiudono una per una nella stella */
.logotype__char { display: inline-block; transform-origin: center; }
.js-scrub .logotype__char { will-change: transform; }
.js-scrub.is-docked .logotype__char { will-change: auto; }

.logotype__star {
  flex: none;
  width: 0.74em;
  height: 0.74em;
  margin: 0 0.02em -0.16em;
  color: var(--c-rosa);
}
.logotype__star svg { width: 100%; height: 100%; }

/* Con lo scrub attivo in volo c'è la stella dell'header: questa fa da riferimento */
.js-scrub .logotype__star { visibility: hidden; }

.is-docked .masthead {
  opacity: 0;
  visibility: hidden;
}

@media (min-width: 768px) {
  .masthead {
    height: calc(var(--svh) * 27);
    min-height: 180px;
    padding-bottom: 20px;
  }
}


/* ---- 4. PILA DI CARD ------------------------------------------------- */
.stack {
  position: relative;
  z-index: 1;
  display: flow-root;           /* tiene dentro il margine dell'ultima card */
  padding: 0 var(--gutter-r) 0 var(--gutter-l);
}

.stack__item {
  --i: 0;
  position: sticky;
  top: calc(var(--stick-top) + var(--i) * var(--peek));
  margin-bottom: var(--stack-gap);
  aspect-ratio: 4 / 5;
}
.stack__item:nth-child(2) { --i: 1; }
.stack__item:nth-child(3) { --i: 2; }
.stack__item:nth-child(4) { --i: 3; }
/* Sticky conta il margine dentro il contenitore: senza questo spazio finale
   le card coperte si sganciano prima che l'ultima sia arrivata */
.stack__item:last-child { margin-bottom: 40px; }

.stack-card {
  position: relative;
  height: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;              /* non è antenato di elementi sticky */
  transform-origin: center top;
  background: var(--c-nero);
  will-change: transform;
}

.stack-card__media {
  position: absolute;
  inset: 0;
}

.stack-card__media img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos-m);
  will-change: transform;
}

/* Ritagli distinti mobile/desktop: un solo file per card, soggetto sempre sopra il testo */
.stack__item:nth-child(1) { --pos-m: 50% 40%; --pos: 50% 62%; }
.stack__item:nth-child(2) { --pos-m: 70% 50%; --pos: 50% 40%; }
.stack__item:nth-child(3) { --pos-m: 50% 25%; --pos: 50% 30%; }
.stack__item:nth-child(4) { --pos-m: 55% 0%; --pos: 50% 8%; }

/* Velatura scura in basso per la leggibilità */
.stack-card__veil {
  position: absolute;
  inset: 22% 0 0;
  background: linear-gradient(to top, var(--c-velatura) 0%, var(--c-velatura) 60%, rgb(17 11 16 / 0.6) 80%, rgb(17 11 16 / 0) 100%);
}

/* Si scurisce mentre viene coperta */
.stack-card__dim {
  position: absolute;
  inset: 0;
  background: var(--c-nero);
  opacity: 0;
  pointer-events: none;
}

.stack-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  display: grid;
  justify-items: start;
  gap: 12px;
}

.stack-card__title {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 900;
  font-size: var(--fs-chapter);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.stack-card__text { max-width: 34em; }

@media (min-width: 768px) {
  .stack__item {
    aspect-ratio: auto;
    height: calc(var(--svh) * 85 - var(--header-total));
  }
  /* Più alta del riquadro: serve al parallax */
  .stack-card__media img {
    height: 130%;
    object-position: var(--pos);
  }
  /* Il testo sta in basso a sinistra: la velatura resta lì e lascia libero il soggetto */
  .stack-card__veil {
    inset: 0;
    background:
      radial-gradient(ellipse 80% 90% at 0% 100%, var(--c-velatura) 58%, rgb(17 11 16 / 0.72) 74%, rgb(17 11 16 / 0.3) 88%, rgb(17 11 16 / 0) 100%),
      linear-gradient(to top, rgb(17 11 16 / 0.45) 0%, rgb(17 11 16 / 0) 35%);
  }
  .stack-card__body {
    right: 50%;
    padding: 32px;
    gap: 16px;
  }
}


/* ---- 5. NEWS: TESTATA E FILTRI --------------------------------------- */
.news {
  position: relative;
  z-index: 2;
  padding-top: var(--block-gap);
  padding-bottom: var(--block-gap);
  background: var(--c-nero);
}

.news__head {
  display: grid;
  gap: 20px;
  margin-bottom: 32px;
}

.news__title { font-size: var(--fs-section); }

/* In evidenza · Ultime · Tutte →: voci di testo, l'attiva in arancio sottolineata */
.news__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 28px;
  min-width: 0;
}

.filters {
  display: flex;
  gap: 28px;
}

.news__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  transition: color var(--dur-fast);
}
.news__all:active { color: var(--c-attivo); }

@media (min-width: 768px) {
  .news__head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 32px;
    margin-bottom: 40px;
  }
  .news__controls {
    justify-content: flex-end;
    gap: 0 36px;
  }
  .filters { gap: 36px; }
}


/* ---- 6. NEWS: GRIGLIA E CARD ----------------------------------------- */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--c-rosa-soft);
}
.meta__star {
  width: 8px;
  height: 8px;
  flex: none;
  color: var(--c-rosa);
}

/* Riga 1: evidenza + due secondarie */
.news-top {
  row-gap: 24px;
  margin-bottom: var(--block-gap);
}
.news-top__lead,
.news-top__side { grid-column: 1 / -1; }
.news-top__side { display: grid; }

.lead {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-verde);
}
.lead__media { position: absolute; inset: 0; }
.lead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 30%;
}
.lead__veil {
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(to top, var(--c-velatura) 0%, var(--c-velatura) 40%, rgb(17 11 16 / 0) 100%);
}
.lead__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  display: grid;
  gap: 12px;
}
.lead__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lead__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-rosa);
  animation: pulse 2s infinite;
}
@keyframes pulse { 50% { opacity: 0.3; } }

.lead__title {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 800;
  font-size: clamp(2.25rem, 5.4vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: var(--track-display);
  transition: color var(--dur-fast);
}
.lead:active .lead__title { color: var(--c-attivo); }

/* Griglia */
.news-grid {
  row-gap: 32px;
  grid-auto-flow: dense;
}

.news-card {
  position: relative;
  grid-column: 1 / -1;
  min-width: 0;
}

.news-card__link {
  display: block;
  height: 100%;
}

.news-card__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--c-verde);
}
.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%;      /* le foto verticali tengono il volto nel 3:2 */
}

.news-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast);
}

.news-card__rule {
  display: block;
  height: 1px;
  margin: 12px 0 10px;
  background: var(--c-filetto);
  transition: background-color var(--dur-fast);
}

.news-card__link:active .news-card__title { color: var(--c-attivo); }
.news-card__link:active .news-card__rule { background: var(--c-attivo); }

/* Mobile: riga compatta, miniatura + titolo */
@media (max-width: 767px) {
  .news-card--row .news-card__link,
  .news-grid .news-card.is-compact .news-card__link {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-filetto);
  }
  .news-card--row .news-card__media,
  .news-grid .news-card.is-compact .news-card__media {
    grid-row: 1 / span 2;
    aspect-ratio: 1;
  }
  .news-card--row .news-card__title,
  .news-grid .news-card.is-compact .news-card__title {
    margin-top: 0;
    font-size: 1.0625rem;
  }
  .news-card--row .news-card__rule,
  .news-grid .news-card.is-compact .news-card__rule { display: none; }
  .news-card--row .meta,
  .news-grid .news-card.is-compact .meta { align-self: end; }
  .news-card--row { margin-top: 0; }
  .news-top__side { row-gap: 12px; }
  .news-grid { row-gap: 20px; }
}

@media (min-width: 768px) {
  .news-grid { row-gap: 48px; }
  .news-card { grid-column: span 6; }
  .news-card__title { min-height: 2.24em; }   /* filetti allineati sulla riga */
  .news-card.is-wide { grid-column: 1 / -1; }
  .news-card.is-wide .news-card__media { aspect-ratio: 21 / 9; }
  .news-card.is-wide .news-card__title {
    font-size: clamp(2rem, 4.4vw, 4.5rem);
    font-weight: 800;
    letter-spacing: var(--track-display);
    line-height: 1;
    min-height: 0;
    margin-top: 16px;
  }
}

@media (min-width: 900px) {
  .news-top__lead { grid-column: span 8; }
  .news-top__side {
    grid-column: span 4;
    grid-template-rows: 1fr 1fr;
    row-gap: 24px;
  }
  .lead {
    aspect-ratio: auto;
    height: 100%;
    min-height: 560px;
  }
  .lead__body { padding: 24px; }
  .news-card { grid-column: span 4; }
}

@media (min-width: 768px) and (max-width: 899px) {
  .news-top__side {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--grid-gap);
  }
  .lead { aspect-ratio: 3 / 2; }
}

@media (min-width: 1600px) {
  .news-card { grid-column: span 3; }
  .news-card.is-half { grid-column: span 6; }
  .news-card.is-half .news-card__media { aspect-ratio: 2 / 1; }
}

.news__more { margin-top: var(--block-gap); }


/* ---- 7. NEWSLETTER ---------------------------------------------------- */
.newsletter {
  --c-attivo: var(--c-rosa);     /* regola del brief: nel verde l'attivo è rosa */
  margin: 0 calc(var(--gutter-r) * -1) var(--block-gap) calc(var(--gutter-l) * -1);
  padding: 48px var(--gutter-r) 48px var(--gutter-l);
  background: var(--c-verde);
  color: var(--c-rosa);
}

.newsletter__title {
  font-size: clamp(3rem, 12vw, 11rem);
  margin-bottom: 16px;
}

.newsletter__text {
  max-width: 34em;
  margin-bottom: 28px;
}

.newsletter__form {
  display: grid;
  gap: 12px;
  max-width: 720px;
}

.newsletter__input {
  width: 100%;
  min-height: 52px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid var(--c-rosa);
  border-radius: 0;
  background: transparent;
  font-size: 1.125rem;
  -webkit-appearance: none;
  appearance: none;
}
.newsletter__input::placeholder { color: var(--c-rosa-soft); opacity: 1; }

.newsletter__consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding-top: 8px;
  font-size: 0.9375rem;
}
.newsletter__consent input {
  width: 22px;
  height: 22px;
  flex: none;
  margin: 0;
  accent-color: var(--c-rosa);
}
.newsletter__consent a { text-decoration: underline; }
.newsletter__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.newsletter__status {
  grid-column: 1 / -1;
  min-height: 1.4em;
}

@media (min-width: 768px) {
  .newsletter { padding-top: 72px; padding-bottom: 72px; }
  .newsletter__form { grid-template-columns: minmax(0, 1fr) auto; }
}


/* ---- LANDING PROVVISORIA --------------------------------------------- */
/* Solo la stella al centro e il modulo della newsletter sotto */
.landing__main {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(40px, 8svh, 72px);
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--safe-top) + 32px) var(--gutter-r) calc(var(--safe-bottom) + 32px) var(--gutter-l);
}
.landing__star {
  width: min(52vw, 34svh, 360px);
  color: var(--c-rosa);
  animation: landing-in 1.2s var(--ease) both;
}
.landing__star svg { display: block; width: 100%; height: auto; }
.landing__form {
  width: 100%;
  max-width: 520px;
  animation: landing-in 1.2s var(--ease) 0.25s both;
}
/* Bottone rettangolare: rosa, arancio al passaggio, verde Sottomoda a iscrizione fatta */
.landing__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid var(--c-rosa);
  border-radius: 0;
  background: var(--c-rosa);
  color: var(--c-nero);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-med), border-color var(--dur-med), color var(--dur-med);
}
.landing__submit:active { background: var(--c-arancio); border-color: var(--c-arancio); }
.landing__submit.is-done,
.landing__submit.is-done:active {
  background: var(--c-verde);
  border-color: var(--c-verde);
  color: var(--c-rosa);
  cursor: default;
}
@keyframes landing-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 768px) {
  .landing__form { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) {
  .landing__star, .landing__form { animation: none; }
}


/* ---- 8. BOTTONI E PILLOLE --------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--c-rosa);
  color: var(--c-nero);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.pill:active { background: var(--c-attivo); }

.filter {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  color: var(--c-rosa-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  transition: color var(--dur-fast), text-decoration-color var(--dur-fast);
}
.filter:active,
.filter[aria-pressed="true"] {
  color: var(--c-arancio);
  text-decoration-color: var(--c-arancio);
}

.button-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 20px;
  border: 1px solid var(--c-filetto);
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 2.25rem);
  letter-spacing: -0.01em;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.button-wide:active { color: var(--c-attivo); border-color: var(--c-attivo); }


/* ---- 9. FOOTER ------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 2;
  padding-top: 64px;
  padding-bottom: calc(24px + var(--safe-bottom));
  border-top: 1px solid var(--c-filetto);
  background: var(--c-nero);
}

.site-footer__star {
  width: min(58vw, 420px);
  margin-bottom: 48px;
}
.site-footer__star svg,
.landing__star svg {
  width: 100%; height: auto;
  /* Accesso nascosto al CMS (js/main.js): niente zoom al doppio tocco, niente selezione */
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

.site-footer__about {
  max-width: 30em;
  margin-bottom: 32px;
}

.site-footer__links {
  display: grid;
  margin-bottom: 40px;
}
.site-footer__links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--c-filetto);
  transition: color var(--dur-fast);
}
.site-footer__links a:active { color: var(--c-attivo); }

.site-footer__legal { color: var(--c-rosa-soft); }

@media (min-width: 768px) {
  .site-footer__links {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--grid-gap);
  }
}


/* ---- 10. PAGINA NEWS --------------------------------------------------- */
.page {
  padding-top: calc(var(--header-total) + 40px);
  padding-bottom: var(--block-gap);
}

.index {
  max-width: calc(940px + var(--gutter-l) + var(--gutter-r));
  margin: 0 auto;
}

.index__title {
  margin-bottom: 32px;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.index__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.index-item__link { display: block; }

.index-item__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--c-verde);
}
.index-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%;
}

.index-item__read {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--c-arancio);
  color: var(--c-nero);
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 1.75rem;
  opacity: 0;
  transition: opacity var(--dur-fast);
}

.index-item__meta {
  margin-top: 10px;
  color: var(--c-rosa-soft);
}

.index-item__title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast);
}
.index-item__link:active .index-item__title { color: var(--c-attivo); }

@media (min-width: 768px) {
  .index__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 32px;
  }
  /* Ritmo: 1 evidenza + 2 coppie, ripetuto. Il ciclo è di 5 voci */
  .index-item:nth-child(5n + 1) { grid-column: 1 / -1; }
  .index-item:nth-child(5n + 1) .index-item__link {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    align-items: center;
  }
  .index-item:nth-child(5n + 1) .index-item__media { grid-row: 1 / span 2; }
  .index-item:nth-child(5n + 1) .index-item__meta { align-self: end; margin-top: 0; }
  .index-item:nth-child(5n + 1) .index-item__title {
    align-self: start;
    font-weight: 800;
    font-stretch: 100%;
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    line-height: 1;
    letter-spacing: var(--track-display);
  }
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: var(--block-gap);
}

.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 0.8125rem;
  transition: color var(--dur-fast);
}
.pagination__item[aria-current="page"],
a.pagination__item:active { color: var(--c-attivo); }


/* ---- 11. PAGINA ARTICOLO ----------------------------------------------- */
.article__head,
.article__body {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.article__meta { color: var(--c-rosa-soft); margin-bottom: 16px; }

.article__title {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 800;
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: var(--track-display);
  margin-bottom: 16px;
}

.article__subtitle {
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--c-rosa-soft);
}

.article__opening {
  max-width: 1040px;
  margin: 40px auto;
  background: var(--c-verde);
}
.article__opening img { width: 100%; }

.article__body {
  font-size: var(--fs-article);
  line-height: 1.6;
}
.article__body p + p { margin-top: 1.1em; }

.article__quote,
.article__body blockquote {
  position: relative;
  width: min(100vw - var(--gutter-l) - var(--gutter-r), 940px);
  left: 50%;
  transform: translateX(-50%);
  margin: 56px 0;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(2.25rem, 6.4vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: var(--track-display);
}

.article__figure,
.article__body figure { margin: 40px 0; }
.article__figure img,
.article__body figure img,
.article__body > img { width: 100%; }
.article__body > img { margin: 40px 0; }
.article__figure figcaption,
.article__body figcaption {
  margin-top: 10px;
  color: var(--c-rosa-soft);
}

.article__body h2,
.article__body h3,
.article__body h4 {
  margin: 1.6em 0 0.5em;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: var(--track-display);
}
.article__body h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.article__body h3 { font-size: clamp(1.4rem, 3vw, 1.875rem); }
.article__body h4 { font-size: 1.25rem; }
.article__body ul,
.article__body ol { margin: 1.1em 0; padding-left: 1.3em; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body li + li { margin-top: 0.35em; }
.article__body a:not(.back-link) {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-fast);
}
.article__body a:not(.back-link):active { color: var(--c-attivo); }

.article-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 40px 0;
}
.article-gallery figure { margin: 0; }
.article-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.notice { margin-bottom: 24px; }
.notice a { text-decoration: underline; }
.notice .pill { margin-top: 16px; }
.news__empty { margin-bottom: var(--block-gap); color: var(--c-rosa-soft); }

.related {
  margin-top: var(--block-gap);
  padding-top: 32px;
  border-top: 1px solid var(--c-filetto);
}
.related__title {
  margin-bottom: 24px;
  font-size: clamp(2rem, 5vw, 3.5rem);
}
.related .news-grid { row-gap: 32px; }

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 40px;
  transition: color var(--dur-fast);
}
.back-link:active { color: var(--c-attivo); }

@media (min-width: 768px) {
  .related .news-card { grid-column: span 4; }
}


/* ---- 12. HOVER: solo con puntatore fine --------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .menu-toggle:hover { color: var(--c-attivo); border-color: var(--c-attivo); }
  .site-header__star:hover { color: var(--c-attivo); }
  .menu__link:hover { color: var(--c-attivo); }
  .pill:hover { background: var(--c-attivo); }
  .landing__submit:not(.is-done):hover { background: var(--c-arancio); border-color: var(--c-arancio); }
  .filter:hover { color: var(--c-arancio); }
  .news__all:hover { color: var(--c-attivo); }
  .lead:hover .lead__title { color: var(--c-attivo); }
  .news-card__link:hover .news-card__title { color: var(--c-attivo); }
  .news-card__link:hover .news-card__rule { background: var(--c-attivo); }
  .button-wide:hover { color: var(--c-attivo); border-color: var(--c-attivo); }
  .site-footer__links a:hover { color: var(--c-attivo); }
  .index-item__read { display: flex; }
  .index-item__link:hover .index-item__read { opacity: 1; }
  .index-item__link:hover .index-item__title { color: var(--c-attivo); }
  a.pagination__item:hover { color: var(--c-attivo); }
  .back-link:hover { color: var(--c-attivo); }
  .article__body a:not(.back-link):hover { color: var(--c-attivo); }
}


/* ---- 13. MOVIMENTO RIDOTTO ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .stack-card,
  .stack-card__media img { will-change: auto; }
  .menu-toggle__line { transition: none; }
}