/* 
-- nom: rg-flow.css --
-- llibreria: loT --
-- grup: Regions --
-- autor: A.Moseguí / TT22 --
-- versió: 26.1.0 --
-- descripció: Distribució interna de les regions. Dos paradigmes: zones fixes (hd, bn, ft) i modificadors estructurals (mn, as). --
-- dependència: lyt.css, init.css --
*/

/* =============================================
   PARADIGMES DE DISTRIBUCIÓ INTERNA

   El sistema combina dos models segons la regió:

   - ZONES FIXES (hd, bn, ft):
     La regió té tres zones predeterminades
     (__left, __center, __right). L'usuari hi posa
     contingut a cadascuna. No hi ha modificadors
     estructurals.

   - MODIFICADORS ESTRUCTURALS (mn, as):
     La regió té un sol àmbit. L'usuari tria com
     es distribueixen els fills via modificadors
     (--full, --pile, --group, --columns, --belt).
     No hi ha zones predefinides.

   Els paradigmes són excloents: cada regió en fa
   servir un, no els dos.
   ============================================= */

/* =============================================
   TOKENS
   ============================================= */
:root {
	/* Mides mínimes de columna per a mn--columns */
	--rg-mn-col-s: 200px;
	--rg-mn-col-m: 250px;
	--rg-mn-col-l: 300px;

	--rg-mn-padding: 8px;
}

/* =============================================
   BASES COMUNES
   Totes les regions són flex per defecte.
   Les zones __left, __center, __right de hd, bn,
   ft comparteixen display flex i align-items
   center.
   ============================================= */
.hd,
.hd-ov,
.bn,
.mn,
.mn-ov,
.as,
.ft,
.ft-ov {
	display: flex;
}

.hd__left, .hd__center, .hd__right,
.hd-ov__left, .hd-ov__center, .hd-ov__right,
.bn__left, .bn__center, .bn__right,
.ft__left, .ft__center, .ft__right,
.ft-ov__left, .ft-ov__center, .ft-ov__right {
	display: flex;
	align-items: center;
}

/* =============================================
   HEADER
   Zones fixes: left i right amb 20% d'amplada,
   center omple l'espai restant.
   ============================================= */
.hd__left,
.hd-ov__left {
	flex: 0 0 18%;
	justify-content: center;
}

.hd__center,
.hd-ov__center {
	flex: 1;
	justify-content: center;
}

.hd__right,
.hd-ov__right {
	flex: 0 0 27%;
	justify-content: center;
}

/* =============================================
   BANNER
   Zones fixes: left i right s'adapten al contingut
   (auto), center omple l'espai restant.
   ============================================= */
.bn {
	justify-content: space-between;
}

.bn__left {
	flex: 0 0 auto;
	justify-content: flex-start;
}

.bn__center {
	flex: 1;
	justify-content: center;
}

.bn__right {
	flex: 0 0 auto;
	justify-content: flex-end;
}

/* =============================================
   FOOTER
   Zones fixes: left i right amb 15% d'amplada,
   center omple l'espai restant.
   ============================================= */
.ft__left,
.ft-ov__left {
	flex: 0 0 15%;
	justify-content: center;
}

.ft__center,
.ft-ov__center {
	flex: 1;
	justify-content: center;
}

.ft__right,
.ft-ov__right {
	flex: 0 0 15%;
	justify-content: center;
}

/* =============================================
   MAIN
   Modificadors estructurals: full, group, pile,
   columns (s/m/l), belt.
   La regió porta padding propi.
   ============================================= */
.mn,
.mn-ov {
	padding: var(--rg-mn-padding);
}

/* --- FULL: un fill únic ocupa tot l'espai --- */
.mn--full > * {
	flex: 1;
}

/* --- GROUP: fills centrats, amb wrap --- */
.mn--group {
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-xl);
}

/* --- PILE: fills apilats verticalment --- */
.mn--pile {
	flex-direction: column;
	align-items: stretch;
	gap: var(--sp-xl);
}

/* --- COLUMNS: graella de columnes autoajustables --- */
.mn--columns {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--rg-mn-col-size, var(--rg-mn-col-m)), 1fr));
	gap: var(--sp-xl);
}

.mn--columns-s { --rg-mn-col-size: var(--rg-mn-col-s); }
.mn--columns-m { --rg-mn-col-size: var(--rg-mn-col-m); }
.mn--columns-l { --rg-mn-col-size: var(--rg-mn-col-l); }

/* --- BELT: fila horitzontal amb scroll lateral --- */
.mn--belt {
	flex-direction: row;
	gap: var(--sp-xl);
}

.mn--belt > * {
	flex-shrink: 0;
}

/* =============================================
   ASIDE
   Modificadors estructurals: full, pile.
   ============================================= */
/* --- FULL: un fill únic ocupa tot l'espai --- */
.as--full > * {
	flex: 1;
}

/* --- PILE: fills apilats verticalment --- */
.as--pile {
	flex-direction: column;
	align-items: stretch;
	gap: var(--sp-lg);
}