/*
 * CAGE — design system (header, footer, accessibilitat).
 *
 * Convencions:
 *  - Les propietats TIPOGRAFIQUES van dins de :where() perque qualsevol ajust
 *    fet des del panell de Bricks (#brxe-xxxx, especificitat 1,0,0) guanyi
 *    sense necessitat de !important.
 *  - Les propietats ESTRUCTURALS (display, grid, position) NO van dins de
 *    :where(): son design system i no s'han de poder trencar des del panell.
 *  - Els colors i mides surten de les variables globals de Bricks (--cage-*).
 */

/* ───────────────────────── Skip link ───────────────────────── */

.cage-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var(--cage-verd);
	color: var(--cage-blanc);
	text-decoration: none;
}

.cage-skip-link:focus {
	left: 1rem;
	top: 1rem;
}

:where(.cage-skip-link) {
	font-family: var(--cage-font-cos);
	font-size: var(--cage-nav-size);
	letter-spacing: var(--cage-nav-ls);
	text-transform: uppercase;
}

/* ───────────────────────── Header ───────────────────────── */

.cage-header {
	width: 100%;
	background-color: var(--cage-blanc-trencat);
}

/*
 * Bricks aplica a .brxe-block { display:flex; flex-direction:column; flex-wrap:wrap }
 * amb especificitat d'una sola classe. Per aixo cal declarar explicitament la
 * direccio: si nomes posem display:flex, la columna de Bricks es queda.
 * L'element "block" no te controls de layout al panell (nomes els te "container"),
 * de manera que aquest fitxer es l'unic lloc on es defineix.
 */
.cage-header__inner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	/*
	 * De vora a vora (client, 23/09): el logotip enganxat a l'esquerra i el
	 * menu a la dreta, aprofitant l'amplada. Sense max-width ni centrat; el
	 * separament de la vora el fa nomes el padding.
	 */
	width: 100%;
	padding: 1.25rem 2rem;
	box-sizing: border-box;
}

/*
 * Bricks posa width:100% a .brxe-block; si no el tornem a auto, el bloc de la
 * dreta ocupa tota l'amplada i el justify-content:space-between no separa res.
 */
.cage-header__brand,
.cage-header__right {
	width: auto;
}

/*
 * Logotip. L'SVG va amb fill="currentColor", aixi que n'hi ha prou amb el
 * color de l'ancora: verd a les interiors, blanc a la portada (variant A).
 * Una sola peca per a les dues variants, sense duplicar cap fitxer.
 */
.cage-header__brand a,
.cage-header__logo {
	display: block;
	text-decoration: none;
	color: var(--cage-verd);
}

.cage-header__logo svg {
	display: block;
	width: auto;
	height: 2.25rem;
}

/*
 * Reserva del wordmark tipografic: nomes es fa servir si falta el fitxer SVG
 * (el shortcode hi cau sol). Mantingut perque la capcalera no quedi buida.
 */
:where(.cage-header__brand-name) {
	display: block;
	white-space: nowrap;
	font-family: var(--cage-font-titular);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.1;
}

:where(.cage-header__brand-sub) {
	display: block;
	font-family: var(--cage-font-cos);
	font-weight: 400;
	font-size: var(--cage-wordmark-sub-size);
	letter-spacing: var(--cage-wordmark-sub-ls);
	text-transform: uppercase;
}

.cage-header__right {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 2rem;
}

/*
 * Buit reservat per al selector CA·ES. Mentre no hi hagi plugin multiidioma
 * el shortcode retorna cadena buida: si el buit conservés els 4,5rem i el gap,
 * el menu quedaria a 104px de la vora en comptes d'enganxat a la dreta.
 * Amb :has() el buit nomes ocupa lloc quan el selector hi es de debo.
 */
.cage-header__lang {
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 0;
	/* Mateix verd que el menu: sense aixo hereta la tinta del cos i el
	   selector desentona amb la resta de la capcalera. */
	color: var(--cage-verd);
}

.cage-header__lang:has(.cage-lang) {
	min-width: 4.5rem;
	min-height: 1rem;
}

