/* =========================================================
   Weingut Heidegg – Inhalts-Komponenten
   Klassen, die in Templates, Patterns und DB-Inhalten stehen.
   Block-Styles (is-style-*) und Basis-Layout: global.css.
   ========================================================= */

/* ---------------------------------------------------------
   1. Hintergrund «Gläser» (Hauptbereich vieler Templates)
   Das frühere Hintergrundbild war per Customizer-CSS
   ausgeblendet (display:none) und entfällt deshalb ganz.
   --------------------------------------------------------- */
.bg-glaeser {
	position: relative;
	/* Stapelkontext: Die Kategorie-Akzentbalken (z-index: -1) liegen so über dem
	   Hintergrund von <main>. Overlays darin: siehe global.css, Abschnitt Header. */
	z-index: 0;
}

/* ---------------------------------------------------------
   2. Hero-Bereiche
   --------------------------------------------------------- */

/* Hero mit rundem Logo, das unten aus dem Bild ragt */
.hero-section-with-logo {
	position: relative;
}

.hero-section-with-logo .wp-block-cover {
	overflow-y: visible;
}

.logoWrapper {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
}

.logoWrapper .wp-block-site-logo {
	transform: translate(0, 50%);
}

.logoWrapper .wp-block-site-logo img {
	padding: var(--wp--preset--spacing--30);
	aspect-ratio: 1 / 1;
	background-color: var(--wp--preset--color--white);
	border-radius: 50% 50% 0 0;
}

@media (max-width: 767px) {
	.logoWrapper .wp-block-site-logo img {
		width: 172px;
	}
}

/* Mixed-Blend-Boxen (is-style-mixed-blend-*): global.css */

/* Textbox ragt auf Desktop 200px über die Nachbarspalte (Bild) */
.pull-right-desktop {
	box-sizing: border-box;
	max-width: 100%;
}

@media (max-width: 781px) {
	.pull-right-desktop {
		/* !important: schlägt das Inline-Padding (200px) aus dem Block */
		padding-right: var(--wp--preset--spacing--40) !important;
	}
}

@media (min-width: 782px) {
	.pull-right-desktop {
		position: relative;
		z-index: 10;
		width: calc(100% + 200px);
		max-width: none;
	}
}

/* Störer-Button (runder CTA mit zurückhaltendem Hover-Akzent) */
.btn-stoerer--wrapper {
	z-index: 1;
	aspect-ratio: 1 / 1;
}

.btn-stoerer--wrapper .btn-stoerer {
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
	transition: color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), transform var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
	.btn-stoerer--wrapper .btn-stoerer:hover {
		box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.22);
		transform: scale(1.025);
	}

	.btn-stoerer--wrapper .btn-stoerer:hover .title-job {
		color: var(--wp--preset--color--primary);
	}
}

@media (min-width: 1024px) {
	.btn-stoerer--wrapper {
		margin-left: auto;
		transform: translateX(50%);
	}
}

/* ---------------------------------------------------------
   3. Verlinkte Box
   Der Link im Titel wird auf die ganze Box ausgedehnt.
   --------------------------------------------------------- */
.heidegg-link-box {
	position: relative;
}

.heidegg-link-box:not(.btn-stoerer) {
	height: 100%;
	padding-bottom: var(--wp--preset--spacing--50);
}

.heidegg-link-box a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-base);
}

.heidegg-link-box a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.heidegg-link-box:not(.btn-stoerer)::after {
	content: "";
	position: absolute;
	bottom: var(--wp--preset--spacing--10);
	left: var(--wp--preset--spacing--20);
	width: 2em;
	height: 1em;
	font-size: var(--wp--preset--font-size--5-xl);
	background-color: currentcolor;
	-webkit-mask: var(--icon-arrow-right-long) center / contain no-repeat;
	mask: var(--icon-arrow-right-long) center / contain no-repeat;
	transition: transform var(--transition-base), color var(--transition-base);
}

.heidegg-link-box:not(.btn-stoerer):focus-within,
.heidegg-link-box:not(.btn-stoerer):focus-within a {
	color: var(--wp--preset--color--primary);
}

.heidegg-link-box.has-primary-background-color:focus-within,
.heidegg-link-box.has-primary-background-color:focus-within a {
	color: var(--wp--preset--color--white);
}

