/*
 * Styles für die Mitgliederseite — Archive (Karten + Filter) und Single (Hero + Tabs).
 * Mobile-First. Setzt auf Iconic One auf und neutralisiert dessen Article-Standards
 * für die Karten/Single-Komponenten.
 */

:root {
	--bmvb-bg: #ffffff;
	--bmvb-fg: #0f172a;
	--bmvb-muted: #64748b;
	--bmvb-border: #e2e8f0;
	--bmvb-accent: #0e7490;
	--bmvb-accent-fg: #ffffff;
	--bmvb-card-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .06);
	--bmvb-card-shadow-hover: 0 4px 8px rgba(15, 23, 42, .08), 0 12px 24px rgba(15, 23, 42, .1);
	--bmvb-radius: 8px;
	--bmvb-space: 1rem;
}

/* -------------------- Iconic-One-Overrides -------------------- */

/* Iconic One setzt body { line-height: 1; } - innerhalb von BMVB-Bereichen normal lesbar. */
.bmvb-page #primary {
	line-height: 1.55;
}

/* Iconic Ones doppelte Trennlinie unter Articles deaktivieren */
.bmvb-page .site-content article,
.bmvb-page .site-content article.bmvb-card,
.bmvb-page .site-content article.bmvb-single {
	border: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Iconic Ones .wrapper-Border kann mit unserem Vollbreiten-Layout kollidieren */
.bmvb-page #main.wrapper {
	border: none;
}

/* Iconic One setzt global ul/ol auf list-style:none — in unseren Prose-Containern
 * (WYSIWYG-Output) wollen wir echte Aufzählungen mit Punkten/Nummern. */
.bmvb-verein-text ol,
.bmvb-formation-text ol,
.bmvb-formation-repertoire ol {
	list-style: decimal outside;
	padding-left: 1.5em;
	margin: 1em 0;
}

.bmvb-verein-text ul,
.bmvb-formation-text ul,
.bmvb-formation-repertoire ul {
	list-style: disc outside;
	padding-left: 1.5em;
	margin: 1em 0;
}

.bmvb-verein-text li,
.bmvb-formation-text li,
.bmvb-formation-repertoire li {
	margin: .25em 0;
	line-height: 1.55;
}

/* Bei full-width entfernt Iconic One die Sidebar, aber lässt margin: 0 14px stehen. Für
 * unser Karten-Grid ist das ok; wir setzen den eigenen Container darauf. */

/* -------------------- Container -------------------- */

.bmvb-container {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(0.5rem, 3vw, 1.5rem);
	box-sizing: border-box;
}

.bmvb-link {
	color: var(--bmvb-accent);
	text-decoration: underline;
}

/* -------------------- Archive Header & Filter -------------------- */

.bmvb-archive-header {
	padding-top: 0 !important;
}

.bmvb-archive-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	margin: 0 0 .5rem;
	letter-spacing: -.01em;
	line-height: 1.15;
}

.bmvb-archive-intro {
	color: var(--bmvb-muted);
	font-size: 1.0625rem;
	line-height: 1.55;
	margin: 0 0 1.5rem;
}