.cage-header__right:not(:has(.cage-lang)) {
	gap: 0;
}

.cage-header__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Nomes el menu d'escriptori. Bricks fa servir dues llistes: .bricks-nav-menu
 * per a la barra i .bricks-mobile-menu per al panell desplegable. Amb el
 * selector generic ".cage-header__nav ul" el panell tambe heretava
 * flex-direction:row i els items del menu mobil sortien en fila a dalt de tot
 * en comptes d'apilats.
 */
.cage-header__nav .bricks-nav-menu {
	display: flex;
	gap: 1.75rem;
}

.cage-header__nav .bricks-nav-menu > li {
	flex-shrink: 0;
}

.cage-header__nav a {
	color: var(--cage-verd);
	text-decoration: none;
	white-space: nowrap;
}

/* Variant A — Inici: capcalera absoluta sobre la foto, text blanc */
body.home .cage-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	background-color: transparent;
}

body.home .cage-header__brand a,
body.home .cage-header__logo,
body.home .cage-header__nav a,
body.home .cage-header__lang {
	color: var(--cage-blanc);
}

/* ───────────────────────── Footer ───────────────────────── */

/*
 * Peu refet segons el client (correu del 23/09): una sola columna a
 * l'esquerra amb la marca, l'adreca i els contactes, i a sota l'enllac a
 * l'avis legal. A la dreta de la mateixa franja, els logotips institucionals
 * del Programa Kit Digital.
 *
 * Ja no hi ha franja blanca: la tira institucional va en NEGATIU (blanc pur)
 * directament sobre el verd del peu. Veure assets/img/ per a l'origen.
 */
.cage-footer {
	background-color: var(--cage-verd);
	color: var(--cage-blanc-trencat);
	padding: 0;
}

.cage-footer__inner {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2.5rem 3rem;
	/*
	 * .brxe-section porta align-items:center, aixi que un fill amb width:auto
	 * s'encongeix al contingut i queda centrat amb una amplada arbitraria: el
	 * peu ha de tenir la caixa fixada. 1248 = 1200 de contingut + 2 x 1,5rem,
	 * amb border-box perque el padding no generi scroll horitzontal a mobil.
	 */
	width: 100%;
	max-width: 1248px;
	margin-inline: auto;
	padding: 3.5rem 1.5rem;
	box-sizing: border-box;
}

.cage-footer__despatx {
	flex: 1 1 18rem;
	align-items: flex-start;
	width: auto;
	min-width: 0;
}

.cage-footer__despatx > * {
	margin: 0 0 0.75rem;
}

.cage-footer__despatx > :last-child {
	margin-bottom: 0;
}

:where(.cage-footer, .cage-footer__text, .cage-footer__text p) {
	font-family: var(--cage-font-cos);
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--cage-blanc-trencat);
}

:where(.cage-footer__col-title) {
	font-family: var(--cage-font-titular);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--cage-blanc);
}

.cage-footer__legal {
	margin-top: 1.25rem;
}

/*
 * Els enllacos del peu tenen el mateix color que el text que els envolta
 * (blanc trencat sobre verd, 8,05:1). Sense subratllat serien indistingibles
 * del text pla, que es exactament el que prohibeix WCAG 1.4.1 (us del color).
 */
.cage-footer a {
	color: var(--cage-blanc-trencat);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: from-font;
}

.cage-footer a:hover,
.cage-footer a:focus-visible {
	text-decoration-thickness: 2px;
}

/*
 * Publicitat del Programa Kit Digital (obligatoria per a Red.es).
 *
 * La tira es la peca oficial "SIN BANDERA" de la pagina 17 del manual
 * (LOGO INSTITUCIONAL BLANCO Y NEGRO), extreta en vector i invertida a blanc
 * pur per anar sobre fons fosc. Proporcio original 621 x 31,2.
 *
 * El max-width de 717px no es arbitrari: el manual fixa una reduccio maxima
 * de 104px d'ample per al logotip Kit Digital, que dins de la tira ocupa
 * 108,1 de 621 unitats (17,41%). 104 / 0,1741 = 597,4px d'amplada minima de
 * tira, o sigui 30px d'alcada. A 717px la tira fa 36px d'alt i el logotip
 * Kit Digital 125px, amb marge.
 *
 * flex-shrink: 0 a proposit: val mes que la tira salti de linia que no pas
 * que s'encongeixi per sota de la reduccio maxima del manual.
 */
