/**
 * Block Tabs — Frontend Styles
 *
 * Two-mode layout, one shared DOM (headers block first, then content
 * containers), no JS-driven DOM reordering:
 *
 *   - Horizontal tabs (default, above the chosen breakpoint): headers
 *     sit in a row, only the active content container is shown.
 *   - Vertical accordion (below the breakpoint, or when Breakpoint =
 *     None never happens): `.bt-headers-4d7c92a1` and
 *     `.bt-content-4d7c92a1` switch to `display:contents`, which
 *     "unwraps" them for layout purposes so their children behave as
 *     direct children of `.bt-tabs-4d7c92a1`. Each header and its
 *     matching content container then carries a `--bt-order-4d7c92a1`
 *     custom property (written inline by the PHP widget — headers get
 *     odd numbers, content containers get the following even number,
 *     so header-then-its-content always stays paired) and `order`
 *     picks that up to interleave header/content pairs vertically.
 *     This is the same technique Elementor's own Nested Tabs widget
 *     uses (visible in its PHP as `--n-tabs-title-order`).
 *
 * Accordion-mode spacing: because `.bt-headers-4d7c92a1` is
 * display:contents there, it has no box, so the row's own `gap` and
 * `padding` (the Header > Padding control) stop applying. Instead:
 *   - the row-gap is replaced by a bottom margin on each header equal to
 *     --bt-acc-space-4d7c92a1 (Gap Between Tabs, floored at 48px so the
 *     indicator line + notch always have room), with the indicator line
 *     centred in that space. Set Gap Between Tabs per breakpoint to tune.
 *     "Distance From Content" is a horizontal-tabs setting and is not
 *     used in accordion mode;
 *   - the Padding control additionally publishes its four values as
 *     --bt-hp-top/right/bottom/left-4d7c92a1 (custom properties inherit
 *     through display:contents), and they are re-applied as left/right
 *     margins on every header, top margin on the first header and
 *     bottom margin on the last one.
 *
 * Breakpoint values (767px / 1024px) mirror this site's live Elementor
 * Mobile/Tablet breakpoints at time of writing — see the widget class
 * docblock for what to do if those ever change in Site Settings.
 *
 * Custom property defaults: these are supplied as the second argument
 * to each var() below, NOT redeclared on `.bt-tabs-4d7c92a1` itself.
 * Elementor writes the per-instance control values (e.g.
 * --bt-image-width-4d7c92a1) onto the WIDGET WRAPPER
 * (.elementor-element-<id>), one level above `.bt-tabs-4d7c92a1`, for
 * inheritance to carry down. A custom property set directly on an
 * element always wins over an inherited value regardless of
 * specificity — so an earlier version of this file that redeclared
 * hardcoded defaults directly on `.bt-tabs-4d7c92a1` was silently
 * shadowing every per-instance override no matter what was set in the
 * panel (confirmed live: the generated CSS had the correct 170px/55px
 * override on the wrapper, but `.bt-tabs-4d7c92a1`'s own 140px/70px
 * defaults always won instead). var()'s fallback argument only applies
 * when the property is unset anywhere in the chain, so it doesn't
 * shadow an ancestor's value the way a redeclaration does. (The one
 * property declared directly below, --bt-acc-space-4d7c92a1, is not a
 * control value, so there is nothing for it to shadow.)
 */

.bt-tabs-4d7c92a1 {
	display: block;
}

.bt-headers-4d7c92a1 {
	display: flex;
	flex-wrap: nowrap;
	gap: var( --bt-tabs-gap-4d7c92a1, 8px );
}

