/* ==========================================================================
   Scuola Edile Modena — Pagine a sezioni

   Impaginazione delle pagine con `pagine.tipo_contenuto = 'sezioni'`, quelle
   che la redazione compone dal backoffice con il nuovo editor
   (includes/pagina_sezioni.php).

   Dipende da:
     css/design-system.css  token, Button, SectionHeading
     css/chi-siamo.css      cs-root, cs-hero, cs-section, cs-wrap
     css/pagina-testi.css   .pt-testo, la tipografia del testo redazionale

   Qui c'e' solo la struttura della singola sezione: testo e immagine
   affiancati, con l'immagine che cambia lato a ogni sezione.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sezione con immagine
   -------------------------------------------------------------------------- */
.ps-sezione {
  display: grid;
  /* Il testo tiene una misura leggibile, l'immagine si adatta. Sotto i 900px
     di larghezza utile la griglia collassa da sola in una colonna. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.ps-sezione__testo {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.ps-sezione__media { min-width: 0; }

/* A sezioni alterne l'immagine passa a sinistra. Si sposta l'ordine visivo e
   non il markup, così la lettura con screen reader resta titolo-testo-immagine. */
@media (min-width: 860px) {
  .ps-sezione--invertita .ps-sezione__testo { order: 2; }
  .ps-sezione--invertita .ps-sezione__media { order: 1; }
}

/* --------------------------------------------------------------------------
   Sezione di solo testo

   Senza immagine la griglia non serve: il testo prende tutta la larghezza
   della sezione, come i paragrafi delle altre pagine redazionali.
   -------------------------------------------------------------------------- */
.ps-sezione--solo-testo {
  display: block;
  width: 100%;
}
.ps-sezione--solo-testo .se-heading { margin-bottom: var(--space-5); }
.ps-sezione--solo-testo .pt-testo { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Immagine
   -------------------------------------------------------------------------- */
.ps-figura {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.ps-figura img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Pulsante di navigazione
   -------------------------------------------------------------------------- */
.ps-sezione__azione {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   Pagina creata ma ancora senza sezioni pubblicate
   -------------------------------------------------------------------------- */
.ps-vuota {
  margin: 0;
  padding: var(--space-10) var(--space-6);
  text-align: center;
  font-size: var(--text-body-md);
  color: var(--text-muted);
  background: var(--warm-sand);
  border-radius: var(--radius-card);
}