/**
 * Widget «Acordió horitzontal» de Munné Elements.
 *
 * Làmines verticals en flex: les tancades ocupen --mun-hacc-tab i l'oberta creix
 * amb una transició de flex-grow. Les media queries que el converteixen en
 * acordió vertical es generen en PHP a partir dels punts de ruptura del lloc
 * (vegeu MUN\Plugin::get_accordion_stacking_css).
 */

.mun-hacc {
	--mun-hacc-height: 600px;
	--mun-hacc-tab: 100px;
	--mun-hacc-gap: 0px;

	--mun-hacc-tab-bg: #6f6862;
	--mun-hacc-tab-color: #ffffff;
	--mun-hacc-tab-bg-active: #d61630;
	--mun-hacc-tab-color-active: #ffffff;
	--mun-hacc-focus: #ffffff;

	--mun-hacc-image-top: 40px;
	--mun-hacc-image-bottom: 24px;
	--mun-hacc-overlay: rgba(0, 0, 0, 0.45);
	--mun-hacc-fit-pos: center center;
	--mun-hacc-body-width: 640px;
	--mun-hacc-stack-ratio: 4 / 3;

	--mun-hacc-duration: 550ms;
	--mun-hacc-easing: cubic-bezier(0.22, 1, 0.36, 1);

	--mun-hacc-title-rotate: 0deg;
	--mun-hacc-title-justify: flex-start;

	display: flex;
	gap: var(--mun-hacc-gap);
	min-height: var(--mun-hacc-height);
}

.mun-hacc__item {
	display: flex;
	flex: 0 1 var(--mun-hacc-tab);
	min-width: 0;
	transition: flex-grow var(--mun-hacc-duration) var(--mun-hacc-easing);
}

.mun-hacc__item--active {
	flex-grow: 1;
}

/* ---------------------------------------------------------------------------
 * Làmina (capçalera)
 * ------------------------------------------------------------------------ */

/* Contenidor flex a propòsit: així el botó s'estira fins a l'alçada de la
   làmina sense necessitat de «height: 100%», que dins flex crea una resolució
   circular de percentatges i acaba prenent l'alçada de la finestra. */
.mun-hacc__heading {
	display: flex;
	flex: 0 0 var(--mun-hacc-tab);
	min-width: 0;
	margin: 0;
	font: inherit;
}

.mun-hacc__trigger {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: var(--mun-hacc-title-justify);
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	/* El reset de Hello Elementor dona estil a tots els <button> (vora, radi,
	   farciment, white-space). Cal neutralitzar-ho explícitament: si no, les
	   làmines surten amb cantonades arrodonides i el widget depèn del tema. */
	border: 0;
	border-radius: var(--mun-hacc-tab-radius, 0);
	appearance: none;
	background-color: var(--mun-hacc-tab-bg);
	color: var(--mun-hacc-tab-color);
	font: inherit;
	text-align: start;
	white-space: nowrap;
	cursor: pointer;
	writing-mode: vertical-rl;
	transition:
		background-color var(--mun-hacc-duration) var(--mun-hacc-easing),
		color var(--mun-hacc-duration) var(--mun-hacc-easing);
}

/* Girar només l'etiqueta manté la caixa al seu lloc: l'alineació segueix
   funcionant i el text es llegeix de baix a dalt. */
.mun-hacc__label {
	display: block;
	transform: rotate(var(--mun-hacc-title-rotate));
}

.mun-hacc__item--active .mun-hacc__trigger {
	background-color: var(--mun-hacc-tab-bg-active);
	color: var(--mun-hacc-tab-color-active);
}

.mun-hacc__item:not(.mun-hacc__item--active) .mun-hacc__trigger:hover {
	background-color: var(--mun-hacc-tab-bg-hover, var(--mun-hacc-tab-bg));
	color: var(--mun-hacc-tab-color-hover, var(--mun-hacc-tab-color));
}

.mun-hacc__trigger:focus-visible {
	outline: 2px solid var(--mun-hacc-focus);
	outline-offset: -6px;
}

/* ---------------------------------------------------------------------------
 * Panell
 * ------------------------------------------------------------------------ */

.mun-hacc__panel {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	/* El retranqueig només afecta la imatge: la pestanya i les làmines
	   tancades es queden a alçada plena. */
	margin-block: var(--mun-hacc-image-top) var(--mun-hacc-image-bottom);
}

/* Especificitat alta a propòsit: les regles d'apilament fixen «display» sobre
   .mun-hacc__panel i, sense això, guanyarien l'atribut hidden. */
.mun-hacc .mun-hacc__panel[hidden] {
	display: none;
}

.mun-hacc__panel-inner {
	position: relative;
	height: 100%;
	min-width: 0;
}

.mun-hacc__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.mun-hacc__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--mun-hacc-overlay);
	pointer-events: none;
}

.mun-hacc__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--mun-hacc-fit-pos);
}

.mun-hacc__body {
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	box-sizing: border-box;
	max-width: var(--mun-hacc-body-width);
}

.mun-hacc__description {
	margin: 0;
}

/* Subratllat per defecte: així l'enllaç es veu encara que no tingui fons.
   Es pot desactivar des del control «Subratllat» quan se'n fa un botó. */
.mun-hacc__link {
	display: inline-block;
	margin-top: 1.25em;
	/* El valor per defecte ha de ser «none»: el control només escriu la variable
	   quan està activat, i si el respatller fos «underline» no es podria treure. */
	text-decoration-line: var(--mun-hacc-link-underline, none);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.mun-hacc__description + .mun-hacc__link {
	margin-top: 1.5em;
}

@media (prefers-reduced-motion: reduce) {
	.mun-hacc__item,
	.mun-hacc__trigger,
	.mun-hacc__panel {
		transition: none;
	}
}