/* ==========================================================================
   HSV Jugend- und Multisport – zusätzliche Stile
   Farben und Schriften kommen aus theme.json (--wp--preset--…)
   ========================================================================== */

:root {
	--hsv-blue: var(--wp--preset--color--brand-blue);
	--hsv-orange: var(--wp--preset--color--brand-orange);
	--hsv-ink: var(--wp--preset--color--ink);
	--hsv-tint: var(--wp--preset--color--tint);
	--hsv-muted: var(--wp--preset--color--muted);
	--hsv-heading: var(--wp--preset--font-family--barlow-condensed);
	--hsv-shadow: 0 6px 24px rgba(10, 16, 82, 0.08);
}

/* ---------- Grundlayout -------------------------------------------------- */

.wp-site-blocks > * + *,
.hsv-main > * + * {
	margin-block-start: 0 !important;
}

.hsv-inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
	box-sizing: border-box;
}

.hsv-section {
	padding-block: 80px;
}

.hsv-eyebrow {
	margin: 0 0 6px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hsv-blue);
}

/* kurzer Orange-Balken unter Überschriften */
.hsv-bar {
	width: 56px;
	height: 5px;
	background: var(--hsv-orange);
	border-radius: 3px;
	margin-block: 18px 36px;
}

.hsv-section h2,
.hsv-page h1 {
	margin: 0;
}

/* ---------- Header ------------------------------------------------------- */

.hsv-header {
	background: #fff;
	border-bottom: 1px solid #e4e2f2;
}

.hsv-header-inner {
	padding-block: 14px;
	gap: 16px 32px;
}

.hsv-brand {
	gap: 14px;
}

.hsv-brand .wp-block-image,
.hsv-brand .wp-block-image img {
	margin: 0;
	display: block;
}

.hsv-brand .wp-block-image img {
	width: 58px;
	height: 58px;
}

.hsv-footer-logo,
.hsv-footer-logo img {
	margin: 0;
	display: block;
}

.hsv-footer-logo img {
	width: 64px;
	height: 64px;
}

.hsv-brand-text {
	gap: 0;
}

.hsv-brand-text > * {
	margin: 0 !important;
}

.hsv-brand-title,
.hsv-brand-title a {
	font-family: var(--hsv-heading);
	font-weight: 800;
	font-size: 1.625rem;
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hsv-ink);
	text-decoration: none;
}

.hsv-brand-sub {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hsv-muted);
	line-height: 1.2;
}

.hsv-nav {
	font-weight: 600;
	font-size: 1rem;
}

.hsv-nav a {
	text-decoration: none;
}

.hsv-header-cta {
	margin: 0;
}

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

.wp-block-button__link:hover {
	filter: brightness(0.94);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--hsv-blue);
	border: 2px solid var(--hsv-blue);
	padding-block: calc(0.9rem - 2px);
	padding-inline: calc(1.75rem - 2px);
}

.wp-block-button.is-style-outline.hsv-btn-light > .wp-block-button__link {
	color: #fff;
	border-color: #fff;
}

/* ---------- Hero --------------------------------------------------------- */

.hsv-hero {
	background: var(--wp--preset--gradient--hero);
	color: #fff;
}

.hsv-hero .hsv-inner {
	padding-block: 72px 40px;
}

.hsv-hero .hsv-eyebrow {
	color: var(--hsv-orange);
	margin-bottom: 18px;
	font-size: 0.875rem;
}

.hsv-hero h1 {
	color: #fff;
	margin: 0;
}

.hsv-hero .hsv-lead {
	font-size: 1.3125rem;
	line-height: 1.5;
	color: #e6e9ff;
	max-width: 560px;
	margin-block: 26px 36px;
}

.hsv-hero .wp-block-columns {
	gap: 48px;
	margin: 0;
}

.hsv-hero-logo {
	margin: 0;
	display: flex;
	justify-content: center;
}

.hsv-hero-logo img {
	width: 100%;
	max-width: 380px;
	height: auto;
	border-radius: 50%;
	box-shadow: 0 24px 60px rgba(0, 0, 40, 0.45);
}

/* ---------- Trenner (diagonal, mit Orange-Linie) -------------------------- */

