/**
 * IF.DIGITAL Mega-Tabs – responsive.
 *
 * Basis (mobil): Accordion – Reiter-Button, direkt darunter das aktive Panel.
 * Ab 601px: Zwei Spalten – Buttons links, aktives Panel rechts. Reine CSS-
 * Umschaltung des Layouts (display:contents + Grid), kein Layout-JS.
 *
 * Groessen, Farben und Abstaende kommen aus den Design-Tokens der theme.json
 * (--wp--preset--*), jeweils mit Rueckfallwert: die Tokens sind die Vorgabe,
 * nicht die Voraussetzung. Was der Block selbst regelt, steht als eigene
 * Variable unter :where(.wp-block-ifdigital-mega-tabs) und ist damit von
 * aussen ueberschreibbar, ohne Spezifitaet aufzubauen.
 */

:where( .wp-block-ifdigital-mega-tabs ) {
	--ifd-tabs-gap: 0.15rem;
	--ifd-tabs-radius: var( --ifd-radius, 0.6rem );
	--ifd-tabs-tab-padding-block: var( --wp--preset--spacing--30, 0.7rem );
	--ifd-tabs-tab-padding-inline: var( --wp--preset--spacing--40, 0.85rem );
	--ifd-tabs-active-bg: var( --wp--preset--color--white, #fff );
	/*
	 * Bewusst KEIN Farb-Token: Die Palette kennt keine Trennlinien-Farbe, und
	 * lightgrey (#f1f1f1) ist auf weissem Grund praktisch unsichtbar. Ein
	 * durchscheinendes Schwarz passt sich dagegen jedem Untergrund an. Wer eine
	 * eigene Linienfarbe hat, setzt --ifd-tabs-rule im Theme.
	 */
	--ifd-tabs-rule: rgb( 0 0 0 / 0.12 );
	/*
	 * Farbe der Subline - aus demselben Grund kein Palette-Token: die Palette
	 * kennt kein Grau fuer Text (lightgrey ist eine Flaechenfarbe). Ein
	 * durchscheinendes Schwarz wirkt auf jedem Untergrund grau und passt sich
	 * an. Wer ein eigenes Grau hat, setzt --ifd-tabs-subline-color im Theme.
	 */
	--ifd-tabs-subline-color: rgb( 0 0 0 / 0.55 );
	/*
	 * Groesse der Subline: bewusst kein Schriftgroessen-Token. Die Zeile
	 * laeuft als Versalien-Kicker und muss deutlich kleiner sein als der
	 * Reitername - die kleinste Groesse der theme.json ist dafuer noch zu
	 * gross. Wer es anders will, setzt --ifd-tabs-subline-size im Theme.
	 */
	--ifd-tabs-subline-size: 0.75rem;
	/*
	 * Schatten beim Ueberfahren: zwei sehr flache Lagen statt einer tiefen -
	 * die erste setzt die Kante ab, die zweite deutet Hoehe an. Bewusst nicht
	 * das Schatten-Preset der theme.json: das ist fuer grosse Flaechen
	 * gezeichnet (0 0 20px) und wirkt unter einer kleinen Kachel wie ein
	 * Nebelfleck. Wer einen eigenen hat, setzt --ifd-tabs-hover-shadow.
	 */
	--ifd-tabs-hover-shadow: 0 1px 2px rgb( 0 0 0 / 0.05 ),
		0 6px 16px -6px rgb( 0 0 0 / 0.12 );
	--ifd-tabs-column: minmax( 12rem, 20rem );
}

.wp-block-ifdigital-mega-tabs {
	min-width: 0;
}

.wp-block-ifdigital-mega-tabs__list {
	display: flex;
	flex-direction: column;
	gap: var( --ifd-tabs-gap );
}

/* --- Reiter-Button --- */
.wp-block-ifdigital-mega-tabs__tab {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1rem;
	width: 100%;
	margin: 0;
	padding: var( --ifd-tabs-tab-padding-block ) 2.25rem
		var( --ifd-tabs-tab-padding-block ) var( --ifd-tabs-tab-padding-inline );
	border: 0;
	border-radius: var( --ifd-tabs-radius );
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-ifdigital-mega-tabs__tab:hover,
.wp-block-ifdigital-mega-tabs__tab:focus-visible,
.wp-block-ifdigital-mega-tabs__tab.is-active {
	background: var( --ifd-tabs-active-bg );
}

/*
 * Der Schatten nur beim Ueberfahren, nicht am aktiven Reiter: Der aktive ist
 * durch seine Flaeche schon als gewaehlt zu erkennen: haette er zusaetzlich
 * einen Schatten, saehe jeder Zeigerwechsel nach einer Auswahl aus.
 */
.wp-block-ifdigital-mega-tabs__tab:hover,
.wp-block-ifdigital-mega-tabs__tab:focus-visible {
	box-shadow: var( --ifd-tabs-hover-shadow );
}

/*
 * Subline am Reiter: kleiner Versalien-Kicker ueber dem Reiternamen. Der Block
 * setzt bewusst KEINE eigene Schriftart - eine Auszeichnungsschrift waere eine
 * gestalterische Ansage, die nicht ins Plugin gehoert. Groesse und Farbe
 * kommen aus den beiden Variablen oben und sind vom Theme aus zu aendern.
 *
 * Statt opacity eine echte Farbe: opacity blendet das Element als Ganzes aus
 * und laesst den Wert je nach Untergrund unterschiedlich stark durchschlagen -
 * ein Grauwert ist vorhersehbar und im Theme in einer Zeile zu aendern.
 *
 * letter-spacing gehoert zu text-transform: Versalien ohne etwas Laufweite
 * stehen zu dicht, weil die Abstaende der Schrift fuer Gemischtschreibung
 * gezeichnet sind.
 */
.wp-block-ifdigital-mega-tabs__subline {
	font-family: inherit;
	font-size: var( --ifd-tabs-subline-size, 0.75rem );
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --ifd-tabs-subline-color );
}

/*
 * Auszeichnungen aus dem Inhalt (<em>, <i>) werden hier zurueckgenommen:
 * kursive Versalien lesen sich schlecht. Im Blockmarkup darf die Auszeichnung
 * stehen bleiben - sie traegt dann keine Schraege mehr, geht aber auch nicht
 * verloren, falls die Gestaltung spaeter wieder eine andere ist.
 */
.wp-block-ifdigital-mega-tabs__subline em,
.wp-block-ifdigital-mega-tabs__subline i {
	font-style: normal;
}

/* --- Chevron --- */
.wp-block-ifdigital-mega-tabs__chevron {
	position: absolute;
	right: 0.9rem;
	top: 50%;
	width: 0.5em;
	height: 0.5em;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	/* Mobil: zeigt nach unten (zu). */
	transform: translateY(-60%) rotate(135deg);
	opacity: 0.6;
	transition: transform 0.2s ease;
}

.wp-block-ifdigital-mega-tabs__tab.is-active .wp-block-ifdigital-mega-tabs__chevron {
	/* Mobil offen: zeigt nach oben. */
	transform: translateY(-40%) rotate(-45deg);
	opacity: 0.9;
}

/* --- Panel --- */
.wp-block-ifdigital-mega-tabs__panel {
	min-width: 0;
	padding: 0.25rem var( --ifd-tabs-tab-padding-inline ) 0.75rem;
}

.wp-block-ifdigital-mega-tabs__panel[hidden] {
	display: none;
}

/* --- Kopfzeile des Panels: Name links, Weg zur Übersicht rechts --- */
.wp-block-ifdigital-mega-tabs__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--40, 1rem );
	margin-bottom: var( --wp--preset--spacing--50, 1.25rem );
	padding-bottom: var( --wp--preset--spacing--20, 0.5rem );
	border-bottom: 1px solid var( --ifd-tabs-rule );
}