.bmvb-filter {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.bmvb-chip {
	display: inline-flex;
	align-items: center;
	padding: .4rem .9rem;
	border-radius: 999px;
	border: 1px solid var(--bmvb-border);
	background: #fff;
	color: var(--bmvb-fg);
	font-size: .9375rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.bmvb-chip:hover {
	border-color: var(--bmvb-accent);
	color: var(--bmvb-accent);
}

.bmvb-chip.is-active {
	background: var(--bmvb-fg);
	color: #fff;
	border-color: var(--bmvb-fg);
}

/* -------------------- Karten-Grid -------------------- */

.bmvb-archive-body {
	padding-block: 2rem 4rem;
}

.bmvb-grid {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.bmvb-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.bmvb-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bmvb-card {
	background: #fff;
	border: 1px solid var(--bmvb-border) !important;
	border-radius: var(--bmvb-radius);
	overflow: hidden;
	box-shadow: var(--bmvb-card-shadow);
	transition: transform .15s ease, box-shadow .15s ease;
	padding: 0 !important;
	margin: 0 !important;
}

.bmvb-card:hover,
.bmvb-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--bmvb-card-shadow-hover);
}

.bmvb-card-link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.bmvb-card-media {
	aspect-ratio: 3 / 2;
	background: #e2e8f0;
	overflow: hidden;
}

.bmvb-card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bmvb-card-image--placeholder {
	background: linear-gradient(135deg, #cbd5e1, #94a3b8);
}

.bmvb-card-body {
	padding: 1rem 1.1rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1;
}

.bmvb-card-title {
	font-size: 1.125rem;
	margin: 0;
	line-height: 1.3;
	color: var(--bmvb-fg);
}

.bmvb-card-claim {
	color: var(--bmvb-muted);
	font-size: .9375rem;
	margin: 0;
	line-height: 1.45;
}

/* -------------------- Badges -------------------- */

.bmvb-badges {
	list-style: none !important;
	padding: 0 !important;
	margin: .35rem 0 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.bmvb-badge {
	font-size: .75rem;
	letter-spacing: .02em;
	padding: .2rem .55rem;
	border-radius: 4px;
	background: #f1f5f9;
	color: #334155;
	border: 1px solid transparent;
	line-height: 1.3;
}

.bmvb-badge--blasorchester    { background: #dbeafe; color: #1e3a8a; }
.bmvb-badge--bigband          { background: #fde68a; color: #78350f; }
.bmvb-badge--spielleute       { background: #fecaca; color: #7f1d1d; }
.bmvb-badge--spielmannszug       { background: #e6d1d1; color: #000080; }
.bmvb-badge--konzertorchester { background: #c7d2fe; color: #312e81; }
.bmvb-badge--schalmeien       { background: #fcd34d; color: #78350f; }
.bmvb-badge--guggenmusik      { background: #fbcfe8; color: #831843; }
.bmvb-badge--alphorn          { background: #bbf7d0; color: #14532d; }
.bmvb-badge--fanfarenzug      { background: #e9d5ff; color: #581c87; }

/* -------------------- Empty State -------------------- */

.bmvb-empty {
	text-align: center;
	padding: 4rem 1rem;
	color: var(--bmvb-muted);
}

/* -------------------- Hero (Single) -------------------- */

.bmvb-single {
	padding-bottom: 6rem;
}

/* Wenn die Galerie der letzte Block in der Formation ist, etwas mehr Luft drunter. */
.bmvb-formation-section:last-child {
	margin-bottom: 2rem;
}

.bmvb-hero {
	position: relative;
	padding-top: 0;
	padding-bottom: clamp(1.25rem, 3vw, 2rem);
}

.bmvb-hero.has-image .bmvb-hero-media {
	position: relative;
	width: 100%;
	max-height: 560px;
	overflow: hidden;
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.bmvb-hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: 16 / 9;
}

.bmvb-back {
	display: inline-block;
	font-size: .9375rem;
	color: var(--bmvb-muted);
	text-decoration: none;
	margin-bottom: .75rem;
}

.bmvb-back:hover {
	color: var(--bmvb-accent);
}

.bmvb-hero-title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	margin: 0 0 .5rem;
	letter-spacing: -.01em;
	line-height: 1.15;
}

.bmvb-hero-claim {
	font-size: 1.125rem;
	color: var(--bmvb-muted);
	margin: 0 0 1.25rem;
}

.bmvb-hero-cta {
	margin: 0 0 1rem;
}

.bmvb-hero-meta {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	color: var(--bmvb-muted);
	font-size: .95rem;
}

/* -------------------- Buttons -------------------- */

.bmvb-button {
	display: inline-flex;
	align-items: center;
	padding: .55rem 1.1rem;
	border-radius: 6px;
	font-size: .9375rem;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.bmvb-button--primary {
	background: var(--bmvb-accent);
	color: var(--bmvb-accent-fg);
}

.bmvb-button--primary:hover {
	background: #0b5d75;
	color: var(--bmvb-accent-fg);
}

/* -------------------- Tabs / Panels -------------------- */

.bmvb-tabs {
	padding-block: 1.5rem;
}

.bmvb-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	border-bottom: 1px solid var(--bmvb-border);
}

.bmvb-tab {
	appearance: none;
	background: transparent;
	border: none;
	padding: .75rem 1.15rem;
	font-size: 1rem;
	font-family: inherit;
	color: var(--bmvb-muted);
	cursor: pointer;
	position: relative;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.bmvb-tab:hover {
	color: var(--bmvb-fg);
}

.bmvb-tab.is-active {
	color: var(--bmvb-fg);
	border-bottom-color: var(--bmvb-accent);
}

.bmvb-tab:focus-visible {
	outline: 2px solid var(--bmvb-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.bmvb-panel[hidden] {
	display: none;
}

.bmvb-panel {
	padding-block: 2rem 0;
}

.bmvb-panels--single .bmvb-panel,
.bmvb-panels--single .bmvb-formation {
	padding-top: 2rem;
}

.bmvb-divider {
	margin: 2.5rem 0;
	border: none;
	border-top: 1px solid var(--bmvb-border);
}

/* -------------------- Verein-Block -------------------- */

.bmvb-verein-text {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.bmvb-verein-text > * + * {
	margin-top: 1rem;
}

.bmvb-kontakt {
	margin-top: 2.5rem;
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--bmvb-border);
	border-radius: var(--bmvb-radius);
	background: #f8fafc;
}

.bmvb-kontakt-title {
	font-size: 1.125rem;
	margin: 0 0 .75rem;
}

.bmvb-kontakt-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 1.25rem;
	row-gap: .35rem;
	margin: 0;
}

.bmvb-kontakt-list dt {
	color: var(--bmvb-muted);
	font-size: .9rem;
}

.bmvb-kontakt-list dd {
	margin: 0;
}

/* -------------------- Formation-Block -------------------- */

.bmvb-formation-header {
	margin-bottom: 1.5rem;
}

/* Bei nur einer Formation steht der Vereinsname schon im Hero — den separaten
 * Formation-Header brauchen wir dann nicht. */
.bmvb-panels--single .bmvb-formation-header {
	display: none;
}

.bmvb-formation-title {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	margin: 0 0 .35rem;
	line-height: 1.2;
}

.bmvb-formation-claim {
	color: var(--bmvb-muted);
	font-size: 1.0625rem;
	margin: 0;
}

.bmvb-formation-image {
	margin-bottom: 1.5rem;
}

.bmvb-formation-hero {
	width: 100%;
	height: auto;
	border-radius: var(--bmvb-radius);
	display: block;
}

.bmvb-formation-meta {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	color: var(--bmvb-muted);
	font-size: .9375rem;
	margin-bottom: 1.25rem;
}

.bmvb-formation-meta-item strong {
	color: var(--bmvb-fg);
	margin-right: .25rem;
}

.bmvb-formation-text {
	font-size: 1.0625rem;
	line-height: 1.7;
	max-width: 100%;
}

.bmvb-formation-section {
	margin-top: 2rem;
}

.bmvb-formation-section h3 {
	font-size: 1.0625rem;
	margin: 0 0 .6rem;
}

.bmvb-tags {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.bmvb-tag {
	padding: .25rem .65rem;
	border-radius: 999px;
	background: #f1f5f9;
	color: #334155;
	font-size: .85rem;
}

.bmvb-proben-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 1.25rem;
	row-gap: .35rem;
	margin: 0 0 1rem;
}

.bmvb-proben-list dt {
	color: var(--bmvb-muted);
	font-size: .9rem;
}

.bmvb-proben-list dd {
	margin: 0;
}

.bmvb-recruit {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin: 0;
	color: var(--bmvb-muted);
}

.bmvb-recruit-badge {
	display: inline-flex;
	background: #dcfce7;
	color: #14532d;
	padding: .2rem .65rem;
	border-radius: 4px;
	font-size: .85rem;
	font-weight: 600;
}

/* -------------------- Galerie / Lightbox -------------------- */

.bmvb-galerie {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: .5rem;
}

.bmvb-galerie-item a {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 6px;
}

.bmvb-galerie-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .2s ease;
}

.bmvb-galerie-item a:hover .bmvb-galerie-thumb {
	transform: scale(1.04);
}

.bmvb-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, .92);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 1rem;
}

.bmvb-lightbox.is-open {
	display: flex;
}

.bmvb-lightbox-img {
	max-width: min(100%, 1280px);
	max-height: 90vh;
	border-radius: 6px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

.bmvb-lightbox-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: none;
	font-size: 1.75rem;
	line-height: 1;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	cursor: pointer;
}

.bmvb-lightbox-close:hover {
	background: rgba(255, 255, 255, .25);
}

/* -------------------- Medien-Embeds -------------------- */

.bmvb-medien {
	display: grid;
	gap: 1rem;
}

.bmvb-medien-item iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* -------------------- Mobile-Accordion-Variante -------------------- */

@media (max-width: 640px) {
	.bmvb-tabs--accordion-mobile .bmvb-tablist {
		display: none;
	}
	.bmvb-tabs--accordion-mobile .bmvb-panel {
		display: block !important;
		padding-block: 0;
		border-bottom: 1px solid var(--bmvb-border);
	}
	.bmvb-tabs--accordion-mobile .bmvb-panel[hidden] {
		display: block;
	}
}