.cage-footer__programa {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
	width: auto;
	max-width: 100%;
	/* Quan no hi cap a la mateixa linia i salta a la seguent, el margin-left
	   la manté a la dreta en comptes de deixar-la a l'esquerra. */
	margin: 0 0 0 auto;
	padding: 0;
}

/* Bricks posa _cssClasses directament sobre l'<img>, no sobre cap embolcall. */
.cage-footer__programa-logos {
	display: block;
	width: 717px;
	max-width: 100%;
	height: auto;
}

.cage-footer__programa-text {
	max-width: 717px;
	margin: 0;
	text-align: right;
	font-family: var(--cage-font-cos);
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--cage-blanc-trencat);
}

/* Marca visual provisional per a tot el que encara no te contingut definitiu */
.cage-placeholder {
	outline: 1px dashed rgba(246, 243, 238, 0.45);
	outline-offset: 2px;
	opacity: 0.85;
}

/* ───────────────────────── Responsive ───────────────────────── */

@media (max-width: 767px) {
	.cage-header__inner {
		padding: 1rem;
	}

	/* A 390px el logotip sencer no hi cap al costat de l'hamburguesa */
	.cage-header__logo svg {
		height: 1.5rem;
	}

	:where(.cage-header__brand-name) {
		font-size: 1.25rem;
	}

	.cage-footer__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 2rem;
		padding: 3rem 1rem;
	}

	/* En columna, flex-grow s'aplicaria a l'alcada i deixaria un buit enorme
	   entre l'avis legal i la tira. */
	.cage-footer__despatx {
		flex: 0 0 auto;
	}

	/*
	 * A mobil la tira va sota l'adreca i centrada (client, 23/09).
	 * Per sota de ~630px de finestra el logotip Kit Digital queda per sota
	 * dels 104px de reduccio maxima del manual: no hi ha versio apilada
	 * oficial i retallar la tira seria modificar art oficial, aixi que
	 * s'escala a l'amplada disponible.
	 */
	.cage-footer__programa {
		align-items: center;
		margin-inline: auto;
	}

	.cage-footer__programa-text {
		text-align: center;
	}
}

/* ───────────────────────── Accessibilitat ───────────────────────── */

/*
 * Amagat nomes visualment. La portada ja no mostra el titular (client,
 * 23/09) pero ha de conservar-ne un: aquest patro el treu de la vista sense
 * treure'l de l'arbre d'accessibilitat, cosa que si que farien display:none
 * i visibility:hidden. Es manté clip a mes de clip-path per als navegadors
 * antics; la resta de propietats eviten que el text es reflueixi o generi
 * scroll mentre esta amagat.
 */
.cage-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * El contorn de focus principal el fixa el Theme Style de Bricks
 * (focusOutline → body.bricks-is-frontend :focus-visible).
 * Aqui nomes cobrim el cas de la capcalera transparent de l'Inici,
 * on el verd no tindria prou contrast sobre la foto.
 */
body.home .cage-header :focus-visible {
	outline: 2px solid var(--cage-blanc);
	outline-offset: 2px;
}

/*
 * Mateix motiu per als controls del passi: son a la fotografia, no a la
 * capcalera, i l'anell verd del Theme Style no s'hi distingeix.
 *
 * El prefix body.bricks-is-frontend no es decoratiu: el Theme Style genera
 * "body.bricks-is-frontend :focus-visible", que es 0,2,1, i .cage-hero__controls
 * :focus-visible nomes arriba a 0,2,0. La regla de la capcalera d'aqui sobre
 * ja hi arriba sola perque hi suma .home.
 */
body.bricks-is-frontend .cage-hero__controls :focus-visible {
	outline: 2px solid var(--cage-blanc);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cage-header,
	.cage-header * {
		transition: none !important;
		animation: none !important;
	}
}

