/*
-- nom: crd.css --
-- llibreria: loT --
-- grup: Components --
-- autor: A.Moseguí / TT22 --
-- versió: 26.1.0 --
-- descripció: Card. Defectes: size-m + disp-v + flo-solid + txtsz-m + txtcl-auto + font-roboto + fit-contain + brd-on --
-- dependència: init.css, type.css, th-core.css, th-plt.css --
*/

/* =============================================
   :ROOT — VARIABLES DEL COMPONENT
   ============================================= */
:root {

	/* CONTAINER — DIMENSIONALS */
	--crd-u: 8rem;
	--crd-aspect: 2 / 3;
	--crd-grid-template-columns: 1fr;
	--crd-grid-template-rows: 2fr 1fr;
	--crd-radius: var(--rd-md);
	--crd-border-w: var(--bw-xs);
	--crd-pad: 0;

	/* CONTAINER — PRESENTACIÓ */
	--crd-shadow: none;
	--crd-backdrop: none;

	/* MMD */
	--crd-mmd-pad: var(--sp-lg);
	--crd-mmd-img-radius: var(--rd-sm);
	--crd-mmd-img-border-w: var(--bw-xs);
	--crd-mmd-img-fit: contain;
	--crd-mmd-img-pos: center;

	/* CNT - DIMENSIONALS */
	--crd-cnt-pad-t: 0;
	--crd-cnt-pad-r: var(--sp-lg);
	--crd-cnt-pad-b: var(--sp-lg);
	--crd-cnt-pad-l: var(--sp-lg);

	/* CNT - FONS */
	--crd-cnt-bg: transparent;

	/* HD — DIMENSIONALS */
	--crd-hd-pad: 0;
	--crd-hd-min-h: 1rem;
	--crd-hd-gap: var(--sp-sm);

	/* INFO — DIMENSIONALS */
	--crd-info-min-h: 1rem;

	/* TEXT — TIPOGRAFIA (valors = crd--txtsz-m, el defecte) */
	--crd-title-fs: var(--step-3);
	--crd-title-lh: var(--lh-3);
	--crd-stitle-fs: var(--step-2);
	--crd-stitle-lh: var(--lh-2);
	--crd-info-fs: var(--step-1);
	--crd-info-lh: var(--lh-1);

	/* TEXT — PESOS */
	--crd-title-fw: var(--fw-700);
	--crd-stitle-fw: var(--fw-400);
	--crd-info-fw: var(--fw-400);

	/* TEXT — FAMÍLIA */
	--crd-font: var(--font-roboto);

	/* TRANSITIONS BASE */
	--crd-transition:
		border-width var(--motion-dur-sm) var(--motion-ease-std),
		box-shadow var(--motion-dur-sm) var(--motion-ease-std),
		transform var(--motion-dur-sm) var(--motion-ease-out);
}

/* =============================================
   BASE — CONTAINER
   ============================================= */
.crd {
	/* Colors de tema resolts aquí (no al :root); els modificadors
	   (flo, txtcl…) els reassignen a la mateixa classe, i els
	   subelements (__title, __stitle, __info, __mmd) els hereten. */
	--crd-bg: var(--cl-cp-bg-hi);
	--crd-border-cl: var(--cl-cp-border);
	--crd-mmd-img-border-cl: var(--cl-cp-border);
	--crd-title-cl: var(--cl-cp-fg);
	--crd-stitle-cl: var(--cl-cp-fg);
	--crd-info-cl: var(--cl-cp-fg);
	display: grid;
	grid-template-columns: var(--crd-grid-template-columns);
	grid-template-rows: var(--crd-grid-template-rows);
	width: var(--crd-u);
	aspect-ratio: var(--crd-aspect);
	padding: var(--crd-pad);
	background-color: var(--crd-bg);
	border: var(--crd-border-w) solid var(--crd-border-cl);
	border-radius: var(--crd-radius);
	box-shadow: var(--crd-shadow);
	backdrop-filter: var(--crd-backdrop);
	font-family: var(--crd-font);
	text-decoration: none;
	overflow: hidden;
	position: relative;
	transition: var(--crd-transition);
}

/* =============================================
   BASE — CARD CLICABLE
   Només una card interactiva (<a href> o <button>) mostra
   la mà i reacciona a hover/active (vegeu STATES).
   Una card informativa (<div>, <article>…) no.
   ============================================= */
.crd:is(a[href], button) {
	cursor: pointer;
}

/* =============================================
   BASE — ELEMENTS
   ============================================= */

/* MMD */
.crd__mmd {
	padding: var(--crd-mmd-pad);
	overflow: hidden;
}

.crd__mmd > * {
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: var(--crd-mmd-img-fit);
	object-position: var(--crd-mmd-img-pos);
	border: var(--crd-mmd-img-border-w) solid var(--crd-mmd-img-border-cl);
	border-radius: var(--crd-mmd-img-radius);
	display: block;
}

