/* ============================================================
   Marta — pages.css
   Pagine di approfondimento (progetto, cosa fa, come funziona,
   contatti). Estende landing.css: qui solo i pattern che la
   home non ha gia'.

   Impianto "cartamodello": ogni sezione e' un pezzo numerato.
   binario (quota) | intestazione | corpo di lettura.
   E' l'unica griglia della pagina: niente max-width sparsi.
   ============================================================ */

/* Le sezioni della pagina sono pezzi numerati in sequenza */
main {
  counter-reset: pezzo;
}

/* ---- La griglia delle sezioni --------------------------------
   Il titolo scorre nel margine mentre il testo si legge: e' cosi'
   che si annota un documento tecnico, e riempie di senso lo spazio
   che prima restava vuoto a destra. */
.page-section {
  padding-block: var(--section-py);
  counter-increment: pezzo;
}

.page-section--tight {
  padding-block: var(--section-py-tight);
}

.page-section--paper-2 {
  background: var(--paper-2);
}

.page-section > .container {
  display: grid;
  grid-template-columns:
    [rail] var(--rail-w)
    [head] minmax(0, 0.62fr)
    [body] minmax(0, 1fr);
  column-gap: var(--space-6);
  row-gap: var(--space-5);
  align-items: start;
}

/* Il binario: quota del pezzo + linea di costruzione continua */
.page-section > .container::before {
  content: counter(pezzo, decimal-leading-zero);
  grid-column: rail;
  grid-row: 1 / -1;
  align-self: stretch;
  border-right: 1px dashed var(--dash);
  font-family: var(--type-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wide);
  color: var(--mute-2);
  padding-top: 0.35em;
}

.section-dark > .container::before {
  border-right-color: var(--dash-dark);
  color: rgba(255, 253, 250, 0.42);
}

.page-section__header {
  grid-column: head;
  margin-bottom: 0;
}

/* L'intestazione accompagna la lettura SOLO dove non incontra nulla.
   `position: sticky` su un grid item e' confinato dal grid container, non
   dalla sua riga: il titolo continuerebbe a scorrere per tutta l'altezza
   della sezione e finirebbe sopra le griglie di card, che partono dalla
   colonna `head`. Quindi resta fermo in ogni sezione che ne contiene una.
   Se `:has()` non e' supportato il selettore decade e nessun titolo e'
   sticky: degradazione sicura, mai testo sovrapposto. */
.page-section:not(:has(.path, .spec-grid, .duo, .trigger-list, .balance, .moduli__grid, .grid, .page-next, .installazioni))
  > .container > .page-section__header {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
}

.page-section__header h2 {
  font-size: var(--fs-700);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin-block: var(--space-3) var(--space-4);
  text-wrap: balance;
}

.page-section__header .lead {
  font-size: var(--fs-400);
}

/* Prosa e citazioni stanno nella colonna di lettura... */
.page-section > .container > *:not(.page-section__header) {
  grid-column: body;
}

/* ...mentre le griglie di card prendono tutta la larghezza del foglio:
   dentro la sola colonna di lettura diventerebbero illeggibili. */
.page-section > .container > .spec-grid,
.page-section > .container > .trigger-list,
.page-section > .container > .balance,
.page-section > .container > .duo,
.page-section > .container > .path,
.page-section > .container > .moduli__grid,
.page-section > .container > .grid,
.page-section > .container > .installazioni,
.page-section > .container > .page-next {
  grid-column: head / -1;
}

/* L'intestazione tiene la prima riga: le griglie larghe scorrono sotto */
.page-section > .container > .page-section__header {
  grid-row: 1;
}

@media (max-width: 900px) {
  .page-section > .container {
    grid-template-columns: [rail] var(--rail-w) [body] minmax(0, 1fr);
  }

  .page-section__header {
    grid-column: body;
    position: static;
    margin-bottom: var(--space-3);
  }
}