@media (hover: hover) and (pointer: fine) {
	.heidegg-link-box:not(.btn-stoerer):hover,
	.heidegg-link-box:not(.btn-stoerer):hover a {
		color: var(--wp--preset--color--primary);
	}

	.heidegg-link-box.has-primary-background-color:hover,
	.heidegg-link-box.has-primary-background-color:hover a {
		color: var(--wp--preset--color--white);
	}

	.heidegg-link-box:not(.btn-stoerer):hover::after {
		transform: translateX(6px);
	}
}

.heidegg-link-box a:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 4px;
}

@media (min-width: 1024px) {
	.min-h-200 {
		min-height: 200px;
	}
}

@media (max-width: 1023px) {
	.order-first { order: -1; }
}

/* ---------------------------------------------------------
   4. Telefon-Aufruf (cta-phone-*)
   --------------------------------------------------------- */
.cta-phone {
	position: relative;
	padding: 16px;
}

.cta-phone .wp-block-image {
	z-index: -1;
	transition: transform var(--transition-slow), opacity var(--transition-slow);
}

.cta-phone a {
	position: relative;
	z-index: 1;
	transition: color var(--transition-base);
}

.cta-phone::before {
	content: "";
	position: absolute;
	inset: 0 0 0 65px;
	z-index: 0;
	background-color: var(--wp--preset--color--white);
	border-radius: 40px;
	clip-path: circle(0% at 0% 50%);
	transition: clip-path var(--transition-slow);
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.cta-phone:hover .wp-block-image {
		opacity: 0;
		transform: translateX(100%);
	}

	.cta-phone:hover::before {
		clip-path: circle(150% at 0% 50%);
	}
}

/* ---------------------------------------------------------
   5. Karten in Abfrage-Schleifen: Team und News/Referenzen
   --------------------------------------------------------- */
.team-member-list .wp-block-post-featured-image,
.team-member-list .team-member-item,
.referenz-list .wp-block-post-featured-image,
.referenz-list .referenz-item {
	position: relative;
	overflow: hidden;
	border-radius: 0;
}

@media (max-width: 1024px) {
	.team-member-list.wp-block-post-template,
	.referenz-list.wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

.team-member-list .wp-block-post-featured-image::after,
.referenz-list .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.team-member-list .wp-block-post-featured-image::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 32.25%, rgba(0, 0, 0, 0.36) 100%);
}

.referenz-list .wp-block-post-featured-image::after {
	background: linear-gradient(0deg, rgb(29 29 27 / 40%) 0%, rgb(29 29 27 / 5%) 100%);
	transition: background var(--transition-slow);
}

.team-member-list .wp-block-post-featured-image img,
.referenz-list .wp-block-post-featured-image img {
	transition: transform var(--transition-slow);
}

@media (hover: hover) and (pointer: fine) {
	.referenz-list .wp-block-post-featured-image:hover::after {
		background: linear-gradient(0deg, rgb(29 29 27 / 40%) 0%, rgb(0 0 0 / 0%) 0%);
	}

	.team-member-list .team-member-item:hover .wp-block-post-featured-image img {
		transform: scale(1.025);
	}

	.referenz-list .referenz-item:hover .wp-block-post-featured-image img {
		cursor: pointer;
		transform: scale(1.03);
	}
}

.team-member-list .team-member-item .content-wrapper,
.referenz-list .referenz-item .content-wrapper {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	box-sizing: border-box;
}

/* Kontakt-Icons der Teammitglieder (Telefon / E-Mail) */
.team-contact-icon .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	min-height: 38px;
	padding: 0;
	background-color: var(--wp--preset--color--black);
	border: none;
	border-radius: 40px;
	transition: background-color var(--transition-base), transform var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
	.team-contact-icon .wp-block-button__link:hover {
		background-color: var(--wp--preset--color--primary);
		transform: scale(1.1);
	}
}

.team-contact-icon svg {
	width: 22px;
	height: 22px;
}

/* Icons ausblenden, wenn kein Wert hinterlegt ist */
.team-contact-icon:has(a[href="#"]),
.team-contact-icon:has(a[href=""]),
.team-contact-icon:has(a:not([href])) {
	display: none;
}

/* ---------------------------------------------------------
   6. Icon-Liste (Synced Pattern «Liste mit Icons»)
   --------------------------------------------------------- */
.wp-block-group.image-wrapper.aspect-square {
	flex-shrink: 0;
	width: 50px;
	min-width: 50px;
	height: 50px;
	min-height: 50px;
	aspect-ratio: 1;
}

.wp-block-group.image-wrapper.aspect-square .wp-block-image,
.wp-block-group.image-wrapper.aspect-square figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

