/* ==========================================================================
   El Moll de la Sort — páginas interiores
   Reutiliza los componentes de components.css. Lo único propio de aquí es la
   cabecera de página y la prosa larga, que la portada no tiene.
   §07 · esquinas vivas, filetes de 1 px, cero sombras, radio sólo en píldora.
   ========================================================================== */

/* --- Cabecera de página ------------------------------------------------ */
/* Banda de pergamí, como las de sección de la portada, para que el cambio de
   página se lea igual que un cambio de sección: por color de fondo a sangre. */
.pagina__cap{background:var(--pergami);padding-block:var(--space-5);
  padding-inline:clamp(16px,4vw,var(--space-4))}
.pagina__cap .wrap{max-width:var(--content-max);margin-inline:auto}
.pagina__titol{font-family:var(--font-display);font-weight:600;
  font-size:var(--text-display-l);line-height:var(--lh-display-l);
  margin:var(--space-2) 0 0}
.pagina__lead{font-size:var(--text-body-l);line-height:var(--lh-body);
  max-width:40ch;margin:var(--space-2) 0 0}
/* Los filetes que van sobre pergamí pasan a crema o desaparecen (§07). */
.pagina__cap .rule-top{border-color:var(--paper)}

/* --- Els logotips dels jocs --------------------------------------------
   Són marques de SELAE i els fitxers es serveixen TAL COM ELS DÓNA SELAE,
   sense retocar ni un byte: el color no es canvia al fitxer, es posa aquí amb
   `mask` i `currentColor`. Si algun dia han d'anar a tot color, es canvia la
   màscara per un `<img>` i prou.

   Van a una sola tinta per dues raons, i les dues es poden mesurar. §05 no
   admet colors fora de la paleta, i a l'alçada d'una fila —26 px— el
   multicolor d'EuroDreams (nou colors) i el degradat daurat d'Euromillones no
   es distingeixen: es converteixen en una taca. A una tinta la marca es
   reconeix per la seva forma, que és el que la fa reconeixible a aquesta
   mida.

   L'amplada del buit és fixa perquè els noms quedin alineats: el logotip més
   ample és EuroDreams, 88,9 × 37,7 del seu viewBox, que a 26 px d'alt fa 61
   d'ample. 64 els cobreix tots.
   ---------------------------------------------------------------------- */
/* A l'alçada d'una fila no funcionaven: aquests fitxers no són icones, són
   logotips complets —símbol a dalt i nom a sota— i a 26 px el nom era una
   taca. I dins de la fila el nom ja hi és com a text, així que la marca el
   repetia. Van en una tira pròpia i a 56 px, que és l'alçada a la qual el
   logotip es llegeix. La llista es queda tipogràfica, que és com §09 la
   dibuixa. */
.marques{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--space-3) var(--space-4);margin-top:var(--space-3)}
.marques__marca{flex:none;height:56px;background:currentColor;
  -webkit-mask:var(--marca) no-repeat center/contain;
  mask:var(--marca) no-repeat center/contain}
/* L'amplada surt de la proporció del viewBox de cada fitxer a 56 px d'alt:
   la màscara necessita una caixa i `contain` no la pot deduir. */
.marques__marca--euromillones{--marca:url("../img/jocs/euromillones.svg");width:55px}
.marques__marca--la-primitiva{--marca:url("../img/jocs/la-primitiva.svg");width:107px}
.marques__marca--loteria-nacional{--marca:url("../img/jocs/loteria-nacional.svg");width:66px}
.marques__marca--bonoloto{--marca:url("../img/jocs/bonoloto.svg");width:90px}
.marques__marca--el-gordo{--marca:url("../img/jocs/el-gordo.svg");width:69px}
.marques__marca--eurodreams{--marca:url("../img/jocs/eurodreams.svg");width:132px}
.marques__marca--la-quiniela{--marca:url("../img/jocs/la-quiniela.svg");width:100px}
@media (max-width:520px){
  .marques{gap:var(--space-2) var(--space-3)}
  .marques__marca{height:40px}
  .marques__marca--euromillones{width:39px}
  .marques__marca--la-primitiva{width:76px}
  .marques__marca--loteria-nacional{width:47px}
  .marques__marca--bonoloto{width:64px}
  .marques__marca--el-gordo{width:49px}
  .marques__marca--eurodreams{width:94px}
  .marques__marca--la-quiniela{width:71px}
}

