/* ============================================================================
   quotidiana.css — «Moments de vida quotidiana»

   Ni làmina ni taulell. Aquí la pantalla ha d'explicar primer com entenem el
   moment i deixar les situacions per al final, que és l'ordre invers al
   d'Explorar. Per això el marc va obert i el detall va plegat.

   La família de color de la secció és el préssec, com a la portada i a la
   targeta. Els blocs derivats van en verd perquè es distingeixin del marc: el
   marc és citació, i el derivat, el que diuen les situacions.

   Com a la resta de pantalles: només desplaçament vertical, mai lateral.
   ========================================================================== */

.quotidiana, .quotidiana-moment { padding: var(--e-7) 0 var(--e-8); }
.quotidiana :is(section, div, ul, li, p, h1, h2, h3, h4),
.quotidiana-moment :is(section, div, ul, li, p, h1, h2, h3, h4) { min-width: 0; }
.quotidiana :is(p, li, h1, h2, h3, blockquote),
.quotidiana-moment :is(p, li, h1, h2, h3, blockquote) { overflow-wrap: break-word; }

/* ── Portada de la secció ─────────────────────────────────────────────────── */
.mq-portada { max-width: 60ch; margin-bottom: var(--e-7); }
.mq-portada h1 { font-size: var(--mida-3xl); margin: var(--e-3) 0; }
.mq-portada .entradeta { font-size: var(--mida-l); color: var(--text-suau); }

.mq-graella {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
  margin-bottom: var(--e-6);
}
@media (min-width: 40rem) { .mq-graella { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .mq-graella { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mq-targeta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-5);
  border: 1px solid var(--linia);
  border-radius: var(--radi-l);
  background: var(--superficie);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.mq-targeta:hover { border-color: var(--pressec); box-shadow: var(--ombra-1); transform: translateY(-2px); }
.mq-targeta:focus-visible { outline: 3px solid var(--verd); outline-offset: 3px; }
.mq-nom { grid-column: 1; font-size: var(--mida-l); font-weight: 800; }
.mq-peu { grid-column: 1; font-size: var(--mida-s); color: var(--text-suau); }
.mq-fletxa { grid-column: 2; grid-row: 1 / span 3; align-self: center; color: var(--pressec); font-size: var(--mida-l); }
.mq-sense_contingut { background: var(--fons-alt); }

.mq-estat {
  grid-column: 1;
  justify-self: start;
  padding: 2px 10px;
  border-radius: var(--radi-ple);
  font-size: var(--mida-xs);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mq-estat-complet { background: var(--verd-vel); color: var(--verd-text); }
.mq-estat-en_construccio { background: var(--mel-vel); color: var(--mel-text); }
.mq-estat-sense_contingut { background: var(--fons-alt); color: var(--text-tenue); }
.mq-nota { max-width: 62ch; }

/* ── Pàgina d'un moment ───────────────────────────────────────────────────── */
.mq-torna { font-size: var(--mida-s); }
.mq-torna a { color: var(--pressec-text); }
.mq-cap { margin: var(--e-4) 0 var(--e-7); }
.mq-cap h1 { font-size: var(--mida-3xl); margin: var(--e-3) 0; }
.mq-cap .mq-estat { display: inline-block; }
.mq-xifres { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6); margin: 0; padding: 0; list-style: none; }
.mq-xifres li { font-size: var(--mida-s); color: var(--text-suau); }
.mq-xifres span { font-size: var(--mida-xl); font-weight: 900; color: var(--pressec-text); margin-right: 6px; }

.quotidiana-moment section { margin-bottom: var(--e-7); }
.quotidiana-moment h2 {
  font-size: var(--mida-s);
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pressec-text);
  margin-bottom: var(--e-4);
}
.mq-ajuda { font-size: var(--mida-s); color: var(--text-suau); max-width: 64ch; margin-bottom: var(--e-4); }

/* ── El marc: citacions literals ──────────────────────────────────────────── */
.mq-cita {
  margin: 0 0 var(--e-4);
  padding: var(--e-5);
  border-left: 3px solid var(--pressec);
  border-radius: 0 var(--radi-m) var(--radi-m) 0;
  background: var(--superficie);
  max-width: 72ch;
}
.mq-cita p { margin: 0 0 var(--e-3); font-size: var(--mida-m); line-height: 1.6; max-width: none; }
.mq-cita footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.mq-font { font-size: var(--mida-xs); color: var(--text-tenue); }
.mq-cita-normativa { border-left-color: var(--blau); }

/* ── El que falta ─────────────────────────────────────────────────────────── */
.mq-pendent {
  padding: var(--e-5);
  border: 1px dashed var(--linia-forta);
  border-radius: var(--radi-l);
  background: var(--fons-alt);
}
.mq-pendent ul { margin: 0 0 var(--e-3); padding-left: 1.2rem; max-width: 64ch; }
.mq-pendent li { margin-bottom: var(--e-2); font-size: var(--mida-s); }

/* ── Blocs derivats de les situacions ─────────────────────────────────────── */
.mq-bloc {
  border: 1px solid var(--linia);
  border-radius: var(--radi-m);
  background: var(--superficie);
  margin-bottom: var(--e-3);
}
.mq-bloc summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--area-tactil);
  padding: var(--e-4) var(--e-5);
  cursor: pointer;
}
.mq-bloc summary:focus-visible { outline: 3px solid var(--verd); outline-offset: -3px; }
.mq-t { font-weight: 800; }
.mq-n {
  padding: 1px 9px;
  border-radius: var(--radi-ple);
  background: var(--verd-vel);
  color: var(--verd-text);
  font-size: var(--mida-xs);
  font-weight: 800;
}
.mq-cos { padding: 0 var(--e-5) var(--e-5); }