.wp-block-group.image-wrapper.aspect-square img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 768px) {
	.wp-block-group.image-wrapper.aspect-square {
		transform: scale(0.7);
		transform-origin: top;
	}

	/* !important: schlägt die Inline-Abstände aus dem Block */
	.icon-list {
		flex-direction: column;
		gap: 0;
		margin-bottom: var(--wp--preset--spacing--40) !important;
		padding-bottom: var(--wp--preset--spacing--20) !important;
		border-bottom: 1px solid var(--wp--preset--color--white);
	}

	.icon-list:last-child {
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
		border-bottom: none;
	}
}

/* ---------------------------------------------------------
   7. Social-Media-Icons (Pattern social-share-list)
   --------------------------------------------------------- */
.social-share-list__item img {
	display: inline-block;
	transition: transform var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
	.social-share-list__item a:hover img {
		transform: scale(1.1);
	}
}

/* ---------------------------------------------------------
   8. Slider
   Reines CSS: horizontales Scrollen mit Scroll-Snap.
   Slides pro Ansicht: 1 / 2 (ab 768px) / 4 (ab 1280px) / 5 (ab 1920px).
   «heidegg-slider--single»: immer 1 Slide.
   --------------------------------------------------------- */
.wp-block-group.heidegg-slider {
	--heidegg-slides: 1;
	--heidegg-slider-gap: var(--wp--preset--spacing--20);
	display: flex;
	flex-wrap: nowrap;
	gap: var(--heidegg-slider-gap);
	overflow: auto hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Keine Scrollleiste: die Punkte darunter (theme.js) zeigen Position und Anzahl, wie im Original */
	scrollbar-width: none;
}

.wp-block-group.heidegg-slider::-webkit-scrollbar {
	display: none;
}

.wp-block-group.heidegg-slider > * {
	flex: 0 0 calc((100% - (var(--heidegg-slides) - 1) * var(--heidegg-slider-gap)) / var(--heidegg-slides));
	min-width: 0;
	max-width: none;
	margin-block: 0;
	scroll-snap-align: start;
}

.wp-block-group.heidegg-slider > * img {
	width: 100%;
}

@media (min-width: 768px) {
	.wp-block-group.heidegg-slider {
		--heidegg-slides: 2;
		--heidegg-slider-gap: var(--wp--preset--spacing--30);
	}
}

@media (min-width: 1280px) {
	.wp-block-group.heidegg-slider {
		--heidegg-slides: 4;
		--heidegg-slider-gap: var(--wp--preset--spacing--40);
	}
}

@media (min-width: 1920px) {
	.wp-block-group.heidegg-slider {
		--heidegg-slides: 5;
	}
}

/* Maus: ziehen (theme.js). Während des Ziehens kein Einrasten, sonst ruckelt es. */
@media (hover: hover) and (pointer: fine) {
	.wp-block-group.heidegg-slider.has-overflow {
		cursor: grab;
	}
}

.wp-block-group.heidegg-slider.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}

/* Punkte unter dem Slider (theme.js), Optik wie die früheren Swiper-Bullets:
   8 px, aktiv 10 px in Grün, inaktiv Schwarz mit 20 % Deckkraft.
   Die Klickfläche ist 24 px gross (WCAG 2.2, Zielgrösse), sichtbar bleibt der Punkt. */
.heidegg-slider-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-block: 16px 0;
}

.heidegg-slider-dots[hidden] {
	display: none;
}

.heidegg-slider-dot {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin: 0 -4px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.heidegg-slider-dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--black);
	opacity: 0.2;
	transition: opacity var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);
}

.heidegg-slider-dot:hover::before {
	opacity: 0.5;
}

.heidegg-slider-dot.is-active::before {
	background-color: var(--wp--preset--color--primary);
	opacity: 1;
	transform: scale(1.25);
}

.heidegg-slider-dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--black);
	outline-offset: -2px;
	border-radius: 50%;
}

.wp-block-group.heidegg-slider:focus-visible {
	outline: 2px solid var(--wp--preset--color--black);
	outline-offset: 4px;
}

.wp-block-group.heidegg-slider.heidegg-slider--single {
	--heidegg-slides: 1;
	--heidegg-slider-gap: 30px;
}

/* ---------------------------------------------------------
   9. Produktsuche: Trefferliste des Plugins
   «WooCommerce Product Search» (Dropdown im Header)
   --------------------------------------------------------- */
