/*
-- nom: taldia.css --
-- ubicació: Public/Assets/css/ --
-- app: Taldia · pàgina Taldia --
-- autor: A. Moseguí / TT22 --
-- descripció: Repartiment de les peces de la pàgina Taldia (layout
                lay1arNest), marc de la imatge i aspecte del text del modal.

                Les peces són els MATEIXOS nodes a les dues vistes —el motor
                NestMove les mou—, així que la diferència entre vertical i
                horitzontal no pot viure a la peça: ve de l'avantpassat,
                ancorada a [data-skel]. Per això aquí no hi ha classes
                pròpies a les peces: s'apunten pels atributs que el motor ja
                exigeix (data-skel, data-piece), que no es poden canviar i
                sempre hi són. --
-- dependència: lyt.css, rg-flow.css (loT) --
*/

:root {
	--site-min-wdh: 0px;
}

/* =============================================
   TOKENS PROPIS
   =============================================
   Noms propis (prefix --tld-), no toquen cap token de loT.
   El GAP de la vista vertical el declarem nosaltres i no el prenem de
   mn--pile: el càlcul del costat de main1 l'ha de descomptar, i val més
   que el número visqui al mateix fitxer que el calc() que el fa servir.
   Així no es pot descordar si loT canvia el seu.
   ============================================= */
[data-skel] {
	--tld-main2-gap: 1rem;  /* separació entre el títol i el botó */
}

[data-skel="h"] {
	--tld-action-lift: 1.5rem; /* separació del botó respecte del footer */
}

[data-skel="v"] {
	--tld-gap: 1rem;        /* separació entre main1 i main2 */
	--tld-main1-min: 8rem;  /* costat mínim del quadrat */
	--tld-main2-min: 8rem;  /* alçada mínima reservada a main2 */
}

/* =============================================
   LES PECES — base comuna
   =============================================
   Cada peça viu dins d'una regió de loT, que és flex. Perquè ocupi l'espai
   que li toca i no s'arronsi al contingut, ha de créixer i estirar-se.
   main1 i main2 en tenen prou amb això a la vista horitzontal; a la vertical
   el seu repartiment es refà més avall.
   ============================================= */
[data-piece] {
	flex: 1;
	align-self: stretch;
	min-width: 0;
	min-height: 0;
}

/* =============================================
   MAIN1 — la imatge (les dues vistes)
   =============================================
   La imatge és d'arxiu i de forma imprevisible (retrats, gravats, quadres):
   es mostra SENCERA amb contain, mai retallada. Retallar una obra és un
   error documental, no una decisió de disseny.
   La peça no porta fons propi: l'espai que sobra al voltant de la imatge
   deixa veure el fons de la regió.
   ============================================= */
[data-piece="main1"] {
	overflow: hidden;
}

[data-piece="main1"] img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* =============================================
   MAIN2 — títol elàstic, botó rígid (les dues vistes)
   =============================================
   El botó té la mida natural que li dona el component btn de loT; el títol
   es queda tot el que sobra. El que canvia entre vistes és només la direcció
   i on s'arramba el botó.
   ============================================= */
[data-piece="main2"] {
	display: flex;
	gap: var(--tld-main2-gap);
}

[data-piece="main2"] [data-part="title"] {
	flex: 1 1 auto;
	min-width: 0;   /* deixa que un títol llarg trenqui en comptes d'estirar */

	/* SOBREESCRIPTURA CONSCIENT del component title de loT.
	   .title porta white-space: nowrap + overflow: hidden + text-overflow:
	   ellipsis: està pensat per a regions fixes (hd, bn, ft), on un títol no
	   ha de trencar mai, i resol l'amplada estreta canviant de text
	   (title-long / title-short), no partint la línia.
	   Aquí el títol viu en una columna estreta i ha de trencar. Es fa des
	   d'aquí, i no amb els dos spans de loT, perquè el títol és una notícia
	   diferent cada dia: no en podem tenir una versió curta.
	   overflow: visible perquè, si no hi cabés, es vegi en comptes de quedar
	   tallat en silenci. */
	white-space: normal;
	overflow: visible;
}