.mq-llista { margin: 0; padding: 0; list-style: none; max-width: none; }
.mq-llista > li { padding: var(--e-3) 0; border-top: 1px solid var(--linia); }
.mq-llista > li:first-child { border-top: 0; }
.mq-llista p { margin: 0 0 4px; line-height: 1.55; max-width: 72ch; }

/* L'atribució: de quina situació surt cada frase. Petita, però sempre hi és. */
.atrib { display: flex; flex-wrap: wrap; gap: var(--e-2); font-size: var(--mida-xs); }
/* L'àrea tàctil mínima de 44 px la posa base.css a tots els enllaços. Sense
   centrar-hi el text, el xip queda amb la píndola a dalt i un buit a sota. */
.atrib a {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radi-ple);
  background: var(--fons-alt);
  color: var(--text-suau);
  text-decoration: none;
}
.atrib a:hover { background: var(--verd-vel); color: var(--verd-text); }
.atrib a:focus-visible { outline: 2px solid var(--verd); outline-offset: 2px; }

.mq-camp { display: block; margin-bottom: 4px; font-size: var(--mida-xs); color: var(--text-tenue); }
.mq-evitar > li { border-left: 3px solid var(--pressec); padding-left: var(--e-4); }
.mq-sub { margin-top: var(--e-4); }
/* Sense marca, un <summary> en negreta sembla un títol i ningú no l'obre. */
.mq-sub summary::before { content: "▸ "; color: var(--seccio-text); }
.mq-sub[open] summary::before { content: "▾ "; }
.mq-sub summary { cursor: pointer; font-size: var(--mida-s); font-weight: 700; min-height: var(--area-tactil); display: flex; align-items: center; }
.mq-persa { padding: var(--e-3) 0; border-top: 1px solid var(--linia); }
.mq-persa h4 { font-size: var(--mida-s); margin-bottom: var(--e-2); }
.mq-persa p { font-size: var(--mida-s); line-height: 1.55; }

/* ── Currículum del moment ────────────────────────────────────────────────── */
.mq-eix { margin-bottom: var(--e-3); }
.mq-eix .mq-t { font-size: var(--mida-s); font-weight: 700; }
.mq-eix .mq-n { background: var(--blau-vel); color: var(--blau-text); }
.mq-ce { font-size: var(--mida-s); color: var(--text-suau); max-width: 72ch; }
.mq-sabers { margin: 0 0 var(--e-4); padding: 0; list-style: none; max-width: none; }
.mq-sabers > li { padding: var(--e-3) 0; border-top: 1px solid var(--linia); }
.mq-sabers p { margin: 0 0 4px; max-width: 72ch; }
.xip-id {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radi-s);
  background: var(--blau-vel);
  color: var(--blau-text);
  font-size: var(--mida-xs);
  font-weight: 700;
  text-decoration: none;
}
.xip-id:hover { background: var(--blau); color: var(--fons); }
.xip-id:focus-visible { outline: 3px solid var(--verd); outline-offset: 2px; }