.hsv-divider-down,
.hsv-divider-up {
	height: 72px;
	margin: 0;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.hsv-divider-down {
	margin-top: -1px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 1440,0 1440,16 0,52' fill='%230A1052'/%3E%3Cpolygon points='0,52 1440,16 1440,28 0,64' fill='%23FF6600'/%3E%3C/svg%3E");
}

.hsv-divider-up {
	margin-bottom: -1px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpolygon points='0,44 1440,8 1440,20 0,56' fill='%23FF6600'/%3E%3Cpolygon points='0,56 1440,20 1440,72 0,72' fill='%230A1052'/%3E%3C/svg%3E");
}

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

.hsv-cards {
	gap: 28px;
	margin: 0;
}

.hsv-cards > .wp-block-column {
	display: flex;
}

.hsv-card {
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border-radius: 14px;
	border-top: 6px solid var(--hsv-orange);
	padding: 32px 28px;
	box-shadow: var(--hsv-shadow);
}

.hsv-card h3 {
	margin: 0 0 8px;
}

.hsv-card p {
	margin: 0;
	color: var(--hsv-muted);
}

.hsv-card-feature {
	background: var(--wp--preset--gradient--band);
	color: #fff;
	padding: 40px 36px;
	margin-bottom: 28px;
	box-shadow: 0 10px 36px rgba(10, 16, 82, 0.18);
}

.hsv-card-feature h3 {
	color: #fff;
	font-size: clamp(2.25rem, 4vw, 2.75rem);
	font-weight: 800;
	line-height: 1;
	margin: 0 0 12px;
}

.hsv-card-feature p {
	color: #e6e9ff;
	font-size: 1.125rem;
	max-width: 620px;
}

.hsv-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--hsv-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 22px;
}

.hsv-icon svg {
	width: 30px;
	height: 30px;
	display: block;
}

.hsv-icon-orange {
	background: var(--hsv-orange);
}

/* ---------- Mitgliedschaft ----------------------------------------------- */

.hsv-membership {
	background: var(--hsv-tint);
}

.hsv-membership .wp-block-columns {
	gap: 48px;
	margin: 0;
	align-items: center;
}

.hsv-membership p {
	max-width: 520px;
}

.hsv-fees {
	padding: 32px;
}

.hsv-fees h3 {
	margin: 0 0 18px;
	text-transform: uppercase;
}

.hsv-fee-row {
	padding-block: 12px;
	border-bottom: 1px solid #e4e2f2;
	margin: 0;
	gap: 16px;
}

.hsv-fee-row p {
	margin: 0;
	color: var(--hsv-ink);
	max-width: none;
}

.hsv-fee-row p:last-child {
	font-weight: 700;
}

.hsv-fee-row-reduced p:last-child {
	color: var(--hsv-blue);
}

.hsv-payment {
	margin-top: 22px !important;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--hsv-muted);
	max-width: none;
}

/* ---------- Aktuelles (Beiträge) ----------------------------------------- */

.hsv-news-card {
	padding: 0;
	overflow: hidden;
}

.hsv-news-card .wp-block-post-featured-image {
	margin: 0;
	background: var(--wp--preset--gradient--band);
}

.hsv-news-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
}

.hsv-news-body {
	padding: 24px 26px 28px;
}

.hsv-news-body .wp-block-post-date {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--hsv-muted);
	margin: 0 0 6px;
}

.hsv-news-body .wp-block-post-title {
	font-size: 1.625rem;
	line-height: 1.1;
	margin: 0 0 8px;
}

.hsv-news-body .wp-block-post-excerpt {
	margin: 0;
	color: var(--hsv-muted);
}

/* ---------- Diagonales Band (Lauftraining) -------------------------------- */

.hsv-band {
	background: var(--wp--preset--gradient--band);
	color: #fff;
	clip-path: polygon(0 48px, 100% 0, 100% calc(100% - 48px), 0 100%);
}

.hsv-band .hsv-inner {
	padding-block: 128px;
}

.hsv-band .hsv-eyebrow {
	color: var(--hsv-orange);
}

.hsv-band h2 {
	color: #fff;
}

.hsv-band p {
	color: #e6e9ff;
	max-width: 520px;
	margin-bottom: 30px;
}

/* ---------- Footer ------------------------------------------------------- */

.hsv-footer {
	background: var(--hsv-ink);
	color: #e6e9ff;
	font-size: 0.9375rem;
}

.hsv-footer a {
	color: #e6e9ff;
}

.hsv-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.hsv-footer .hsv-inner {
	padding-block: 24px 40px;
}

