/* ============================================================================
   lamina-pantalla.css — La làmina, per a pantalla
   ----------------------------------------------------------------------------
   PRINCIPI: la làmina digital NO és un A3 reduït. És una composició editorial
   responsive pensada per a pantalla. L'A3 continua existint com a versió
   imprimible, i el bloc @media print del final el preserva.

   La regla que ho governa tot: NOMÉS SCROLL VERTICAL. Mai cap desplaçament
   lateral, a cap amplada. Tot el que hi ha aquí surt d'aquesta regla.

   Es carrega DESPRÉS de lamina.css i només a les làmines donades d'alta a
   PANTALLA de 07-genera-lamina.py, que hi posen class="lam-pantalla" al body.
   Les làmines que no hi consten es veuen exactament com abans.

   El que NO canvia: ni un text, ni l'ordre dels blocs, ni els colors, ni els
   dibuixos. Això és composició, no contingut.
   ========================================================================== */

/* ── El full ──────────────────────────────────────────────────────────────
   Amplada màxima de 1180 px: prou per mantenir la lectura de trenta segons en
   un monitor gran sense que les línies s'estirin fins a fer-se il·legibles.
   Per sota, ocupa el que hi hagi. */
.lam-pantalla {
  padding: clamp(10px, 2vw, 26px) 0 clamp(28px, 5vw, 52px);
  overflow-x: hidden;                 /* xarxa de seguretat, no la solució */
}

.lam-pantalla .lamina {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(20px, 3.6vw, 44px) clamp(14px, 3vw, 40px) clamp(22px, 3.4vw, 36px);
  border-radius: clamp(0px, 2.6vw, 34px);
}

.lam-pantalla .lam-torna {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 12px;
  padding-inline: clamp(14px, 3vw, 40px);
}

/* ── D'on venen els desbordaments ─────────────────────────────────────────
   Les dues causes reals, tallades d'arrel en comptes de tapar-les:
   1. Un fill de graella té min-width:auto i no es deixa encongir per sota del
      seu contingut. 2. Una paraula llarga no parteix. */
.lam-pantalla :is(section, aside, div, ul, li, figure, p) { min-width: 0; }
.lam-pantalla :is(p, li, b, figcaption, h1, h2) { overflow-wrap: break-word; }

/* Cada panell és un contenidor de consulta: els seus blocs interiors es
   reorganitzen segons l'amplada QUE TENEN, no segons la de la finestra. És el
   que permet que una mateixa SA es vegi bé tant si el panell ocupa un terç com
   si ocupa tot el full, i que cada SA pugui compondre's diferent. */
.lam-pantalla .pan,
.lam-pantalla .mirada { container-type: inline-size; }

/* ── Tipografia fluida ────────────────────────────────────────────────────
   A la paret, el text petit es llegeix de prop. A la pantalla, no: els cossos
   de 12,5 px de l'A3 pugen a 14. Els textos són els mateixos; el que canvia és
   la mida a què es mostren. */
.lam-pantalla .hero-txt h1 { font-size: clamp(29px, 4.4vw, 52px); }
.lam-pantalla .sobre       { font-size: clamp(11.5px, 1.1vw, 15px); letter-spacing: .16em; }
.lam-pantalla .repte       { font-size: clamp(15px, 1.5vw, 18px); max-width: 54ch; }
.lam-pantalla .rt          { font-size: clamp(15px, 1.5vw, 19px); margin-bottom: 14px; }
.lam-pantalla .mirada h2   { font-size: clamp(14px, 1.3vw, 17px); }
.lam-pantalla .mir-t       { font-size: clamp(16px, 1.5vw, 18px); }
.lam-pantalla .mir-x       { font-size: 14.5px; }
.lam-pantalla .ent-x,
.lam-pantalla .dua-x,
.lam-pantalla .figures figcaption { font-size: 14px; line-height: 1.45; }
.lam-pantalla .fase-p      { font-size: 13.5px; }
.lam-pantalla .ad-x        { font-size: 14.5px; }
.lam-pantalla .p-obs li    { font-size: 15px; }
.lam-pantalla .prl b       { font-size: 14.5px; }
.lam-pantalla .prl i       { font-size: 12px; }
.lam-pantalla .tira p      { font-size: clamp(14px, 1.4vw, 17px); }

/* ── Capçalera ────────────────────────────────────────────────────────────
   A l'A3, tres columnes: dibuix · títol · objectius. A pantalla, els objectius
   baixen a una franja pròpia sota el títol i es reparteixen en tres. Guanyen
   aire i el títol deixa d'estar espremut entre dues columnes. */
.lam-pantalla .dalt {
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.6vw, 32px);
  margin-bottom: clamp(18px, 2.6vw, 28px);
}
.lam-pantalla .hero-il { max-width: 520px; margin-inline: auto; width: 100%; }