[data-piece="main2"] [data-part="action"] {
	flex: 0 0 auto; /* el botó mai s'encongeix ni s'estira */
}

/* =============================================
   VISTA VERTICAL — main1 quadrat, main2 el que queda
   =============================================
   main1 mana sobre main2, però no se'l pot menjar: el costat és el menor
   entre l'amplada disponible i l'alçada que sobra un cop reservats el mínim
   de main2 i el gap.

   Les unitats cq mesuren la caixa de CONTINGUT del contenidor, així que el
   padding del .mn ja queda descomptat sol; el gap no, i per això el resta el
   calc().

   Quan el quadrat toca el seu mínim i la suma ja no hi cap, el .mn fa
   scroll: l'overflow: auto li ve de lyt.css, aquí no s'activa res.
   ============================================= */
[data-skel="v"] [data-slot="v-main"] {
	container-type: size;
	gap: var(--tld-gap);
}

[data-skel="v"] [data-piece="main1"] {
	flex: 0 0 auto;
	aspect-ratio: 1;
	width: min(100%, calc(100cqh - var(--tld-main2-min) - var(--tld-gap)));
	min-width: var(--tld-main1-min);
	margin-inline: auto; /* centrat quan queda més estret que la columna */
}

[data-skel="v"] [data-piece="main2"] {
	flex: 1 1 auto;
	min-height: var(--tld-main2-min);

	/* franja ampla i baixa: títol a l'esquerra, botó a la dreta */
	flex-direction: row;
	align-items: center;
}

/* El títol una mida per sota en vertical, NOMÉS si és llarg.
   Qui decideix si ho és, és PHP: el CSS no sap mesurar text, i el TaldiaCt
   deixa escrit un data-long al marcatge.
   La classe de la CFG (title--m) mana a l'horitzontal i, en vertical, als
   títols curts; aquí es reassigna per als llargs, perquè és el mateix node a
   les dues vistes i no li podem posar dues classes. S'apunta als tokens de
   title.css en comptes d'escriure el pas a mà, per seguir l'escala de loT si
   algun dia canvia.
   ⚠️ La mida del títol viu, doncs, en DOS llocs: TaldiaVw::CFG (cas general)
   i aquesta regla (vertical + títol llarg). */
[data-skel="v"] [data-piece="main2"] [data-part="title"][data-long] {
	font-size: var(--title-size-s);
	line-height: var(--title-lh-s);
}

/* =============================================
   VISTA HORITZONTAL — main1 omple la seva zona
   =============================================
   Aquí main1 està sol al seu .mn: no negocia espai amb ningú i no cal cap
   càlcul. Ocupa tota la zona i la imatge hi creix tant com pot.
   main2 viu a l'altre esquelet (el lay-4 niuat de l'aside), en una columna
   estreta: allà el botó va sota el títol.
   ============================================= */
[data-skel="h"] [data-piece="main2"] {
	flex-direction: column;
}

/* El títol es queda tot l'espai que sobra; el text hi va centrat
   verticalment en comptes d'enganxar-se a dalt. */
[data-skel="h"] [data-piece="main2"] [data-part="title"] {
	display: flex;
	align-items: center;
}

[data-skel="h"] [data-piece="main2"] [data-part="action"] {
	align-self: center;
	margin-block-end: var(--tld-action-lift);
}

/* =============================================
   EL TEXT DEL MODAL
   =============================================
   El text llarg de la notícia arriba com a HTML ja convertit i SENSE CAP
   CLASSE: el genera el pont, que no coneix loT. Per poder-lo vestir, el
   TaldiaPg l'embolcalla en un .taldia-info, i totes les regles pengen d'aquí.
   Així el CSS de l'app no toca cap classe de tal.css.

   Les etiquetes permeses al contracte són p, br, em, strong, a, ul, ol, li,
   blockquote, h3, h4, hr i code. Sense aquestes regles sortirien amb els
   valors per defecte del navegador, que dins d'una finestra de 32em queden
   desproporcionats.

   Les mides van en em (relatives al text del modal) per no dependre de
   l'escala de loT, que aquí no arriba amb cap classe.
   ============================================= */
.taldia-info {
	text-align: left;   /* .tal centra el text; un text llarg centrat no es llegeix */
}