/* ── Situacions relacionades ──────────────────────────────────────────────── */
.mq-sa-graella { display: grid; grid-template-columns: 1fr; gap: var(--e-3); }
@media (min-width: 44rem) { .mq-sa-graella { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mq-sa {
  display: grid;
  gap: 4px;
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--linia);
  border-radius: var(--radi-m);
  background: var(--pressec-vel);
  color: inherit;
  text-decoration: none;
}
.mq-sa:hover { border-color: var(--pressec); }
.mq-sa:focus-visible { outline: 3px solid var(--verd); outline-offset: 3px; }
.mq-sa-t { font-weight: 700; }
.mq-sa-m { font-size: var(--mida-xs); color: var(--text-suau); }

.mq-buit { padding: var(--e-6); border: 1px solid var(--linia); border-radius: var(--radi-l); background: var(--superficie); }
.mq-buit h2 { color: var(--text); text-transform: none; letter-spacing: 0; font-size: var(--mida-l); }
.mq-buit p { max-width: 64ch; }
.mq-mes a { color: var(--pressec-text); font-weight: 700; }

/* ============================================================================
   REGISTRE EDITORIAL  (.mq-editorial)
   ---------------------------------------------------------------------------
   La pàgina d'un moment amb síntesi aprovada no s'ha de llegir com un llistat
   de coses que diuen les situacions. Manen tres coses, en aquest ordre:
   el subtítol del moment, el títol de cada secció i la seva entradeta. La
   procedència existeix i es pot obrir, però va al peu i en gris: rigor sense
   protagonisme.

   Res de graelles de fitxes: una columna, ritme de lectura, com un document.
   ========================================================================== */

.mq-cap-editorial { margin-bottom: var(--e-7); }
.mq-cap-editorial h1 { margin-bottom: var(--e-4); }
.mq-subtitol {
  font-size: clamp(1.12rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.45;
  color: var(--text);
  max-width: 44ch;
  margin: 0;
  text-wrap: pretty;
}

.mq-editorial .mq-sec {
  padding-top: var(--e-6);
  margin-top: var(--e-5);
  border-top: 1px solid var(--linia);
}
.mq-editorial .mq-sec:first-of-type { border-top: 0; }
/* Els títols de secció d'aquesta pàgina NO són retolets: són titulars. Cal
   desfer aquí l'estil d'antetítol que .quotidiana-moment h2 aplica a la resta. */
.mq-editorial .mq-sec > h2 {
  font-size: var(--mida-2xl);
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 var(--e-3);
  max-width: 24ch;
}
.mq-editorial .mq-sec > h3,
.mq-editorial .mq-sec .mq-cos h3 {
  font-size: var(--mida-s);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--seccio-text);
  margin: var(--e-5) 0 var(--e-2);
}
.mq-entradeta {
  font-size: var(--mida-l);
  line-height: 1.55;
  color: var(--text-suau);
  max-width: 58ch;
  margin: 0 0 var(--e-5);
  text-wrap: pretty;
}

/* ── Les cinc famílies ───────────────────────────────────────────────────── */
.mq-fams { display: grid; grid-template-columns: 1fr; gap: var(--e-4); }
@media (min-width: 52rem) {
  .mq-fams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mq-fam {
  padding: var(--e-5);
  border-radius: var(--radi-l);
  background: var(--superficie);
  border: 1px solid var(--linia);
  min-width: 0;
}
.mq-fam h3 {
  font-size: var(--mida-l);
  margin: 0 0 var(--e-1);
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
.mq-fam-glosa {
  font-size: var(--mida-s);
  color: var(--text-suau);
  margin: 0 0 var(--e-4);
  max-width: none;
}
.mq-fam .mq-llista > li { padding: var(--e-2) 0; }

/* ── Procedència: hi és, però no crida ───────────────────────────────────── */
.proc-peu { margin-top: var(--e-5); }
.proc-peu > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-3);
  padding: var(--e-2) 0;
  cursor: pointer;
  font-size: var(--mida-xs);
  color: var(--text-tenue);
  list-style: none;
  border-top: 1px dashed var(--linia);
}
.proc-peu > summary::-webkit-details-marker { display: none; }
.proc-peu > summary:hover { color: var(--text-suau); }
.proc-peu > summary:focus-visible { outline: 3px solid var(--verd); outline-offset: 3px; }
.proc-n { font-weight: 700; letter-spacing: .03em; }
.proc-veure { text-decoration: underline; text-underline-offset: 2px; }
.proc-veure::before { content: "· "; text-decoration: none; }
.proc-peu[open] .proc-veure::after { content: " (tanca)"; }

.proc-llista {
  margin: var(--e-2) 0 0;
  padding: var(--e-3) 0 0;
  list-style: none;
  max-width: none;
  font-size: var(--mida-s);
}
.proc-llista > li {
  display: grid;
  gap: 2px;
  padding: var(--e-2) 0;
  border-top: 1px solid var(--linia);
  color: var(--text-suau);
}
.proc-llista > li:first-child { border-top: 0; }
.proc-frase { line-height: 1.5; }

/* ── Situacions: ara porten el repte, perquè es vegi què concreta cadascuna ── */
.mq-editorial .mq-sa { align-content: start; gap: var(--e-2); }
.mq-sa-r {
  font-size: var(--mida-s);
  color: var(--text-suau);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mq-xifra-cur {
  font-size: var(--mida-xs);
  color: var(--text-tenue);
  letter-spacing: .03em;
  margin: 0 0 var(--e-4);
}

/* El material que no forma part de la mirada del moment va un pas enrere. */
.mq-sec-altres { color: var(--text-suau); }
.mq-sec-altres > h2 { font-size: var(--mida-xl); }

/* Un moment que ensenya contingut manllevat d'un altre ho ha de dir a la cara,
   no al peu: si no, la pàgina fa passar l'esmorzar per l'estona d'arribar. */
.mq-manlleu {
  margin: 0 0 var(--e-6);
  padding: var(--e-4) var(--e-5);
  border-left: 3px solid var(--seccio);
  border-radius: 0 var(--radi-m) var(--radi-m) 0;
  background: var(--seccio-vel);
  color: var(--text);
  font-size: var(--mida-s);
  line-height: 1.6;
  max-width: 62ch;
}

/* ── Què aporta cada situació ────────────────────────────────────────────────
   Aquest bloc és l'únic de la pàgina que NO és ni citació literal ni frase
   derivada: és síntesi escrita per l'equip i aprovada per una persona. Per això
   es marca visualment —filet lila a l'esquerra, com la veu de la guia a la
   pantalla del currículum— i per això l'etiqueta que ho diu no és una nota al
   peu sinó la primera línia de la secció. Qui hi arriba ha de saber què llegeix
   abans de llegir-ho. */
.mq-es-sintesi {
  font-size: var(--mida-s);
  color: var(--lila-text);
  background: var(--lila-vel);
  border-left: 3px solid var(--lila);
  border-radius: 0 var(--radi-s) var(--radi-s) 0;
  padding: var(--e-3) var(--e-4);
  max-width: 62ch;
}
.mq-aportacio {
  padding: var(--e-5) 0 0;
  border-top: 1px dashed var(--linia);
  margin-top: var(--e-5);
}
.mq-aportacio:first-of-type { border-top: 0; margin-top: 0; }
.mq-editorial .mq-sec .mq-aportacio > h3 {
  font-size: var(--mida-l);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  margin: 0 0 var(--e-3);
}
.mq-aportacio > p {
  font-size: var(--mida-l);
  line-height: 1.6;
  max-width: 58ch;
  margin: 0;
  text-wrap: pretty;
}
/* Les arrels: la ruta amb el text real al costat, perquè l'aportació es pugui
   auditar sense obrir el JSON. Dues columnes quan hi cap; una, quan no. */
.mq-arrels > li {
  display: grid;
  gap: var(--e-1);
  padding: var(--e-3) 0;
  border-top: 1px solid var(--linia);
}
.mq-arrels > li:first-child { border-top: 0; }
@media (min-width: 46rem) {
  .mq-arrels > li { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--e-4); }
}
.mq-arrel-et {
  font-size: var(--mida-xs);
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--seccio-text);
  min-width: 0;
}
.mq-arrel-tx {
  font-size: var(--mida-s);
  color: var(--text-suau);
  line-height: 1.5;
  min-width: 0;
  overflow-wrap: anywhere;
}