/* ==========================================================================
   LA GRIGLIA MONDRIAN
   --------------------------------------------------------------------------
   L'insieme della griglia È il quadro. Le celle di base sono quadrate; le
   17 "regioni" sono rettangoli posati sulla griglia con grid-area esplicita.
   Il gap nero della griglia È la linea di Mondrian: nessun bordo disegnato.
   Alcune regioni sono nere: servono a ottenere le linee spesse variabili
   tipiche del quadro senza gestire bordi di peso diverso.

   Le 4 regioni-sezione (.zona--sezione) sono sempre 2x2 celle: quadrate a
   ogni breakpoint, come richiesto.

   Le stesse 17 regioni vengono riposizionate in tre composizioni autoriali:
     desktop  12 colonne x  8 righe
     tablet    8 colonne x 11 righe
     mobile    4 colonne x 15 righe
   Niente auto-flow: ogni regione ha coordinate esplicite ovunque, così a
   ogni larghezza il risultato resta un Mondrian equilibrato.

   Due vincoli tenuti a mano in tutte e tre le composizioni:
   · nessuna regione nera tocca il bordo esterno — altrimenti si fonde con
     lo sfondo e legge come un buco anziché come una linea;
   · scarto dimensionale contenuto: la regione più grande non supera il
     12-15% della superficie.
   ========================================================================== */

.quadro {
  container-type: inline-size;
  width: 100%;
}

