/* =========================================================================
   PGO — Concept "Outdoor moderno / dinamico"
   chi-siamo.css — Stili specifici della pagina "Chi siamo"
   Riusa token e componenti condivisi (styles.css / tokens.css).
   Mobile-first. NON duplicare regole già presenti nei file condivisi.
   ========================================================================= */

@layer sections {

  /* ---------------------------------------------------- Storia / missione */
  /* Due colonne: testo (.prose) + immagine illustrativa con cornice morbida */
  .storia__grid { display: grid; gap: var(--gutter); align-items: center; }
  .storia__media {
    position: relative; border-radius: var(--r-lg); overflow: hidden;
    box-shadow: var(--sh-md); border: 1px solid var(--c-line);
    aspect-ratio: 4 / 3; background: var(--c-surface-3);
  }
  .storia__media img {
    inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center;
  }
  .storia__media figcaption {
    position: absolute; inset-inline: var(--sp-4); inset-block-end: var(--sp-4);
    color: #fff; font-size: var(--fs-300); font-weight: var(--fw-semi);
    text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  }
  .storia__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(8,26,18,0.6));
    pointer-events: none;
  }

  @media (min-width: 880px) {
    .storia__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-8); }
    .storia__media { aspect-ratio: 3 / 4; }
  }

  /* ----------------------------------------- Comitato e organizzazione */
  .comitato__grid {
    grid-template-columns: 1fr;
  }
  .role-card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    border: 1px solid var(--c-line);
    box-shadow: var(--sh-sm);
    padding: var(--sp-5);
    display: flex; flex-direction: column; gap: var(--sp-2);
    transition: transform var(--t-med) var(--ease-out),
                box-shadow var(--t-med) var(--ease-out);
  }
  .role-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
  .role-card__ico {
    inline-size: 46px; block-size: 46px; border-radius: var(--r-md);
    display: grid; place-items: center;
    background: var(--c-green-050); color: var(--c-brand);
    margin-bottom: var(--sp-2);
  }
  .role-card__ico svg { inline-size: 24px; block-size: 24px; }
  .role-card__role {
    font-size: var(--fs-300); font-weight: var(--fw-bold);
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-brand);
  }
  .role-card__name { font-size: var(--fs-500); font-weight: var(--fw-bold); color: var(--c-ink); }
  .role-card__meta { font-size: var(--fs-400); color: var(--c-text-soft); }

  @media (min-width: 560px) { .comitato__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 980px) { .comitato__grid { grid-template-columns: repeat(4, 1fr); } }
  /* La card "Membri" occupa l'intera larghezza in coda alla griglia */
  .role-card--wide { grid-column: 1 / -1; }
  @media (min-width: 980px) {
    .role-card--wide { flex-direction: row; align-items: center; gap: var(--sp-5); }
    .role-card--wide .role-card__ico { margin-bottom: 0; }
  }

  /* ----------------------------------------------- Come associarsi (join) */
  .join {
    position: relative; isolation: isolate; color: #fff; overflow: hidden;
    border-radius: var(--r-xl);
    display: grid; gap: 0;
  }
  .join__media { position: relative; min-block-size: 220px; }
  .join__media img {
    position: absolute; inset: 0;
    inline-size: 100%; block-size: 100%; object-fit: cover;
    object-position: center 30%;
  }
  .join__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg, rgba(8,40,24,0.55), rgba(20,134,201,0.25));
  }
  .join__body {
    background:
      radial-gradient(120% 120% at 0% 0%, rgba(43,160,224,0.16), transparent 60%),
      var(--c-ink);
    padding: clamp(1.75rem, 4vw, 3rem);
    display: grid; gap: var(--sp-5);
  }
  .join__body h2 { color: #fff; }
  .join__lead { color: rgba(255,255,255,0.9); font-size: var(--fs-500); max-width: 52ch; }
  .join__facts { display: grid; gap: var(--sp-3); }
  .join-fact {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--r-md);
    padding: var(--sp-4);
  }
  .join-fact svg { inline-size: 22px; block-size: 22px; flex: none; color: var(--c-sun-400); margin-top: 2px; }
  .join-fact__label {
    display: block; font-size: var(--fs-300); font-weight: var(--fw-semi);
    text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.7);
  }
  .join-fact__value { font-weight: var(--fw-bold); color: #fff; }
  .join-fact__value code {
    font-family: var(--font-sans); font-weight: var(--fw-bold);
    letter-spacing: 0.03em;
  }
  .join__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

  @media (min-width: 900px) {
    .join { grid-template-columns: 0.85fr 1.15fr; }
    .join__media { min-block-size: 100%; }
    .join__facts { grid-template-columns: repeat(2, 1fr); }
  }

  /* ------------------------------------------------------- Statuto (download) */
  .statuto {
    display: grid; gap: var(--sp-5); align-items: center;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: clamp(1.5rem, 3vw, 2.5rem);
  }
  .statuto__ico {
    inline-size: 64px; block-size: 64px; border-radius: var(--r-md);
    display: grid; place-items: center; flex: none;
    background: var(--grad-brand); color: #fff;
    box-shadow: var(--sh-brand);
  }
  .statuto__ico svg { inline-size: 30px; block-size: 30px; }
  .statuto__text h2 { font-size: var(--fs-600); }
  .statuto__text p { color: var(--c-text-soft); margin-top: var(--sp-2); max-width: 56ch; }

  @media (min-width: 720px) {
    .statuto { grid-template-columns: auto 1fr auto; }
  }
}