@media (min-width: 860px) {
  .lam-pantalla .dalt {
    grid-template-columns: minmax(240px, .92fr) minmax(0, 1.6fr);
    align-items: center;
  }
  .lam-pantalla .hero-il { max-width: none; }
  .lam-pantalla .hero-txt { text-align: left; }
  .lam-pantalla .repte { margin-inline: 0; }
  .lam-pantalla .mirada { grid-column: 1 / -1; }
}

.lam-pantalla .mirada { display: grid; gap: 15px; }
.lam-pantalla .mir-u { margin-bottom: 0; }
@container (min-width: 620px) {
  .lam-pantalla .mirada { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
  .lam-pantalla .mirada h2 { grid-column: 1 / -1; margin-bottom: 0; }
}

/* ── Franja del mig ───────────────────────────────────────────────────────
   Una columna al mòbil; entorn i recorregut de costat a partir de tauleta, amb
   el paper de l'educadora a sota ocupant tot l'ample; les tres columnes de
   sempre a partir d'escriptori. */
.lam-pantalla .mig,
.lam-pantalla .mig2,
.lam-pantalla .baix {
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.2vw, 26px);
  margin-bottom: clamp(16px, 2.2vw, 26px);
}

@media (min-width: 720px) {
  .lam-pantalla .mig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lam-pantalla .p-adulta { grid-column: 1 / -1; }
}
/* A partir d'escriptori, l'entorn té fila pròpia i el recorregut comparteix
   fila amb el paper de l'educadora. A l'A3 els tres blocs anaven en tres
   columnes estretes; en una pantalla de 1180 px això deixava l'espai, els
   materials i el temps en columnes de noranta píxels, amb els paràgrafs
   trencats paraula a paraula. Aquí l'entorn s'estén i respira, i el recorregut
   recupera l'amplada per posar les tres fases en filera. */
@media (min-width: 1020px) {
  .lam-pantalla .mig { grid-template-columns: minmax(0, 1.46fr) minmax(0, 1fr); }
  .lam-pantalla .p-entorn { grid-column: 1 / -1; }   /* fila pròpia */
  .lam-pantalla .p-recorregut { grid-column: 1; }
  .lam-pantalla .p-adulta { grid-column: 2; }
}

/* Les tres peces de l'entorn: en filera quan el panell és ample; una sota
   l'altra, amb el dibuix al costat del text, quan no. Una targeta centrada i
   estreta amb un paràgraf llarg a dins no es llegeix. */