@media (max-width: 600px) {
  .page-section > .container {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-section > .container::before {
    display: none;
  }

  .page-section__header,
  .page-section > .container > *:not(.page-section__header) {
    grid-column: 1;
  }
}

/* ---- Prosa ---------------------------------------------------- */
.prose {
}

.prose p {
  font-size: var(--fs-400);
  line-height: var(--lh-prose);
  color: var(--mute);
  margin-bottom: var(--space-4);
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose strong {
  color: var(--ink);
  font-weight: var(--weight-semibold);
}

.section-dark .prose p {
  color: rgba(255, 253, 250, 0.74);
}

.section-dark .prose strong {
  color: var(--white);
}

/* ---- Affermazione forte -------------------------------------- */
.statement {
  font-family: var(--type-display);
  font-stretch: var(--stretch-display);
  font-size: var(--fs-700);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  word-spacing: normal;
  font-weight: var(--weight-bold);
  color: var(--ink);
  text-wrap: balance;
  padding-top: var(--space-5);
  border-top: 2px solid var(--marta-red);
}

.section-dark .statement {
  color: var(--white);
}

.statement--center {
  margin-inline: auto;
  text-align: center;
}

.statement em {
  font-style: normal;
  color: var(--marta-red);
}

/* ---- Citazione / domanda chiave ------------------------------ */
.pull-quote {
  border-left: 2px solid var(--marta-red);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  margin-block: var(--space-6);
}

.pull-quote p {
  font-family: var(--type-display);
  font-stretch: var(--stretch-display);
  font-size: var(--fs-600);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  word-spacing: normal;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  text-wrap: balance;
}

.pull-quote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--type-mono);
  font-size: var(--fs-100);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--mute-2);
}

.section-dark .pull-quote p {
  color: var(--white);
}

.section-dark .pull-quote cite {
  color: rgba(255, 253, 250, 0.6);
}

/* ---- Coppia di definizioni ------------------------------------ */
.duo {
  display: grid;
  gap: var(--space-5);
}

.duo__item {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
}

/* Tacca di taglio: lo stesso segno delle card della home */
.duo__item::after,
.spec-card::after,
.trigger-list li::after {
  content: '';
  position: absolute;
  right: -0.0625rem;
  bottom: -0.0625rem;
  width: var(--space-4);
  height: var(--space-4);
  border-right: 1px solid var(--marta-red);
  border-bottom: 1px solid var(--marta-red);
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-out);
}

.duo__item:hover::after,
.spec-card:hover::after,
.trigger-list li:hover::after {
  opacity: 1;
}

.duo__label {
  font-family: var(--type-mono);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--marta-red-ink);
  margin-bottom: var(--space-3);
}

.duo__item h3 {
  font-size: var(--fs-500);
  margin-bottom: var(--space-3);
}

.duo__item p {
  font-size: var(--fs-300);
  line-height: var(--lh-prose);
  color: var(--mute);
}

.section-dark .duo__label,
.section-dark .note__label {
  color: var(--marta-red);
}

.section-dark .duo__item {
  background: var(--ink-2);
  border-color: var(--hairline-dark);
}

.section-dark .duo__item p {
  color: rgba(255, 253, 250, 0.74);
}

/* ---- Lista "quando succede X → Marta fa Y" ------------------- */
.trigger-list {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.trigger-list li {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  border-left: 2px solid var(--marta-red);
  position: relative;
}

.trigger-list__when {
  font-family: var(--type-mono);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--mute-2);
}

.trigger-list__then {
  font-size: var(--fs-400);
  line-height: var(--lh-normal);
  color: var(--ink);
}

.section-dark .trigger-list li {
  background: var(--ink-2);
  border-color: var(--hairline-dark);
  border-left-color: var(--marta-red);
}

.section-dark .trigger-list__then {
  color: rgba(255, 253, 250, 0.88);
}

.section-dark .trigger-list__when {
  color: rgba(255, 253, 250, 0.72);
}

/* ---- Percorso: le fasi sono una sequenza vera ----------------- */
.path {
  display: grid;
  gap: var(--space-6);
  counter-reset: path;
}

.path__step {
  position: relative;
  padding-left: calc(var(--space-8) + var(--space-3));
}

.path__step::before {
  counter-increment: path;
  content: counter(path, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--space-8);
  height: var(--space-8);
  display: grid;
  place-items: center;
  border-radius: 0;
  background: var(--paper);
  border: 1px solid var(--dash);
  font-family: var(--type-mono);
  font-size: var(--fs-200);
  color: var(--marta-red-ink);
}

.path__step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(var(--space-8) / 2);
  top: var(--space-8);
  bottom: calc(var(--space-6) * -1);
  border-left: 1px dashed var(--dash);
}

.path__step h3 {
  font-size: var(--fs-500);
  margin-bottom: var(--space-3);
}

.path__step p {
  font-size: var(--fs-300);
  line-height: var(--lh-prose);
  color: var(--mute);
}

.path__aside {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--type-mono);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--mute-2);
  background: transparent;
  border: 1px dashed var(--dash);
  border-radius: 0;
  padding: var(--space-1) var(--space-3);
}

