/* ─────────────────────────────────────────────
 * MODULE: TABS
 *
 * CSS-only tabs: hidden radio inputs + sibling
 * combinators. No JavaScript.
 *
 * Layout positions (top/bottom/left/right) are
 * handled by class-based rules in this file and
 * bp-*.css. Active-state rules per tab are the
 * only scoped CSS generated by PHP.
 *
 * Position classes on .mod-tabs:
 *   .tabs-pos-top       mobile base: nav on top
 *   .tabs-pos-bottom    mobile base: nav on bottom
 *   .tabs-pos-left      mobile base: nav on left
 *   .tabs-pos-right     mobile base: nav on right
 *   .tabs-desk-top      desktop: nav on top   (via bp-*.css)
 *   .tabs-desk-bottom   desktop: nav on bottom (via bp-*.css)
 *   .tabs-desk-left     desktop: nav on left   (via bp-*.css)
 *   .tabs-desk-right    desktop: nav on right  (via bp-*.css)
 *   .bp-tabs-s/m/l/xl   breakpoint qualifier
 *   .tabs-stack         labels stack below the breakpoint (opt-in; last rule in this file)
 *
 * CSS custom properties (inline per instance):
 *   --tabs-nav-w        nav column width (left/right)
 *   --tabs-nav-color    inactive nav button color
 *   --tabs-active-color active nav button color
 * ───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
 * CSS CUSTOM PROPERTIES
 * ───────────────────────────────────────────── */
:root {
	--mod-tabs-btn-padding-block:  var(--gap-xs);
	--mod-tabs-btn-padding-inline: var(--gap-s);
	--mod-tabs-indicator-width:    2px;
	--mod-tabs-panel-padding:      var(--gap-m);
	--mod-tabs-nav-w:              25%;
}

/* ─────────────────────────────────────────────
 * RADIO INPUTS — hidden but :checked is readable
 * ───────────────────────────────────────────── */
.mod-tabs__radio {
	display: none;
}

/* ─────────────────────────────────────────────
 * WRAPPER — always flex
 * ───────────────────────────────────────────── */
.mod-tabs {
	display: flex;
	flex-wrap: wrap;
}

/* ─────────────────────────────────────────────
 * NAV — base
 * ───────────────────────────────────────────── */
.mod-tabs__nav {
	display: flex;
	align-items: stretch;
}

/* ─────────────────────────────────────────────
 * TAB BUTTON (label element)
 * ───────────────────────────────────────────── */
.mod-tabs__btn {
	display: block;
	padding-block:  var(--mod-tabs-btn-padding-block);
	padding-inline: var(--mod-tabs-btn-padding-inline);
	border: var(--mod-tabs-indicator-width) solid transparent;
	cursor: pointer;
	color: var(--tabs-nav-color, inherit);
}

/* ─────────────────────────────────────────────
 * PANEL — all hidden by default
 * ───────────────────────────────────────────── */
.mod-tabs__panel {
	display: none;
}

/* ─────────────────────────────────────────────
 * PANEL INNER — collapse first/last margins
 * ───────────────────────────────────────────── */
.mod-tabs__panel-inner > *:first-child {
	margin-top: 0;
}

.mod-tabs__panel-inner > *:last-child {
	margin-bottom: 0;
}

/* ─────────────────────────────────────────────
 * ACTIVE BUTTON — color
 * Scoped CSS sets border-color:currentColor.
 * The active color override uses a CSS custom
 * property so it can live in the static file.
 * ───────────────────────────────────────────── */
.mod-tabs__btn[aria-current="true"] {
	color: var(--tabs-active-color, inherit);
}

/* ═════════════════════════════════════════════
 * POSITION: TOP (mobile base)
 * ═════════════════════════════════════════════ */
.mod-tabs.tabs-pos-top {
	flex-direction: column;
	gap: var(--mod-tabs-panel-padding);
}

.mod-tabs.tabs-pos-top > .mod-tabs__nav {
	order: 0;
	flex-direction: row;
	flex-wrap: wrap;
	border-bottom: var(--mod-tabs-indicator-width) solid currentColor;
	border-right: none;
	border-left: none;
	border-top: none;
}

.mod-tabs.tabs-pos-top > .mod-tabs__nav .mod-tabs__btn {
	border-bottom: var(--mod-tabs-indicator-width) solid transparent;
	border-right: none;
	border-left: none;
	border-top: none;
	margin-bottom: calc(var(--mod-tabs-indicator-width) * -1);
	margin-right: 0;
	margin-left: 0;
}