.hsv-footer .wp-block-columns {
	gap: 40px;
	margin: 0;
}

.hsv-footer-brand {
	gap: 14px;
	margin: 0;
}

.hsv-footer-brand .wp-block-image {
	margin: 0;
}

.hsv-footer-name {
	font-family: var(--hsv-heading);
	font-weight: 800;
	font-size: 1.625rem;
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}

.hsv-footer-name span {
	display: block;
	font-size: 0.9375rem;
	letter-spacing: 0.14em;
	color: var(--hsv-orange);
}

.hsv-footer h4,
.hsv-footer-title {
	font-family: var(--hsv-heading);
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 10px;
}

.hsv-linklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hsv-linklist li {
	margin: 0 0 6px;
}

.hsv-social {
	gap: 12px;
}

.hsv-social .wp-social-link {
	background: var(--hsv-orange) !important;
	border-radius: 50%;
}

.hsv-social .wp-social-link a {
	padding: 0.7rem;
}

.hsv-social .wp-social-link svg {
	fill: var(--hsv-ink);
	color: var(--hsv-ink);
}

.hsv-copyright {
	border-top: 1px solid #26307f;
}

.hsv-copyright p {
	margin: 0;
	padding-block: 18px;
	font-size: 0.875rem;
	color: #b8beea;
}

/* ---------- Inhaltsseiten und Beiträge ----------------------------------- */

.hsv-page {
	padding-block: 56px 88px;
}

.hsv-page .wp-block-post-content > * + * {
	margin-top: 1.25rem;
}

.hsv-page .wp-block-post-content h2 {
	margin-top: 2.5rem;
	margin-bottom: 0.5rem;
}

.hsv-page .wp-block-post-content h3 {
	margin-top: 2rem;
}

.hsv-post-meta {
	color: var(--hsv-muted);
	font-size: 0.875rem;
	gap: 0.75rem;
}

/* ---------- Kleine Bildschirme ------------------------------------------- */

@media (max-width: 781px) {
	.hsv-section {
		padding-block: 56px;
	}

	.hsv-hero .hsv-inner {
		padding-block: 48px 24px;
	}

	.hsv-band .hsv-inner {
		padding-block: 96px;
	}

	.hsv-card-feature {
		padding: 32px 24px;
	}
}

/* ---------- Mobiles Menü (Overlay) --------------------------------------- */

/* Hamburger-Button: runder Orange-Button */
.hsv-nav .wp-block-navigation__responsive-container-open {
	width: 48px;
	height: 48px;
	padding: 0;
	align-items: center;
	justify-content: center;
	background: var(--hsv-orange);
	color: var(--hsv-ink);
	border-radius: 50%;
}

.hsv-nav .wp-block-navigation__responsive-container-open svg {
	width: 24px;
	height: 24px;
}

/* Geöffnetes Menü: Vereinsblau-Verlauf, Logo als Wasserzeichen */
.hsv-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--gradient--hero) !important;
	color: #fff !important;
	padding: 0 !important;
}

.hsv-nav .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	right: -90px;
	bottom: -90px;
	width: 340px;
	height: 340px;
	background: url("../images/logo.png") center / contain no-repeat;
	opacity: 0.12;
	pointer-events: none;
}

.hsv-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	min-height: 100vh;
	padding: 104px 28px 36px !important;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

/* Schließen-Button */
.hsv-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 18px;
	right: 18px;
	z-index: 3;
	width: 48px;
	height: 48px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	border-radius: 50%;
}

.hsv-nav .is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 24px;
	height: 24px;
}

/* Menüpunkte */
.hsv-nav .is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 0;
	width: 100%;
	padding: 0;
}

.hsv-nav .is-menu-open .wp-block-navigation__container::before {
	content: "";
	width: 56px;
	height: 5px;
	margin-bottom: 24px;
	background: var(--hsv-orange);
	border-radius: 3px;
}

.hsv-nav .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.hsv-nav .is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 18px 0;
	font-family: var(--hsv-heading);
	font-weight: 800;
	font-size: 2.375rem;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
}

.hsv-nav .is-menu-open .wp-block-navigation-item__content::after {
	content: "→";
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--hsv-orange);
}

.hsv-nav .is-menu-open .wp-block-navigation-item__content:hover,
.hsv-nav .is-menu-open .wp-block-navigation-item__content:focus-visible,
.hsv-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--hsv-orange);
}

