/* ============================================================
   MALSCH ITALIA — Sezione «Progetti»
   Le card sono ambientate, non still life: la foto riempie il box
   (cover) invece di starci dentro (contain, come nel catalogo).
   Il formato è fissato con aspect-ratio 3/2 — mai altezze fisse —
   così tutte le card restano proporzionate e allineate a qualsiasi
   larghezza di colonna.
   Nessuna ombra, nessun raggio, nessuna icona: come il resto del tema.
   ============================================================ */

/* --- Card di progetto ------------------------------------------ */

.card--progetto .card__media {
  aspect-ratio: 3 / 2;
  background: var(--color-bg-alt); /* il posto della foto si vede anche prima del load */
}
.card--progetto .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* l'ambientata riempie il riquadro */
  padding: 0;        /* niente aria interna: qui la foto è a filo */
}
.card--progetto .card__body {
  align-items: baseline;
}
.card--progetto .card__title {
  font-size: 1.0625rem;
  margin: 0;
}
/* Il sottotitolo prende taglia e colore dalla classe .label di main.css:
   qui serve solo azzerare il margine di <p>. Regola volutamente scoped su
   .card--progetto — .card__sub esiste anche nella card di prodotto e non è
   questo file a doverla vestire. */
.card--progetto .card__sub {
  margin: 2px 0 0;
}

/* --- Scheda progetto -------------------------------------------- */

.progetto__head .label { display: block; margin-bottom: var(--space-1); }
.progetto__head h1 { margin-bottom: 0; }
.progetto__head { margin-bottom: var(--space-4); }

.progetto__cover {
  margin: 0;
  max-width: 1200px; /* la copertina è grande ma non prende tutti i 1600px */
  aspect-ratio: 3 / 2;
  background: var(--color-bg-alt);
}
.progetto__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.progetto__testo {
  margin-top: var(--space-6);
  max-width: var(--measure); /* 720px: misura di lettura */
}

.progetto__tecnici,
.progetto__download {
  margin-top: var(--space-6);
  max-width: var(--measure);
}
.progetto__download .label { display: block; margin-bottom: var(--space-1); }

/* --- Gallery ----------------------------------------------------- */

/* Carosello (meccanismo in main.css): qui si decide solo quante foto
   stanno in una pagina. Impilate in colonna, nove scatti mettevano cinque
   schermate fra la fine del testo e la scheda successiva. */

/* Qui le frecce NON stanno ai lati: ruberebbero 48px per parte e le foto
   non sarebbero piu' allineate al testo e alle card sopra e sotto. Vanno
   sotto la striscia, a destra — e vale a ogni larghezza. */
.progetto__gallery-shell {
  margin-top: var(--space-8);
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    'vista vista vista'
    '.     prec  succ';
  gap: var(--space-2) var(--space-1);
}
.progetto__gallery {
  /* una per volta sul telefono, due sul tablet, tre da desktop */
  grid-auto-columns: 100%;
  gap: var(--grid-gutter);
}
@media (min-width: 700px) {
  .progetto__gallery { grid-auto-columns: calc((100% - var(--grid-gutter)) / 2); }
}
@media (min-width: 1000px) {
  .progetto__gallery { grid-auto-columns: calc((100% - 2 * var(--grid-gutter)) / 3); }
}
/* le foto qui sono grandi: frecce piu' grandi, alla loro scala */
.progetto__gallery-shell .carosello__freccia { width: 40px; height: 40px; }
.progetto__shot { margin: 0; }
.progetto__shot img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--color-bg-alt);
}
.progetto__shot figcaption { margin-top: var(--space-1); }

.progetto__cta { margin-top: var(--space-8); }