/* ═══════════════════ Dades pendents ═══════════════════ */

/*
 * Marca els continguts provisionals sobre fons clar (ambre suau) perque siguin
 * facils de localitzar i de treure. El .cage-placeholder de mes amunt fa la
 * mateixa feina sobre el verd del peu.
 */
.cage-pendent {
	background-color: #FBF0D5;
	box-shadow: inset 0 -2px 0 #D9A441;
	padding: 0.05em 0.35em;
}

:where(.cage-pendent) {
	font-family: var(--cage-font-cos);
	font-size: 0.9375em;
	color: #6B4E12;
}

/* ═══════════════════ Estructura interior ═══════════════════ */

.cage-section {
	padding: 5rem 1.5rem;
	background-color: var(--cage-blanc-trencat);
}

.cage-wrap {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}

.cage-intro {
	margin-bottom: 3rem;
}

.cage-intro > * {
	margin: 0;
}

.cage-intro .cage-eyebrow {
	margin-bottom: 0.75rem;
}

.cage-intro .cage-lede {
	margin-top: 1.25rem;
}

:where(.cage-title) {
	margin-bottom: 0;
}

.cage-prosa > p {
	margin: 0 0 1.1em;
}

.cage-prosa > p:last-child {
	margin-bottom: 0;
}

:where(.cage-prosa) {
	max-width: 68ch;
}

:where(.cage-lede) {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--cage-tinta-2);
}

/*
 * El Theme Style de Bricks treu el subratllat de tots els enllacos. Dins del
 * cos de text l'unica cosa que els distingia era el color, i el verd de marca
 * contra la tinta del text nomes fa 1,61:1: es el supòsit exacte de WCAG
 * 1.4.1 (us del color), que demana 3:1 o be una marca que no sigui el color.
 * Mateixa solucio que ja hi havia al peu.
 */
.cage-prosa a,
.cage-enllac {
	color: var(--cage-verd);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: from-font;
}

.cage-prosa a:hover,
.cage-prosa a:focus-visible,
.cage-enllac:hover,
.cage-enllac:focus-visible {
	text-decoration-thickness: 2px;
}

/* Les imatges de Bricks han d'omplir el seu contenidor */
.cage-section img,
.cage-hero img {
	display: block;
	width: 100%;
	height: auto;
}

/* ═══════════════════ Hero / slider (Inici) ═══════════════════ */

.cage-hero {
	position: relative;
	display: block;
	width: 100%;
	height: 100vh;
	height: 100svh;
	padding: 0;
	overflow: hidden;
	background-color: var(--cage-verd-fosc);
}

.cage-hero__slides {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

/*
 * Bricks posa _cssClasses sobre l'<img> mateix, no sobre cap embolcall: aqui
 * .cage-hero__slide ES la imatge. Cal el descendent .cage-hero .cage-hero__slide
 * (0,2,0) perque guanyi a .cage-hero img (0,1,1), que posa height:auto per a la
 * resta d'imatges. Amb les provisionals de 3:2 la imatge ja passava de l'alcada
 * del hero i no es notava; amb les reals de 16:9 quedava una franja de fons a
 * sota i el h1 hi topava.
 */
.cage-hero .cage-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
}

/*
 * Sense JS nomes es veu la primera imatge. Quan el JS arrenca afegeix
 * .cage-hero--ready al contenidor i a partir d'aqui mana la classe .is-active.
 */
.cage-hero__slide:not(:first-child) {
	opacity: 0;
}

.cage-hero--ready .cage-hero__slide {
	opacity: 0;
	transition: opacity 1100ms ease-in-out;
}

.cage-hero--ready .cage-hero__slide.is-active {
	opacity: 1;
}