.section-dark .path__step::before {
  background: var(--ink);
  border-color: var(--dash-dark);
  color: var(--marta-red);
}

.section-dark .path__step:not(:last-child)::after {
  border-left-color: var(--dash-dark);
}

.section-dark .path__step p {
  color: rgba(255, 253, 250, 0.74);
}

.section-dark .path__aside {
  border-color: var(--dash-dark);
  color: rgba(255, 253, 250, 0.6);
}

/* ---- Griglia di specifiche ------------------------------------ */
.spec-grid {
  display: grid;
  gap: var(--space-5);
}

.spec-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
}

.spec-card__icon {
  width: clamp(2.125rem, 2.8vw, 2.5rem);
  height: clamp(2.125rem, 2.8vw, 2.5rem);
  display: grid;
  place-items: center;
  border-radius: 0;
  border: 1px dashed var(--dash);
  background: transparent;
  color: var(--marta-red);
  margin-bottom: var(--space-4);
}

.spec-card__icon svg {
  width: clamp(1.0625rem, 1.3889vw, 1.5625rem);
  height: clamp(1.0625rem, 1.3889vw, 1.5625rem);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spec-card h3 {
  font-size: var(--fs-400);
  margin-bottom: var(--space-3);
}

.spec-card p {
  font-size: var(--fs-300);
  line-height: var(--lh-prose);
  color: var(--mute);
}

.section-dark .spec-card {
  background: var(--ink-2);
  border-color: var(--hairline-dark);
}

.section-dark .spec-card p {
  color: rgba(255, 253, 250, 0.72);
}

.section-dark .spec-card__icon {
  border-color: var(--dash-dark);
}

/* ---- Meno / piu': il risultato -------------------------------- */
.balance {
  display: grid;
  gap: var(--space-6);
}

.balance__col h3 {
  font-size: var(--fs-500);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--dash);
}

.section-dark .balance__col h3 {
  border-bottom-color: var(--dash-dark);
}

.balance__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.balance__col li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-300);
  line-height: var(--lh-normal);
  color: var(--mute);
}

.balance__col li::before {
  content: '—';
  color: var(--mute-2);
  flex: none;
  font-family: var(--type-mono);
}

.balance__col--more li::before {
  content: '+';
  color: var(--marta-red);
  font-weight: var(--weight-semibold);
}

.section-dark .balance__col li {
  color: rgba(255, 253, 250, 0.74);
}

/* ---- Navigazione fra le pagine -------------------------------- */
.page-next {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--section-py-tight);
  border-top: 1px dashed var(--dash);
}

.page-next__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out);
}

.page-next__card:hover,
.page-next__card:focus-visible {
  box-shadow: var(--shadow-2);
  border-color: var(--ink);
}

.page-next__label {
  font-family: var(--type-mono);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--mute-2);
}

.page-next__title {
  font-family: var(--type-display);
  font-stretch: var(--stretch-display);
  font-size: var(--fs-500);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
}

.page-next__hint {
  font-size: var(--fs-300);
  color: var(--mute);
}

/* ---- Pagina contatti ------------------------------------------ */
/* Il form sta nel foglio come le card delle altre pagine (bordo sottile
   su carta), non nel blocco scuro che usa la home. */
.page-section .cta-section__form {
  border: 1px solid var(--hairline);
}

/* ---- Sezione immagine + didascalia ---------------------------- */
.page-section--media {
  padding-inline: 0;
}

.page-section--media .media-row {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  width: var(--page-width);
  margin-inline: auto;
  padding-left: calc(var(--rail-w) + var(--space-6));
  border-left: 1px dashed var(--dash);
}

.section-dark .media-row {
  border-left-color: var(--dash-dark);
}

@media (max-width: 600px) {
  .page-section--media .media-row {
    padding-left: 0;
    border-left: 0;
  }
}

@media (min-width: 800px) {
  .media-row {
    grid-template-columns: 1.1fr 1fr;
  }
}

.media-row--reverse .media-row__media {
  order: 2;
}

@media (min-width: 800px) {
  .media-row--reverse .media-row__media {
    order: 1;
  }
}

.media-row__picture,
.media-row__picture img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.media-row__picture {
  border: 1px solid var(--ink);
}

.media-row__picture img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  height: auto;
}

.media-row__caption h3,
.media-row__caption h2 {
  font-size: var(--fs-700);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

.media-row__caption p {
  font-size: var(--fs-400);
  line-height: var(--lh-prose);
  color: var(--mute);
}

.media-row__credit {
  display: block;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--dash);
  font-family: var(--type-mono);
  font-size: var(--fs-100);
  color: var(--mute-2);
}

