/* =====================================================================
   STORIA (storia.php): layout desktop
   Attivo solo da 992px e solo su questa pagina (body.st-d). Mobile invariato.
   ===================================================================== */
@media (min-width: 992px) {
  .st-d { --st-read: 900px; --st-navy: #102d45; --st-muted: #4a5660; --st-line: #dfe3e7; --st-space: clamp(56px, 6vw, 88px); }
  .st-d p.justify { text-align: left !important; }

  /* apertura: foto contenuta */
  .st-d section.blog > .container { max-width: 1200px; }
  .st-d section.blog img.card-img-top { max-height: 520px; object-fit: cover; object-position: center 30%; }

  /* introduzione */
  .st-d section.happy.header > .container { max-width: var(--st-read); padding-left: 32px !important; padding-right: 32px !important; }
  .st-d section.happy.header p { font-size: 1.05rem; line-height: 1.7; color: var(--st-muted); }

  /* timeline: anno a sinistra, testo a destra */
  .st-d .st-timeline {
    display: grid; grid-template-columns: 200px 1fr; column-gap: 48px;
    max-width: var(--st-read); margin: 48px auto var(--st-space); padding: 0 32px;
  }
  .st-d .st-timeline > section { margin: 0 !important; padding: 28px 0 !important; border-top: 1px solid var(--st-line); }
  .st-d .st-timeline > section > .container { max-width: none; padding: 0 !important; margin: 0; text-align: left !important; }
  .st-d .st-timeline h4.story-year { margin: 0; text-align: left; font-size: 3rem; line-height: 1; }
  .st-d .st-timeline p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--st-muted); }

  /* numeri: 4 colonne */
  .st-d .bg-blue .container { max-width: 1100px; }
  .st-d .bg-blue .container > div.p-4 {
    display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: column; grid-template-rows: auto auto;
    column-gap: 32px; padding: 24px 0 48px !important;
  }
  .st-d .bg-blue .container > div.p-4 > div { text-align: center !important; padding-bottom: 0 !important; }

  /* missione: testo a sinistra, logo a destra */
  .st-d section.happy.header:has(img[src*="momenti2"]) > .container {
    display: grid; grid-template-columns: 7fr 5fr; column-gap: 56px; align-items: center; max-width: 1100px;
  }
  .st-d section.happy.header:has(img[src*="momenti2"]) img { grid-column: 2; grid-row: 1 / span 2; width: 100% !important; max-width: 360px; margin: 0 auto; }
  .st-d section.happy.header:has(img[src*="momenti2"]) .link-wrap { grid-column: 1; text-align: left !important; margin: 0 !important; }
  .st-d section.happy.header:has(img[src*="momenti2"]) .btn { width: auto !important; padding: 14px 40px; }
}
@media (min-width: 992px) {
  /* linea continua tra anno e testo, testo allineato */
  .st-d .st-timeline { column-gap: 0; }
  .st-d .st-timeline > section:nth-child(even) { padding-left: 48px !important; }
  .st-d .st-timeline > section > .container.p-5 { padding: 0 !important; }
  .st-d .st-timeline h4.story-year { margin-top: -4px; }
}