/* 
-- nom: portal.css --
-- app: Taldia --
-- autor: A.Moseguí / TT22 --
-- versió: 26.1.0 --
-- descripció: Capa d'estil pròpia de la pàgina Portal (splash). Composició
               interna del main: part de títol i part de cos (nota-botó-nota).
               Consumeix tokens de loT; no en redefineix cap. --
-- dependència: loT (init, type, th-core, lyt, rg-flow, rg-look, glass, btn, tic, txt, title, util) --
*/

/* =============================================
   TOKENS DEL PORTAL
   Valors propis d'aquesta pàgina.
   ============================================= */
:root {
	/* Separacions verticals del main */
	--pt-titol-top: 4rem;
	--pt-grup-bottom: 4rem;

	/* Amplada fixa de les notes */
	--pt-nota-wdh: 17rem;

	/* Repartiment intern de la nota */
	--pt-nota-txt-wdh: 78%;
	--pt-nota-tic-wdh: 18%;

	/* Separació mínima entre les peces del trio */
	--pt-grup-gap: var(--sp-xl);
}

/* =============================================
   MAIN
   Dues parts en columna: títol (alçada natural)
   i grup (ocupa la resta).
   ============================================= */
.pt-main {
	display: flex;
	flex-direction: column;
}

/* =============================================
   PART DE TÍTOL
   Alçada natural, caixa centrada, separació a dalt.
   ============================================= */
.pt-titol {
	display: flex;
	justify-content: center;
	padding-top: var(--pt-titol-top);
}

/* =============================================
   PART DE COS (grup nota-botó-nota)
   Ocupa tot l'espai restant. El trio s'alinea a
   baix, amb separació inferior.

   El trio va sempre en una fila: el gap fa de
   separació mínima entre peces, i space-evenly
   reparteix l'espai sobrant (i s'aprima sol en
   estrènyer la pantalla). A 720px les notes
   desapareixen i queda el botó sol.
   ============================================= */
.pt-grup {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-evenly;
	gap: var(--pt-grup-gap);
	padding-bottom: var(--pt-grup-bottom);
}

/* El botó no cedeix mai espai: qui s'aprima és la separació */
.pt-grup > .btn {
	flex-shrink: 0;
}

/* =============================================
   NOTA
   Caixa glass en fila: text i tic, un a cada
   costat. El 4% que no sumen (78 + 18) cau entre
   tots dos per space-between.
   ============================================= */
.pt-nota {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: var(--pt-nota-wdh);
	flex-shrink: 0;
}

.pt-nota-txt {
	width: var(--pt-nota-txt-wdh);
}

.pt-nota > .tic {
	width: var(--pt-nota-tic-wdh);
}

/* =============================================
   RESPONSIVE — 720px
   Les notes desapareixen: queda el botó sol,
   centrat. (Tall de loT.)
   ============================================= */
@media (max-width: 720px) {
	.pt-nota {
		display: none;
	}

	.pt-grup {
		justify-content: center;
	}
}