.section-dark .media-row__caption p,
.section-dark .media-row__credit {
  color: rgba(255, 253, 250, 0.74);
}

/* ---- Breakpoint ----------------------------------------------- */
@media (min-width: 700px) {
  .duo,
  .spec-grid,
  .balance,
  .page-next {
    grid-template-columns: repeat(2, 1fr);
  }

  .trigger-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .spec-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Contatti: le fasi "cosa succede dopo" stanno nell'intestazione, accanto al
   form, per non lasciare vuota la colonna di sinistra. */
.page-section__header .duo__label {
  margin-top: var(--space-6);
}

.page-section__header .path {
  gap: var(--space-5);
}

/* ---- Meta di intestazione (dominio · stato, sotto l'h2) ---------
   Riga piccola in mono, sopra l'eyebrow non c'entra niente: sta dentro
   .page-section__header, sotto l'h2, e racconta "dove sta" e "in che
   stato e'" l'installazione. */
.page-section__meta {
  font-family: var(--type-mono);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--mute-2);
  margin-top: var(--space-3);
}

.section-dark .page-section__meta {
  color: rgba(255, 253, 250, 0.6);
}

.page-section__meta a {
  color: inherit;
  text-decoration: none;
  text-transform: lowercase;
}

.page-section__meta a:hover,
.page-section__meta a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--marta-red);
  text-underline-offset: 0.2em;
}

/* ---- Registro delle installazioni ------------------------------ */
.installazioni {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  counter-reset: install;
}

.installazioni__item {
  display: grid;
  grid-template-columns: var(--space-7) 1fr;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px dashed var(--dash);
}

.installazioni__item:last-child {
  border-bottom: 1px dashed var(--dash);
}

.installazioni__num {
  font-family: var(--type-mono);
  font-size: var(--fs-200);
  letter-spacing: var(--tracking-wide);
  color: var(--mute-2);
}

.installazioni__body {
  display: grid;
  gap: var(--space-1);
}

.installazioni__name {
  font-family: var(--type-display);
  font-stretch: var(--stretch-display);
  font-size: var(--fs-500);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0;
}

.installazioni__name a {
  color: inherit;
  text-decoration: none;
}

.installazioni__name a:hover,
.installazioni__name a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--marta-red);
  text-underline-offset: 0.2em;
}

.installazioni__domain {
  margin: 0;
  font-family: var(--type-mono);
  font-size: var(--fs-100);
  color: var(--mute-2);
  text-transform: lowercase;
  letter-spacing: var(--tracking-wide);
}

.installazioni__status {
  display: inline-block;
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-family: var(--type-mono);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--mute-2);
  border: 1px dashed var(--dash);
  border-radius: 0;
  justify-self: start;
}

.installazioni__status--wip {
  color: var(--marta-red-ink);
  border-color: var(--marta-red);
}

.section-dark .installazioni__item {
  border-top-color: var(--dash-dark);
}

.section-dark .installazioni__item:last-child {
  border-bottom-color: var(--dash-dark);
}

.section-dark .installazioni__num,
.section-dark .installazioni__domain {
  color: rgba(255, 253, 250, 0.6);
}

.section-dark .installazioni__name,
.section-dark .installazioni__name a {
  color: var(--white);
}

.section-dark .installazioni__status {
  color: rgba(255, 253, 250, 0.72);
  border-color: var(--dash-dark);
}

.section-dark .installazioni__status--wip {
  color: var(--marta-red);
  border-color: var(--marta-red);
}

/* h3 dentro .prose: usati dalle pagine interne per sottotitoli di
   sezione di lettura ("Sezioni", "Peculiarita'"). Lo stile segue
   l'eyebrow della testata, ma con un pizzico di peso in piu'. */
.prose h3 {
  font-family: var(--type-display);
  font-stretch: var(--stretch-display);
  font-size: var(--fs-400);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  margin-block: var(--space-6) var(--space-3);
}

.prose h3:first-child {
  margin-top: 0;
}

.section-dark .prose h3 {
  color: var(--white);
}

.prose ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.prose ul li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-400);
  line-height: var(--lh-prose);
  color: var(--mute);
}

.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: var(--space-3);
  height: 1px;
  background: var(--marta-red);
}

.section-dark .prose ul li {
  color: rgba(255, 253, 250, 0.74);
}