/*
 * Vel de contrast, mesurat sobre les 4 fotografies i no a ull.
 *
 * A DALT: el logotip i el menu van en blanc sobre la foto (variant A). Amb el
 * vel que hi havia el blanc es quedava a 2,47:1 sobre el passadis clar, molt
 * per sota del 4,5:1 de WCAG 1.4.3. axe no ho detecta perque no sap avaluar
 * text sobre imatge. Amb aquesta rampa el pitjor cas de les 4 fotos puja per
 * sobre de 4,5:1 a 1440 i a 390.
 *
 * A BAIX: el titular visible s'ha retirat (client, 23/09), aixi que el
 * degradat inferior ja no ha de sostenir cap text i s'ha escurcat i amortit.
 * Els controls del passi es resolen amb un fons propi (.cage-hero__controls)
 * en comptes d'enfosquir mitja fotografia.
 */
.cage-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(49, 60, 25, 0.8) 0%, rgba(49, 60, 25, 0.62) 9%, rgba(49, 60, 25, 0) 30%),
		linear-gradient(to top, rgba(49, 60, 25, 0.4) 0%, rgba(49, 60, 25, 0) 20%);
}

.cage-hero__caption {
	position: absolute;
	left: 0;
	bottom: 3rem;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	padding-inline: 1.5rem;
	margin-inline: auto;
	inset-inline: 0;
}

:where(.cage-hero__title) {
	margin: 0 0 0.75rem;
}

/*
 * El color del titular del hero va FORA de :where(). El Theme Style aplica
 * "h1,h2,h3,h4,h5,h6 { color: verd }" (especificitat 0,0,1) i un :where()
 * (0,0,0) hi perdria: el titular sortiria verd sobre la fotografia fosca i
 * seria illegible. Aqui el blanc no es un valor per defecte sino una condicio
 * de contrast, i per tant no ha de ser sobreescrivible per accident.
 */
.cage-hero__title {
	color: var(--cage-blanc);
}

:where(.cage-hero__kicker) {
	font-family: var(--cage-font-cos);
	font-weight: 400;
	font-size: var(--cage-eyebrow-size);
	letter-spacing: var(--cage-eyebrow-ls);
	text-transform: uppercase;
	color: var(--cage-blanc);
}

/*
 * Els controls porten fons propi: son components d'interficie i el blanc
 * n'ha de destacar 3:1 (WCAG 1.4.11) sobre el que tinguin a sota. Un vel
 * general prou fort per garantir-ho enfosquiria mitja fotografia; aquest
 * pastilla ho resol nomes on cal.
 */
.cage-hero__controls {
	position: absolute;
	right: 1.5rem;
	bottom: 3rem;
	z-index: 3;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	width: auto;
	padding: 0.5rem 0.875rem;
	border-radius: 999px;
	background: rgba(49, 60, 25, 0.5);
}

/*
 * WCAG 2.5.8 (target-size, AA de 2.2): l'area d'activacio de cada punt ha de
 * fer 24 x 24 px i les de dos punts veins no s'han de trepitjar. El punt
 * VISIBLE segueix fent 10 px: el boto passa a 24 px i transparent, i el cercle
 * es dibuixa amb un ::before centrat. Amb gap 0 els centres queden a 24 px
 * exactes (abans 21,6), que es el minim que evita el solapament; el marge
 * negatiu de la llista treu el sobrant nomes als extrems, no entre punts, per
 * no moure el padding de la pastilla.
 */
.cage-hero__dots {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0;
	margin: 0 -7px;
	padding: 0;
	list-style: none;
}

.cage-hero__dot {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.cage-hero__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	transform: translate(-50%, -50%);
	border: 1px solid var(--cage-blanc);
	border-radius: 50%;
	box-sizing: border-box;
}

.cage-hero__dot[aria-current="true"]::before {
	background: var(--cage-blanc);
}

/* L'anell de focus es queda enganxat al punt visible, no a la caixa de 24px. */
body.bricks-is-frontend .cage-hero__dot:focus-visible {
	outline: none;
}

.cage-hero__dot:focus-visible::before {
	outline: 2px solid var(--cage-blanc);
	outline-offset: 2px;
}

.cage-hero__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--cage-blanc);
	border-radius: 50%;
	background: rgba(49, 60, 25, 0.45);
	color: var(--cage-blanc);
	cursor: pointer;
}

.cage-hero__toggle svg {
	width: 0.8rem;
	height: 0.8rem;
	fill: currentColor;
}

