/*
Theme Name: Burgdorf Handball Astra Child
Theme URI: https://handball.burgdorf.shop/
Description: Schlankes Astra-Child-Theme für die Handball-Subsite von Burgdorf.
Author: TSV Burgdorf Handball
Template: astra
Version: 0.1.43
Text Domain: burgdorf-handball
*/

:root {
	--burgdorf-green: #00843d;
	--burgdorf-green-dark: #005f2d;
	--burgdorf-ink: #141714;
	--burgdorf-muted: #647067;
	--burgdorf-surface: #ffffff;
	--burgdorf-canvas: #ffffff;
	--burgdorf-border: #dbe3dc;
}

body {
	background: var(--burgdorf-canvas);
	color: var(--burgdorf-ink);
}

a {
	color: var(--burgdorf-green-dark);
}

a:hover,
a:focus-visible {
	color: var(--burgdorf-green);
}

.ast-primary-header-bar {
	border-top: 5px solid var(--burgdorf-green);
	border-bottom: 1px solid var(--burgdorf-border);
	background: var(--burgdorf-surface);
}

.site-header,
.site-header .ast-primary-header-bar,
.site-header .main-header-bar,
.ast-sticky-active,
.ast-sticky-active .ast-primary-header-bar,
.ast-sticky-active .main-header-bar,
#ast-fixed-header,
#ast-fixed-header .main-header-bar {
	background-color: var(--burgdorf-surface) !important;
	background-image: none !important;
	opacity: 1;
	backdrop-filter: none;
}

.site-header .custom-logo-link img {
	width: auto;
	max-height: 76px;
}

.main-header-menu > .menu-item > .menu-link {
	font-size: 0.875rem;
	font-weight: 750;
	letter-spacing: 0.035em;
	text-transform: uppercase;
}

.main-header-menu .sub-menu {
	border-top: 3px solid var(--burgdorf-green);
}

.ast-button,
.button,
button,
input[type="button"],
input[type="submit"] {
	border-color: var(--burgdorf-green);
	background: var(--burgdorf-green);
	color: #ffffff;
}

.ast-button:hover,
.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
	border-color: var(--burgdorf-green-dark);
	background: var(--burgdorf-green-dark);
}

.site-content {
	min-height: 60vh;
}

.site-content .ast-container {
	width: min(100% - 2rem, 1280px);
	max-width: 1280px;
}

.single-vl_team .site-content .ast-container {
	display: block;
	padding-block: clamp(1.25rem, 3vw, 3rem);
}

.single-vl_team .entry-header {
	display: none;
}

