/*
 * educAAlergicus · Proposta B (identitat pròpia)
 * Recursos: etiqueta d'aliments, agenda escolar, fitxa tècnica, anotacions a mà.
 * Menys targetes i ombres; filets de color xocolata; composició asimètrica.
 * Traslladable al tema: classes b-* sobre blocs del nucli (group, columns, table, list, image, html).
 */

.b-pagina {
	--b-tinta: var(--wp--preset--color--xocolata);
	--b-filet: 1.5px solid var(--wp--preset--color--xocolata);
	--b-filet-fi: 1px solid #D9C6BC;
}

/* ---------- Comuns ---------- */
.b-seccio { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.b-titol {
	font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.08;
	color: var(--b-tinta);
	max-width: 18ch;
}
.b-text-gran { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); line-height: 1.55; }
.b-pagina b { font-weight: 900; }

/* Enllaç amb fletxa, en lloc d'un segon botó */
.b-enllac a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-weight: 800;
	color: var(--b-tinta);
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--salmo);
	padding-bottom: 2px;
	transition: gap 0.2s ease, border-color 0.2s ease;
}
.b-enllac a::after { content: "→"; }
.b-enllac a:hover { gap: 0.75em; border-color: var(--wp--preset--color--salmo-text); color: var(--b-tinta); }

/* Subratllat de retolador */
.b-marca {
	background: linear-gradient(transparent 58%, var(--wp--preset--color--mantega) 58%, var(--wp--preset--color--mantega) 90%, transparent 90%);
	padding-inline: 0.1em;
	font-weight: 800;
}

/* Anotació a mà (Pacifico, només aquí) */
.b-nota {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--pacifico);
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--wp--preset--color--salmo-text);
}
.b-nota__fletxa { flex: 0 0 auto; width: 58px; height: 40px; color: var(--wp--preset--color--salmo); }

/* ---------- 1 · Portada ---------- */
.b-hero {
	padding-block: clamp(2.75rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5.5rem);
	background:
		radial-gradient(circle at 92% 18%, var(--wp--preset--color--salmo-suau) 0 9rem, transparent 9.05rem),
		var(--wp--preset--color--crema);
	border-bottom: var(--b-filet);
	overflow: hidden;
}
.b-hero__graella { gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.b-hero__curs {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--cafe);
}
.b-hero__titol {
	font-size: clamp(2.375rem, 1.6rem + 3.6vw, 4.5rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.02;
	color: var(--b-tinta);
	max-width: 14ch;
	margin-top: 0.9rem !important;
}
.b-hero__entrada { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); max-width: 34ch; margin-top: 1.4rem !important; }
.b-hero__accions { gap: 1.25rem 1.75rem; margin-top: 2rem !important; }
.b-hero__nom {
	margin-top: 2.25rem !important;
	padding-top: 0.9rem;
	border-top: var(--b-filet-fi);
	font-size: 0.875rem;
	color: var(--wp--preset--color--cafe);
	max-width: 46ch;
}
.b-hero__lateral { position: relative; }

/* Etiqueta d'aliments */
.b-etiqueta {
	position: relative;
	padding: 1.4rem 1.5rem 1.2rem;
	background: #FFFFFF;
	border: var(--b-filet);
	border-radius: 6px;
	transform: rotate(-2deg);
	box-shadow: 6px 6px 0 var(--wp--preset--color--pressec);
	font-size: 1rem;
	line-height: 1.5;
}
.b-etiqueta > * + * { margin-top: 0.75rem; }
.b-etiqueta::before {   /* tall serrat superior, com un envàs */
	content: "";
	position: absolute;
	left: 14px; right: 14px; top: -7px;
	height: 7px;
	background: radial-gradient(circle at 5px 7px, var(--b-tinta) 0 1.3px, transparent 1.6px) 0 0 / 10px 7px repeat-x;
}
.b-etiqueta__cap {
	font-weight: 900;
	font-size: 1.375rem;
	letter-spacing: -0.01em;
	padding-bottom: 0.4rem;
	border-bottom: 6px solid var(--b-tinta);
}
.b-etiqueta__llista b, .b-pagina .b-text-gran b {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--salmo);
	text-decoration-thickness: 3px;
	text-underline-offset: 3px;
}
.b-etiqueta__traces { padding-top: 0.6rem; border-top: var(--b-filet-fi); }
.b-etiqueta__peu {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding-top: 0.6rem;
	border-top: 3px solid var(--b-tinta);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--cafe);
}
.b-nota--etiqueta { margin-top: 1.25rem; padding-left: 1rem; max-width: 26rem; }
.b-nota--etiqueta .b-nota__fletxa { transform: scaleY(-1) rotate(8deg); }