.wp-block-ifdigital-mega-tabs__title {
	font-size: var( --wp--preset--font-size--medium, 1.125em );
	font-weight: 700;
	line-height: 1.2;
}

.wp-block-ifdigital-mega-tabs__overview {
	flex: none;
	font-size: var( --wp--preset--font-size--small, 0.875em );
	white-space: nowrap;
}

/* --- Desktop: Buttons links, aktives Panel rechts --- */
@media (min-width: 601px) {
	.wp-block-ifdigital-mega-tabs__list {
		display: grid;
		grid-template-columns: var( --ifd-tabs-column ) 1fr;
		/* Reiterzeilen nur so hoch wie ihr Inhalt, danach eine Restzeile.
		   Mit "auto" verteilt der Browser die Hoehe des Panels - das mit
		   grid-row: 1 / -1 alle Zeilen ueberspannt - gleichmaessig auf die
		   Zeilen, und die Reiter reissen auseinander (gemessen: 65px hohe
		   Reiter in 129px hohen Zeilen). Die zusaetzliche 1fr-Zeile nimmt den
		   Ueberschuss auf; align-content: start allein genuegt dafuer nicht,
		   weil nicht das Grid zu klein ist, sondern die Zeilen zu gross
		   berechnet werden. */
		grid-template-rows: repeat( var( --ifd-tab-count, 1 ), min-content ) 1fr;
		align-content: start;
		column-gap: clamp( 1rem, 3vw, 2.5rem );
		row-gap: var( --ifd-tabs-gap );
	}

	.wp-block-ifdigital-mega-tabs__item {
		display: contents;
	}

	.wp-block-ifdigital-mega-tabs__tab {
		grid-column: 1;
		align-self: start;
	}

	/* Alle Panels teilen sich die rechte Spalte; nur das aktive ist sichtbar. */
	.wp-block-ifdigital-mega-tabs__panel {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: start;
		padding: 0;
	}

	/* Chevron zeigt auf Desktop immer nach rechts. */
	.wp-block-ifdigital-mega-tabs__chevron,
	.wp-block-ifdigital-mega-tabs__tab.is-active .wp-block-ifdigital-mega-tabs__chevron {
		transform: translateY(-50%) rotate(45deg);
	}
}

@media (max-width: 600px) {
	/* Im Accordion steht der Name schon auf dem Reiter direkt darüber - in der
	   Kopfzeile waere er eine Wiederholung. Der Link bleibt, ruecht nach links. */
	.wp-block-ifdigital-mega-tabs__header {
		justify-content: flex-start;
	}

	.wp-block-ifdigital-mega-tabs__title {
		display: none;
	}
}