.taldia-info > *:first-child { margin-block-start: 0; }
.taldia-info > *:last-child  { margin-block-end: 0; }

.taldia-info p,
.taldia-info ul,
.taldia-info ol,
.taldia-info blockquote {
	margin-block: 0.75em;
}

.taldia-info h3,
.taldia-info h4 {
	margin-block: 1.25em 0.5em;
	line-height: 1.25;
}

.taldia-info h3 { font-size: 1.15em; }
.taldia-info h4 { font-size: 1em; }

.taldia-info ul,
.taldia-info ol {
	padding-inline-start: 1.5em;
}

.taldia-info li {
	margin-block: 0.25em;
}

.taldia-info blockquote {
	padding-inline-start: 1em;
	border-inline-start: 2px solid currentColor;
	font-style: italic;
	opacity: 0.85;
}

.taldia-info hr {
	margin-block: 1.25em;
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 0.25;
}

.taldia-info code {
	font-family: monospace;
	font-size: 0.9em;
}

/* Els botons de la variant full, més grans i més separats que els d'un Tal
   normal: aquí el popup ocupa tota la pantalla i els botons de 8px de marge
   i mida de text 1 hi queden petits.
   SOBREESCRIPTURA CONSCIENT de tal.css, acotada a .tal--size-full: els Tal
   normals de l'app (avisos, confirmacions) no s'han de tocar. */
.tal--size-full .tal__button {
	margin: 24px;
	font-size: var(--step-fix-2);
}

/* =============================================
   EL HEADER
   =============================================
   La peça s'interposa entre la regió i les tres zones: el fill directe del
   .hd és el [data-piece="header"], i .hd__left/__center/__right en són nétes.

   rg-flow fa flex el .hd i espera que les zones en siguin filles directes.
   Com que ara no ho són, el .hd reparteix un sol fill i les tres zones queden
   apilades. La peça ha de fer de contenidor flex al seu lloc.

   Les proporcions de les zones (18/55/27) i el seu centrat NO es toquen: les
   regles de rg-flow apunten a les classes directament, així que segueixen
   valent encara que siguin nétes.
   ============================================= */
[data-piece="header"] {
	display: flex;
	align-items: stretch;
	block-size: 100%;
}

/* El logo, una mida per sota a la vista horitzontal, on el header viu en una
   columna estreta. La classe del marcatge (mark--size-m) mana a la vertical;
   aquí es reassigna el token que mark.css exposa, perquè és el mateix node a
   les dues vistes i no li podem posar dues classes. S'apunta al token de
   mark.css i no a un percentatge escrit a mà, per seguir l'escala de loT. */
[data-skel="h"] [data-piece="header"] .mark {
	--mark-size: var(--mark-size-s);
}

/* Posició del desplegable del menú, per vista.
   El desplegable de navnest és position: fixed, així que es col·loca respecte
   de la FINESTRA, no del header; --navnest-drop-top és la distància des de
   dalt. El component el porta a 4.2rem; aquí es reassigna a cada vista sense
   tocar navnest.css. */
[data-skel="h"] .navnest {
	--navnest-drop-top: 10rem;
}

[data-skel="v"] .navnest {
	--navnest-drop-top: 5rem;
}

/* =============================================
   EL BANNER
   =============================================
   La peça s'estira per omplir la regió (bloc base), però el text hi quedaria
   a dalt: cal que la peça faci de contenidor i el centri.
   justify-content en comptes del txt--center per al centrat horitzontal:
   amb display: flex, el text passa a ser un ítem i el col·loca el
   contenidor, no l'alineació de text.
   ============================================= */
[data-piece="banner"] {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* =============================================
   EL FOOTER
   =============================================
   El contingut va escrit al TaldiaPg i no porta cap classe de color: els
   txt--cl-* de loT són colors purs i cap no gira amb el tema.

   El text agafa el color de primer pla de la regió, i la marca el token
   d'inversió, que val maroon en tema clar i coral en fosc.
   ============================================= */
[data-piece="footer"] {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cl-lyr-fg);
}

[data-piece="footer"] [data-part="gm"] {
	color: var(--cl-invert-brown);
}