/* 
-- nom: lyt.css - layout --
-- llibreria: loT --
-- grup: Layout --
-- autor: A.Moseguí / TT22 --
-- versió: 26.1.0 --
-- descripció: Sistema de layout de pàgina amb CSS Grid. --
-- dependència: init.css, zindex.css, th-core.css --
*/

/* =============================================
   TOKENS DE LAYOUT

   Dos nivells:
   - Tokens font: un per cada valor possible de
     cada modificador. No canvien mai.
   - Tokens actuals: els que consumeixen la base i
     les variants. Els modificadors els reassignen
     a un dels tokens font.

   El defecte de cada token actual coincideix amb
   la mida 'm'.
   ============================================= */
:root {

	/* --- Imatge de fons del contenidor --- */
	--lyt-bg-mmd: url("https://font.tt22.cat/web-tt22/mmd/GM-01.webp");

	/* --- Tokens font: alçades header --- */
	--lyt-hd-hgt-s: clamp(2.25rem, 6vw, 3.75rem);
	--lyt-hd-hgt-m: clamp(3rem, 8vw, 5rem);
	--lyt-hd-hgt-l: clamp(4rem, 10vw, 6.5rem);

	/* --- Tokens font: alçades banner --- */
	--lyt-bn-hgt-s: clamp(1.75rem, 3vw, 3rem);
	--lyt-bn-hgt-m: clamp(2.5rem, 4vw, 4rem);
	--lyt-bn-hgt-l: clamp(3.25rem, 5vw, 5rem);

	/* --- Tokens font: alçades footer --- */
	--lyt-ft-hgt-s: clamp(1.5rem, 3vw, 3rem);
	--lyt-ft-hgt-m: clamp(2rem, 4vw, 4rem);
	--lyt-ft-hgt-l: clamp(2.75rem, 5vw, 5rem);

	/* --- Tokens font: amplades aside dret sol --- */
	--lyt-ar-wdh-s: 20%;
	--lyt-ar-wdh-m: 25%;
	--lyt-ar-wdh-l: 30%;

	/* --- Tokens font: amplades asides acompanyats --- */
	--lyt-alar-l-wdh-s: 20%;
	--lyt-alar-l-wdh-m: 22%;
	--lyt-alar-l-wdh-l: 24%;
	--lyt-alar-r-wdh-s: 16%;
	--lyt-alar-r-wdh-m: 18%;
	--lyt-alar-r-wdh-l: 20%;

	/* --- Tokens font: alçades aside responsive --- */
	--lyt-as-hgt-s: clamp(3rem, 10dvh, 6rem);
	--lyt-as-hgt-m: clamp(4rem, 12dvh, 8rem);
	--lyt-as-hgt-l: clamp(5rem, 14dvh, 10rem);

	/* --- Tokens actuals (defectes m) --- */
	--lyt-hd-hgt: var(--lyt-hd-hgt-m);
	--lyt-bn-hgt: var(--lyt-bn-hgt-m);
	--lyt-ft-hgt: var(--lyt-ft-hgt-m);
	--lyt-ar-wdh: var(--lyt-ar-wdh-m);
	--lyt-alar-l-wdh: var(--lyt-alar-l-wdh-m);
	--lyt-alar-r-wdh: var(--lyt-alar-r-wdh-m);
	--lyt-as-hgt: var(--lyt-as-hgt-m);

	/* --- Tokens fold --- */
	--lyt-as-fold-wdh: 2rem;        /* amplada columna plegada */
	--lyt-as-fold-hgt: 2rem;        /* alçada fila plegada */
	--lyt-as-fold-icon-sz: 1rem;  /* mida de la icona */
}

/* =============================================
   BASE COMUNA
   Totes les variants comparteixen aquestes regles.
   ============================================= */
.lay-1,
.lay-1-ar,
.lay-2,
.lay-2-ar,
.lay-3,
.lay-4,
.lay-4-al-ar,
.lay-ov {
	display: grid;
	width: clamp(var(--site-min-wdh), var(--site-max-wdh-cont), var(--site-max-wdh));
	height: max(var(--site-max-hgt-vwm), var(--site-min-hgt));
	margin: 0 auto;
	background-color: var(--cl-lyb-bg);
	overflow: hidden;
}