/* ═══════════════════ El despatx ═══════════════════ */

.cage-despatx__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 3rem;
	align-items: start;
	margin-bottom: 3rem;
}

.cage-despatx__detalls {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

/*
 * L'orla es una peca apaisada (2,19:1) i com a mitja columna quedaria
 * il·legible: ocupa la fila sencera.
 */
.cage-despatx__orla {
	grid-column: 1 / -1;
}

/* ═══════════════════ Professionals ═══════════════════ */

/*
 * Normes professionals (art. 10.1.f LSSI, professio regulada). Eren al peu;
 * el client les vol nomes a Professionals. Van com a nota al peu de la
 * pagina, no com a text de cos: .cage-prosa te max-width i .brxe-block porta
 * align-items:flex-start, aixi que cal tornar-li l'amplada sencera.
 */
.cage-equip__normes {
	width: 100%;
	max-width: none;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--cage-pedra);
}

:where(.cage-equip__normes, .cage-equip__normes p) {
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--cage-tinta-2);
}

/*
 * Una fitxa per fila. Les biografies fan 3 paragrafs: en tres columnes
 * quedaven estretes i d'alcades molt desiguals. Retrat estret a l'esquerra i
 * text a la dreta amb mesura de lectura. L'ordre del DOM no canvia (retrat,
 * nom, carrec, col·legiacio, bio), o sigui que l'ordre de lectura tampoc.
 */
.cage-equip {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.cage-fitxa {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 68ch);
	grid-template-rows: auto auto auto 1fr;
	column-gap: 3rem;
	row-gap: 0.6rem;
	align-content: start;
	width: 100%;
	padding-block: 3rem;
	border-top: 1px solid var(--cage-pedra);
}

.cage-fitxa:first-child {
	padding-top: 0;
	border-top: 0;
}

.cage-fitxa > * {
	grid-column: 2;
}

.cage-fitxa__retrat {
	grid-column: 1;
	grid-row: 1 / span 4;
	align-self: start;
}

.cage-fitxa__bio {
	margin-top: 0.9rem;
}

.cage-fitxa__retrat img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/*
 * Aquests titulars de component son h2 i han de ser mes petits que l'escala
 * general de h2 del Theme Style. NO poden anar dins de :where(): el Theme Style
 * genera "h2 { font-size: ... }" (0,0,1) i un :where() (0,0,0) hi perdria.
 * Amb especificitat de classe (0,1,0) guanyen al Theme Style i continuen
 * perdent contra un ajust fet des del panell de Bricks (#brxe-id, 1,0,0),
 * que es exactament el que volem.
 */
.cage-fitxa__nom {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.2;
}

.cage-fitxa__dades p,
.cage-fitxa__bio p {
	margin: 0;
}

.cage-fitxa__bio p + p {
	margin-top: 1em;
}

:where(.cage-fitxa__dades) {
	color: var(--cage-tinta-2);
	font-size: 0.875rem;
}

/*
 * Fitxes sense retrat (provisional, fins que arribin les fotos). S'activa amb
 * la classe "cage-equip--sense-retrat" a l'element cage-equip (cgpr06) de
 * Professionals i Profesionales. Per tornar a mostrar els retrats n'hi ha prou
 * amb treure la classe: el retrat segueix al DOM i la resta de regles no canvia.
 * Escriptori: nom, carrec i col·legiacio a l'esquerra; bio a la dreta.
 */
.cage-equip--sense-retrat .cage-fitxa__retrat {
	display: none;
}

.cage-equip--sense-retrat .cage-fitxa {
	grid-template-columns: minmax(0, 18rem) minmax(0, 68ch);
	grid-template-rows: auto auto 1fr;
}

.cage-equip--sense-retrat .cage-fitxa > * {
	grid-column: 1;
}

.cage-equip--sense-retrat .cage-fitxa__bio {
	grid-column: 2;
	grid-row: 1 / span 3;
	margin-top: 0;
}

/* ═══════════════════ Àrees de pràctica ═══════════════════ */