.single-vl_team .site-main,
.single-vl_team .content-area,
.single-vl_team .ast-article-single {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.single-vl_team .ast-article-single {
	background: transparent;
}

.vl-native-team-page {
	--vl-primary-color: var(--burgdorf-green);
	--vl-success-color: var(--burgdorf-green);
	--vl-text-color: var(--burgdorf-ink);
	--vl-muted-color: var(--burgdorf-muted);
	--vl-surface-color: var(--burgdorf-surface);
	--vl-card-bg: var(--burgdorf-surface);
	--vl-border-color: var(--burgdorf-border);
	--vl-card-radius: 12px;
	--vl-button-radius: 999px;
	--vl-shadow: 0 10px 30px rgba(17, 41, 25, 0.08);
}

.site-footer {
	border-top: 4px solid var(--burgdorf-green);
}

@media (max-width: 921px) {
	.site-content .ast-container {
		width: min(100% - 1.25rem, 1280px);
	}

	.site-header .custom-logo-link img {
		max-height: 58px;
	}
}

/*
 * Local roster-stage iteration (2026-08-21).
 * Kept in the child theme until the visual treatment is approved for core.
 */
.vl-team-experience__spotlight-club-logo {
	display: none;
}

.vl-team-experience__spotlight-player-sponsor {
	display: none;
}

.vl-team-experience__spotlight-number-divider {
	display: none;
}

.vl-team-experience__spotlight-number-glyph-svg {
	display: none;
}

@media (min-width: 781px) {
	.vl-team-experience__people {
		--vl-team-people-section-padding: clamp(20px, 2vw, 32px);
		--vl-team-person-card-gap: clamp(8px, .8vw, 14px);
		--vl-team-people-tabs-height: 50px;
		--vl-team-people-tabs-gap: 12px;
		--vl-team-people-tabs-offset: calc(var(--vl-team-people-tabs-height) + var(--vl-team-people-tabs-gap));
		--vl-team-detail-left-padding: 5px;
		--vl-team-detail-right-padding: clamp(24px, 3vw, 48px);
		--vl-team-detail-birth-year-clearance: clamp(40px, 5svh, 58px);
		--vl-team-detail-name-bottom-base: max(16px, calc(var(--vl-team-transition-depth, 48px) + 12px - var(--vl-team-people-section-padding)));
		--vl-team-detail-name-bottom: calc(var(--vl-team-detail-name-bottom-base) + var(--vl-team-detail-birth-year-clearance));
		--vl-team-detail-number-name-gap: 5px;
		--vl-team-detail-divider-name-gap: 10px;
		--vl-team-detail-number-divider-width: 2px;
		--vl-team-detail-number-column-width: clamp(110px, 12vw, 240px);
		--vl-team-detail-logo-size: clamp(64px, 6vw, 96px);
		--vl-team-detail-logo-role-gap: clamp(8px, 1vw, 14px);
		--vl-team-detail-role-number-gap: clamp(18px, 1.4vw, 28px);
		padding-block: var(--vl-team-people-section-padding);
	}

	.vl-team-experience__people-tabs {
		position: relative;
		z-index: 3;
		height: var(--vl-team-people-tabs-height);
		box-sizing: border-box;
	}

	.vl-team-experience__people-tab {
		height: calc(var(--vl-team-people-tabs-height) - 2px);
		min-height: 0;
		padding-block: 0;
	}

	/* Match the lower card clearance to top padding + the complete tab row. */
	.vl-team-experience__people-panel .vl-team-experience__person-grid {
		align-content: start;
		justify-content: start;
		gap: var(--vl-team-person-card-gap);
		padding-bottom: var(--vl-team-people-tabs-offset);
	}

	/* Let only the detail artwork reach the bottom edge of the green band. */
	.vl-team-experience__people-panel,
	.vl-team-experience__spotlights,
	.vl-team-experience__spotlight {
		overflow: visible;
	}

	.vl-team-experience__spotlights {
		position: relative;
		z-index: 2;
	}

	/*
	 * Use the selected court-blueprint artwork as one undistorted background
	 * across the complete roster and staff container.
	 */
	.vl-team-experience__people-panel[data-vl-people-panel="roster"],
	.vl-team-experience__people-panel[data-vl-people-panel="staff"] {
		position: relative;
		isolation: isolate;
	}

	/* Reveal the shared blueprint instead of painting a second green detail box. */
	.vl-team-experience__people-panel[data-vl-people-panel="roster"] .vl-team-experience__spotlight,
	.vl-team-experience__people-panel[data-vl-people-panel="staff"] .vl-team-experience__spotlight {
		background: transparent;
	}

	.vl-team-experience__people-panel[data-vl-people-panel="roster"]::before,
	.vl-team-experience__people-panel[data-vl-people-panel="staff"]::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: calc(0px - var(--vl-team-people-tabs-offset) - var(--vl-team-people-section-padding));
		right: 0;
		bottom: calc(0px - var(--vl-team-people-section-padding));
		left: 0;
		background-image: url("assets/images/player-card-bg-arena-shattered-v2.png");
		background-position: right center;
		background-repeat: no-repeat;
		background-size: cover;
		pointer-events: none;
	}

	.vl-team-experience__people-panel[data-vl-people-panel="roster"] > .vl-team-experience__person-grid,
	.vl-team-experience__people-panel[data-vl-people-panel="staff"] > .vl-team-experience__person-grid {
		position: relative;
		z-index: 1;
	}

	.vl-team-experience__spotlight-background {
		z-index: 2;
		top: calc(0px - var(--vl-team-people-tabs-offset) - var(--vl-team-people-section-padding));
		right: 0;
		bottom: auto;
		width: auto;
		height: calc(100% + var(--vl-team-people-tabs-offset) + var(--vl-team-people-section-padding) + var(--vl-team-people-section-padding));
		max-width: none;
		max-height: none;
		object-fit: contain;
		object-position: right bottom;
	}

	/* Full-stage information layout: logo and role top-right, number beside the two-line bottom name. */
	.vl-team-experience__spotlight-copy {
		z-index: auto;
		padding: 0;
	}

	.vl-team-experience__spotlight-heading {
		position: absolute;
		z-index: auto;
		inset: 0;
		display: block;
		width: 100%;
		max-width: none;
		margin: 0;
		pointer-events: none;
	}

	.vl-team-experience__spotlight-heading h2 {
		position: absolute;
		z-index: 4;
		right: var(--vl-team-detail-right-padding);
		bottom: var(--vl-team-detail-name-bottom);
		left: calc(var(--vl-team-detail-left-padding) + var(--vl-team-detail-number-column-width) + var(--vl-team-detail-number-name-gap) + var(--vl-team-detail-number-divider-width) + var(--vl-team-detail-divider-name-gap));
		width: auto;
		max-width: none;
		font-size: clamp(2.5rem, 4.6vw, 5.9rem);
		line-height: .8;
	}

	/* Staff has no shirt number: give both name layers the complete detail width. */
	.vl-team-experience__spotlight-heading--without-number h2 {
		left: var(--vl-team-detail-left-padding);
	}

	.vl-team-experience__spotlight-name--solid {
		z-index: 1 !important;
		color: #fff !important;
		text-shadow: none;
		-webkit-text-stroke: 0 transparent;
	}

	.vl-team-experience__spotlight-name--outline-outer {
		z-index: 4 !important;
		color: #000 !important;
		text-shadow: none;
		-webkit-text-fill-color: #000;
		-webkit-text-stroke: 0 transparent;
		filter: url("#vl-team-text-outer-outline");
	}

	.vl-team-experience__spotlight-name--outline {
		z-index: 5 !important;
		color: transparent !important;
		text-shadow: none;
		-webkit-text-stroke: 2px #fff;
		paint-order: stroke fill;
	}

	.vl-team-experience__spotlight-heading .vl-team-experience__spotlight-first-name,
	.vl-team-experience__spotlight-heading .vl-team-experience__spotlight-last-name {
		display: block;
		width: max-content;
		max-width: none;
		overflow-wrap: normal;
		line-height: .8;
		white-space: nowrap;
	}

	.vl-team-experience__spotlight-number {
		position: absolute;
		top: auto;
		right: auto;
		bottom: var(--vl-team-detail-name-bottom);
		left: var(--vl-team-detail-left-padding);
		display: flex;
		align-items: center;
		justify-content: flex-start;
		box-sizing: border-box;
		width: var(--vl-team-detail-number-column-width);
		height: var(--vl-team-detail-name-height, 150px);
		padding: 0;
		font-size: clamp(7rem, 10vw, 12rem);
		line-height: .8;
		text-align: left;
		white-space: nowrap;
		overflow: visible;
	}

	.vl-team-experience__spotlight-number-text {
		display: block;
		width: auto;
		height: 100%;
		max-width: none;
		line-height: 0;
		white-space: nowrap;
		transform: none;
	}

	.vl-team-experience__spotlight-number-fallback {
		display: none;
	}

	.vl-team-experience__spotlight-number-glyph-svg {
		display: block;
		overflow: visible;
	}

	.vl-team-experience__spotlight-number-glyph {
		font-family: inherit;
		font-size: 100px;
		font-weight: inherit;
		letter-spacing: inherit;
	}

	.vl-team-experience__spotlight-number--solid .vl-team-experience__spotlight-number-glyph {
		fill: #fff;
		stroke: none;
	}

	.vl-team-experience__spotlight-number--outline-outer .vl-team-experience__spotlight-number-glyph {
		fill: #000;
		stroke: none;
	}

	.vl-team-experience__spotlight-number--outline .vl-team-experience__spotlight-number-glyph {
		fill: transparent;
		stroke: #fff;
		stroke-width: 2px;
		paint-order: stroke fill;
		vector-effect: non-scaling-stroke;
	}

	.vl-team-experience__spotlight-number--solid {
		z-index: 1;
		color: #fff;
		text-shadow: none;
		-webkit-text-stroke: 0 transparent;
	}

	.vl-team-experience__spotlight-number--outline-outer {
		z-index: 4;
		color: #000;
		text-shadow: none;
		-webkit-text-fill-color: #000;
		-webkit-text-stroke: 0 transparent;
		filter: url("#vl-team-text-outer-outline");
	}

	.vl-team-experience__spotlight-number--outline {
		z-index: 5;
		color: transparent;
		text-shadow: none;
		-webkit-text-stroke: 2px #fff;
		paint-order: stroke fill;
	}

	.vl-team-experience__spotlight-number-divider {
		position: absolute;
		z-index: 5;
		bottom: var(--vl-team-detail-name-bottom);
		left: calc(var(--vl-team-detail-left-padding) + var(--vl-team-detail-number-column-width) + var(--vl-team-detail-number-name-gap));
		display: block;
		width: var(--vl-team-detail-number-divider-width);
		height: var(--vl-team-detail-name-height, 150px);
		margin: 0;
		padding: 0;
		background: #fff;
		box-shadow: 0 0 0 2px #000;
		pointer-events: none;
	}

	.vl-team-experience__spotlight-birth-year {
		position: absolute;
		z-index: 6;
		right: var(--vl-team-detail-right-padding);
		bottom: 6px;
		left: auto;
		width: max-content;
		margin: 0;
		align-self: auto;
		-webkit-text-stroke: 1px #000;
		paint-order: stroke fill;
		text-align: right;
		text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
		pointer-events: none;
	}

	.vl-team-experience__spotlight-content {
		position: absolute;
		z-index: auto;
		top: calc(-1 * var(--vl-team-people-tabs-offset));
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		margin: 0;
		pointer-events: none;
	}

	.vl-team-experience__spotlight-club-logo {
		position: absolute;
		z-index: 1;
		top: calc(0px - var(--vl-team-people-tabs-offset));
		right: var(--vl-team-detail-right-padding);
		display: block;
		width: 25%;
		height: auto;
		aspect-ratio: 1 / 1;
		margin: 0;
		padding: 0;
		border: 0;
		box-shadow: none !important;
		filter: none !important;
		pointer-events: none;
	}

	.vl-team-experience__spotlight-player-sponsor {
		position: absolute;
		z-index: 1;
		top: calc(0px - var(--vl-team-people-tabs-offset) - var(--vl-team-people-section-padding));
		left: var(--vl-team-detail-left-padding);
		display: inline-flex;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
		width: fit-content;
		max-width: 25%;
		margin: 0;
		padding: calc(var(--vl-team-people-section-padding) + clamp(8px, .8vw, 12px)) clamp(8px, .8vw, 12px) clamp(8px, .8vw, 12px);
		border: 0;
		background: #fff;
		color: #000;
		text-align: center;
		pointer-events: none;
	}

	.vl-team-experience__spotlight-player-sponsor-eyebrow {
		display: block;
		width: 100%;
		margin: 0 0 clamp(5px, .6vw, 9px);
		font-size: clamp(.62rem, .8vw, .85rem);
		font-weight: 800;
		line-height: 1;
		letter-spacing: .04em;
		text-transform: uppercase;
		text-align: center;
		white-space: nowrap;
	}

	.vl-team-experience__spotlight-player-sponsor-logo,
	.vl-team-experience__spotlight-player-sponsor-logo img {
		display: flex;
		width: auto;
		max-width: 100%;
		margin: 0 auto;
		padding: 0;
		border: 0;
		box-shadow: none !important;
		filter: none !important;
	}

	.vl-team-experience__spotlight-player-sponsor-logo img {
		display: block;
		height: auto;
		object-fit: contain;
		object-position: center;
	}

	.vl-team-experience__spotlight-club-logo-image {
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		box-shadow: none !important;
		filter: none !important;
		object-fit: contain;
		object-position: center;
	}

	.vl-team-experience__spotlight--has-number .vl-team-experience__spotlight-role {
		position: absolute;
		z-index: 1;
		top: auto;
		right: auto;
		bottom: calc(var(--vl-team-detail-name-bottom) + var(--vl-team-detail-name-height, 150px) + var(--vl-team-detail-role-number-gap));
		left: var(--vl-team-detail-left-padding);
		box-sizing: border-box;
		width: var(--vl-team-detail-number-column-width);
		margin: 0;
		font-family: var(--vl-team-title-font-family, "Arial Narrow", "Roboto Condensed", Impact, sans-serif);
		font-size: clamp(1.15rem, 1.8vw, 1.8rem);
		font-weight: var(--vl-team-title-font-weight, 900);
		line-height: .78;
		letter-spacing: var(--vl-team-title-letter-spacing, 0);
		text-align: left;
		white-space: nowrap;
	}

	.vl-team-experience__spotlight-role--solid {
		z-index: 1 !important;
		color: #000 !important;
		text-shadow: none;
		-webkit-text-stroke: 0 transparent;
	}

	.vl-team-experience__spotlight-role--outline-outer {
		z-index: 4 !important;
		color: #fff !important;
		text-shadow: none;
		-webkit-text-fill-color: #fff;
		-webkit-text-stroke: 0 transparent;
		filter: url("#vl-team-role-outer-outline-white");
	}

	.vl-team-experience__spotlight-role--outline {
		z-index: 5 !important;
		color: transparent !important;
		text-shadow: none;
		-webkit-text-stroke: 2px #000;
		paint-order: stroke fill;
	}

	/* Staff details intentionally keep the reduced composition: portrait and name only. */
	.vl-team-experience__spotlight--without-number .vl-team-experience__spotlight-role {
		display: none;
	}

	.vl-team-experience__spotlight-facts,
	.vl-team-experience__spotlight-bio,
	.vl-team-experience__spotlight-contact {
		position: relative;
		z-index: 5;
		width: min(37%, 360px);
		margin-top: calc(var(--vl-team-people-tabs-offset) + clamp(70px, 9vh, 110px));
		margin-left: clamp(24px, 3vw, 48px);
		pointer-events: auto;
	}

	.vl-team-experience__spotlight-bio,
	.vl-team-experience__spotlight-contact {
		margin-top: 1.5rem;
	}
}