.griglia {
  /* Ridefinite dai media query più sotto */
  --colonne: 4;
  --righe: 15;
  --linea: 1.1cqw;

  /* Celle rigorosamente quadrate: cqw = 1% della larghezza del contenitore */
  --cella: calc((100cqw - (var(--colonne) - 1) * var(--linea)) / var(--colonne));

  display: grid;
  grid-template-columns: repeat(var(--colonne), var(--cella));
  grid-template-rows: repeat(var(--righe), var(--cella));
  gap: var(--linea);
  background: var(--nero);
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Le regioni
   -------------------------------------------------------------------------- */

.zona {
  position: relative;
  background: var(--tinta);
  overflow: hidden;
}

.zona--bianco  { --tinta: var(--mondrian-bianco); }
.zona--grigio  { --tinta: var(--mondrian-grigio); }
.zona--rosso   { --tinta: var(--mondrian-rosso); }
.zona--blu     { --tinta: var(--mondrian-blu); }
.zona--giallo  { --tinta: var(--mondrian-giallo); }
.zona--nero    { --tinta: var(--nero); }

/* --------------------------------------------------------------------------
   Le regioni cliccabili
   -------------------------------------------------------------------------- */

.zona--sezione {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* La banda che sale dal basso portando il nome della sezione.
   Porta sul bordo superiore la stessa linea nera che separa le regioni
   (spessore --linea, lo stesso del gap): così, entrando, non sembra un
   pannello sovrapposto ma una nuova regione colorata del quadro. */
/* La banda deborda di 2px sotto e 1px ai lati, e viene ritagliata
   dall'overflow:hidden della regione. Serve perché will-change promuove la
   banda a layer composito separato: su celle di altezza frazionaria il layer
   viene arrotondato e, senza questo margine, lascia affiorare un filo della
   tinta sottostante lungo il bordo inferiore mentre la banda sale.
   Debordando, nessun arrotondamento può scoprire la tinta. */
.zona__nome {
  position: absolute;
  inset: auto -1px -2px -1px;
  height: calc(40% + 2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.4em;

  background: var(--banda);
  color: var(--inchiostro);
  border-top: var(--linea) solid var(--nero);

  font-family: var(--corpo);
  font-size: clamp(0.72rem, 2.2cqw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;

  transform: translateY(101%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.zona--sezione:hover .zona__nome,
.zona--sezione:focus-visible .zona__nome,
.zona--sezione:active .zona__nome {
  transform: translateY(0);
}

/* La banda prende un colore Mondrian diverso da quello della regione che
   la ospita, con inchiostro sempre in pieno contrasto sulla banda. */
.zona--bianco { --banda: var(--mondrian-rosso);  --inchiostro: var(--mondrian-bianco); }
.zona--grigio { --banda: var(--mondrian-blu);    --inchiostro: var(--mondrian-bianco); }
.zona--rosso  { --banda: var(--mondrian-bianco); --inchiostro: var(--nero); }
.zona--blu    { --banda: var(--mondrian-giallo); --inchiostro: var(--nero); }
.zona--giallo { --banda: var(--mondrian-blu);    --inchiostro: var(--mondrian-bianco); }

@media (prefers-reduced-motion: reduce) {
  .zona__nome {
    transition: none;
  }
}

/* ==========================================================================
   COMPOSIZIONE 1 — MOBILE (default): 4 colonne x 15 righe
   grid-area: riga-inizio / colonna-inizio / riga-fine / colonna-fine
   ========================================================================== */

.z-w1 { grid-area:  1 / 1 /  4 / 4; }
.z-r  { grid-area:  1 / 4 /  4 / 5; }
.z-b  { grid-area:  4 / 1 /  6 / 3; }
.z-k1 { grid-area:  4 / 3 /  6 / 4; }
.z-w2 { grid-area:  4 / 4 /  6 / 5; }
.z-s1 { grid-area:  6 / 1 /  8 / 3; }
.z-y1 { grid-area:  6 / 3 /  8 / 5; }
.z-g1 { grid-area:  8 / 1 /  9 / 5; }
.z-s2 { grid-area:  9 / 1 / 11 / 3; }
.z-y2 { grid-area:  9 / 3 / 11 / 5; }
.z-w4 { grid-area: 11 / 1 / 12 / 2; }
.z-k2 { grid-area: 11 / 2 / 12 / 3; }
.z-g2 { grid-area: 11 / 3 / 12 / 5; }
.z-s3 { grid-area: 12 / 1 / 14 / 3; }
.z-w5 { grid-area: 12 / 3 / 14 / 5; }
.z-s4 { grid-area: 14 / 1 / 16 / 3; }
.z-w3 { grid-area: 14 / 3 / 16 / 5; }

/* ==========================================================================
   COMPOSIZIONE 2 — TABLET: 8 colonne x 11 righe
   ========================================================================== */

@media (min-width: 600px) {
  .griglia {
    --colonne: 8;
    --righe: 11;
    --linea: 0.85cqw;
  }

  .z-w1 { grid-area:  1 / 1 /  4 / 4; }
  .z-b  { grid-area:  1 / 4 /  6 / 6; }
  .z-r  { grid-area:  1 / 6 /  4 / 9; }
  .z-g1 { grid-area:  4 / 1 /  6 / 3; }
  .z-k1 { grid-area:  4 / 3 /  6 / 4; }
  .z-w2 { grid-area:  4 / 6 /  6 / 9; }
  .z-s1 { grid-area:  6 / 1 /  8 / 3; }
  .z-y1 { grid-area:  6 / 3 /  8 / 6; }
  .z-w3 { grid-area:  6 / 6 /  8 / 9; }
  .z-w4 { grid-area:  8 / 1 / 10 / 4; }
  .z-s2 { grid-area:  8 / 4 / 10 / 6; }
  .z-k2 { grid-area:  8 / 6 / 10 / 7; }
  .z-g2 { grid-area:  8 / 7 / 10 / 9; }
  .z-y2 { grid-area: 10 / 1 / 12 / 3; }
  .z-s3 { grid-area: 10 / 3 / 12 / 5; }
  .z-s4 { grid-area: 10 / 5 / 12 / 7; }
  .z-w5 { grid-area: 10 / 7 / 12 / 9; }
}

/* ==========================================================================
   COMPOSIZIONE 3 — DESKTOP: 12 colonne x 8 righe
   È la composizione "canonica", quella pensata come quadro.
   ========================================================================== */

@media (min-width: 1024px) {
  .griglia {
    --colonne: 12;
    --righe: 8;
    --linea: 0.62cqw;
  }

  .z-w1 { grid-area: 1 /  1 / 4 /  5; }
  .z-b  { grid-area: 1 /  5 / 5 /  7; }
  .z-r  { grid-area: 1 /  7 / 4 / 10; }
  .z-w2 { grid-area: 1 / 10 / 4 / 13; }
  .z-g1 { grid-area: 4 /  1 / 7 /  3; }
  .z-k1 { grid-area: 4 /  3 / 5 /  5; }
  .z-s1 { grid-area: 4 /  7 / 6 /  9; }
  .z-y1 { grid-area: 4 /  9 / 6 / 13; }
  .z-s2 { grid-area: 5 /  3 / 7 /  5; }
  .z-w3 { grid-area: 5 /  5 / 7 /  7; }
  .z-k2 { grid-area: 6 /  7 / 7 /  8; }
  .z-w4 { grid-area: 6 /  8 / 7 / 11; }
  .z-g2 { grid-area: 6 / 11 / 9 / 13; }
  .z-y2 { grid-area: 7 /  1 / 9 /  4; }
  .z-w5 { grid-area: 7 /  4 / 9 /  7; }
  .z-s3 { grid-area: 7 /  7 / 9 /  9; }
  .z-s4 { grid-area: 7 /  9 / 9 / 11; }
}

/* Su schermi molto larghi il quadro non deve diventare gigantesco */
@media (min-width: 1600px) {
  .quadro {
    max-width: 1500px;
    margin: 0 auto;
  }
}