.cage-arees {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	/* .brxe-block porta align-items:flex-start i les fitxes de cada fila
	   quedaven amb alcades diferents. */
	align-items: stretch;
}

.cage-area {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	padding: 2rem;
	border: 1px solid var(--cage-pedra);
	background-color: var(--cage-blanc);
}

.cage-area__titol {
	margin: 0;
	font-size: 1.375rem;
	line-height: 1.25;
	color: var(--cage-verd);
}

:where(.cage-area__text) {
	color: var(--cage-tinta-2);
}

/* ═══════════════════ Contacte ═══════════════════ */

.cage-contacte__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

.cage-contacte__mapa {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	width: 100%;
}

/* Imatge estatica generada un sol cop: no hi ha tiles en viu ni cap peticio externa. */
.cage-contacte__mapa-img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--cage-pedra);
}

/* Atribucio obligatoria d'OpenStreetMap (ODbL). */
.cage-contacte__mapa-attr {
	margin: 0;
	font-family: var(--cage-font-cos);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--cage-verd-fosc);
}

.cage-contacte__mapa-attr a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ═══════════════════ Responsive de contingut ═══════════════════ */

@media (max-width: 991px) {
	.cage-arees {
		grid-template-columns: repeat(2, 1fr);
	}

	.cage-fitxa {
		grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
		column-gap: 2rem;
	}

	.cage-equip--sense-retrat .cage-fitxa {
		grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	/* Gutter lateral de 16px en mobil */
	.cage-section {
		padding: 3.5rem 1rem;
	}

	.cage-hero__caption {
		bottom: 5.5rem;
		padding-inline: 1rem;
	}

	.cage-hero__controls {
		right: 1rem;
		bottom: 2rem;
	}

	.cage-despatx__grid,
	.cage-despatx__detalls,
	.cage-arees,
	.cage-contacte__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	/* Apilada: retrat acotat perque el nom no quedi sota un rectangle de
	   pantalla sencera. */
	.cage-fitxa {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		padding-block: 2.5rem;
	}

	.cage-fitxa > *,
	.cage-fitxa__retrat {
		grid-column: 1;
		grid-row: auto;
	}

	.cage-fitxa__retrat {
		max-width: 12rem;
		margin-bottom: 0.6rem;
	}

	.cage-equip--sense-retrat .cage-fitxa {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}

	.cage-equip--sense-retrat .cage-fitxa__bio {
		grid-column: 1;
		grid-row: auto;
		margin-top: 0.9rem;
	}

}

/* Sense animacio: el fos es instantani i no hi ha passi automatic */
@media (prefers-reduced-motion: reduce) {
	.cage-hero--ready .cage-hero__slide {
		transition: none;
	}
}

/* ───────────────────── Selector d'idioma CA · ES ───────────────────── */

/*
 * Viu dins de .cage-header__lang, que ja porta la classe global cage-nav
 * (versaletes i letter-spacing del design system). Aqui nomes hi ha la
 * disposicio i els estats. Sense JS.
 */
.cage-lang__llista {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cage-lang__item + .cage-lang__item::before {
	content: "·";
	margin-inline-end: 0.5rem;
	opacity: 0.55;
}

.cage-lang a,
.cage-lang__actiu {
	color: inherit;
	text-decoration: none;
}

/* L'idioma actiu no es un enllaç: es marca amb el pes, no amb el color,
   perque es llegeixi igual sobre el verd i sobre la foto de la portada. */
.cage-lang__actiu {
	font-weight: 500;
}

/*
 * L'idioma inactiu NO s'amorteix amb opacity. Amb 0,7 el verd sobre blanc
 * trencat es quedava a 3,78:1 i sobre la foto de la portada encara mes avall,
 * per sota del 4,5:1 de WCAG 1.4.3. La diferencia entre actiu i inactiu la fa
 * el pes, com ja deia el design system, i el subratllat a hover/focus.
 */
.cage-lang a:hover,
.cage-lang a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/*
 * El selector del panell mobil: mateix marcatge, separat de la llista.
 * Bricks posa el padding horitzontal a l'enllac (.bricks-mobile-menu li a,
 * 0 30px), no al <li>: el nostre <li> no en te cap i s'ha d'igualar a ma
 * perque el selector no quedi enganxat a la vora del panell.
 */
.cage-menu-item-lang {
	margin-top: 0.5rem;
	padding: 1rem 30px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.cage-lang--mobil .cage-lang__llista {
	gap: 0.75rem;
}

/*
 * Bricks aplica als enllaços del panell ".brxe-nav-menu .bricks-mobile-menu-wrapper
 * li a" (0,2,2): display:block, width:100% i line-height:60px. A l'idioma
 * inactiu (<a>) el deixava ~20 px per sota de l'actiu (<span>) i el punt
 * separador sol a dalt. Es desfà només aquí (0,3,1). El padding vertical manté
 * l'àrea tàctil per sobre de 24 px (WCAG 2.5.8).
 */
.bricks-mobile-menu-wrapper .cage-lang--mobil .cage-lang__llista a {
	display: inline-block;
	width: auto;
	padding-block: 0.5rem;
	line-height: inherit;
}

/*
 * A mobil el selector va DINS del panell del menu (client, 24/09), no a la
 * barra: el buit reservat de la capcalera no s'ha de veure.
 */
@media (max-width: 767px) {
	.cage-header__lang {
		display: none;
	}

	.cage-header__right {
		gap: 1rem;
	}
}

/* A escriptori el selector del panell no existeix. */
@media (min-width: 768px) {
	.cage-menu-item-lang {
		display: none;
	}
}

/* ──────────────── Boto del menu mobil (contrast, WCAG 1.4.11) ──────────────── */

/*
 * Bricks pinta les tres barres amb background-color: currentcolor, i la
 * variant A nomes posava el blanc als enllaços, no al boto. Resultat: boto
 * negre sobre el verd fosc de la portada. Aqui es fixa el color a banda i
 * banda i tambe el de l'anell de focus, que amb el verd del theme style no
 * arribava a 3:1 sobre la foto.
 */
.cage-header__nav .bricks-mobile-menu-toggle {
	color: var(--cage-verd);
}

body.home .cage-header__nav .bricks-mobile-menu-toggle {
	color: var(--cage-blanc);
}

body.home .cage-header__nav .bricks-mobile-menu-toggle:focus-visible {
	outline: 2px solid var(--cage-blanc);
	outline-offset: 4px;
}

.cage-header__nav .bricks-mobile-menu-toggle:focus-visible {
	outline: 2px solid var(--cage-verd);
	outline-offset: 4px;
}

/*
 * Amb el menu obert el panell es fosc (#23282D, el pinta Bricks): la creu i
 * els enllacos han de ser blancs als dos casos. El verd de marca sobre aquest
 * fons nomes fa 1,67:1; en blanc son 14,86:1.
 */
.cage-header__nav.show-mobile-menu .bricks-mobile-menu-toggle,
body.home .cage-header__nav.show-mobile-menu .bricks-mobile-menu-toggle {
	color: var(--cage-blanc);
}

.cage-header__nav .bricks-mobile-menu a,
body.home .cage-header__nav .bricks-mobile-menu a {
	color: var(--cage-blanc);
}

.cage-header__nav.show-mobile-menu .bricks-mobile-menu-toggle:focus-visible {
	outline-color: var(--cage-blanc);
}

/* ───────────────────────── Pagina 404 ───────────────────────── */

.cage-404__enllac {
	margin: 1.5rem 0 0;
}

/* ───────────────────── Pagines legals ───────────────────── */

.cage-legal {
	max-width: 46rem;
}

.cage-legal__bloc {
	margin-top: 2.5rem;
}

/*
 * Especificitat de classe (0,1,0): el Theme Style genera h2 com a selector
 * d'element (0,0,1) i guanyaria a un :where(). Mateix motiu que a
 * .cage-area__titol i .cage-fitxa__nom.
 */
.cage-legal__titol {
	margin: 0 0 0.75rem;
	font-family: var(--cage-font-titular);
	font-weight: 500;
	font-size: 1.75rem;
	line-height: 1.2;
	color: var(--cage-verd);
}