/*
 * Tablet roster stage: one swipeable DIN-card rail above the selected detail.
 * The desktop grid and the card-free mobile carousel keep their own layouts.
 */
@media (min-width: 781px) and (max-width: 1100px) {
	.vl-team-experience__people {
		--vl-team-tablet-card-height: clamp(132px, 18svh, 176px);
		--vl-team-tablet-card-width: clamp(93px, 12.73svh, 124px);
		--vl-team-tablet-card-rail-height: calc(var(--vl-team-tablet-card-height) + 4px);
		--vl-team-tablet-rail-gap: clamp(10px, 1.4svh, 16px);
		--vl-team-detail-number-column-width: clamp(96px, 18vw, 180px);
	}

	.vl-team-experience__people-panel {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: var(--vl-team-tablet-card-rail-height) minmax(0, 1fr);
		gap: var(--vl-team-tablet-rail-gap);
		height: 100%;
		min-height: 0;
		overflow: hidden;
	}

	.vl-team-experience__people-panel .vl-team-experience__person-grid {
		display: grid;
		grid-template-columns: none;
		grid-template-rows: var(--vl-team-tablet-card-height);
		grid-auto-flow: column;
		grid-auto-columns: var(--vl-team-tablet-card-width);
		grid-auto-rows: var(--vl-team-tablet-card-height);
		align-content: start;
		justify-content: start;
		column-gap: var(--vl-team-person-card-gap);
		row-gap: var(--vl-team-person-card-gap);
		box-sizing: border-box;
		width: 100%;
		height: var(--vl-team-tablet-card-rail-height);
		max-height: none;
		padding: 2px clamp(24px, 3vw, 48px);
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-behavior: smooth;
		scroll-padding-inline: clamp(24px, 3vw, 48px);
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		touch-action: pan-x pan-y;
		-webkit-overflow-scrolling: touch;
	}

	.vl-team-experience__people-panel .vl-team-experience__person-grid::-webkit-scrollbar {
		display: none;
	}

	.vl-team-experience__people-panel .vl-team-experience__person-card {
		width: var(--vl-team-tablet-card-width);
		height: var(--vl-team-tablet-card-height);
		max-width: none;
		max-height: none;
		min-height: 0;
		aspect-ratio: 1 / 1.41421356237;
		scroll-snap-align: center;
	}

	.vl-team-experience__spotlights {
		grid-column: 1;
		grid-row: 2;
		height: 100%;
		min-height: 0;
		overflow: hidden;
	}

	.vl-team-experience__spotlight {
		height: 100%;
		min-height: 0;
		overflow: hidden;
	}

	.vl-team-experience__spotlight-background {
		top: 0;
		right: 0;
		bottom: auto;
		width: auto;
		height: 100%;
		max-width: none;
		max-height: none;
		object-fit: contain;
		object-position: right bottom;
	}

	.vl-team-experience__spotlight-content {
		top: 0;
	}

	.vl-team-experience__spotlight-club-logo {
		top: 0;
	}

	.vl-team-experience__spotlight-player-sponsor {
		top: 0;
		padding-top: clamp(8px, .8vw, 12px);
	}
}

.vl-team-experience .vl-team-experience__spotlight-background {
	-webkit-mask-image: none;
	mask-image: none;
}

/* Keep Astra's blue focus treatment on the selected roster card after focus moves away. */
.vl-team-experience__person-card.is-active,
.vl-team-experience__person-card.is-active:hover,
.vl-team-experience__person-card.is-active:focus,
.vl-team-experience__person-card.is-active:focus-visible {
	background-color: var(--ast-global-color-1, #045cb4);
}

@media (max-width: 780px) {
	.vl-team-experience__spotlight-name--outline-outer,
	.vl-team-experience__spotlight-name--outline,
	.vl-team-experience__spotlight-number--outline-outer,
	.vl-team-experience__spotlight-number--outline,
	.vl-team-experience__spotlight-role--outline-outer,
	.vl-team-experience__spotlight-role--outline {
		display: none !important;
	}
}