.product-search-results-content {
	background-color: var(--wp--preset--color--white);
	border: 0;
}

/* !important: das Plugin setzt den Abstand inline */
div.product-search-results {
	margin-top: var(--wp--preset--spacing--20) !important;
}

.search-results {
	width: 100%;
	border-collapse: collapse;
}

.search-results tbody {
	display: block;
}

.search-results .entry.product {
	border-bottom: 1px solid #e5e7eb;
	transition: background-color var(--transition-base);
}

.search-results .entry.product:last-child {
	border-bottom: none;
}

.search-results .entry.product:hover {
	background-color: #f3f4f6;
}

.search-results .product-image {
	flex-shrink: 0;
	margin-right: var(--wp--preset--spacing--20);
}

.search-results .product-image img {
	display: block;
	object-fit: cover;
}

/* !important bei den folgenden Regeln: Plugin-CSS mit hoher Spezifität / Inline-Stilen */
.search-results .product-info {
	flex: 1;
	min-width: 0;
	padding: 10px 5px !important;
}

.search-results .product-info a {
	display: flex;
	flex-direction: column;
	gap: 0;
	color: var(--wp--preset--color--black);
	text-decoration: none;
}

.search-results .product-info .title {
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: var(--wp--preset--font-size--md) !important;
	font-weight: 700;
	text-transform: uppercase;
	transition: color var(--transition-base);
}

.search-results .entry.product:hover .title {
	color: var(--wp--preset--color--primary);
}

.search-results .product-info .price {
	color: #4b5563;
	font-family: var(--wp--preset--font-family--interstate) !important;
	font-size: var(--wp--preset--font-size--sm) !important;
}

.product-search-results-content::-webkit-scrollbar {
	width: 8px;
}

.product-search-results-content::-webkit-scrollbar-track {
	background: #f3f4f6;
}

.product-search-results-content::-webkit-scrollbar-thumb {
	background: #9ca3af;
	border-radius: 4px;
}

.product-search-results-content::-webkit-scrollbar-thumb:hover {
	background: #6b7280;
}

/* ---------------------------------------------------------
   Kategorie-Filter über Abfrage-Loops (inc/content-defaults.php)
   --------------------------------------------------------- */
.wp-block-query-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}

/* Auch als erstes Kind eines Flow-Layouts (dort setzt Core margin-top: 0) */
body .wp-block-query-filters.wp-block-query-filters {
	margin-block: var(--wp--preset--spacing--40);
}

.wp-block-query-filters .filter-button {
	display: block;
	padding: var(--button-padding-vertical) var(--button-padding-horizontal);
	border: var(--button-border-width) solid var(--button-border-color);
	border-radius: var(--button-border-radius);
	background-color: var(--button-background-color);
	color: var(--button-color);
	font-family: var(--button-font-family);
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	line-height: var(--button-line-height);
	letter-spacing: var(--button-letter-spacing);
	text-transform: var(--button-text-transform);
	text-decoration: none;
	transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

.wp-block-query-filters .filter-button:hover,
.wp-block-query-filters .filter-button:focus-visible {
	border-color: var(--button-border-color-hover);
	background-color: var(--button-background-color-hover);
	color: var(--button-color-hover);
}

@media (max-width: 768px) {
	.wp-block-query-filters {
		justify-content: center;
	}
}

/* =========================================================
   TABELLEN MOBIL
   Bei festem Layout teilt WordPress die Breite gleichmässig auf und bricht
   Wörter mitten im Wort um (word-break: break-word). Mobil verteilen wir die
   Spalten nach Inhalt und brechen an Leerzeichen um; nur wenn ein Wort auf
   sehr schmalen Bildschirmen nicht passt, wird es mit Bindestrich getrennt.
   ========================================================= */

@media (max-width: 600px) {
	.wp-block-table table.has-fixed-layout {
		table-layout: auto;
	}

	.wp-block-table table td,
	.wp-block-table table th,
	.wp-block-table .has-fixed-layout td,
	.wp-block-table .has-fixed-layout th {
		word-break: normal;
		overflow-wrap: normal;
		hyphens: auto;
		padding-inline: calc(var(--wp--preset--spacing--10) / 2) !important;
	}

	.wp-block-table td:first-child,
	.wp-block-table th:first-child {
		padding-inline-start: 0 !important;
	}

	.wp-block-table td:last-child,
	.wp-block-table th:last-child {
		padding-inline-end: 0 !important;
	}
}