/* Vereinsname am unteren Rand des Menüs */
.hsv-nav .is-menu-open .wp-block-navigation__responsive-container-content::after {
	content: "HSV Jugend & Multisport · Wiener Neustadt";
	margin-top: auto;
	padding-top: 48px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #b8beea;
}

/* sanftes Einblenden der Menüpunkte */
@keyframes hsv-nav-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hsv-nav .is-menu-open .wp-block-navigation-item {
		animation: hsv-nav-in 0.45s ease both;
	}

	.hsv-nav .is-menu-open .wp-block-navigation-item:nth-child(1) {
		animation-delay: 0.05s;
	}

	.hsv-nav .is-menu-open .wp-block-navigation-item:nth-child(2) {
		animation-delay: 0.12s;
	}

	.hsv-nav .is-menu-open .wp-block-navigation-item:nth-child(3) {
		animation-delay: 0.19s;
	}

	.hsv-nav .is-menu-open .wp-block-navigation-item:nth-child(4) {
		animation-delay: 0.26s;
	}
}

/* ---------- Sponsoren-Raster (Galerie-Block mit Klasse „hsv-sponsors") ----- */

.wp-block-gallery.hsv-sponsors {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px !important;
	margin: 0;
}

.wp-block-gallery.hsv-sponsors > .wp-block-image {
	width: auto !important;
	flex: none !important;
	margin: 0 !important;
	box-sizing: border-box;
	aspect-ratio: 3 / 2;
	padding: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #e4e2f2;
	border-radius: 12px;
}

.wp-block-gallery.hsv-sponsors > .wp-block-image a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.wp-block-gallery.hsv-sponsors > .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	aspect-ratio: auto !important;
}

.wp-block-gallery.hsv-sponsors figcaption {
	display: none;
}

@media (min-width: 782px) {
	.wp-block-gallery.hsv-sponsors {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px !important;
	}
}

/* Optional: zusätzliche Klasse „hsv-sponsors-mono" zeigt alle Logos einheitlich grau,
   farbig erst beim Darüberfahren. */
.wp-block-gallery.hsv-sponsors.hsv-sponsors-mono img {
	filter: grayscale(1);
	opacity: 0.8;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.wp-block-gallery.hsv-sponsors.hsv-sponsors-mono .wp-block-image:hover img {
	filter: none;
	opacity: 1;
}

/* ---------- Social-Kacheln (Facebook / Instagram) ------------------------- */

.hsv-news-section .hsv-bar {
	margin-bottom: 24px;
}

.hsv-news-section .hsv-intro {
	margin: 0 0 32px;
	max-width: 620px;
}

.hsv-social-cards {
	gap: 28px;
	margin: 0;
}

.hsv-social-cards > .wp-block-column {
	display: flex;
}

.hsv-social-card {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 40px 36px;
	border-radius: 14px;
	color: #fff;
	box-shadow: 0 10px 36px rgba(10, 16, 82, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hsv-social-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 44px rgba(10, 16, 82, 0.28);
}

.hsv-social-card:focus-within {
	outline: 3px solid var(--hsv-ink);
	outline-offset: 3px;
}

.hsv-social-card--facebook {
	background: var(--wp--preset--gradient--band);
	border-top: 6px solid var(--hsv-orange);
}

.hsv-social-card--instagram {
	background: var(--hsv-orange);
	border-top: 6px solid var(--hsv-ink);
	color: var(--hsv-ink);
}

.hsv-social-card h3 {
	margin: 0 0 12px;
	font-size: clamp(2.25rem, 4vw, 2.75rem);
	font-weight: 800;
	line-height: 1;
	color: #fff;
}

.hsv-social-card--instagram h3 {
	color: var(--hsv-ink);
}

.hsv-social-card p {
	margin: 0 0 24px;
	max-width: 460px;
	font-size: 1.125rem;
	color: #e6e9ff;
}

.hsv-social-card--instagram p {
	color: var(--hsv-ink);
}

.hsv-icon-ink {
	background: var(--hsv-ink);
}

/* ganze Kachel klickbar: der Link spannt sich über die Karte */
.hsv-social-card .wp-block-button,
.hsv-social-card .wp-block-button__link {
	position: static;
}

.hsv-social-card .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
}

.hsv-social-card--instagram .wp-block-button__link {
	background: var(--hsv-ink);
	color: #fff;
}