/* =============================================
   MODE NIUAT
   Permet col·locar una variant (lay-1, lay-2,
   lay-3, lay-4…) dins d'una regió d'un altre
   layout en comptes de ser el marc de la pàgina.

   Neutralitza les regles de marc de pàgina de la
   base comuna (mides de viewport i centrat) i fa
   que el layout niuat s'estiri per omplir tot
   l'espai que li dona el contenidor que el conté.

   No toca el plànol (grid-template-*) ni display:
   grid del layout niuat, ni cap regió.
   ============================================= */
.lyt--nested {
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	place-self: stretch;
	justify-self: stretch;
	align-self: stretch;
	flex: 1;
}

/* =============================================
   REGIONS
   Posicionament a la graella i comportament base.
   El fons de regió viu a rg-look.css.
   La distribució interna viu a rg-flow.css.
   ============================================= */
.hd {
	grid-area: header;
	height: var(--lyt-hd-hgt);
	overflow: hidden;
}

.bn {
	grid-area: banner;
	height: var(--lyt-bn-hgt);
	overflow: hidden;
}

.mn {
	grid-area: main;
	overflow: auto;
}

.as {
	overflow-x: hidden;
	overflow-y: auto;
	padding: 3rem var(--sp-lg);
}
.as-l {
	grid-area: aside-l;
}

.as-r {
	grid-area: aside-r;
}

.ft {
	grid-area: footer;
	height: var(--lyt-ft-hgt);
	overflow: hidden;
}

.mn-ov {
	grid-area: main-ov;
	align-self: stretch;
	overflow: auto;
	scrollbar-width: none;
}

.hd-ov {
	grid-area: main-ov;
	align-self: start;
	height: var(--lyt-hd-hgt);
	overflow: hidden;
	z-index: var(--z-overlay);
}

.ft-ov {
	grid-area: main-ov;
	align-self: end;
	height: var(--lyt-ft-hgt);
	overflow: hidden;
	z-index: var(--z-overlay);
}

/* =============================================
   VARIANT 1: main
   ┌─────────────────────────────┐
   │            main             │
   └─────────────────────────────┘
   ============================================= */
.lay-1 {
	grid-template-areas:
		"main";
	grid-template-rows: minmax(0, 1fr);
	grid-template-columns: 1fr;
}

/* =============================================
   VARIANT 1-AR: main + aside right
   ┌────────────────────┬────────┐
   │       main         │aside-r │
   └────────────────────┴────────┘
   ============================================= */
.lay-1-ar {
	grid-template-areas:
		"main aside-r";
	grid-template-rows: minmax(0, 1fr);
	grid-template-columns: 1fr var(--lyt-ar-wdh);
}

/* =============================================
   VARIANT 2: header + main
   ┌─────────────────────────────┐
   │           header            │
   ├─────────────────────────────┤
   │            main             │
   └─────────────────────────────┘
   ============================================= */
.lay-2 {
	grid-template-areas:
		"header"
		"main";
	grid-template-rows: auto minmax(0, 1fr);
	grid-template-columns: 1fr;
}

/* =============================================
   VARIANT 2-AR: header + main + aside right
   ┌─────────────────────────────┐
   │           header            │
   ├────────────────────┬────────┤
   │       main         │aside-r │
   └────────────────────┴────────┘
   ============================================= */
.lay-2-ar {
	grid-template-areas:
		"header  header"
		"main    aside-r";
	grid-template-rows: auto minmax(0, 1fr);
	grid-template-columns: 1fr var(--lyt-ar-wdh);
}

/* =============================================
   VARIANT 3: header + main + footer
   ┌─────────────────────────────┐
   │           header            │
   ├─────────────────────────────┤
   │            main             │
   ├─────────────────────────────┤
   │           footer            │
   └─────────────────────────────┘
   ============================================= */