/* ---------- 2 · Escena ---------- */
.b-escena {
	padding-block: clamp(3rem, 7vw, 5.5rem);
	background: var(--b-tinta);
	color: var(--wp--preset--color--crema);
}
.b-escena .wp-block-columns { gap: clamp(1.5rem, 4vw, 4rem); align-items: flex-start; }
.b-escena__dia, .b-escena__lloc { font-weight: 700; color: var(--wp--preset--color--malva); }
.b-escena__rellotge {
	font-size: clamp(4rem, 2.5rem + 7vw, 8.5rem);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--salmo);
	font-variant-numeric: tabular-nums;
	margin-top: 0.25rem !important;
}
.b-escena__lloc { margin-top: 0.75rem !important; }
.b-escena__text {
	font-size: clamp(1.375rem, 1.1rem + 1.25vw, 2.125rem);
	line-height: 1.3;
	font-weight: 600;
	max-width: 30ch;
}
.b-escena__text strong { color: var(--wp--preset--color--mantega); font-weight: 900; }
.b-escena__peu { margin-top: 1.75rem !important; max-width: 52ch; color: var(--wp--preset--color--malva); }
.b-escena__peu em { font-style: normal; font-weight: 700; color: var(--wp--preset--color--crema); }

/* ---------- 3 · Fitxa del curs (taula d'informació) ---------- */
.b-fitxa-graella { gap: clamp(2rem, 5vw, 5rem); align-items: flex-start; }
.b-fitxa-graella .b-titol + * { margin-top: 1.5rem; }
.b-fitxa-graella .b-enllac { margin-top: 1.75rem; }
.b-fitxa {
	margin: 0;
	padding: 1rem 1.25rem 1.1rem;
	background: #FFFFFF;
	border: 2px solid var(--b-tinta);
}
.b-fitxa table { width: 100%; border-collapse: collapse; }
.b-fitxa caption { text-align: left; padding-bottom: 0.4rem; border-bottom: 12px solid var(--b-tinta); }
.b-fitxa__titol { display: block; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 1000; letter-spacing: -0.03em; line-height: 1; }
.b-fitxa__sub { display: block; margin-top: 0.35rem; font-weight: 700; font-size: 0.9375rem; }
.b-fitxa th, .b-fitxa td { padding: 0.5rem 0; border-bottom: 1px solid var(--b-tinta); text-align: left; font-size: 1rem; }
.b-fitxa td { text-align: right; font-weight: 900; padding-left: 1rem; }
.b-fitxa th { font-weight: 800; }
.b-fitxa__gran th, .b-fitxa__gran td { font-size: 1.25rem; font-weight: 1000; border-bottom-width: 6px; }
.b-fitxa__sub-fila th { padding-left: 1.25rem; font-weight: 600; }
.b-fitxa__ratlla th, .b-fitxa__ratlla td { border-top: 6px solid var(--b-tinta); }
.b-fitxa tr:last-child th, .b-fitxa tr:last-child td { border-bottom: 0; }
.b-fitxa figcaption { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 3px solid var(--b-tinta); font-size: 0.875rem; line-height: 1.45; }

