/* =========================================================================
   PGO — Concept "Outdoor moderno / dinamico"
   san-rocco.css — Stili specifici della pagina "Chiesa di San Rocco".
   Estende styles.css + tokens.css (NON li modifica).
   Priorità: leggibilità del testo storico lungo (riga ~65-70ch, interlinea ariosa).
   ========================================================================= */

@layer sections, components, utilities;

/* ----------------------------------------------------- LAYOUT STORIA + FOTO */
@layer sections {

  /* Blocco racconto storico: prose centrata, ariosa.
     .prose (max 68ch) e .prose p (line-height var(--lh-body)=1.62) sono già
     definiti in styles.css; qui curo solo ritmo verticale e dettagli editoriali. */
  .story {
    display: grid;
    gap: var(--sp-7);
  }
  .story__col { margin-inline: auto; }

  /* Spazio respirante tra i paragrafi del racconto (oltre il + * + di .prose) */
  .story .prose p + p { margin-top: var(--sp-5); }

  /* Capolettera elegante sul primo paragrafo del racconto */
  .story .prose .drop-cap::first-letter {
    float: left;
    font-family: var(--font-display);
    font-weight: var(--fw-extra);
    font-size: 3.4em;
    line-height: 0.82;
    padding-right: var(--sp-3);
    padding-top: 0.06em;
    color: var(--c-brand);
  }

  /* Pull-quote: la frase della tavoletta incisa di San Rocco */
  .pullquote {
    margin-block: var(--sp-6);
    padding: var(--sp-5) var(--sp-6);
    border-left: 4px solid var(--c-sun-500);
    background: var(--c-surface-2);
    border-radius: 0 var(--r-md) var(--r-md) 0;
  }
  .pullquote blockquote {
    font-family: var(--font-display);
    font-size: var(--fs-600);
    line-height: var(--lh-snug);
    font-weight: var(--fw-bold);
    color: var(--c-ink);
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .pullquote cite {
    display: block;
    margin-top: var(--sp-3);
    font-style: normal;
    font-size: var(--fs-300);
    font-weight: var(--fw-semi);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-muted);
  }
}

/* --------------------------------------------------------------- IL RESTAURO */
@layer sections {
  .restoration__grid {
    display: grid;
    gap: var(--sp-6);
    align-items: start;
  }

  /* Figura affiancata: il disegno tecnico del tetto */
  .restoration__figure {
    margin: 0;
    align-self: start;          /* non stirarsi all'altezza della colonna testo */
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    box-shadow: var(--sh-sm);
  }
  .restoration__figure img {
    display: block;
    inline-size: 100%;
    block-size: auto;           /* rapporto naturale del disegno: niente bande bianche */
    background: #fff;
    padding: var(--sp-4);
  }
  .restoration__figure figcaption {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    font-size: var(--fs-300);
    color: var(--c-muted);
    border-top: 1px solid var(--c-line);
  }

  /* Timeline verticale delle tappe del restauro */
  .timeline {
    display: grid;
    gap: 0;
    margin-top: var(--sp-5);
  }
  .timeline__item {
    position: relative;
    padding-left: var(--sp-6);
    padding-bottom: var(--sp-5);
    border-left: 2px solid var(--c-line);
  }
  .timeline__item:last-child { padding-bottom: 0; border-left-color: transparent; }
  .timeline__item::before {
    content: "";
    position: absolute;
    left: -7px; top: 4px;
    inline-size: 12px; block-size: 12px;
    border-radius: 50%;
    background: var(--c-brand);
    box-shadow: 0 0 0 4px var(--c-green-050);
  }
  .timeline__year {
    font-family: var(--font-display);
    font-weight: var(--fw-extra);
    font-size: var(--fs-500);
    color: var(--c-brand);
    line-height: 1;
  }
  .timeline__item p {
    margin-top: var(--sp-2);
    color: var(--c-text-soft);
    line-height: var(--lh-body);
    max-width: 56ch;
  }

  @media (min-width: 900px) {
    .restoration__grid {
      grid-template-columns: 1.05fr 0.95fr;
      gap: var(--sp-8);
    }
  }
}

/* ----------------------------------------------------------- GALLERIA FOTO */
@layer sections {
  .sr-gallery {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(2, 1fr);
  }
  .sr-gallery figure {
    margin: 0;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--c-surface-3);
    box-shadow: var(--sh-sm);
    border: 1px solid var(--c-line);
    display: flex;
    flex-direction: column;
  }
  .sr-gallery .sr-gallery__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--c-surface-3);
  }
  .sr-gallery img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
  }
  .sr-gallery figure:hover img { transform: scale(1.06); }
  .sr-gallery figcaption {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-300);
    color: var(--c-text-soft);
    line-height: var(--lh-snug);
  }
  /* Prima foto in evidenza su griglia larga */
  .sr-gallery figure:first-child { grid-column: 1 / -1; }
  .sr-gallery figure:first-child .sr-gallery__media { aspect-ratio: 16 / 9; }

  @media (min-width: 760px) {
    .sr-gallery { grid-template-columns: repeat(3, 1fr); }
    .sr-gallery figure:first-child { grid-column: span 3; }
    .sr-gallery figure:first-child .sr-gallery__media { aspect-ratio: 21 / 9; }
  }
}

/* ----------------------------------------------- INFO VISITA / RAGGIUNGERLA */
@layer sections {
  .visit__grid {
    display: grid;
    gap: var(--gutter);
  }
  .info-card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    transition: transform var(--t-med) var(--ease-out),
                box-shadow var(--t-med) var(--ease-out);
  }
  .info-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
  .info-card__ico {
    inline-size: 48px; block-size: 48px;
    border-radius: var(--r-md);
    display: grid; place-items: center;
    background: var(--c-green-050); color: var(--c-brand);
  }
  .info-card__ico svg { inline-size: 26px; block-size: 26px; }
  .info-card h3 { font-size: var(--fs-500); }
  .info-card__list {
    display: grid; gap: var(--sp-3);
    margin-top: var(--sp-2);
  }
  .info-card__list li {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    color: var(--c-text-soft); line-height: var(--lh-snug);
  }
  .info-card__list svg {
    inline-size: 20px; block-size: 20px; flex: none;
    color: var(--c-sky-600); margin-top: 2px;
  }
  .info-card .btn { align-self: flex-start; margin-top: var(--sp-3); }

  @media (min-width: 800px) {
    .visit__grid { grid-template-columns: repeat(2, 1fr); }
  }
}