.lay-3 {
	grid-template-areas:
		"header"
		"main"
		"footer";
	grid-template-rows: auto minmax(0, 1fr) auto;
	grid-template-columns: 1fr;
}

/* =============================================
   VARIANT 4: header + banner + main + footer
   ┌─────────────────────────────┐
   │           header            │
   ├─────────────────────────────┤
   │           banner            │
   ├─────────────────────────────┤
   │            main             │
   ├─────────────────────────────┤
   │           footer            │
   └─────────────────────────────┘
   Igual que lay-3 amb un banner afegit entre
   header i main. Una columna, sense responsive
   propi.
   ============================================= */
.lay-4 {
	grid-template-areas:
		"header"
		"banner"
		"main"
		"footer";
	grid-template-rows: auto auto minmax(0, 1fr) auto;
	grid-template-columns: 1fr;
}

/* =============================================
   VARIANT 4-AL-AR: header + banner + asides + main + footer
   ┌─────────────────────────────┐
   │           header            │
   ├─────────────────────────────┤
   │           banner            │
   ├────────┬───────────┬────────┤
   │aside-l │   main    │aside-r │
   ├────────┴───────────┴────────┤
   │           footer            │
   └─────────────────────────────┘
   ============================================= */
.lay-4-al-ar {
	grid-template-areas:
		"header  header  header"
		"banner  banner  banner"
		"aside-l main    aside-r"
		"footer  footer  footer";
	grid-template-rows: auto auto minmax(0, 1fr) auto;
	grid-template-columns: var(--lyt-alar-l-wdh) 1fr var(--lyt-alar-r-wdh);
}

/* =============================================
   VARIANT OV: main + header overlay + footer overlay
   o main + header o main + footer
   ┌─────────────────────────────┐
   │   header overlay (flota)    │
   │ ─────────────────────────── │
   │            main             │
   │ ─────────────────────────── │
   │   footer overlay (flota)    │
   └─────────────────────────────┘
   ============================================= */
.lay-ov {
	grid-template-areas: "main-ov";
	grid-template-rows: minmax(0, 1fr);
	grid-template-columns: 1fr;
}

/* =============================================
   MODIFICADORS DE FONS DEL CONTENIDOR

   Excepció al patró de tokens: la base no fixa
   'background-image', només 'background-color'.
   Els modificadors apliquen propietats directament
   sense risc de conflicte d'ordre.
   ============================================= */
.lyt--bg-solid {
	background-image: none;
}