.mod-tabs.tabs-pos-top > .mod-tabs__panels {
	order: 1;
	width: 100%;
	flex: unset;
	padding: 0;
}

/* ═════════════════════════════════════════════
 * POSITION: BOTTOM (mobile base)
 * ═════════════════════════════════════════════ */
.mod-tabs.tabs-pos-bottom {
	flex-direction: column;
	gap: var(--mod-tabs-panel-padding);
}

.mod-tabs.tabs-pos-bottom > .mod-tabs__nav {
	order: 1;
	flex-direction: row;
	flex-wrap: wrap;
	border-top: var(--mod-tabs-indicator-width) solid currentColor;
	border-right: none;
	border-left: none;
	border-bottom: none;
}

.mod-tabs.tabs-pos-bottom > .mod-tabs__nav .mod-tabs__btn {
	border-top: var(--mod-tabs-indicator-width) solid transparent;
	border-right: none;
	border-left: none;
	border-bottom: none;
	margin-top: calc(var(--mod-tabs-indicator-width) * -1);
	margin-right: 0;
	margin-left: 0;
}

.mod-tabs.tabs-pos-bottom > .mod-tabs__panels {
	order: 0;
	width: 100%;
	flex: unset;
	padding: 0;
}

/* ═════════════════════════════════════════════
 * POSITION: LEFT (mobile base)
 * ═════════════════════════════════════════════ */
.mod-tabs.tabs-pos-left {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--mod-tabs-panel-padding);
}

.mod-tabs.tabs-pos-left > .mod-tabs__nav {
	order: 0;
	flex-direction: column;
	flex: 0 0 var(--tabs-nav-w, var(--mod-tabs-nav-w));
	border-right: var(--mod-tabs-indicator-width) solid currentColor;
	border-bottom: none;
	border-left: none;
	border-top: none;
}

.mod-tabs.tabs-pos-left > .mod-tabs__nav .mod-tabs__btn {
	white-space: normal;
	border-right: var(--mod-tabs-indicator-width) solid transparent;
	border-bottom: none;
	border-left: none;
	border-top: none;
	margin-right: calc(var(--mod-tabs-indicator-width) * -1);
	margin-bottom: 0;
}

.mod-tabs.tabs-pos-left > .mod-tabs__panels {
	order: 1;
	flex: 1;
	min-width: 0;
	width: auto;
	padding: 0;
}

/* ═════════════════════════════════════════════
 * POSITION: RIGHT (mobile base)
 * ═════════════════════════════════════════════ */
.mod-tabs.tabs-pos-right {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--mod-tabs-panel-padding);
}

.mod-tabs.tabs-pos-right > .mod-tabs__nav {
	order: 1;
	flex-direction: column;
	flex: 0 0 var(--tabs-nav-w, var(--mod-tabs-nav-w));
	border-left: var(--mod-tabs-indicator-width) solid currentColor;
	border-bottom: none;
	border-right: none;
	border-top: none;
}

.mod-tabs.tabs-pos-right > .mod-tabs__nav .mod-tabs__btn {
	white-space: normal;
	border-left: var(--mod-tabs-indicator-width) solid transparent;
	border-bottom: none;
	border-right: none;
	border-top: none;
	margin-left: calc(var(--mod-tabs-indicator-width) * -1);
	margin-bottom: 0;
}

.mod-tabs.tabs-pos-right > .mod-tabs__panels {
	order: 0;
	flex: 1;
	min-width: 0;
	width: auto;
	padding: 0;
}

/* ═════════════════════════════════════════════
 * STACKED LABELS (opt-in: "Stack labels" in the module's Layout)
 * With the toggle on, the mobile top/bottom nav is one column — one label per row at
 * full width — instead of a bar that wraps into rows of text-sized labels. The PHP adds
 * .tabs-stack together with .tabs-desk-* and .bp-tabs-*, so from the breakpoint up the
 * desktop rules in bp-*.css (same specificity, loaded after this file) put the row back.
 * Off (the default): the classic wrapping bar, exactly as before.
 * ═════════════════════════════════════════════ */
.mod-tabs.tabs-stack > .mod-tabs__nav {
	flex-direction: column;
}