/* --- Prosa ------------------------------------------------------------- */
/* La medida iba en el CONTENEDOR, y ahí `ch` se resuelve con la fuente del
   contenedor, no con la del párrafo: `.prosa` hereda body-l (19px) y sus
   párrafos renderizan a 16, así que 40ch pedía 441 px de ancho para un texto
   que ocupa 410 — y salían líneas de 72 caracteres con la medida
   aparentemente puesta. La medida va ahora en cada bloque de texto, donde el
   `ch` es el suyo. 38ch, medido sobre el render de las cinco interiores, deja
   la línea más larga en 65. */
/* La clase se usa de las dos maneras —envolviendo párrafos y puesta en un
   párrafo suelto— así que la medida va en ambos sitios. Cuando `.prosa` es
   contenedor su `ch` es más ancho que el de sus hijos, y manda el hijo. */
.prosa,
.prosa > p,.prosa > ul,.prosa > ol{max-width:36ch}

/* --- Les legals, a dues columnes --------------------------------------
   El propietari ho va dir clar: «el texto está compactado y puede ocupar el
   ancho de la página». Tenia raó a mitges, i la meitat que no és mesurable:
   **la línia de text no es pot estirar.** El llistó del lloc és cap línia de
   més de 66 caràcters, i la prosa a 1180 px en faria més de 130 — precisament
   el que costa de llegir, i més amb el públic gran d'aquesta botiga.
   Així que el que s'estira és la PÀGINA, no la línia: el títol de secció passa
   a una columna pròpia a l'esquerra i la prosa ocupa la dreta. La pàgina fa
   servir el seu ample, la línia es queda on ha d'estar, i el text puja de 16 a
   19 px —body-l de §06— que és un 19% més d'ample de columna i es llegeix
   millor. El filet de §07 separa les dues columnes.
   Per sota de 900 tornen a ser una sola columna: a 320 px no hi caben dues. */
.legal .section > .wrap{display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:var(--space-3) var(--space-5);align-items:start}
/* El títol lateral BAIXA de mida, i no és estètica: a `clamp(32px,4vw,46px)`
   la paraula «Responsabilidad» fa 380 px i la columna 320, o sigui que sortia
   per damunt del text de la dreta —una paraula sencera trepitjant els
   paràgrafs—. A 32px en fa 265 i hi cap. `overflow-wrap` és el fre de mà: si
   algun dia hi entra una paraula més llarga, es parteix en lloc de vessar.
   Cap guarda ho detecta: `scrollWidth` no creix perquè el vessament és DINS
   de la reixa, i el contrast segueix passant. Va sortir mirant-ho. */
.legal .section > .wrap > .h2{grid-column:1;grid-row:1;margin:0;
  font-size:clamp(26px,2.2vw,32px);line-height:1.1;
  overflow-wrap:break-word;
  padding-right:var(--space-3);
  border-right:var(--border-w-rule) solid var(--border-rule)}
/* Sobre pergamí el filet `--filet` desapareix —és el mateix cas que ja tenien
   `.rule-top` i `.prize-block` a `components.css`—, i per això la línia
   vertical només es veia a les seccions de paper. Crema sobre pergamí sí. */
.legal .section--alt > .wrap > .h2{border-right-color:var(--paper)}
.legal .section > .wrap > :not(.h2){grid-column:2}
.legal .prosa{font-size:var(--text-body-l);line-height:var(--lh-body)}
/* **La mesura es queda a 36ch, i la mana el català.** Això és el que la
   mesura va ensenyar i el càlcul no hauria endevinat: la columna la fixa el
   nombre de `ch`, i quants CARÀCTERS hi caben depèn de la llengua. A 42ch el
   castellà deixava la línia més llarga en 63 —marge de sobres— i el català en
   73; a 38ch, 57 i 68. Les paraules catalanes són més curtes i n'hi caben més
   amb el mateix ample, o sigui que **la llengua que decideix la mesura
   d'aquest lloc és el català**, i mesurar-la en castellà dona permís per a un
   ample que el català no aguanta.
   Els 36ch de base es queden, doncs. El que engreixa la columna és la MIDA
   DE LLETRA: `ch` és l'ample del zero, i a 19 px els mateixos 36ch són 438 px
   en lloc de 369. Si algun dia s'hi toca, tornar a mesurar EL CATALÀ. */