/* ---------- 4 · Agenda escolar ---------- */
.b-seccio--agenda { background: var(--wp--preset--color--pressec); }
.b-agenda__cap-seccio { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.b-llegenda { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0; font-weight: 800; font-size: 0.9375rem; }
.b-llegenda__item::before {
	content: "";
	display: inline-block;
	width: 0.85em; height: 0.85em;
	margin-right: 0.4em;
	border-radius: 50%;
	vertical-align: -0.08em;
	background: var(--b-gomet);
	box-shadow: inset 0 0 0 1.5px rgba(74, 55, 50, 0.35);
}
.b-llegenda--entendre, .b-entrada--entendre { --b-gomet: var(--wp--preset--color--blau); }
.b-llegenda--prevenir, .b-entrada--prevenir { --b-gomet: var(--wp--preset--color--salvia); }
.b-llegenda--reconeixer, .b-entrada--reconeixer { --b-gomet: var(--wp--preset--color--mantega); }
.b-llegenda--actuar, .b-entrada--actuar { --b-gomet: var(--wp--preset--color--salmo); }

.b-agenda {
	margin-top: 2rem !important;
	background:
		linear-gradient(90deg, transparent 2.6rem, var(--wp--preset--color--salmo) 2.6rem, var(--wp--preset--color--salmo) calc(2.6rem + 2px), transparent calc(2.6rem + 2px)),
		repeating-linear-gradient(#FFFFFF 0 1.95rem, #DCE9EF 1.95rem 2rem);
	border: var(--b-filet);
	border-radius: 4px;
	padding: 1.25rem 1.25rem 1.5rem 3.6rem;
	box-shadow: 8px 8px 0 rgba(74, 55, 50, 0.12);
}
.b-agenda__cols { gap: 0; align-items: stretch; }
.b-agenda__col { padding: 0 1rem; border-left: 1px dashed #C9B3B0; }
.b-agenda__col:first-child { border-left: 0; padding-left: 0; }
.b-agenda__cap {
	font-family: var(--wp--preset--font-family--pacifico);
	font-size: 1.375rem;
	line-height: 2rem;
	color: var(--wp--preset--color--salmo-text);
}
.b-agenda__llista { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.b-entrada { position: relative; display: grid; gap: 0.15rem; padding-left: 1.6rem; line-height: 1.4; }
.b-entrada strong { font-weight: 900; font-size: 1.0625rem; line-height: 1.25; }
.b-entrada > span:last-child { font-size: 0.9375rem; color: var(--wp--preset--color--cafe); }
.b-entrada__num, .b-entrada__tag { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--cafe); }
.b-gomet {
	position: absolute; left: 0; top: 0.1rem;
	width: 1.15rem; height: 1.15rem;
	border-radius: 50%;
	background: var(--b-gomet);
	box-shadow: inset 0 -2px 0 rgba(74, 55, 50, 0.15), 0 0 0 1.5px rgba(74, 55, 50, 0.35);
	transform: rotate(-12deg);
}
.b-entrada--directe {
	padding: 0.6rem 0.75rem 0.7rem 0.85rem;
	background: var(--wp--preset--color--mantega-suau);
	border-radius: 2px;
	transform: rotate(-1deg);
	box-shadow: 2px 3px 0 rgba(74, 55, 50, 0.1);
}
.b-cinta {   /* cinta adhesiva */
	position: absolute; top: -9px; left: 50%;
	width: 58px; height: 16px;
	transform: translateX(-50%) rotate(3deg);
	background: rgba(180, 204, 216, 0.75);
}
.b-agenda__peu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem !important; }
.b-nota--agenda .b-nota__fletxa { transform: scaleX(-1) rotate(200deg); }

/* ---------- 5 · Per a centres ---------- */
.b-centres__cap > * + * { margin-top: 1.25rem; }
.b-passos { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.b-passos li {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	align-items: center;
	padding: 1rem 0;
	border-top: var(--b-filet);
}
.b-passos li:last-child { border-bottom: var(--b-filet); }
.b-passos__num { font-size: 2.75rem; font-weight: 1000; line-height: 1; letter-spacing: -0.04em; color: var(--wp--preset--color--salmo-text); }
.b-passos li:nth-child(2) .b-passos__num { color: var(--wp--preset--color--blau-text); }
.b-passos li:nth-child(3) .b-passos__num { color: var(--wp--preset--color--salvia-text); }
.b-passos li:nth-child(4) .b-passos__num { color: var(--wp--preset--color--mantega-text); }
.b-passos p { margin: 0; font-size: 1.125rem; line-height: 1.45; }
.b-passos strong { font-weight: 900; }

/* ---------- 6 · La formadora ---------- */
.b-seccio--formadora { background: var(--wp--preset--color--blau-suau); }
.b-seccio--formadora .wp-block-columns { gap: clamp(2rem, 5vw, 5rem); }
.b-polaroid {
	margin: 0 auto;
	max-width: 17rem;
	padding: 0.75rem 0.75rem 0;
	background: #FFFFFF;
	transform: rotate(-3deg);
	box-shadow: 6px 8px 0 rgba(74, 55, 50, 0.12);
	position: relative;
}
.b-polaroid::before {
	content: ""; position: absolute; top: -10px; left: 50%;
	width: 70px; height: 20px; transform: translateX(-50%) rotate(-4deg);
	background: rgba(246, 213, 138, 0.8);
}
.b-polaroid__foto {
	display: grid; place-items: center;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--salmo-suau);
	font-weight: 800; color: var(--wp--preset--color--salmo-text);
}
.b-polaroid figcaption { padding: 0.75rem 0 0.9rem; text-align: center; font-family: var(--wp--preset--font-family--pacifico); font-size: 1.125rem; color: var(--b-tinta); }
.b-cita { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; max-width: 28ch; }
.b-cita__autoria { margin-top: 1.25rem !important; }
.b-seccio--formadora .b-enllac { margin-top: 1.5rem !important; }

/* ---------- 7 · Tancament ---------- */
.b-tancament { padding-block: clamp(3.5rem, 8vw, 6rem); border-top: var(--b-filet); }
.b-tancament__dins > * + * { margin-top: 1.25rem; }
.b-tancament h2 {
	font-size: clamp(1.875rem, 1.3rem + 2.5vw, 3.25rem);
	font-weight: 900; letter-spacing: -0.025em; line-height: 1.06;
	color: var(--b-tinta);
	max-width: 22ch;
}
.b-tancament__text { font-size: 1.1875rem; max-width: 50ch; }
.b-tancament__correu { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 2rem !important; }
.b-tancament__correu a {
	font-size: clamp(1.375rem, 1rem + 1.9vw, 2.5rem);
	font-weight: 900; letter-spacing: -0.02em;
	color: var(--wp--preset--color--salmo-text);
	text-decoration: none;
	border-bottom: 4px solid var(--wp--preset--color--salmo);
	overflow-wrap: anywhere;
}
.b-tancament__correu a:hover { color: #7E3D33; border-color: #7E3D33; }
.b-tancament__avis { font-size: 0.875rem; color: var(--wp--preset--color--cafe); }

/* ---------- Mòbil i tauleta ---------- */
@media (max-width: 781px) {
	.b-hero { background: var(--wp--preset--color--crema); }
	.b-etiqueta { transform: rotate(-1deg); margin-inline: 0.25rem; }
	.b-agenda { padding: 1rem 1rem 1.25rem 2.6rem;
		background:
			linear-gradient(90deg, transparent 1.6rem, var(--wp--preset--color--salmo) 1.6rem, var(--wp--preset--color--salmo) calc(1.6rem + 2px), transparent calc(1.6rem + 2px)),
			repeating-linear-gradient(#FFFFFF 0 1.95rem, #DCE9EF 1.95rem 2rem); }
	.b-agenda__col { padding: 0; border-left: 0; }
	.b-agenda__col + .b-agenda__col { margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px dashed #C9B3B0; }
	.b-passos li { grid-template-columns: 3.25rem 1fr; }
	.b-passos__num { font-size: 2.25rem; }
}
@media (min-width: 782px) and (max-width: 1100px) {
	.b-agenda__cols { flex-wrap: wrap; }
	.b-agenda__cols > .wp-block-column { flex: 1 1 45% !important; padding: 0 1rem 1.25rem; }
	.b-agenda__col:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.b-enllac a { transition: none; }
}