.bt-header-4d7c92a1 {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	margin-top: calc( var( --bt-image-height-4d7c92a1, 70px ) / 2 );
	padding: 24px;
	min-height: var( --bt-header-min-height-4d7c92a1, 280px );
	border: 0;
	background: var( --bt-header-bg-4d7c92a1, #2c3e37 );
	color: var( --bt-header-color-4d7c92a1, #ffffff );
	font: inherit;
	text-align: left;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
}

.bt-header-4d7c92a1:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.bt-image-wrap-4d7c92a1 {
	position: absolute;
	top: calc( var( --bt-image-height-4d7c92a1, 70px ) / -2 );
	left: 24px;
	width: var( --bt-image-width-4d7c92a1, 140px );
	height: var( --bt-image-height-4d7c92a1, 70px );
	overflow: hidden;
}

/*
 * Specificity note: Elementor's own frontend.min.css ships
 * `.elementor img { height: auto; max-width: 100%; ... }` — one class
 * plus one element (0,1,1), which beats a bare `.bt-tab-image-4d7c92a1`
 * class selector (0,1,0) regardless of stylesheet load order, and was
 * silently overriding `height: 100%` here (breaking object-fit: cover).
 * Qualifying with the wrapper class raises this to two classes (0,2,0),
 * which outranks Elementor's rule.
 */
.bt-image-wrap-4d7c92a1 .bt-tab-image-4d7c92a1 {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.bt-tab-title-4d7c92a1 {
	display: block;
	color: inherit;
}

.bt-indicator-4d7c92a1 {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc( -1 * var( --bt-content-distance-4d7c92a1, 32px ) / 2 );
	height: 1px;
	background: var( --bt-indicator-color-4d7c92a1, #a68a64 );
	opacity: 0;
	pointer-events: none;
}

.bt-indicator-4d7c92a1::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX( -50% );
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid var( --bt-indicator-color-4d7c92a1, #a68a64 );
}

.bt-header-4d7c92a1[aria-selected="true"] .bt-indicator-4d7c92a1 {
	opacity: 1;
}

.bt-content-4d7c92a1 {
	margin-top: var( --bt-content-distance-4d7c92a1, 32px );
}

.bt-content-4d7c92a1 > .e-con {
	display: none;
}

.bt-content-4d7c92a1 > .e-con.bt-active-4d7c92a1 {
	display: block;
}

/* ==================== Accordion mode ==================== */

@media ( max-width: 767px ) {
	.bt-bp-4d7c92a1-mobile .bt-tabs-4d7c92a1 {
		--bt-acc-space-4d7c92a1: max( var( --bt-tabs-gap-4d7c92a1, 8px ), 48px );
		display: flex;
		flex-direction: column;
	}

	.bt-bp-4d7c92a1-mobile .bt-headers-4d7c92a1,
	.bt-bp-4d7c92a1-mobile .bt-content-4d7c92a1 {
		display: contents;
	}

	.bt-bp-4d7c92a1-mobile .bt-header-4d7c92a1 {
		order: var( --bt-order-4d7c92a1 );
		flex: 0 0 auto;
		width: auto;
		margin-top: calc( var( --bt-image-height-4d7c92a1, 70px ) / 2 );
		margin-right: var( --bt-hp-right-4d7c92a1, 16px );
		margin-bottom: var( --bt-acc-space-4d7c92a1 );
		margin-left: var( --bt-hp-left-4d7c92a1, 16px );
	}

	.bt-bp-4d7c92a1-mobile .bt-header-4d7c92a1:first-child {
		margin-top: calc( var( --bt-image-height-4d7c92a1, 70px ) / 2 + var( --bt-hp-top-4d7c92a1, 0px ) );
	}

	.bt-bp-4d7c92a1-mobile .bt-header-4d7c92a1:last-child {
		margin-bottom: calc( var( --bt-acc-space-4d7c92a1 ) + var( --bt-hp-bottom-4d7c92a1, 0px ) );
	}

	.bt-bp-4d7c92a1-mobile .bt-content-4d7c92a1 > .e-con {
		order: var( --bt-order-4d7c92a1 );
		width: 100%;
		margin-top: 0;
	}

	/* Line centred in the space under the header, clear of both the header and the next block's image */
	.bt-bp-4d7c92a1-mobile .bt-indicator-4d7c92a1 {
		opacity: 1;
		bottom: calc( -1 * var( --bt-acc-space-4d7c92a1 ) / 2 );
	}

	.bt-bp-4d7c92a1-mobile .bt-indicator-4d7c92a1::after {
		top: auto;
		bottom: 100%;
		border-top: none;
		border-bottom: 6px solid var( --bt-indicator-color-4d7c92a1, #a68a64 );
	}

	.bt-bp-4d7c92a1-mobile .bt-header-4d7c92a1[aria-selected="true"] .bt-indicator-4d7c92a1::after {
		top: 100%;
		bottom: auto;
		border-bottom: none;
		border-top: 6px solid var( --bt-indicator-color-4d7c92a1, #a68a64 );
	}
}

@media ( max-width: 1024px ) {
	.bt-bp-4d7c92a1-tablet .bt-tabs-4d7c92a1 {
		--bt-acc-space-4d7c92a1: max( var( --bt-tabs-gap-4d7c92a1, 8px ), 48px );
		display: flex;
		flex-direction: column;
	}

	.bt-bp-4d7c92a1-tablet .bt-headers-4d7c92a1,
	.bt-bp-4d7c92a1-tablet .bt-content-4d7c92a1 {
		display: contents;
	}

	.bt-bp-4d7c92a1-tablet .bt-header-4d7c92a1 {
		order: var( --bt-order-4d7c92a1 );
		flex: 0 0 auto;
		width: auto;
		margin-top: calc( var( --bt-image-height-4d7c92a1, 70px ) / 2 );
		margin-right: var( --bt-hp-right-4d7c92a1, 16px );
		margin-bottom: var( --bt-acc-space-4d7c92a1 );
		margin-left: var( --bt-hp-left-4d7c92a1, 16px );
	}

	.bt-bp-4d7c92a1-tablet .bt-header-4d7c92a1:first-child {
		margin-top: calc( var( --bt-image-height-4d7c92a1, 70px ) / 2 + var( --bt-hp-top-4d7c92a1, 0px ) );
	}

	.bt-bp-4d7c92a1-tablet .bt-header-4d7c92a1:last-child {
		margin-bottom: calc( var( --bt-acc-space-4d7c92a1 ) + var( --bt-hp-bottom-4d7c92a1, 0px ) );
	}

	.bt-bp-4d7c92a1-tablet .bt-content-4d7c92a1 > .e-con {
		order: var( --bt-order-4d7c92a1 );
		width: 100%;
		margin-top: 0;
	}

	.bt-bp-4d7c92a1-tablet .bt-indicator-4d7c92a1 {
		opacity: 1;
		bottom: calc( -1 * var( --bt-acc-space-4d7c92a1 ) / 2 );
	}

	.bt-bp-4d7c92a1-tablet .bt-indicator-4d7c92a1::after {
		top: auto;
		bottom: 100%;
		border-top: none;
		border-bottom: 6px solid var( --bt-indicator-color-4d7c92a1, #a68a64 );
	}

	.bt-bp-4d7c92a1-tablet .bt-header-4d7c92a1[aria-selected="true"] .bt-indicator-4d7c92a1::after {
		top: 100%;
		bottom: auto;
		border-bottom: none;
		border-top: 6px solid var( --bt-indicator-color-4d7c92a1, #a68a64 );
	}
}