.lyt--bg-mmd {
	background-image: var(--lyt-bg-mmd);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* =============================================
   MODIFICADORS DE MIDA HEADER
   Reassignen el token actual --lyt-hd-hgt.
   ============================================= */
.lyt--hd-hgt-s { --lyt-hd-hgt: var(--lyt-hd-hgt-s); }
.lyt--hd-hgt-m { --lyt-hd-hgt: var(--lyt-hd-hgt-m); }
.lyt--hd-hgt-l { --lyt-hd-hgt: var(--lyt-hd-hgt-l); }

/* =============================================
   MODIFICADORS DE MIDA BANNER
   Reassignen el token actual --lyt-bn-hgt.
   ============================================= */
.lyt--bn-hgt-s { --lyt-bn-hgt: var(--lyt-bn-hgt-s); }
.lyt--bn-hgt-m { --lyt-bn-hgt: var(--lyt-bn-hgt-m); }
.lyt--bn-hgt-l { --lyt-bn-hgt: var(--lyt-bn-hgt-l); }

/* =============================================
   MODIFICADORS DE MIDA FOOTER
   Reassignen el token actual --lyt-ft-hgt.
   ============================================= */
.lyt--ft-hgt-s { --lyt-ft-hgt: var(--lyt-ft-hgt-s); }
.lyt--ft-hgt-m { --lyt-ft-hgt: var(--lyt-ft-hgt-m); }
.lyt--ft-hgt-l { --lyt-ft-hgt: var(--lyt-ft-hgt-l); }

/* =============================================
   MODIFICADORS D'AMPLADA ASIDE DRET SOL
   Reassignen el token actual --lyt-ar-wdh.
   Aplica a lay-1-ar i lay-2-ar.
   ============================================= */
.lyt--ar-wdh-s { --lyt-ar-wdh: var(--lyt-ar-wdh-s); }
.lyt--ar-wdh-m { --lyt-ar-wdh: var(--lyt-ar-wdh-m); }
.lyt--ar-wdh-l { --lyt-ar-wdh: var(--lyt-ar-wdh-l); }

/* =============================================
   MODIFICADORS D'AMPLADA ASIDES ACOMPANYATS
   Reassignen els tokens actuals --lyt-alar-l-wdh
   i --lyt-alar-r-wdh alhora.
   Aplica a lay-4-al-ar.
   ============================================= */
.lyt--alar-wdh-s {
	--lyt-alar-l-wdh: var(--lyt-alar-l-wdh-s);
	--lyt-alar-r-wdh: var(--lyt-alar-r-wdh-s);
}
.lyt--alar-wdh-m {
	--lyt-alar-l-wdh: var(--lyt-alar-l-wdh-m);
	--lyt-alar-r-wdh: var(--lyt-alar-r-wdh-m);
}
.lyt--alar-wdh-l {
	--lyt-alar-l-wdh: var(--lyt-alar-l-wdh-l);
	--lyt-alar-r-wdh: var(--lyt-alar-r-wdh-l);
}

/* =============================================
   MODIFICADORS D'ALÇADA ASIDE (responsive)
   Reassignen el token actual --lyt-as-hgt.
   El token només es consumeix al media query
   (.as no té height fora del responsive), però
   el modificador es declara a l'arrel perquè
   funcioni en qualsevol context.
   ============================================= */
.lyt--as-hgt-s { --lyt-as-hgt: var(--lyt-as-hgt-s); }
.lyt--as-hgt-m { --lyt-as-hgt: var(--lyt-as-hgt-m); }
.lyt--as-hgt-l { --lyt-as-hgt: var(--lyt-as-hgt-l); }

/* =============================================
   PLEGAT DELS ASIDES
   La classe .as__checkbox--fold sobre un
   <input type="checkbox"> dins de l'aside activa
   el plegament als règims mitjà (≤960) i estret (≤720).
   ============================================= */
/* Amaguem visualment l'input mantenint accessibilitat de teclat */
.as__checkbox--fold {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* position: relative només quan l'aside conté un fold */
.as:has(.as__checkbox--fold) {
    position: relative;
}
/* Label visible que actua com a toggle */
label:has(.as__checkbox--fold) {
    display: none;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 2rem;
    background-color: var(--cl-cp-bg-md);
    color: var(--cl-cp-fg);
    border-radius: var(--rd-sm);
    cursor: pointer;
}
/* Icona chevron dibuixada amb borders dins del label */
label:has(.as__checkbox--fold)::before {
    content: '';

    width: var(--lyt-as-fold-icon-sz);
    height: var(--lyt-as-fold-icon-sz);
    border-top: var(--bw-md) solid currentColor;
    border-right: var(--bw-md) solid currentColor;
    transform: translateX(-4px) rotate(45deg);
	transform-origin: center;

/*
  width: 20px;
  height: 20px;
  background: currentColor;
  clip-path: polygon(25% 0%, 100% 50%, 25% 100%, 0% 75%, 50% 50%, 0% 25%);
*/
}
/* Transicions del fold */
.lay-1-ar,
.lay-2-ar,
.lay-4-al-ar {
    transition: grid-template-columns var(--motion-dur-md) var(--motion-ease-std);
}

.as:has(.as__checkbox--fold) {
    transition: height var(--motion-dur-md) var(--motion-ease-std);
}

/* =============================================
   RESPONSIVE — 960px (tablet horitzontal)
   ============================================= */
@media (max-width: 960px) {
	/* Auto-plegat dels asides amb fold capability */
	.lay-1-ar:has(.as-r .as__checkbox--fold:not(:checked)),
	.lay-2-ar:has(.as-r .as__checkbox--fold:not(:checked)) {
		--lyt-ar-wdh: var(--lyt-as-fold-wdh);
	}
	.lay-4-al-ar:has(.as-l .as__checkbox--fold:not(:checked)) {
		--lyt-alar-l-wdh: var(--lyt-as-fold-wdh);
	}
	.lay-4-al-ar:has(.as-r .as__checkbox--fold:not(:checked)) {
		--lyt-alar-r-wdh: var(--lyt-as-fold-wdh);
	}
	/* Amagar el contingut quan l'aside està plegat */
	.as:has(.as__checkbox--fold:not(:checked)) > :not(label) {
		visibility: hidden;
	}
	/* Mostrar el label */
	label:has(.as__checkbox--fold) {
		display: flex;
		width: 6rem;
		height: 2rem;
	}	
	/* Posicionament del label */
	.as-l label:has(.as__checkbox--fold) {
		top: 0.2rem;
		right: 0.2rem;
		align-items: center;		
		justify-content: flex-end;
	}
	.as-r label:has(.as__checkbox--fold) {
		top: 0.2rem;
		left: 0.2rem;
		align-items: center;		
		justify-content: flex-start;
	}
	/* Rotacions de la icona */
	.as-l:has(.as__checkbox--fold:checked) label::before,
	.as-r:has(.as__checkbox--fold:not(:checked)) label::before {
		transform: translateX(4px) rotate(225deg);
	}	
	/* Sense scroll quan plegat */
	.as:has(.as__checkbox--fold:not(:checked)) {
		overflow: hidden;
	}	
}

/* =============================================
   RESPONSIVE — 720px (mòbil gran / tablet vertical)
   Tot s'apila vertical.
   ============================================= */
@media (max-width: 720px) {
	.lay-1-ar:not(.rsp-disabled) {
		grid-template-areas:
			"main"
			"aside-r";
		grid-template-rows: minmax(0, 1fr) auto;
		grid-template-columns: 1fr;
	}
	.lay-2-ar:not(.rsp-disabled) {
		grid-template-areas:
			"header"
			"main"
			"aside-r";
		grid-template-rows: auto minmax(0, 1fr) auto;
		grid-template-columns: 1fr;
	}
	.lay-4-al-ar:not(.rsp-disabled) {
		grid-template-areas:
			"header"
			"banner"
			"main"
			"aside-r"
			"aside-l"
			"footer";
		grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
		grid-template-columns: 1fr;
	}
	.as:not(.rsp-disabled) {
		height: var(--lyt-as-hgt);
		padding: var(--sp-lg) 3rem;
	}
	/* Mostrar el label */
	.as:not(.rsp-disabled) label:has(.as__checkbox--fold) {
		display: flex;
		width: 2rem;
		height: 3rem;
	}	
	/* Posicionament del label */
	.as-l:not(.rsp-disabled) label:has(.as__checkbox--fold) {
/*		top: 0.2rem;
		right: 0.2rem;*/
		align-items: flex-start;		
		justify-content: center;
	}
	.as-r:not(.rsp-disabled) label:has(.as__checkbox--fold) {
/*		top: 0.2rem;
		left: 0.2rem;*/
		align-items: flex-start;		
		justify-content: center;
	}		
	/* Auto-plegat en alçada */
	.as:not(.rsp-disabled):has(.as__checkbox--fold:not(:checked)) {
		height: var(--lyt-as-fold-hgt);
	}
	/* Rotacions de la icona al règim estret */
	.as-l:not(.rsp-disabled):has(.as__checkbox--fold:not(:checked)) label::before,
	.as-r:not(.rsp-disabled):has(.as__checkbox--fold:not(:checked)) label::before {
		transform: translateY(4px) rotate(-45deg);
	}
	.as-l:not(.rsp-disabled):has(.as__checkbox--fold:checked) label::before,
	.as-r:not(.rsp-disabled):has(.as__checkbox--fold:checked) label::before {
		transform: translateY(-4px) rotate(135deg);
	}

}