/* Il distretto (layout "Il Distretto"); mobile ricavato. */
@layer sections {
  /* ---------- Apertura ---------- */
  .distretto-hero { padding: 64px 0 80px; --hero-video-top: 64px; }
  .distretto-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: center; }
  .distretto-hero__main { display: flex; flex-direction: column; gap: 28px; }
  .distretto-hero__text { max-width: 523px; display: flex; flex-direction: column; gap: 16px; font-weight: 500; font-size: 18px; line-height: 1.5; text-wrap: pretty; }
  .distretto-hero__text-2 { opacity: .85; }
  .distretto-hero__map { max-width: 560px; aspect-ratio: 1000 / 1010; justify-self: center; }
  @media (max-width: 767px) {
    .distretto-hero { padding: 40px 0 48px; }
    .distretto-hero__text { font-size: 16px; }
  }

  /* ---------- Comuni aderenti ---------- */
  .distretto-comuni { padding: 80px 0 var(--section-space); }
  .distretto-comuni__inner { display: flex; flex-direction: column; gap: 59px; }
  .distretto-comuni__head { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
  .distretto-comuni__title { max-width: 547px; line-height: 1.14; letter-spacing: -0.03em; }
  .distretto-comuni__intro { width: 100%; max-width: 463px; display: flex; flex-direction: column; gap: 20px; }
  .distretto-comuni__tabs { display: flex; gap: 6px; }
  .distretto-comuni__tab {
    flex: 1 1 0; min-width: 0; height: 64px; padding: 0 8px 14px;
    display: flex; align-items: flex-end; justify-content: center;
    border-radius: 0 0 22px 22px; background: var(--tab); color: var(--tab-fg, #fff);
    font-weight: 700; font-size: 15px; white-space: nowrap;
    transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
    &:hover, &[aria-current] { color: var(--tab-fg, #fff); transform: translateY(4px); }
    &[aria-current] { box-shadow: inset 0 -4px 0 var(--color-accent); }
  }

  .comune-slide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; align-items: stretch; }
  .comune-slide[hidden] { display: none; }
  .comune-slide__info { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 480px; }
  .comune-slide__next-card {
    width: 150px; height: 140px; padding: 14px; display: flex; flex-direction: column; gap: 6px;
    border: 0; border-radius: var(--radius-m); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-line);
    font-family: inherit; text-align: left; cursor: pointer;
    &:hover { box-shadow: inset 0 0 0 1px var(--color-accent); }
  }
  .comune-slide__next-label { font-size: 12px; font-weight: 600; color: var(--color-muted-text); }
  .comune-slide__next-map { flex: 1; min-height: 0; width: 100%; }
  .comune-slide__next-name { font-size: 14px; font-weight: 700; color: var(--color-ink); }
  .comune-slide__bottom { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px 48px; align-items: end; }
  .comune-slide__counter { display: flex; align-items: flex-end; gap: 4px; }
  .comune-slide__num { font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
  .comune-slide__tot { font-weight: 500; color: var(--color-muted-text); }
  .comune-slide__line { width: 107px; height: 2px; margin: 0 0 8px 20px; background: var(--color-ink); }
  .comune-slide__text { max-width: 320px; display: flex; flex-direction: column; gap: 16px; color: var(--color-ink-soft); }
  .comune-slide__name { font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: var(--color-ink); outline: none; }
  .comune-slide__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

  .comune-slide__stack { position: relative; min-height: 480px; }
  .comune-slide__card {
    position: absolute; right: 0; top: 0; z-index: 3; width: 78%; height: 100%;
    display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-m);
    background: var(--color-primary); box-shadow: -18px 0 40px rgb(2 31 23 / 0.22);
  }
  .comune-slide__shape { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: flex-end; padding: 24px 32px 150px; }
  .comune-slide__shape .mappina { height: 100%; max-width: 100%; }
  .comune-slide__band {
    position: absolute; left: 0; right: 0; bottom: 0; height: 139px; padding: 0 32px;
    display: flex; flex-direction: column; justify-content: center; gap: 8px; color: #fff;
    background: linear-gradient(180deg, rgb(11 61 46 / 0.01) 0%, rgb(11 61 46 / 0.45) 100%);
    -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  }
  .comune-slide__band-name { font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -0.02em; }
  .comune-slide__band-count { font-size: 15px; opacity: .85; }
  /* "Scopri →": link testuale bianco verso la pagina del Comune */
  .comune-slide__more {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
    font-weight: 700; font-size: 15px; color: #fff;
    & svg { transition: translate .2s; }
    &:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; & svg { translate: 4px 0; } }
  }
  .comune-slide__behind {
    position: absolute; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    /* Testo scuro: il bianco del design sui due verdi chiari non arriva a 4,5:1 */
    border-radius: var(--radius-m); color: var(--color-ink); cursor: pointer;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .comune-slide__behind--1 { z-index: 2; left: 11%; top: 10%; width: 36%; height: 80%; padding: 18px; background: rgb(47 138 104 / 0.72); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35); }
  .comune-slide__behind--1 .mappina { width: 100%; flex: 1; min-height: 0; margin: 8px 0; }
  .comune-slide__behind--2 { z-index: 1; left: 0; top: 20%; width: 24%; height: 60%; padding: 14px; background: rgb(109 176 142 / 0.7); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4); }
  .comune-slide__behind-name { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; }
  .comune-slide__behind--2 .comune-slide__behind-name { font-size: 14px; }

  @media (max-width: 767px) {
    .distretto-comuni { padding: 48px 0 64px; }
    .distretto-comuni__inner { gap: 32px; }
    .distretto-comuni__tab { height: 56px; padding-bottom: 12px; font-size: 13px; border-radius: 0 0 16px 16px; }
    .comune-slide { gap: 24px; }
    .comune-slide__info { min-height: 0; order: 2; }
    .comune-slide__next-card { display: none; }
    .comune-slide__bottom { grid-template-columns: 1fr; gap: 16px; }
    .comune-slide__line { width: 64px; }
    .comune-slide__num, .comune-slide__name { font-size: 32px; }
    .comune-slide__stack { min-height: 340px; }
    .comune-slide__card { width: 82%; }
    .comune-slide__shape { padding: 16px 20px 110px; }
    .comune-slide__band { height: 100px; padding: 0 20px; }
    .comune-slide__band-name { font-size: 22px; }
    .comune-slide__behind--1 { left: 6%; width: 30%; padding: 12px; }
    .comune-slide__behind--1 .mappina, .comune-slide__behind--2 { display: none; }
    .comune-slide__behind-name { font-size: 13px; }
  }

  /* ---------- Obiettivo ---------- */
  .distretto-obiettivo { background: var(--color-surface); }
  .distretto-obiettivo__grid { align-items: start; }
  .distretto-obiettivo__head { display: flex; flex-direction: column; gap: 16px; }
  .distretto-obiettivo__label { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--color-primary); }
  .distretto-obiettivo__icon { flex: none; }
  .distretto-obiettivo__text { max-width: 600px; display: flex; flex-direction: column; gap: 20px; font-size: 17px; line-height: 1.6; color: var(--color-ink-soft); text-wrap: pretty; }
  .distretto-obiettivo__lead { font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; letter-spacing: -0.03em; color: var(--color-ink); }
  .distretto-obiettivo__lead strong { font-weight: 700; }

  /* ---------- Attività e convenzioni ---------- */
  .distretto-attivita__inner { display: flex; flex-direction: column; gap: 48px; }
  .distretto-attivita__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; & p { max-width: 560px; font-size: 20px; line-height: 1.4; color: var(--color-ink-soft); text-wrap: balance; } }
  .distretto-attivita__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 20px; }
  .big-card {
    min-height: 380px; display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--radius-l); background: var(--color-mint); box-shadow: inset 0 0 0 1px var(--color-mint-line); color: var(--color-ink);
    &:hover { color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-accent), 0 0 0 1px var(--color-accent); }
  }
  .big-card--dark { background: var(--color-primary); color: #fff; box-shadow: none; &:hover { color: #fff; box-shadow: 0 0 0 2px var(--color-accent); } }
  .big-card__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 40px; padding: 40px; }
  .big-card--dark .big-card__body { padding-top: 32px; }
  .big-card__text { display: flex; flex-direction: column; gap: 14px; }
  .big-card__title { font-weight: 600; font-size: clamp(36px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -0.03em; }
  .big-card__desc { max-width: 380px; color: var(--color-ink-soft); }
  .big-card--dark .big-card__desc { color: #fff; opacity: .88; }
  .big-card--dark .section-label--accent { color: var(--color-accent-bright); }
  @media (max-width: 767px) {
    .big-card { min-height: 0; }
    .big-card__body { padding: 28px 24px; gap: 28px; }
    .distretto-attivita__head p { font-size: 17px; }
  }
}