@media (max-width:900px){
  .legal .section > .wrap{grid-template-columns:minmax(0,1fr)}
  .legal .section > .wrap > .h2{grid-column:1;padding-right:0;border-right:none}
  .legal .section > .wrap > :not(.h2){grid-column:1}
}
.prosa > * + *{margin-top:var(--space-2)}
.prosa h3{font-family:var(--font-display);font-weight:600;
  font-size:var(--text-display-m);line-height:var(--lh-display-m);
  margin-top:var(--space-4)}
.prosa ul{margin:var(--space-2) 0 0;padding-left:1.1em}
.prosa li + li{margin-top:var(--space-1)}
.prosa a{font-weight:600}

/* --- Fila de datos ------------------------------------------------------
   §07 «la etiqueta» aplicada a una lista: filete de 1 px por fila, la
   izquierda dice qué es y la derecha el dato en mono. Es la misma pieza que
   el horario de la portada, en serie. */
.dades{border-top:var(--border-w-rule) solid var(--border-rule);margin-top:var(--space-3)}
.dades__fila{display:grid;grid-template-columns:1fr auto;gap:var(--space-2);
  align-items:baseline;padding:var(--space-2) 0;
  border-bottom:var(--border-w-rule) solid var(--border-rule)}
.dades__nom{font-size:var(--text-body-base);max-width:40ch}
.dades__nom small{display:block;font-size:var(--text-small);opacity:.75;margin-top:2px}
.dades__val{font-family:var(--font-mono);font-size:var(--text-small);
  letter-spacing:.04em;text-align:right;white-space:nowrap}

/* --- Pasos numerados ---------------------------------------------------- */
/* §09 los usa en la página de Nadal: filete granate de 2 px arriba, título
   display, una frase. Sin círculos ni globos: es papel impreso. */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:var(--space-3);margin-top:var(--space-4)}
.pas{border-top:2px solid var(--vi);padding-top:var(--space-2)}
.pas__num{font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);color:var(--vi)}
.pas h3{font-family:var(--font-display);font-weight:600;
  font-size:var(--text-display-m);line-height:var(--lh-display-m);margin:var(--space-1) 0 0}
.pas p{margin-top:var(--space-1)}

/* --- Nota al pie de una tabla ------------------------------------------- */
/* Aquí vivía `.pendent`, el aviso de dato pendiente: un recuadro con filete
   granate que decía en la propia página lo que faltaba por confirmar. Ocho de
   esos bloques estaban publicados. Servían mientras el sitio era un borrador y
   eran un defecto en cuanto dejó de serlo: nadie que entra a comprar un décimo
   necesita leer qué le falta a la web.
   Lo que queda es esto: una nota que dice algo cierto y permanente —quién fija
   los precios, de quién son los logotipos— sin filete ni alarma.
   El límit són 40ch i no 66ch: `ch` és l'amplada del zero, i les minúscules
   són més estretes, així que 66ch donaven 105 caràcters per línia i §06 posa
   el sostre a 66. El `.pendent` que hi havia abans ja duia 40ch, calibrat. */
.dades__nota{font-size:var(--text-small);max-width:40ch;
  margin-top:var(--space-3);opacity:.8}

/* --- Cierre de página --------------------------------------------------- */
.tanca{margin-top:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-2)}

@media (max-width:900px){
  .pagina__cap{padding-block:var(--space-4)}
}

/* En móvil la fila de datos deja de ser dos columnas. La columna de valor va
   en mono y algunos valores son largos («Av. Jaume I, 114 · 08100 Mollet del
   Vallès»): a 390 px la rejilla `1fr auto` desbordaba 75 px. Apilado, el
   nombre queda arriba y el valor debajo, alineado a la izquierda. */
@media (max-width:560px){
  .dades__fila{grid-template-columns:minmax(0,1fr);gap:4px}
  .dades__val{text-align:left;white-space:normal}
  .dades__nom{max-width:none}
}