/* CNT-FRONT */
.crd__cnt {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--crd-cnt-bg);
	padding:
		var(--crd-cnt-pad-t)
		var(--crd-cnt-pad-r)
		var(--crd-cnt-pad-b)
		var(--crd-cnt-pad-l);
	min-height: 0;
	overflow: hidden;
}

/* HD */
.crd__hd {
	display: flex;
	flex-direction: column;
	gap: var(--crd-hd-gap);
	min-height: var(--crd-hd-min-h);
	padding: var(--crd-hd-pad);
}

/* TITLE */
.crd__title {
	font-size: var(--crd-title-fs);
	line-height: var(--crd-title-lh);
	font-weight: var(--crd-title-fw);
	color: var(--crd-title-cl);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

/* STITLE */
.crd__stitle {
	font-size: var(--crd-stitle-fs);
	line-height: var(--crd-stitle-lh);
	font-weight: var(--crd-stitle-fw);
	color: var(--crd-stitle-cl);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

/* INFO */
.crd__info {
	font-size: var(--crd-info-fs);
	line-height: var(--crd-info-lh);
	font-weight: var(--crd-info-fw);
	color: var(--crd-info-cl);
	text-align: left;
	min-height: var(--crd-info-min-h);
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
}

/* =============================================
   MODIFICADORS SIMPLES — TIPOLOGIES DEL BLOC
   ============================================= */

/* SIZE */
.crd--size-s {
	--crd-u: 6rem;
	--crd-mmd-pad: var(--sp-md);
	--crd-cnt-pad-r: var(--sp-md);
	--crd-cnt-pad-b: var(--sp-md);
	--crd-cnt-pad-l: var(--sp-md);
}
.crd--size-m {
	--crd-u: 8rem;
	--crd-mmd-pad: var(--sp-lg);
	--crd-cnt-pad-r: var(--sp-lg);
	--crd-cnt-pad-b: var(--sp-lg);
	--crd-cnt-pad-l: var(--sp-lg);
}
.crd--size-l {
	--crd-u: 12rem;
	--crd-mmd-pad: var(--sp-lg);
	--crd-cnt-pad-r: var(--sp-lg);
	--crd-cnt-pad-b: var(--sp-lg);
	--crd-cnt-pad-l: var(--sp-lg);
}
.crd--size-x {
	--crd-u: 16rem;
	--crd-mmd-pad: var(--sp-xl);
	--crd-cnt-pad-r: var(--sp-xl);
	--crd-cnt-pad-b: var(--sp-xl);
	--crd-cnt-pad-l: var(--sp-xl);
}

/* DISPOSICIÓ */
.crd--disp-v {
	--crd-grid-template-columns: 1fr;
	--crd-grid-template-rows: 2fr 1fr;
	--crd-aspect: 2 / 3;
	--crd-cnt-pad-t: 0;
}

.crd--disp-h {
	--crd-grid-template-columns: 1fr 1fr;
	--crd-grid-template-rows: 1fr;
	width: calc(var(--crd-u) * 2);
	--crd-aspect: 2 / 1;
	--crd-cnt-pad-l: 0;
	--crd-cnt-pad-t: var(--sp-lg);
}

.crd--disp-q {
	--crd-grid-template-columns: 1fr;
	--crd-grid-template-rows: 2fr 1fr;
	--crd-aspect: 1 / 1;
	--crd-cnt-pad-t:var(--sp-lg);
}

/* MODE */
.crd--mode-mmd {
	--crd-grid-template-rows: 1fr;
	--crd-grid-template-columns: 1fr;
}

.crd--mode-cnt {
	--crd-grid-template-rows: 1fr;
	--crd-grid-template-columns: 1fr;
}

.crd--mode-all { /* default mode */
	font: inherit; /* no necessari, només perquè no quedi buit */
}

.crd--mode-mmd .crd__mmd,
.crd--mode-cnt .crd__cnt {
	grid-area: 1 / 1 / -1 / -1;
	padding: var(--crd-mmd-pad);
}

.crd--mode-mmd .crd__cnt {
	display: none;
}

.crd--mode-cnt .crd__mmd {
	display: none;
}

/* TXTSZ */
.crd--txtsz-s {
	--crd-title-fs: var(--step-2);   --crd-title-lh: var(--lh-2);
	--crd-stitle-fs: var(--step-1);  --crd-stitle-lh: var(--lh-1);
	--crd-info-fs: var(--step-1);    --crd-info-lh: var(--lh-1);
}
.crd--txtsz-m {
	--crd-title-fs: var(--step-3);   --crd-title-lh: var(--lh-3);
	--crd-stitle-fs: var(--step-2);  --crd-stitle-lh: var(--lh-2);
	--crd-info-fs: var(--step-1);    --crd-info-lh: var(--lh-1);
}
.crd--txtsz-l {
	--crd-title-fs: var(--step-4);   --crd-title-lh: var(--lh-4);
	--crd-stitle-fs: var(--step-3);  --crd-stitle-lh: var(--lh-3);
	--crd-info-fs: var(--step-1);    --crd-info-lh: var(--lh-1);
}
.crd--txtsz-x {
	--crd-title-fs: var(--step-5);   --crd-title-lh: var(--lh-5);
	--crd-stitle-fs: var(--step-4);  --crd-stitle-lh: var(--lh-4);
	--crd-info-fs: var(--step-2);    --crd-info-lh: var(--lh-2);
}

/* FONT */
.crd--font-roboto    { --crd-font: var(--font-roboto); }
.crd--font-tangerine { --crd-font: var(--font-tangerine); }
.crd--font-nasa      { --crd-font: var(--font-nasa); }

/* FLO */
.crd--flo-solid {
	--crd-bg: var(--cl-cp-bg-hi);
	--crd-backdrop: none;
}
.crd--flo-ghost {
	--crd-bg: transparent;
	--crd-backdrop: none;
}
.crd--flo-glass {
	--crd-bg: var(--trp-light-half);
	--crd-backdrop: blur(10px);
}

/* TXTCL */
.crd--txtcl-auto {
	--crd-title-cl: var(--cl-cp-fg);
	--crd-stitle-cl: var(--cl-cp-fg);
	--crd-info-cl: var(--cl-cp-fg);
}
.crd--txtcl-invert {
	--crd-title-cl: var(--cl-lyr-fg);
	--crd-stitle-cl: var(--cl-lyr-fg);
	--crd-info-cl: var(--cl-lyr-fg);
}
.crd--txtcl-maroon {
	--crd-title-cl: var(--color-maroon);
	--crd-stitle-cl: var(--color-maroon);
	--crd-info-cl: var(--color-maroon);
}

/* =============================================
   MODIFICADORS SIMPLES — TIPOLOGIES DEL SUBELEMENT MMD
   ============================================= */

/* FIT */
.crd__mmd--contain { --crd-mmd-img-fit: contain; }
.crd__mmd--cover   { --crd-mmd-img-fit: cover; }

/* BRD */
.crd__mmd--brd-on  { --crd-mmd-img-border-w: var(--bw-xs); }
.crd__mmd--brd-off { --crd-mmd-img-border-w: 0; }

/* =============================================
   STATES
   ============================================= */
/* HOVER — només cards clicables */
.crd:is(a[href], button):hover {
    border-width: var(--state-hover-relief-border-w);
    box-shadow: var(--state-hover-relief-shadow);
    transform: var(--state-hover-relief-transform);
}
/* ACTIVE — només cards clicables */
.crd:is(a[href], button):active {
    border-width: var(--state-active-relief-border-w);
    box-shadow: var(--state-active-relief-shadow);
    transform: var(--state-active-relief-transform);
}
/* MARCAT — PRESSED, SELECTED i CURRENT comparteixen la mateixa representació */
.crd:is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"])) {
    border-width: var(--state-pressed-marked-border-w);
    box-shadow: var(--state-pressed-marked-shadow);
}
/* FOCUS VISIBLE */
/* gestionat per state.css */
/* SELECTED */
/* representació visual: vegeu MARCAT; el cursor el gestiona state.css */
/* CURRENT */
/* representació visual: vegeu MARCAT; el cursor el gestiona state.css com [aria-current]:not([aria-current="false"]) */
/* DISABLED */
/* gestionat per state.css */

/* =============================================
   RESPONSIVE
   ============================================= */

/* Breakpoint 720px */
@media (max-width: 720px) {

	/* Verticals: L→M, X→L */
	.crd--disp-v.crd--size-l { --crd-u: 8rem; }
	.crd--disp-v.crd--size-x { --crd-u: 12rem; }

	/* Horitzontals: M→S, L→M, X→L */
	.crd--disp-h.crd--size-m { --crd-u: 6rem; }
	.crd--disp-h.crd--size-l { --crd-u: 8rem; }
	.crd--disp-h.crd--size-x { --crd-u: 12rem; }

	/* Quadrat: L→M, X→L */
	.crd--disp-q.crd--size-l { --crd-u: 8rem; }
	.crd--disp-q.crd--size-x { --crd-u: 12rem; }

}

/* Breakpoint 480px — només horitzontals */
@media (max-width: 480px) {

	.crd--disp-h.crd--size-m,
	.crd--disp-h.crd--size-l { --crd-u: 6rem; }
	.crd--disp-h.crd--size-x { --crd-u: 8rem; }
}