/* ————— CSS specifico della pagina portfolio —————
       Solo token del design system. Tre cose: snap discreto tra i casi,
       taglie/dettagli dei casi studio, indicatore di avanzamento. */

    /* Snap DISCRETO: proximity, mai mandatory — lo scroll resta libero,
       il magnete agisce solo quando un caso è già quasi a filo. */
    html {
      scroll-snap-type: y proximity;
      scroll-padding-top: 0; /* i casi sono a piena altezza: snap a filo viewport */
    }
    .case {
      scroll-snap-align: start;
      padding: 0;              /* full-bleed: la cover tocca i bordi */
    }
    .case:target { scroll-margin-block: 0; } /* i punti del rail portano a filo */

    /* Nome progetto + titolo del caso (taglia display, tarata per lo split) */
    .case-name {
      font-size: 1.125rem;
      font-stretch: 118%;
      font-weight: 700;
      color: var(--cobalt);
    }
    .case-title {
      font-size: clamp(1.875rem, 1.3rem + 2.1vw, 3rem);
      font-stretch: 122%;
      font-weight: 740;
      line-height: 1.06;
      letter-spacing: var(--tracking-display);
      /* `balance` accorcia TUTTE le righe per pareggiarle: in una colonna
         stretta produce una parola per riga. `pretty` riempie le righe e
         cura solo l'orfana finale. */
      text-wrap: pretty;
    }
    .case .fact-list { gap: var(--space-s); }
    .case .fact-list > div { padding-bottom: var(--space-s); }

    /* ————— Layout HALF-COVER (scacchiera) —————
       Ogni caso riempie il viewport: metà testo, metà immagine a filo del
       bordo dello schermo (cover, altezza piena). L'alternanza .case--flip
       porta l'immagine dal lato opposto (immagine·testo / testo·immagine).
       Su mobile: immagine in cima a piena larghezza, poi il testo. */
    .case-split {
      display: grid;
      grid-template-columns: 1fr;
    }
    .case-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--space-l);
      padding-block: var(--space-3xl);
      padding-inline: var(--gutter);
    }
    .case-cover-media {
      margin: 0;
      overflow: hidden;
      background: var(--paper);
      min-height: 46vh;         /* mobile: fascia cover in cima */
      order: -1;                /* mobile: immagine sopra il testo */
    }
    .case-cover-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 700ms var(--ease-out);
    }

    @media (min-width: 768px) {
      /* due metà a tutta altezza dello schermo */
      .case-split {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        min-height: 100vh;
        min-height: 100dvh;
      }
      .case-cover-media {
        min-height: 100dvh;
        order: 0;
      }
      /* Il testo si allinea alla COLONNA DI TESTO del sito, cioè al bordo
         interno del .container (che ha già il suo gutter): stesso asse del
         titolo dell'hero, altrimenti il blocco progetto parte più a sinistra. */
      .case-copy {
        padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-2xl);
        padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) clamp(2rem, 4vw, 4rem);
      }
      /* FLIP: immagine a sinistra, testo a destra */
      .case--flip .case-cover-media { order: -1; }
      .case--flip .case-copy {
        padding-inline: clamp(2rem, 4vw, 4rem) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
      }
    }
    @media (hover: hover) and (pointer: fine) {
      .case:hover .case-cover-media img { transform: scale(1.04); }
    }

    /* ————— Indicatore di avanzamento (rail fisso, solo desktop) —————
       Senza JS resta nascosto: è un doppione di navigazione, non contenuto. */
    .progress-rail {
      position: fixed;
      right: clamp(0.625rem, 1.5vw, 1.25rem);
      top: 50%;
      transform: translateY(-50%);
      z-index: var(--z-dropdown);
      display: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
    }
    .progress-rail.is-shown {
      opacity: 1;
      visibility: visible;
      transition: opacity var(--dur-fast) var(--ease-out), visibility 0s;
    }
    @media (min-width: 900px) { .progress-rail { display: block; } }
    .progress-rail__list { display: grid; gap: var(--space-xs); }
    .progress-rail a {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
    }
    .progress-rail a::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      border: 2px solid var(--ink-soft);
      transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
    }
    .progress-rail a[aria-current]::before {
      background: var(--cobalt);
      border-color: var(--cobalt);
      transform: scale(1.3);
    }
    .progress-rail--dark a::before { border-color: var(--text-on-dark-soft); }
    .progress-rail--dark a[aria-current]::before {
      background: var(--green-signal);
      border-color: var(--green-signal);
    }
    .progress-rail--dark a:focus-visible { outline-color: var(--green-signal); }