.lam-pantalla .ent-graella { grid-template-columns: 1fr; }
.lam-pantalla .ent-u {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
  text-align: left;
  padding: 14px 16px;
}
.lam-pantalla .ent-il { grid-row: 1 / span 2; width: 62px; margin: 0; }
@container (min-width: 430px) {
  .lam-pantalla .ent-graella { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lam-pantalla .ent-u { display: block; text-align: center; padding: 16px 14px; }
  .lam-pantalla .ent-il { width: 84px; margin: 0 auto 10px; }
}

/* El recorregut: en vertical amb les fletxes girades quan el panell és estret,
   en filera quan hi cap. Depèn del panell, no de la finestra. */
.lam-pantalla .cinta { flex-direction: column; gap: 8px; }
.lam-pantalla .cinta .fletxa { transform: rotate(90deg); }
@container (min-width: 380px) {
  .lam-pantalla .cinta { flex-direction: row; gap: 10px; }
  .lam-pantalla .cinta .fletxa { transform: none; }
}

/* Quan les fases van en vertical, el dibuix i el text es posen de costat: en
   columna quedarien tres targetes altíssimes i el recorregut deixaria de
   llegir-se d'un cop d'ull. */
.lam-pantalla .cinta { align-items: stretch; }
.lam-pantalla .fase { display: flex; flex-direction: column; }
.lam-pantalla .fase-il { width: clamp(84px, 34%, 128px); }

/* ── L'infant i el DUA ────────────────────────────────────────────────────
   A l'A3 comparteixen franja. A pantalla, la filera de l'infant és el cor de
   la làmina i se li dona tot l'ample: set figuretes en una sola línia es
   llegeixen com una seqüència, i en dues no. */
.lam-pantalla .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container (min-width: 340px) { .lam-pantalla .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 520px) { .lam-pantalla .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 760px) {
  .lam-pantalla .figures {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
.lam-pantalla .fig-il { width: min(92px, 68%); }

.lam-pantalla .dua-graella { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* ── Franja de baix ───────────────────────────────────────────────────────
   Què observem a tot l'ample i les dues columnes de pràctiques de costat en
   tauleta; les tres de sempre en escriptori. */
@media (min-width: 700px) {
  .lam-pantalla .baix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lam-pantalla .p-obs { grid-column: 1 / -1; }
}
@media (min-width: 1020px) {
  .lam-pantalla .baix { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lam-pantalla .p-obs { grid-column: auto; }
}
.lam-pantalla .pr-cos { gap: 12px; }
.lam-pantalla .prl { min-width: 0; }
.lam-pantalla .pr-fig { width: clamp(62px, 20%, 96px); }

/* ── Tira de peu ──────────────────────────────────────────────────────────── */
.lam-pantalla .tira {
  flex-wrap: wrap;
  gap: 10px 26px;
  padding: 16px clamp(20px, 3vw, 30px);
  border-radius: clamp(20px, 4vw, 999px);
}

/* ── Impressió ────────────────────────────────────────────────────────────
   L'A3 continua sent l'A3. En paper no hi ha desplaçament vertical que valgui:
   o hi cap tot en un full o la làmina deixa de fer la seva feina. Per això la
   composició de pantalla es desfà en imprimir i es recupera la de la plantilla
   mestra —tres franges de tres columnes— amb els seus cossos de lletra.

   Aquest bloc va l'últim del fitxer a propòsit: així guanya per ordre a les
   consultes de finestra i de contenidor de més amunt, que en paper es
   resoldrien amb l'amplada del full i no farien el que toca.
   ====================================================================== */
@media print {
  .lam-pantalla { padding: 0; overflow-x: visible; }
  .lam-pantalla .lamina {
    max-width: none;
    width: 100%;
    padding: 30px 34px 26px;
    border-radius: 0;
  }

  /* Capçalera: dibuix · títol · objectius, com a l'A3. */
  .lam-pantalla .dalt { grid-template-columns: 290px 1fr 300px; gap: 26px; }
  .lam-pantalla .hero-txt { text-align: center; }
  .lam-pantalla .repte { margin-inline: auto; }
  .lam-pantalla .mirada { grid-column: auto; display: block; }
  .lam-pantalla .mirada h2 { margin-bottom: 14px; }
  .lam-pantalla .mir-u { margin-bottom: 14px; }
  .lam-pantalla .mir-u:last-child { margin-bottom: 0; }

  /* Les tres franges de sempre. */
  .lam-pantalla .mig { grid-template-columns: 1.15fr 1.15fr .86fr; gap: 20px; }
  .lam-pantalla .p-entorn,
  .lam-pantalla .p-recorregut,
  .lam-pantalla .p-adulta { grid-column: auto; }
  .lam-pantalla .mig2 { grid-template-columns: 1.52fr 1fr; gap: 20px; }
  .lam-pantalla .baix { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .lam-pantalla .p-obs { grid-column: auto; }
  .lam-pantalla .mig, .lam-pantalla .mig2, .lam-pantalla .baix { margin-bottom: 20px; }

  .lam-pantalla .ent-graella { grid-template-columns: repeat(3, 1fr); }
  .lam-pantalla .ent-u { display: block; text-align: center; padding: 14px 10px; }
  .lam-pantalla .ent-il { width: 74px; margin: 0 auto 8px; }
  .lam-pantalla .cinta { flex-direction: row; gap: 8px; }
  .lam-pantalla .cinta .fletxa { transform: none; }
  .lam-pantalla .fase-il { width: 96px; margin-inline: auto; }
  .lam-pantalla .figures {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .lam-pantalla .fig-il { width: 78px; }
  .lam-pantalla .dua-graella { grid-template-columns: repeat(3, 1fr); }
  .lam-pantalla .pr-fig { width: 84px; }

  /* Els cossos de lletra de l'A3: en paper el text petit es llegeix de prop. */
  .lam-pantalla .hero-txt h1 { font-size: 40px; }
  .lam-pantalla .sobre { font-size: 12px; }
  .lam-pantalla .repte { font-size: 14px; max-width: 46ch; }
  .lam-pantalla .rt { font-size: 16px; margin-bottom: 12px; }
  .lam-pantalla .mirada h2 { font-size: 14px; }
  .lam-pantalla .mir-t { font-size: 15px; }
  .lam-pantalla .mir-x,
  .lam-pantalla .ad-x,
  .lam-pantalla .p-obs li { font-size: 12.5px; }
  .lam-pantalla .ent-x,
  .lam-pantalla .dua-x,
  .lam-pantalla .fase-p,
  .lam-pantalla .figures figcaption { font-size: 11.5px; }
  .lam-pantalla .prl b { font-size: 12.5px; }
  .lam-pantalla .prl i { font-size: 10.5px; }
  .lam-pantalla .tira { padding: 14px 24px; }
  .lam-pantalla .tira p { font-size: 14px; }
}