/**
 * Identitats visuals de secció.
 *
 * «Una sola identitat, amb petits mons editorials dins.» Les variables
 * --ccc-sec-accent, --ccc-sec-ink, --ccc-sec-soft, --ccc-sec-highlight i
 * --ccc-sec-motif es generen des del registre (inc/sections.php) per a cada
 * classe .ccc-section--{clau}; la classe .ccc-motiu-{tipus} diu com es pinta
 * el motiu (il·lustració, textura o perfil del Maigmó).
 *
 * Tots els motius són decoratius (pseudoelements sense text llegible).
 */

.ccc-section {
	--ccc-sec-soft-card: color-mix(in srgb, var(--ccc-sec-soft) 75%, var(--wp--preset--color--base, #fbf9f8));
}

/* Capçalera de secció ------------------------------------------------------ */
.ccc-section .ccc-masthead {
	border-top: 6px solid var(--ccc-sec-accent);
}

.ccc-masthead::after,
.ccc-masthead::before {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

/* Seccions sense identitat pròpia: perfil del Maigmó en granat al peu de la capçalera. */
body:not(.ccc-section) .ccc-arxiu .ccc-masthead::after {
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(2.5rem, 7vw, 5.5rem);
	background: var(--wp--preset--color--accent-1, #99042e);
	opacity: 0.1;
	-webkit-mask: url("../images/silueta-maigmo.svg") no-repeat center bottom / 100% 100%;
	mask: url("../images/silueta-maigmo.svg") no-repeat center bottom / 100% 100%;
}

/* Il·lustració dibuixada a la dreta de la capçalera. */
.ccc-motiu-il .ccc-masthead::after {
	top: 50%;
	right: max(var(--wp--custom--gutter, 1rem), calc((100% - var(--wp--style--global--wide-size, 80rem)) / 2));
	width: min(40%, 22rem);
	height: 80%;
	transform: translateY(-50%);
	background: var(--ccc-sec-accent);
	opacity: 0.9;
	-webkit-mask: var(--ccc-sec-motif) no-repeat right center / contain;
	mask: var(--ccc-sec-motif) no-repeat right center / contain;
}

.ccc-motiu-il .ccc-masthead__interior {
	padding-right: min(40%, 22rem);
}

/* Textura de fons (corbes de nivell). */
.ccc-motiu-textura .ccc-masthead::after {
	top: -10%;
	right: -6%;
	bottom: -10%;
	width: min(60%, 40rem);
	background: var(--ccc-sec-accent);
	opacity: 0.2;
	-webkit-mask: var(--ccc-sec-motif) no-repeat right center / cover;
	mask: var(--ccc-sec-motif) no-repeat right center / cover;
}

/* Perfil d’elevació (Senderisme). */
.ccc-motiu-perfil .ccc-masthead::after {
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(3rem, 9vw, 7rem);
	background: var(--ccc-sec-highlight);
	opacity: 0.6;
	-webkit-mask: var(--ccc-sec-motif) no-repeat center bottom / 100% 100%;
	mask: var(--ccc-sec-motif) no-repeat center bottom / 100% 100%;
}

/* Nota escrita a mà sota el títol (p. ex. La Finestreta, 1977–1995). */
.ccc-nota-seccio {
	margin: 0.5rem 0 0 !important;
	font-family: var(--wp--custom--font--ma, Caveat, cursive);
	font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--ccc-sec-accent, var(--wp--preset--color--accent-1, #99042e));
	transform: rotate(-1.5deg);
	transform-origin: left center;
}

/* Les seccions destacades de portada també porten la seua il·lustració. */
.ccc-destacada.ccc-motiu-il .ccc-destacada__cap {
	padding-right: clamp(6rem, 22%, 12rem);
	min-height: 7.5rem;
}

.ccc-destacada.ccc-motiu-il .ccc-destacada__cap::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0.6rem;
	width: clamp(6rem, 20%, 11rem);
	height: 7rem;
	background: var(--ccc-sec-accent);
	opacity: 0.85;
	-webkit-mask: var(--ccc-sec-motif) no-repeat right top / contain;
	mask: var(--ccc-sec-motif) no-repeat right top / contain;
	pointer-events: none;
}

.ccc-destacada.ccc-motiu-perfil::after,
.ccc-destacada.ccc-motiu-textura::after {
	content: "";
	position: absolute;
	pointer-events: none;
	background: var(--ccc-sec-accent);
}

.ccc-destacada.ccc-motiu-perfil::after {
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(3rem, 9vw, 7rem);
	opacity: 0.22;
	-webkit-mask: var(--ccc-sec-motif) no-repeat center bottom / 100% 100%;
	mask: var(--ccc-sec-motif) no-repeat center bottom / 100% 100%;
}

.ccc-destacada.ccc-motiu-textura::after {
	top: 0;
	right: 0;
	width: min(55%, 34rem);
	height: 100%;
	opacity: 0.1;
	-webkit-mask: var(--ccc-sec-motif) no-repeat right top / cover;
	mask: var(--ccc-sec-motif) no-repeat right top / cover;
}

/* Motiu a les targetes de l’índex de seccions. */
.ccc-index__seccio.ccc-section .ccc-index__enllac::after {
	content: "";
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	width: 6.5rem;
	height: 4.5rem;
	z-index: -1;
	opacity: 0.22;
	background: var(--ccc-sec-accent);
	-webkit-mask: var(--ccc-sec-motif) no-repeat right bottom / contain;
	mask: var(--ccc-sec-motif) no-repeat right bottom / contain;
}

/* Marques davant del nom de la secció (etiquetes i retorn a la secció). */
.ccc-etiqueta.ccc-section .ccc-etiqueta__nom::before,
.ccc-tornar__seccio.ccc-section .ccc-tornar__nom::before {
	display: inline-block;
	vertical-align: 0.1em;
	margin-right: 0.35em;
	flex: none;
}

/* Marca de sender (franja blanca sobre franja verda), com les dels camins. */
.ccc-etiqueta.ccc-section--senderisme .ccc-etiqueta__nom::before,
.ccc-etiqueta.ccc-section--rutes .ccc-etiqueta__nom::before,
.ccc-tornar__seccio.ccc-section--senderisme .ccc-tornar__nom::before,
.ccc-tornar__seccio.ccc-section--rutes .ccc-tornar__nom::before {
	content: "";
	width: 0.9em;
	height: 0.55em;
	background: linear-gradient(#fff 0 50%, var(--ccc-sec-accent) 50% 100%);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--ccc-sec-accent) 45%, transparent);
}

.ccc-etiqueta.ccc-section--fira-fantasia .ccc-etiqueta__nom::before,
.ccc-tornar__seccio.ccc-section--fira-fantasia .ccc-tornar__nom::before {
	content: "";
	width: 0.7em;
	height: 0.7em;
	background: var(--ccc-sec-highlight);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.ccc-etiqueta.ccc-section--literari .ccc-etiqueta__nom::before,
.ccc-tornar__seccio.ccc-section--literari .ccc-tornar__nom::before {
	content: "";
	width: 0.45em;
	height: 0.7em;
	background: var(--ccc-sec-highlight);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}

.ccc-etiqueta.ccc-section--la-finestreta .ccc-etiqueta__nom::before,
.ccc-tornar__seccio.ccc-section--la-finestreta .ccc-tornar__nom::before {
	content: "";
	width: 0.6em;
	height: 0.65em;
	border: 2px solid currentColor;
	background:
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat,
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
	box-sizing: border-box;
}

.ccc-etiqueta.ccc-section--enric-valor .ccc-etiqueta__nom::before,
.ccc-tornar__seccio.ccc-section--enric-valor .ccc-tornar__nom::before {
	content: "";
	width: 1.15em;
	height: 0.65em;
	vertical-align: 0;
	background: currentColor;
	-webkit-mask: url("../images/motius/barret-silueta.svg") no-repeat center / contain;
	mask: url("../images/motius/barret-silueta.svg") no-repeat center / contain;
}

.ccc-etiqueta.ccc-section--albada-valor .ccc-etiqueta__nom::before,
.ccc-tornar__seccio.ccc-section--albada-valor .ccc-tornar__nom::before {
	content: "";
	width: 0.8em;
	height: 0.4em;
	border-radius: 1em 1em 0 0;
	background: var(--ccc-sec-highlight);
}

/* ===== Fira de la Fantasia ===== */
.ccc-section--fira-fantasia .ccc-masthead::before {
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background: repeating-linear-gradient(90deg, var(--ccc-sec-highlight) 0 1.5rem, transparent 1.5rem 2rem);
}

.ccc-section--fira-fantasia .ccc-masthead__titol {
	font-style: italic;
}

/* ===== Conferències: filets de marc de programa ===== */
.ccc-section--conferencies .ccc-masthead {
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--ccc-sec-accent) 35%, transparent),
		inset 0 0 0 7px var(--ccc-sec-soft),
		inset 0 0 0 8px color-mix(in srgb, var(--ccc-sec-accent) 35%, transparent);
}

.ccc-section--conferencies .ccc-fila__data,
.ccc-section--conferencies .ccc-destacada__data {
	font-family: var(--wp--preset--font-family--titular, "EB Garamond", serif);
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--font--titular-pes, 600);
	font-style: normal;
	color: var(--ccc-sec-accent);
}

/* ===== Albada de Valor: llum de l’alba ===== */
.ccc-section--albada-valor .ccc-masthead {
	background: linear-gradient(180deg, color-mix(in srgb, var(--ccc-sec-highlight) 28%, var(--wp--preset--color--base, #fbf9f8)) 0%, var(--ccc-sec-soft) 100%);
}

/* ===== La Finestreta: capçalera de publicació (filets dobles de periòdic) ===== */
.ccc-section--la-finestreta .ccc-masthead {
	border-top: 0;
	box-shadow: inset 0 6px 0 var(--ccc-sec-accent), inset 0 10px 0 var(--ccc-sec-soft), inset 0 12px 0 var(--ccc-sec-ink);
}

.ccc-section--la-finestreta .ccc-masthead__titol {
	border-bottom: 3px double var(--ccc-sec-ink);
	padding-bottom: 0.25rem;
	width: fit-content;
}

/* ===== Literari i La Finestreta: la caplletra de les entrades llargues ===== */
.single.ccc-section--literari .ccc-entrada__contingut > p:first-of-type::first-letter,
.single.ccc-section--la-finestreta .ccc-entrada__contingut > p:first-of-type::first-letter {
	float: left;
	font-family: var(--wp--preset--font-family--titular, "EB Garamond", serif);
	font-size: 4em;
	line-height: 0.82;
	margin: 0.06em 0.12em 0 0;
	color: var(--ccc-sec-accent);
}

/* Al mòbil els motius es fan discrets i no tapen el títol. */
@media (max-width: 47.99em) {
	.ccc-motiu-il .ccc-masthead::after {
		top: 0.75rem;
		width: 42%;
		height: 55%;
		transform: none;
		opacity: 0.22;
	}

	.ccc-motiu-il .ccc-masthead__interior {
		padding-right: 0;
	}

	.ccc-motiu-textura .ccc-masthead::after {
		opacity: 0.12;
	}

	.ccc-destacada.ccc-motiu-il .ccc-destacada__cap {
		padding-right: 0;
	}

	.ccc-destacada.ccc-motiu-il .ccc-destacada__cap::after {
		width: 5.5rem;
		height: 4.5rem;
		opacity: 0.3;
	}
}