/*
 * Battle of Beer – ergänzende Styles
 * Farben/Schriften kommen aus theme.json (CSS-Variablen --wp--preset--…).
 * Jeder Abschnitt hier gehört zu einem Block-Stil, den man im Editor
 * rechts unter „Stile“ auswählen kann.
 */

:root {
	--bob-gelb: var(--wp--preset--color--accent-1, #FFCC00);
	--bob-gold: var(--wp--preset--color--accent-2, #FEC657);
	--bob-bernstein: var(--wp--preset--color--accent-3, #5A2A0E);
	--bob-schwarz: var(--wp--preset--color--base, #0B0C0F);
	--bob-flaeche: var(--wp--preset--color--accent-5, #14161B);
	--bob-linie: var(--wp--preset--color--accent-6, #2A2E36);
	--bob-silber: linear-gradient(90deg, #8E9299, #F2F3F5 50%, #8E9299);
	--bob-condensed: var(--wp--preset--font-family--barlow-condensed);
}

body { overflow-x: clip; }

/* ---------- Kopf & Fuß ---------- */
.bob-header {
	border-bottom: 1px solid var(--bob-linie);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}
.bob-header .wp-block-site-logo img { max-height: 48px; width: auto; }
.bob-header .wp-block-navigation a:hover { color: var(--bob-gelb); }
.wp-block-navigation .bob-nav-cta > a {
	background: var(--bob-gelb);
	color: var(--bob-schwarz) !important;
	padding: 0.25rem 0.9rem;
	border-radius: 4px;
}
.bob-footer {
	border-top: 1px solid var(--bob-linie);
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
}
.bob-footer .wp-block-image img { height: 36px; width: auto; }
.bob-footer a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.bob-footer a:hover { color: var(--bob-gelb); }

/* ---------- Gruppe: Hero mit Streifen ---------- */
.is-style-bob-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-top: clamp(90px, 11vw, 150px) !important;
	padding-bottom: clamp(110px, 13vw, 170px) !important;
	background:
		linear-gradient(var(--bob-gelb), var(--bob-gelb)) top left / 44% 22px no-repeat,
		var(--bob-silber) left 0 top 30px / 32% 8px no-repeat,
		linear-gradient(var(--bob-gelb), var(--bob-gelb)) bottom right / 40% 22px no-repeat,
		var(--bob-silber) right 0 bottom 30px / 28% 8px no-repeat,
		radial-gradient(ellipse 55% 50% at 50% 48%, var(--bob-bernstein) 0%, #22140B 45%, var(--bob-schwarz) 80%);
}
.is-style-bob-hero::before,
.is-style-bob-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}
.is-style-bob-hero::before {
	top: 0;
	right: 0;
	width: 44%;
	height: clamp(70px, 10vw, 150px);
	background: linear-gradient(to bottom left, var(--bob-gelb) 0 40%, #F2F3F5 40% 44%, #8E9299 44% 47%, transparent 47%);
}
.is-style-bob-hero::after {
	bottom: 0;
	left: 0;
	width: 46%;
	height: clamp(80px, 11vw, 160px);
	background: linear-gradient(to top right, var(--bob-gelb) 0 36%, #F2F3F5 36% 40%, #8E9299 40% 43%, transparent 43%);
}
.bob-hero-logo img {
	width: min(420px, 78vw);
	height: auto;
	filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}
.is-style-bob-hero.bob-hero-klein {
	padding-top: clamp(70px, 8vw, 110px) !important;
	padding-bottom: clamp(70px, 8vw, 100px) !important;
}

/* ---------- Gruppe: Bernstein-Glow ---------- */
.is-style-bob-glow {
	background: radial-gradient(ellipse 60% 70% at 50% 50%, #3E1D0A 0%, var(--bob-schwarz) 75%);
}

/* ---------- Gruppe: Dunkle Fläche ---------- */
.is-style-bob-flaeche {
	background-color: var(--bob-flaeche);
	border-top: 1px solid var(--bob-linie);
	border-bottom: 1px solid var(--bob-linie);
}

/* ---------- Gruppe: Gelbes Band ---------- */
.is-style-bob-band {
	background-color: var(--bob-gelb);
	color: var(--bob-schwarz);
}
.is-style-bob-band :where(h1, h2, h3, h4, p, a) { color: var(--bob-schwarz); }
.is-style-bob-band .is-style-bob-kicker { color: var(--bob-schwarz); }

/* ---------- Gruppe: Karte ---------- */
.is-style-bob-karte {
	background-color: var(--bob-flaeche);
	border: 1px solid var(--bob-linie);
	border-radius: 10px;
	padding: clamp(20px, 2.4vw, 32px);
}
.is-style-bob-karte.bob-ohne-abstand { padding: 0; overflow: hidden; }
.is-style-bob-karte.bob-ohne-abstand > :not(.wp-block-post-featured-image) {
	margin-left: clamp(20px, 2vw, 26px);
	margin-right: clamp(20px, 2vw, 26px);
}
.is-style-bob-karte.bob-ohne-abstand > :last-child { margin-bottom: clamp(20px, 2vw, 26px); }

/* ---------- Bild: Gelber Rahmen / Gelber Versatz ---------- */
.wp-block-image.is-style-bob-rahmen img {
	border: 3px solid var(--bob-gelb);
	border-radius: 8px;
}
.wp-block-image.is-style-bob-versatz {
	position: relative;
	isolation: isolate;
	margin-right: 18px;
	margin-bottom: 18px;
}
.wp-block-image.is-style-bob-versatz::before {
	content: "";
	position: absolute;
	inset: 18px -18px -18px 18px;
	background: var(--bob-gelb);
	border-radius: 8px;
	z-index: -1;
}
.wp-block-image.is-style-bob-versatz img { border-radius: 8px; }

/* ---------- Absatz: Überzeile & große Nummer ---------- */
.is-style-bob-kicker {
	font-family: var(--bob-condensed);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bob-gelb);
	margin-bottom: 0.5rem !important;
}
.is-style-bob-nummer {
	font-family: var(--wp--preset--font-family--lilita-one);
	font-size: clamp(2.25rem, 3vw, 2.75rem);
	line-height: 1;
	color: var(--bob-gelb);
}
.is-style-bob-band .is-style-bob-nummer { color: var(--bob-schwarz); font-size: clamp(3rem, 5vw, 4.25rem); }

/* ---------- Überschrift: Schmal & Versalien ---------- */
.is-style-bob-condensed {
	font-family: var(--bob-condensed) !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 1.5rem;
	line-height: 1.15;
}

/* ---------- Liste: Haken ---------- */
.is-style-bob-haken {
	list-style: none;
	padding-left: 0;
}
.is-style-bob-haken li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.6rem;
}
.is-style-bob-haken li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1.2rem;
	height: 1.2rem;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFCC00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}

/* ---------- Schlagworte als Chips (Legenden) ---------- */
.wp-block-post-terms.is-style-bob-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.wp-block-post-terms.is-style-bob-chips .wp-block-post-terms__separator { display: none; }
.wp-block-post-terms.is-style-bob-chips a {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--bob-linie);
	border-radius: 999px;
	background: var(--bob-schwarz);
	color: var(--wp--preset--color--white);
	font-size: 0.95rem;
	text-decoration: none;
}
.wp-block-post-terms.is-style-bob-chips a:hover { border-color: var(--bob-gelb); color: var(--bob-gelb); }
.wp-block-post-terms.is-style-bob-chips .wp-block-post-terms__prefix {
	width: 100%;
	font-family: var(--bob-condensed);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
	font-size: 0.95rem;
}

/* ---------- Runden-Karten & Chronik ---------- */
.bob-runden .wp-block-post-title a { color: var(--wp--preset--color--white); text-decoration: none; }
.bob-runden .wp-block-post-title a:hover { color: var(--bob-gelb); }
.bob-runden .wp-block-post-featured-image img { border-radius: 8px; }
.bob-runden .is-style-bob-karte.bob-ohne-abstand .wp-block-post-featured-image img { border-radius: 0; }
.bob-chronik .wp-block-post-template > li { border-left: 3px solid var(--bob-gelb); padding-left: clamp(16px, 2.5vw, 32px); }

/* ---------- Galerie ---------- */
.wp-block-gallery.bob-galerie img { border-radius: 6px; }

/* ---------- Ewige Tabelle (Shortcode aus dem Plugin) ---------- */
.bob-tabelle {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 1rem;
}
.bob-tabelle__eintrag {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 1.1rem 1.4rem;
	border-radius: 10px;
	background: #1A1D23;
	border: 1px solid #2E323B;
}
.bob-tabelle__platz {
	font-family: var(--wp--preset--font-family--lilita-one);
	font-size: 2.1rem;
	width: 2.75rem;
	color: #C9CCD1;
}
.bob-tabelle__name {
	flex: 1;
	font-family: var(--bob-condensed);
	font-weight: 700;
	font-size: 1.6rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}
.bob-tabelle__titel { text-align: right; line-height: 1.15; }
.bob-tabelle__titel strong {
	display: block;
	font-family: var(--wp--preset--font-family--lilita-one);
	font-weight: 400;
	font-size: 2.1rem;
	color: var(--bob-gelb);
}
.bob-tabelle__titel small { font-size: 0.8rem; font-weight: 600; color: var(--wp--preset--color--accent-4); }
.bob-tabelle__eintrag.is-top { background: var(--bob-gelb); border-color: var(--bob-gelb); }
.bob-tabelle__eintrag.is-top :is(.bob-tabelle__platz, .bob-tabelle__name, .bob-tabelle__titel strong, .bob-tabelle__titel small) { color: var(--bob-schwarz); }
.bob-tabelle__rest { margin-top: 1.25rem; color: #C9C4B5; }
.bob-tabelle__rest a { color: var(--wp--preset--color--white); }

/* ---------- Kleinkram ---------- */
.wp-block-post-featured-image.is-style-bob-rahmen img { border: 3px solid var(--bob-gelb); border-radius: 8px; }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
	border: 2px solid currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { color: var(--bob-gelb); background: transparent; }
.is-style-bob-kicker a { text-decoration: none; }
.is-style-bob-hero .wp-block-post-date { text-align: center; }
.bob-runden .wp-block-post-template.is-layout-grid > li > .is-style-bob-karte { height: 100%; box-sizing: border-box; }
.wp-block-post-terms.is-style-bob-chips.has-text-align-center { justify-content: center; }
@media (max-width: 781px) {
	.is-style-bob-band .wp-block-columns { flex-direction: row; flex-wrap: wrap !important; }
	.is-style-bob-band .wp-block-columns > .wp-block-column { flex-basis: calc(50% - 1rem) !important; }
}

/* ---------- Platzhalter für Runden ohne Titelbild ---------- */
.wp-block-post-featured-image.bob-platzhalter { margin: 0; }
.wp-block-post-featured-image.bob-platzhalter a {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	background: radial-gradient(ellipse at 50% 55%, var(--bob-bernstein) 0%, var(--bob-schwarz) 72%);
}
.wp-block-post-featured-image.bob-platzhalter img { width: 50%; height: auto; }
.bob-runden .is-style-bob-karte.bob-ohne-abstand .bob-platzhalter a { border-radius: 0; }