/*
 * Pflanzenschützer — Ernesto Child Theme (Suva-style)
 * Suva.ch-inspired design system
 */


/* ============================================================
   GLOBAL RESETS var(--font-primary)
   ============================================================ */


.site-header {
	border-bottom: 1px solid var(--border-light, #eee);
}

/* ============================================================
   HEADER: Two-row layout (logo row 1 · nav row 2 full-width)
   Restores the 1.0.5 behaviour overridden by 1.2.1 critical.css
   ============================================================ */

.header-container {
	flex-wrap:      wrap;
	padding-bottom: 0;        /* row-2 nav provides its own spacing */
}

.site-branding {
	flex:      1 1 auto;
	order:     1;
	min-width: 0; /* allow shrinking below logo's natural width on narrow viewports */
}

.header-end {
	order: 1;
	flex:  0 0 auto;
}

/* Desktop: two aligned rows
   Row 1: logo (left) + cart (right, overlaid from the top bar)
   Row 2: nav (left) + accessibility toggle in .header-end (right) */
@media (min-width: 768px) {

	/* Cart bar: take it out of the flow and overlay it onto row 1 so its
	   top edge lines up with the logo (header-container padding-top = 1rem) */
	.site-header {
		position: relative;
	}
	.header-top-wrapper {
		position:       absolute;
		top:            0.75rem;  /* header padding-top 1rem − 4px cart-button offset */
		left:           0;
		right:          0;
		/* !important: parent's critical.css is inlined AFTER this sheet
		   and sets an opaque bg-surface that would cover the logo */
		background:     transparent !important;
		z-index:        1200;   /* above .header-main-wrapper (1100) */
		pointer-events: none;   /* full-width strip must not block the logo/nav */
	}
	.header-top-wrapper .container {
		padding-top:    0;
		padding-bottom: 0;
	}
	.header-utilities {
		pointer-events: auto;   /* the cart itself stays clickable */
	}

	/* Logo owns row 1 (cart is overlaid, not in flow) */
	.site-branding {
		flex: 1 1 100%;
	}

	/* Row 2: nav takes the remaining width, accessibility toggle right */
	.main-navigation {
		flex:    1 1 auto !important;
		order:   2        !important;
		padding: 0.5rem 0 !important;
		width:   auto     !important;
		height:  auto     !important;
	}
	.header-end {
		order:      2;
		align-self: center;   /* vertically centred on the nav row */
	}
}


/* Horizontal-scrollbar guard lives on body, NOT on #content:
   overflow-x on #content forces overflow-y to auto, which clips
   ink overflow (rotated hero panel corners + shadow) at #content's
   box. On body the clip edge is the viewport, where clipping is
   actually wanted. */
body {
	overflow-x: clip;
}


/* ============================================================
   SHARED: BUTTONS
   ============================================================ */

/* Filled secondary-colour pill */
.hp-btn {
	display:          inline-block;
	padding:          0.55rem 1.5rem;
	background:       var(--color-secondary);
	color:            var(--text-on-brand, #fff);
	border-radius:    2rem;
	font-size:        0.9rem;
	font-weight:      500;
	text-decoration:  none;
	transition:       background 0.2s ease, transform 0.15s ease;
	white-space:      nowrap;
}

.hp-btn:hover {
	background: var(--color-secondary-hover);
	color:      var(--text-on-brand, #fff);
	transform:  translateY(-1px);
}

/* Outline variant */
.hp-btn--outline {
	background:  transparent;
	color:       var(--color-secondary);
	border:      1.5px solid var(--color-secondary);
}

.hp-btn--outline:hover {
	background: var(--color-secondary);
	color:      var(--text-on-brand, #fff);
}


/* ============================================================
   1. HERO SLIDER OVERRIDES
   Transforms the parent-theme overlay layout into:
   image (top, fixed height) + white panel (below, overlaps image)
   ============================================================ */

.ernesto-hero-slider {
	/* Single source of truth for the hero type scale: the title is
	   always ≥1.5× the description, whatever the viewport. */
	--hero-desc-size: clamp(1.25rem, 2vw, 2rem);
	position:      relative !important;  /* own stacking context so the panel/title paint above every section below */
	z-index:       5         !important;
	/* Parent theme (hero-slider.css) sets this to --bg-surface — a
	   card/sidebar token, sensible when the image fills the whole box.
	   Our panel is width: fit-content and centered, so on desktop there's
	   real empty space flanking it where that surface-grey would show
	   through instead of just reading as the page background. */
	background-color: var(--bg-body) !important;
	/* overflow-x and overflow-y can't be split between clip/visible — the
	   spec forces the "visible" axis to "auto" (which still clips ink
	   overflow like box-shadow) when the other axis isn't visible too.
	   Slides now crossfade in place (no horizontal translate), so there's
	   nothing left to clip on either axis. */
	overflow:      visible !important;
	margin-bottom: 55px    !important;   /* 20px gap + clearance for the rotated panel's overhang */
}

/* ── 1a. Slide: switch from centered overlay to flex column ── */

.ernesto-hero-slider .slider-slide {
	flex-direction:  column   !important;
	align-items:     stretch  !important;
	justify-content: flex-start !important;
	height:          auto     !important;   /* size to image + panel, not the parent's clamp() */
	min-height:      auto     !important;   /* remove the 60vh floor */
	max-height:      none     !important;
}

/* ── 1b. Image: static in the flow, fixed height ─────────── */

.ernesto-hero-slider .slide-image {
	position:   relative !important;
	top:        auto     !important;
	left:       auto     !important;
	width:      100%     !important;
	height:     58vh;
	min-height: 360px;
	max-height: 580px;
	flex:       0 0 auto;
	z-index:    1;
}

/* No dark/light overlay needed — text lives in white panel */
.ernesto-hero-slider .slide-image::after,
.ernesto-hero-slider .slide-text-light .slide-image::after,
.ernesto-hero-slider .slide-text-dark  .slide-image::after {
	display: none !important;
}

/* ── 1c. White panel: full-width, overlaps image bottom ───── */

.ernesto-hero-slider .slide-content {
	position:  relative                                       !important;
	z-index:   3                                              !important;
	/* Shrink-to-fit: the description content drives width and height.
	   --title-w is measured per slide in front-page.js so the panel is
	   always a bit longer than the title; both bounds stay inside the
	   viewport minus container padding → guaranteed L/R gap on desktop. */
	width:     fit-content                                    !important;
	/* 100% (parent = full-width slide) not 100vw — vw includes the
	   scrollbar and would eat into the guaranteed side gap */
	min-width: min( calc(var(--title-w, 20rem) + 8rem),
	                calc(100% - 2 * var(--container-padding, 1rem)) ) !important;
	max-width: min( calc(var(--container-width, 1200px) + 6rem),
	                calc(100% - 2 * var(--container-padding, 1rem)) ) !important;
	margin:    -6.5rem auto 0                                 !important;
	/* Side padding must stay in sync with the title's left/right offsets
	   (section 1d) so description and title stay aligned */
	padding:   1.5rem calc(var(--container-padding, 1rem) + 3rem) 1.5rem !important;
	background: var(--bg-body);
	text-align: left;
	border: 2px solid var(--color-accent); /* just for testing */
	border-radius: 24px 0 24px 0; /* top-left + bottom-right rounded */
	transform: rotate(-3.14deg) skewX(-24deg);
	overflow: visible;
	/* Subtle shadow that tracks the same light source as the title;
	   var(--text-main) already flips from near-black to near-white
	   between light and dark mode, so it reads as a shadow in light
	   mode and a soft glow in dark mode without a separate rule. */
	box-shadow: var(--panel-shadow-x, 3px) var(--panel-shadow-y, 3px) 16px -4px
		color-mix(in srgb, var(--text-main) 30%, transparent);
}

/* No trailing gap: the last element's bottom margin (description 1.5rem,
   or the button) would otherwise add to the panel's bottom padding */
.ernesto-hero-slider .slide-content > :last-child {
	margin-bottom: 0 !important;
}

/* ── 1d. Title: large, sits above panel, mouse-driven primary-colour shadow ── */

.ernesto-hero-slider .slide-title,
.ernesto-hero-slider .slide-text-light .slide-title,
.ernesto-hero-slider .slide-text-dark  .slide-title {
	position:       absolute !important;
	top:            0        !important;
	left:           calc(var(--container-padding, 1rem) + 3rem);
	right:          calc(var(--container-padding, 1rem) + 3rem);
	transform:      translateY(-70%);
	color:          var(--bg-body) !important;
	text-shadow:    var(--shadow-x, 6px) var(--shadow-y, 6px) 0 var(--color-accent) !important;
	/* Always bigger than the description, regardless of clamps.
	   Desktop only past 767px — below that, the mobile override in
	   section 1h switches to a fixed clamp() and lets the title wrap. */
	font-size:      max( clamp(2.25rem, 5vw, 4rem),
	                     calc(var(--hero-desc-size) * 1.5) ) !important;
	/* Never break: one line on desktop, where the panel is fit-content
	   and sized to match via --title-w (front-page.js). Mobile switches
	   to white-space: normal in the responsive block below instead —
	   the panel there is already full-width, so wrapping is simpler and
	   more robust than shrinking the font to force one line. */
	white-space:    nowrap !important;
	line-height:    1.1;
	max-width:      820px;
	margin-bottom:  0 !important;
	letter-spacing: -0.02em;
}

/* Neutralise the media-query / color-scheme overrides in parent */
@media (prefers-color-scheme: light) {
	.ernesto-hero-slider .slide-title {
		color:       var(--bg-body) !important;
		text-shadow: var(--shadow-x, 6px) var(--shadow-y, 6px) 0 var(--color-accent) !important;
	}
}

html[style*="color-scheme"] .ernesto-hero-slider .slide-title {
	color:       var(--bg-body) !important;
	text-shadow: var(--shadow-x, 6px) var(--shadow-y, 6px) 0 var(--color-accent) !important;
}

/* ── 1e. Description: gray, no text-shadow ──────────────── */

.ernesto-hero-slider .slide-description,
.ernesto-hero-slider .slide-text-light .slide-description,
.ernesto-hero-slider .slide-text-dark  .slide-description {
	color:         var(--text-main) !important;
	text-shadow:   none             !important;
	font-size:     var(--hero-desc-size) !important;
	/* ch cap instead of % — a percentage of a fit-content parent is
	   circular; this lets the description dictate the panel width */
	max-width:     45ch;
	margin-left:   0     !important;
	margin-right:  0     !important;
	margin-bottom: 0.5rem !important;   /* share button row follows directly */
}

/* ── Share button: "weitersagen" + round icon, bottom-right ─────────
   In flow after the description so it rides the panel's bottom edge.
   The icon is images/smol_share.svg inlined with fill:currentColor,
   so `color` recolours it in light / dark / high-contrast modes.
   skewX(24deg) counters the panel's skewX(-24deg) → icon stays round. */

.hp-share-btn {
	display:     flex;
	align-items: center;
	gap:         0.6rem;
	width:       fit-content;
	margin:      0 -2.5rem 0 auto;      /* right-aligned, tucked toward the panel edge */
	padding:     0;
	border:      none;
	background:  none;
	appearance:  none;                  /* no UA button chrome/background */
	color:       var(--color-accent);
	font-family: inherit;
	font-size:   1.05rem;
	font-weight: 700;
	font-style:  italic;
	cursor:      pointer;
	transform:   skewX(24deg);          /* counter the panel skew */
	transition:  color 0.2s ease;
}

.hp-share-btn:hover,
.hp-share-btn:focus-visible {
	background: none;
	color:      var(--color-accent-hover, var(--color-accent));
}

.hp-share-btn__icon,
.hp-share-btn__icon svg {
	display: block;
	width:   2.5rem;
	height:  2.5rem;
}

/* Brief "copied" confirmation (clipboard fallback path) */
.hp-share-btn--copied {
	color: var(--color-success, #28A745);
}

@media (max-width: 480px) {
	.hp-share-btn {
		margin-right: 0;   /* panel padding is slim here — stay inside */
	}
}

@media (prefers-color-scheme: light) {
	.ernesto-hero-slider .slide-description {
		color:       var(--text-main) !important;
		text-shadow: none             !important;
	}
}

html[style*="color-scheme"] .ernesto-hero-slider .slide-description {
	color:       var(--text-main) !important;
	text-shadow: none             !important;
}

/* ── 1f. Arrows: vertically centred on the image portion ──── */

.ernesto-hero-slider .slider-arrow {
	/* midpoint of the image, accounting for the 4.5rem overlap offset */
	top: calc(58vh / 2 - 2.25rem);
}

/* ── 1g. Dots: hidden ────────────────────────────────────── */

.ernesto-hero-slider .slider-dots {
	display: none !important;
}

/* ── 1i. Fade transition: stack slides, crossfade on switch ─ */

/* Stack all slides in the same grid cell */
.ernesto-hero-slider .slider-container {
	display:          grid       !important;
	overflow:         visible    !important;   /* let the panel's shadow show; see note above */
	scroll-snap-type: none       !important;
	background:       none       !important;
}

.ernesto-hero-slider .slider-viewport {
	overflow: visible !important;   /* parent theme hides this; we need the shadow to show */
}

.ernesto-hero-slider .slider-slide {
	grid-area:     1 / 1         !important;
	align-self:    start         !important;   /* size to content so panel stays in track */
	flex:          unset         !important;
	width:         100%          !important;
	overflow:      visible       !important;   /* parent theme hides this; would clip the rotated panel */
	opacity:       0;
	pointer-events: none;
	transition:    opacity 0.65s ease !important;
	/* First slide stays visible until JS adds .fade-active */
}

.ernesto-hero-slider .slider-slide:first-child {
	opacity:        1;
	pointer-events: auto;
}

/* Once JS adds .fade-active, only .is-current drives visibility */
.ernesto-hero-slider.fade-active .slider-slide:first-child {
	opacity:        0;
	pointer-events: none;
}

.ernesto-hero-slider .slider-slide.is-current {
	opacity:        1             !important;
	pointer-events: auto         !important;
}

/* ── 1h. Button: match .hp-btn pill style ────────────────── */

.ernesto-hero-slider .slide-button,
.ernesto-hero-slider .slide-button.button {
	background:      var(--color-secondary)     !important;
	color:           var(--text-on-brand) !important;
	border:          none                       !important;
	border-radius:   2rem                       !important;
	padding:         0.55rem 1.5rem             !important;
	font-size:       0.9rem                     !important;
	font-weight:     500                        !important;
	box-shadow:      none                       !important;
	text-shadow:     none                       !important;
	text-decoration: none;
	transition:      background 0.2s ease, transform 0.15s ease;
}

.ernesto-hero-slider .slide-button:hover,
.ernesto-hero-slider .slide-button.button:hover {
	background:   var(--color-secondary-hover) !important;
	border-color: var(--color-secondary-hover) !important;
	color:        var(--text-on-brand, #fff)   !important;
	transform:    translateY(-1px);
}

/* ── 1h. Responsive ─────────────────────────────────────── */

/* 767px matches the parent's <source media="(max-width: 767px)"> that
   swaps in the 4:5 portrait mobile image — the box ratio must switch on
   the same breakpoint, otherwise the portrait gets cropped to a strip. */
@media (max-width: 767px) {
	.ernesto-hero-slider .slider-slide {
		min-height: auto !important;
	}
	.ernesto-hero-slider .slide-image {
		height:       auto  !important;  /* the ratio sizes the box, not vh */
		aspect-ratio: 4 / 5;             /* portrait, like the mobile image */
		min-height:   0;
		max-height:   76vh;              /* keep the panel within first view */
	}
	/* Panel goes back to full width on mobile — keeps the same skew as
	   desktop (brand's signature distort), so .slide-title below counters
	   it with the opposite skewX, same trick as .hp-share-btn already
	   uses to keep its icon round inside this same skewed panel. */
	.ernesto-hero-slider .slide-content {
		width:      100%    !important;
		min-width:  0       !important;
		max-width:  none    !important;
		margin-top: -2.5rem !important;
	}
	.ernesto-hero-slider .slide-description {
		max-width: none;
	}
	/* Mobile title: wraps to 2+ lines at a bigger fixed size instead of
	   the desktop one-line/JS-measured approach — panel is already
	   full-width here (above), so there's no fit-content box to match. */
	/* Matches the base rule's selector list (section 1d) — .slide-text-light/
	   -dark .slide-title there is (0,3,0), which would otherwise still beat
	   a plain ".slide-title" override here regardless of source order. */
	.ernesto-hero-slider .slide-title,
	.ernesto-hero-slider .slide-text-light .slide-title,
	.ernesto-hero-slider .slide-text-dark  .slide-title {
		left:          var(--container-padding, 1rem) !important;
		right:         var(--container-padding, 1rem) !important;
		white-space:   normal   !important;
		/* Titles like "SMOLBALL:SPIEL" have no space to break on —
		   without this, normal white-space still can't wrap them and
		   the line just overflows past the viewport edge again. */
		overflow-wrap: anywhere !important;
		font-size:     clamp(2rem, 10vw, 3.25rem) !important;
		line-height:   1.05;
		/* skewX(24deg) counters the panel's skewX(-24deg) — same trick as
		   .hp-share-btn — so the title's own glyphs render upright and its
		   tall multi-line box doesn't inherit the panel's shear (which
		   would otherwise add real extra horizontal reach proportional to
		   the title's height and risk overflow again). */
		transform:     translateY(-92%) skewX(24deg);
	}
}

@media (max-width: 480px) {
	.ernesto-hero-slider .slider-slide {
		aspect-ratio: unset !important; /* override parent's 4/5 — the image carries the ratio */
	}
	.ernesto-hero-slider .slide-content {
		margin-top: -1.5rem !important;
		padding:    1.5rem var(--container-padding, 1rem) 2rem !important;
	}
}


/* ============================================================
   1j. PAGE CONTENT — static content of the front page (post 29)
   ============================================================ */

.hp-page-content {
	margin-top:  -4rem;                    /* slide-content overlaps into this section */
	position:    relative;                 /* z-index stacking context */
	z-index:     1;                        /* below slide-content (z-index: 3) */
	padding:     calc(4rem + 20px) 0 4rem; /* 4rem overlap + 20px breathing room */
	background:  var(--bg-body);
}

/* ============================================================
   2. FEATURED ROWS — alternating image / text
   ============================================================ */

.hp-featured {
	padding:    4rem 0;
	background: var(--bg-alt, #f2f2f2);
}

.hp-featured__row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   4rem;
	align-items:           center;
	padding:               3.5rem 0;
}

.hp-featured__row:first-child {
	border-top:  none;
	padding-top: 0;
}

/* Flip: image on the right */
.hp-featured__row--flip .hp-featured__media { order: 2; }
.hp-featured__row--flip .hp-featured__body  { order: 1; }

.hp-featured__media img,
.hp-featured__img-placeholder {
	width:        100%;
	aspect-ratio: 4 / 3;
	object-fit:   cover;
	display:      block;
}

.hp-featured__img-placeholder {
	background: var(--bg-alt, #e9ecef);
}

.hp-featured__cat {
	display:        block;
	font-size:      0.78rem;
	font-weight:    500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--text-muted);
	margin-bottom:  0.6rem;
}

.hp-featured__title {
	margin:         0 0 1rem;
	letter-spacing: -0.01em;
}

.hp-featured__excerpt {
	font-size:   1rem;
	line-height: 1.65;
	color:       var(--text-main, #444);
	margin:      0 0 1.75rem;
}

.hp-featured__excerpt p {
	margin: 0;
}


/* ============================================================
   3. NEWS SLIDER
   ============================================================ */

.hp-slider {
	padding:    4rem 0;
}

.hp-slider__heading {
	color:          var(--color-primary);
	text-align:     center;
	margin:         0 0 2rem;
	letter-spacing: -0.01em;
}

.hp-slider__track-wrap {
	overflow: hidden;
}

.hp-slider__track {
	display:            flex;
	gap:                1.25rem;
	overflow-x:         auto;
	scroll-snap-type:   x mandatory;
	scroll-behavior:    smooth;
	scrollbar-width:    none;
	-ms-overflow-style: none;
	padding-bottom:     4px;
}

.hp-slider__track::-webkit-scrollbar {
	display: none;
}

.hp-slider__card {
	flex:              0 0 calc(25% - 1rem);
	scroll-snap-align: start;
	background:        var(--bg-alt);
	border:            1px solid var(--border-color);
	transition:        box-shadow 0.2s ease;
}

.hp-slider__card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

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

.hp-slider__card-img {
	aspect-ratio: 4 / 3;
	overflow:     hidden;
	flex-shrink:  0;
}

.hp-slider__card-img img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.4s ease;
}

.hp-slider__card:hover .hp-slider__card-img img {
	transform: scale(1.05);
}

.hp-slider__card-placeholder {
	width:      100%;
	height:     100%;
	background: var(--bg-alt, #e9ecef);
}

.hp-slider__card-body {
	display:        flex;
	flex-direction: column;
	flex:           1;
	padding:        0.9rem 1rem 1rem;
}

.hp-slider__card-cat {
	display:        block;
	font-size:      0.7rem;
	font-weight:    500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--text-muted);
	margin-bottom:  0.4rem;
}

.hp-slider__card-title {
	font-family: var(--font-heading);
	font-size:   var(--font-size-body, 1rem);
	font-weight: 700;
	line-height: 1.35;
	color:       var(--text-heading, #111);
	margin:      0 0 0.5rem;
}

.hp-slider__card-excerpt {
	font-size:   0.875em;  /* one step smaller than body font size */
	line-height: 1.5;
	color:       var(--text-muted);
	margin:      0 0 1rem;
	flex:        1;
}

.hp-slider__card-readmore {
	font-size:   0.82rem;
	font-weight: 500;
	color:       var(--color-secondary);
	margin-top:  auto;
}

.hp-slider__nav {
	display:         flex;
	justify-content: center;
	gap:             0.75rem;
	margin-top:      1.75rem;
}

.hp-slider__prev,
.hp-slider__next {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           2.6rem;
	height:          2.6rem;
	border-radius:   50%;
	border:          1.5px solid var(--color-secondary);
	background:      var(--bg-body);
	color:           var(--color-secondary);
	cursor:          pointer;
	transition:      background 0.2s ease, color 0.2s ease;
}

.hp-slider__prev:hover,
.hp-slider__next:hover {
	background: var(--color-secondary);
	color:      var(--text-on-brand, #fff);
}

.hp-slider__prev:disabled,
.hp-slider__next:disabled {
	opacity: 0.35;
	cursor:  not-allowed;
}


/* ============================================================
   4. WEITERE BEITRÄGE
   ============================================================ */

.hp-weitere {
	padding:    3.5rem 0 4rem;
	background-color: var(--bg-alt) !important;
}

.hp-weitere__heading {
	color:        var(--text-heading, #111);
	margin:       0 0 0.25rem;
}

.hp-weitere__grid {
	display:               grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:                   0 3rem;
	margin-top:            1rem;
}

.hp-weitere__link {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             1rem;
	padding:         0.7rem 0;
	border-bottom:   1px solid var(--border-light, #d8d8d8);
	color:           var(--color-secondary);
	text-decoration: none;
	font-size:       var(--font-size-body, 1rem);
	transition:      color 0.2s ease, padding-left 0.2s ease;
}

.hp-weitere__col .hp-weitere__link:first-child {
	border-top: 1px solid var(--border-light, #d8d8d8);
}

.hp-weitere__link:hover {
	color:        var(--color-primary);
	padding-left: 0.25rem;
}

.hp-weitere__arrow {
	flex-shrink: 0;
	font-size:   1rem;
}

.hp-weitere__footer {
	margin-top: 2.5rem;
	text-align: center;
}


/* ============================================================
   5. NEWSLETTER TEASER
   ============================================================ */

.hp-newsletter {
	padding:    3.5rem 0 4.5rem;
	background: var(--bg-alt, #f2f2f2);
}

.hp-newsletter__box {
	display:    flex;
	align-items: center;
	gap:         2rem;
	max-width:   680px;
	margin:      0 auto;
	background:  var(--bg-surface);
	padding:     2rem 2.5rem;
	box-shadow:  0 2px 12px rgba(0, 0, 0, 0.07);
}

.hp-newsletter__text {
	flex: 1;
}

.hp-newsletter__title {
	font-family: var(--font-heading);
	font-size:   1.1rem;
	font-weight: 700;
	color:       var(--text-heading, #111);
	margin:      0 0 0.6rem;
}

.hp-newsletter__desc {
	font-size:   0.95rem;
	line-height: 1.6;
	color:       var(--text-main);
	margin:      0 0 1.1rem;
}

.hp-newsletter__link {
	font-size:       0.9rem;
	font-weight:     600;
	color:           var(--color-secondary);
	text-decoration: none;
	border-bottom:   1.5px solid transparent;
	transition:      border-color 0.2s ease;
}

.hp-newsletter__link:hover {
	border-bottom-color: var(--color-secondary);
}

.hp-newsletter__img {
	flex:      0 0 200px;
	max-width: 200px;
	overflow:  hidden;
}

.hp-newsletter__img img {
	width:      100%;
	height:     160px;
	object-fit: cover;
	display:    block;
}


/* ============================================================
   6. RESPONSIVE
   ============================================================ */

/* ── Tablet (≤ 1100px) — 3 slider cards ─────────────────── */
@media (max-width: 1100px) {
	.hp-slider__card {
		flex-basis: calc(33.333% - 0.85rem);
	}
}

/* ── Small tablet (≤ 768px) ─────────────────────────────── */
@media (max-width: 768px) {

	/* Hero: smaller image, less overlap */
	.hp-hero__img {
		height:     45vh;
		min-height: 260px;
	}

	.hp-hero__panel {
		margin-top: -2.5rem;
		padding:    2rem 0 2.5rem;
	}

	/* Featured: stack vertically */
	.hp-featured__row {
		grid-template-columns: 1fr;
		gap:                   1.5rem;
		padding:               2.5rem 0;
	}

	.hp-featured__row--flip .hp-featured__media,
	.hp-featured__row--flip .hp-featured__body {
		order: unset;
	}

	/* Slider: show 1.5 cards */
	.hp-slider__card {
		flex-basis: calc(72% - 0.625rem);
	}

	/* Weitere Beiträge: single column */
	.hp-weitere__grid {
		grid-template-columns: 1fr;
	}

	/* Newsletter: stack */
	.hp-newsletter__box {
		flex-direction: column;
		padding:        1.5rem;
	}

	.hp-newsletter__img {
		flex:      0 0 auto;
		max-width: 100%;
		width:     100%;
	}

	.hp-newsletter__img img {
		height: 180px;
		width:  100%;
	}
}

/* ── Phone (≤ 480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
	.hp-hero__title {
		font-size: clamp(1.75rem, 8vw, 2.5rem);
	}

	.hp-slider__card {
		flex-basis: calc(85% - 0.5rem);
	}
}


/* ============================================================
   7. PARENT THEME OVERRIDES
   ============================================================ */

.custom-logo-link img,
.custom-logo-link:hover img,
.custom-logo-link:focus img {
	transform:  none !important;
	box-shadow: none !important;
	filter:     none !important;
	opacity:    1    !important;
	transition: none !important;
}

.slider-arrow-prev {
	left:  1.5rem !important;
	right: auto   !important;
}

.slider-arrow-next {
	right: 1.5rem !important;
	left:  auto   !important;
}


/* ══════════════════════════════════════════════════════════════
   HIGH CONTRAST — ernesto-pfs specific
   Colours/typography of the hero card are handled by
   shared-child-a11y.css (loads after this file). Here we remove the
   decorative tricks this child theme adds on top of the parent:
   rotation + skew, asymmetric radius, mouse-driven shadows, the
   absolutely-positioned one-line title, and the skewed share button.
   ══════════════════════════════════════════════════════════════ */

body.high-contrast .ernesto-hero-slider .slide-content {
	transform:     none !important;   /* no rotate/skew */
	border-radius: 6px  !important;   /* plain card corners */
	box-shadow:    none !important;   /* no mouse-driven shadow */
	width:         auto !important;
	min-width:     0    !important;   /* drop the --title-w formula */
}

/* Match .container's width exactly (beats shared-child-a11y's generic
   46ch/90% card cap, which loads after this file — extra .slider-slide
   ancestor class raises specificity above it) */
body.high-contrast .ernesto-hero-slider .slider-slide .slide-content {
	max-width:  var(--container-width, 1200px) !important;
	width:      100% !important;
	margin:     0 auto !important;
}

body.high-contrast .ernesto-hero-slider .slide-title,
body.high-contrast .ernesto-hero-slider .slide-text-light .slide-title,
body.high-contrast .ernesto-hero-slider .slide-text-dark  .slide-title {
	position:    static !important;   /* back into the card flow */
	transform:   none   !important;
	white-space: normal !important;   /* wrapping beats a shrunken font */
	font-size:   clamp(1rem, 1.6vw, 1.25rem) !important; /* card-title size, overrides JS inline scaling */
	max-width:   none   !important;
}

/* The parent theme's generic "body.high-contrast button:not(...):not(...)"
   rule (2 types + 3 classes) would otherwise paint every button —
   including this one — solid blue, and it turns out to load AFTER
   child.css in this theme's actual head order, so an equal-specificity
   tie would go to the parent. The extra .slider-slide ancestor class
   pushes us strictly higher (2 types + 4 classes), so we win outright
   regardless of load order. */
body.high-contrast .ernesto-hero-slider .slider-slide button.hp-share-btn {
	transform:        none    !important;   /* card isn't skewed → no counter-skew */
	font-style:       normal  !important;
	margin-right:     0       !important;
	background:       none    !important;   /* no blue button chrome */
	background-color: transparent !important;
	border:           none    !important;
	color:            #000066 !important;   /* navy on the cream HC card */
}

body.high-contrast .ernesto-hero-slider .slider-slide button.hp-share-btn:hover,
body.high-contrast .ernesto-hero-slider .slider-slide button.hp-share-btn:focus-visible {
	color: #0000cc !important;
}

body.high-contrast .ernesto-hero-slider .slide-button,
body.high-contrast .ernesto-hero-slider .slide-button.button {
	border-radius: 0 !important;   /* square buttons in HC, matching other themes */
}

body.high-contrast .ernesto-hero-slider .slider-arrow {
	border-radius: 0 !important;
}

@media (prefers-contrast: high) {
	.ernesto-hero-slider .slide-content {
		transform:     none !important;
		border-radius: 6px  !important;
		box-shadow:    none !important;
		max-width:     var(--container-width, 1200px) !important;
		width:         100% !important;
		margin:        0 auto !important;
	}
	.ernesto-hero-slider .slide-title {
		text-shadow: none   !important;
		white-space: normal !important;
	}
	.hp-share-btn {
		transform:   none   !important;
		font-style:  normal !important;
		background:  none   !important;
	}
	.ernesto-hero-slider .slide-button,
	.ernesto-hero-slider .slide-button.button {
		border-radius: 0 !important;
	}
	.ernesto-hero-slider .slider-arrow {
		border-radius: 0 !important;
	}
}

/* Windows High Contrast Mode: the icon (fill:currentColor) follows the
   system button colour automatically */
@media (forced-colors: active) {
	.hp-share-btn {
		color: ButtonText;
	}
}


/* ============================================================
   8. PORTFOLIO ARCHIVE GRID — card overrides
   ============================================================ */

/* Landscape image (16:9, matches ernesto-featured 1260×710) — portfolio
   archive only. WooCommerce product archives (woocommerce/archive-product.php)
   render cards with this same .portfolio-card__img class and must stay
   square instead — see section 9 below for the body.woocommerce override. */
.portfolio-card__img,
.portfolio-card__img-placeholder {
	aspect-ratio: 16 / 9 !important;
}

/* No table borders */
.portfolio-card__table,
.portfolio-card__table td,
.portfolio-card__table tr {
	border: none !important;
}

/* Date: smaller, muted — needs .portfolio-card__table to beat td specificity */
.portfolio-card__table .portfolio-card__date {
	font-size:   0.7rem;
	color:       var(--text-muted);
	padding-top: 0;
}


/* Allow em/strong in title link to render naturally */
.portfolio-card__title-link em     { font-style:  italic !important; }
.portfolio-card__title-link strong { font-weight: bold   !important; }


/* ============================================================
   9. FOOTER — align text items to baseline, not centre
   ============================================================ */

.site-info {
	align-items: baseline;
}


/* ============================================================
   9. ARCHIVE PAGE TITLE — match .hp-featured__title styling
   ============================================================ */

.page-title {
	letter-spacing: -0.01em;
	margin:         0 0 1rem;
	color:          var(--color-primary);
	font-weight:    700;
}


/* ============================================================
   9. SINGLE POST — portfolio-single__table: no borders
   Parent theme draws borders on table, tr, td in portfolio.css.
   ============================================================ */

.portfolio-single__table,
.portfolio-single__table td,
.portfolio-single__table tr,
.portfolio-single__extended {
	border: none !important;
}


/* ============================================================
   9. SINGLE POST FEATURED IMAGE — landscape (16:9, matches ernesto-featured)
   Parent theme forces 1/1 square in portfolio.css; override here.
   ============================================================ */

.portfolio-single__img,
.portfolio-single__img-placeholder {
	aspect-ratio: 16 / 9 !important; /* ernesto-featured is 1260×710 ≈ 16/9 */
}


/* ============================================================
   POLITIK ARCHIVE — first post hero + 3-column grid
   ============================================================ */

/* First-post featured row: no top padding needed (no hero slider above) */
.pk-featured-first {
	margin-top: 0;
	padding:    3rem 0 4rem;
}

.pk-featured-first .hp-featured__row {
	padding-top: 0;
}

/* 3-column card grid */
.pk-archive-grid-section {
	padding: 0 0 4rem;
}

.pk-archive-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   2rem;
}

.pk-archive-card {
	display:        flex;
	flex-direction: column;
	background:     var(--bg-alt);
	border:         1px solid var(--border-color);
	transition:     box-shadow 0.2s ease;
}

.pk-archive-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

.pk-archive-card__link {
	display:         flex;
	flex-direction:  column;
	height:          100%;
	text-decoration: none;
	color:           inherit;
}

.pk-archive-card__img-wrap {
	aspect-ratio: 4 / 3;
	overflow:     hidden;
	flex-shrink:  0;
}

.pk-archive-card__img-wrap img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.4s ease;
}

.pk-archive-card:hover .pk-archive-card__img-wrap img {
	transform: scale(1.05);
}

.pk-archive-card__placeholder {
	width:      100%;
	height:     100%;
	background: var(--bg-alt, #e9ecef);
}

.pk-archive-card__body {
	display:        flex;
	flex-direction: column;
	flex:           1;
	padding:        1rem 1.1rem 1.25rem;
}

.pk-archive-card__cat {
	display:        block;
	font-size:      0.72rem;
	font-weight:    500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--text-muted);
	margin-bottom:  0.4rem;
}

.pk-archive-card__title {
	font-size:   1rem;
	font-weight: 700;
	line-height: 1.35;
	color:       var(--text-heading, #111);
	margin:      0 0 0.5rem;
}

.pk-archive-card__excerpt {
	font-size:   0.875rem;
	line-height: 1.5;
	color:       var(--text-muted);
	margin:      0 0 1rem;
	flex:        1;
}

.pk-archive-card__more {
	font-size:   0.82rem;
	font-weight: 500;
	color:       var(--color-secondary);
	margin-top:  auto;
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
	.pk-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: 1 column */
@media (max-width: 600px) {
	.pk-archive-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   FULL-BLEED SECTIONS — "Smolball Full Width" block patterns
   Ernesto's alignfull only reaches the container edges; these
   rules break .smolball-full-bleed out to the full viewport.
   ============================================================ */

/* .alignfull compound needed to out-rank Ernesto's
   .page-layout-boxed .alignfull rule (specificity 0-2-0) */
.alignfull.smolball-full-bleed,
.smolball-full-bleed {
	width:        100vw;
	max-width:    100vw;
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* 100vw includes the scrollbar width — clip the sliver of
   horizontal overflow it would otherwise create */
body {
	overflow-x: clip;
}

/* Default band background (secondary tint) unless the editor
   picked an own background color in the block settings */
.wp-block-group.smolball-full-bleed:not(.has-background) {
	background-color: color-mix( in srgb, var(--color-secondary, #0066FF) 10%, transparent );
}

/* Inner content stays capped at the normal container width */
.smolball-full-bleed-inner {
	max-width: var(--container-width, 1200px);
	margin:    0 auto;
	padding:   var(--space-2xl, 3rem) var(--container-padding, 1.5rem);
}

/* ============================================================
   ANGLED COLOR BANDS — "Smolball Band" block patterns
   Full-width band at the hero panel's -3.14deg angle with an
   animated offset color stripe below ("drop shadow"). The wave
   animation mirrors the ernesto-ass logo gradient technique.

   Layer model: the band's own background is transparent; ::before
   (z -1) carries the band color, ::after (z -2) the stripe below
   it — the band's transform creates the stacking context that
   keeps both behind the content.
   ============================================================ */

.smolball-band {
	/* wider than the viewport so the rotated band still covers the
	   left/right edges without white corner gaps.
	   !important: beats parent's .page-layout-boxed .alignfull (0-2-0) */
	width:        104vw !important;
	max-width:    none  !important;
	margin-left:  calc(50% - 52vw) !important;
	margin-right: calc(50% - 52vw) !important;
	position:     relative;
	transform:    rotate(-3.14deg);       /* same angle as the hero panel */
	background:   transparent;
	color:        var(--band-text, var(--text-on-brand, #fff));
	margin-top:    4rem !important;
	margin-bottom: 5.5rem !important;     /* room for stripe + rotation overhang */
	--band-pad: 2.5rem;
}

/* Color pairings: background ↔ stripe. --band-shadow-text is the CTA
   button's label color — white everywhere except the secondary band,
   whose shadow is the warning yellow (too light for white text). */
.smolball-band--primary {
	--band-bg:          var(--color-primary, #0066FF);
	--band-shadow:      var(--color-accent, #FF3366);
	--band-shadow-text: var(--text-on-brand, #fff);
}

.smolball-band--accent {
	--band-bg:          var(--color-accent, #FF3366);
	--band-shadow:      var(--color-secondary, #64748B);
	--band-shadow-text: var(--text-on-brand, #fff);
}

.smolball-band--secondary {
	--band-bg:          var(--color-secondary, #64748B);
	--band-shadow:      var(--color-warning, #FFC107);
	--band-shadow-text: var(--text-main, #1A1A1B);
}

/* Band color */
.smolball-band::before {
	content:    '';
	position:   absolute;
	inset:      0;
	z-index:    -1;
	background: var(--band-bg);
}

/* Offset stripe below — rotated a touch further so it diverges from
   the band edge (thicker toward the right, like the design) */
.smolball-band::after {
	content:          '';
	position:         absolute;
	inset:            0 0 -1.4rem 0;
	z-index:          -2;
	transform:        rotate(0.9deg);
	transform-origin: 0 100%;
	background:       linear-gradient(
		90deg,
		var(--band-shadow)  0%,
		var(--band-shadow) 38%,
		color-mix( in srgb, var(--band-shadow) 55%, white ) 50%,
		var(--band-shadow) 62%,
		var(--band-shadow) 100%
	);
	background-size:  300% 100%;
	/* alternate: wave flows back and forth — no hard reset each cycle */
	animation:        smolball-band-wave 6s ease-in-out infinite alternate;
}

/* Same technique as the ernesto-ass logo: peak at 50% of a 300% -wide
   gradient sweeps across as background-position moves 90% → 10% */
@keyframes smolball-band-wave {
	from { background-position: 90% center; }
	to   { background-position: 10% center; }
}

/* Content inherits the band's text color — double class for 0-2-1
   specificity so contextual theme rules (.entry-content h2 …) lose */
.wp-block-group.smolball-band :is(h1, h2, h3, h4, h5, p, li) {
	color: inherit;
}

/* Inner content: container-capped, height defined by content */
.smolball-band__inner {
	max-width: var(--container-width, 1200px);
	margin:    0 auto;
	padding:   var(--band-pad) var(--container-padding, 1.5rem);
}

/* ── 2/3 text + 1/3 image variant ──────────────────────────── */

/* Self-sufficient flex layout — core loads wp-block-columns CSS
   per-page, so don't depend on it */
.smolball-band__columns {
	display:     flex;
	gap:         2rem;
	align-items: stretch;   /* image column matches the text height */
}

.smolball-band__columns > .wp-block-column {
	flex-grow: 1;
	min-width: 0;
}

@media (max-width: 781px) {
	.smolball-band__columns {
		flex-direction: column;
	}
	.smolball-band__columns > .wp-block-column {
		flex-basis: auto !important;   /* !important: beats inline flex-basis:66.66% */
	}
}

/* Image bleeds to the band's top/bottom edge (cancels inner padding) */
.smolball-band__media {
	margin-top:    calc(-1 * var(--band-pad));
	margin-bottom: calc(-1 * var(--band-pad));
}

.smolball-band__media figure {
	height: 100%;
	margin: 0;
}

.smolball-band__media img {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* Stacked columns on mobile: image goes full-bleed horizontally
   instead of vertically */
@media (max-width: 781px) {
	.smolball-band__media {
		margin-top:    0;
		margin-bottom: calc(-1 * var(--band-pad));
		margin-left:   calc(-1 * var(--container-padding, 1.5rem));
		margin-right:  calc(-1 * var(--container-padding, 1.5rem));
	}
}

/* ── CTA button — right-aligned, coloured like the band's own
   offset stripe (--band-shadow), so it always reads as the accent
   against the band's main --band-bg. ─────────────────────────── */

.smolball-band__cta {
	margin-top: 1.5rem;
}

/* .smolball-band ancestor + explicit "a" tag + !important: the button
   also carries the core "wp-element-button" class, so the theme's
   inline-<style> default rule actually matches via its
   ".wp-block-button .wp-block-button__link.wp-element-button" branch —
   3 classes, same as a first attempt at an override with 3 classes and
   no tag. The extra "a" type selector here makes ours (0,3,1) strictly
   higher than theirs (0,3,0), so we win regardless of source order. */
.smolball-band .smolball-band__cta a.wp-block-button__link {
	background:      var(--band-shadow)      !important;
	color:           var(--band-shadow-text, #fff) !important;
	border-radius:   2rem                    !important;
	padding:         0.55rem 1.5rem           !important;
	font-size:       0.9rem                  !important;
	font-weight:     500                     !important;
	text-decoration: none                    !important;
	transition:      background 0.2s ease, transform 0.15s ease;
}

.smolball-band .smolball-band__cta a.wp-block-button__link:hover {
	background: color-mix( in srgb, var(--band-shadow) 82%, black ) !important;
	color:      var(--band-shadow-text, #fff) !important;
	transform:  translateY(-1px);
}

/* ── Accessibility overrides ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.smolball-band::after {
		animation:  none;
		background: var(--band-shadow);
	}
}

/* High contrast: match the other HC buttons (solid blue, square) rather
   than the band's own accent colour, which is muted in HC anyway.
   Ancestor .smolball-band class + explicit "a" tag push this to (0,4,2),
   above the parent theme's generic "body.high-contrast button:not(...)
   :not(...)" rule (0,3,2) that would otherwise still win the tie. */
body.high-contrast .smolball-band .smolball-band__cta a.wp-block-button__link {
	background-color: #0000ff !important;
	color:             #ffffff !important;
	border:            2px solid #0000ff !important;
	border-radius:     0 !important;
}

body.high-contrast .smolball-band .smolball-band__cta a.wp-block-button__link:hover {
	background-color: #0000cc !important;
	border-color:      #0000cc !important;
}

/* High contrast: straight, full-container band — no angle, no overshoot,
   no animated stripe. Black on white with a clear border. */
body.high-contrast .smolball-band {
	transform:     none  !important;
	width:         100%  !important;
	max-width:     none  !important;
	margin-left:   0     !important;
	margin-right:  0     !important;
	margin-top:    2rem  !important;
	margin-bottom: 2rem  !important;
	border:        2px solid #000 !important;
	color:         #fff  !important;
}

body.high-contrast .smolball-band::before {
	background: #000 !important;
}

body.high-contrast .smolball-band::after {
	display: none !important;   /* offset stripe is decoration only */
}

/* Beats shared-child-a11y's generic heading/text colours (0-1-1):
   on the black band everything must be white. Excludes the CTA button
   (.smolball-band__cta) — that gets its own solid-blue HC treatment
   below and must not be forced white-on-white by this rule. */
body.high-contrast .smolball-band :is(h1, h2, h3, h4, h5, h6, p, li, a):not(.smolball-band__cta a) {
	color: #fff !important;
}

@media (prefers-contrast: high) {
	.smolball-band {
		transform:    none !important;
		width:        100% !important;
		max-width:    none !important;
		margin-left:  0    !important;
		margin-right: 0    !important;
	}
	.smolball-band::after {
		display: none !important;
	}
}

/* ============================================================
   ERNESTO BOXEN — accessible 6px borders
   Parent gives some boxes no border and only a 10% background
   tint, which is hard to see. Every box gets a solid 6px border
   in Okabe–Ito palette colours (distinguishable for the common
   forms of colour blindness); hue differences are backed up by
   luminance differences, and the heading colour repeats the cue.
   ============================================================ */

.ernesto-box-info      { border: 6px solid #0072B2 !important; }  /* blue          */
.ernesto-box-success   { border: 6px solid #009E73 !important; }  /* bluish green  */
.ernesto-box-alert     { border: 6px solid #D55E00 !important; }  /* vermillion    */
.ernesto-box-downloads { border: 6px solid #CC79A7 !important; }  /* reddish purple */
.ernesto-box-note      { border: 6px solid var(--text-main, #1A1A1B) !important; }  /* neutral, adapts to dark mode */

/* ============================================================
   PORTFOLIO GRID — .hp-slider--grid modifier
   The former news slider now shows 6 portfolio items as a
   static 3-column / 2-row grid (no scrolling, no arrows).
   ============================================================ */

.hp-slider--grid .hp-slider__track {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   1.25rem;
	overflow:              visible;
	scroll-snap-type:      none;
	padding-bottom:        0;
}

.hp-slider--grid .hp-slider__card {
	flex: none;   /* grid item — the 25% flex-basis no longer applies */
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
	.hp-slider--grid .hp-slider__track {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: 1 column */
@media (max-width: 600px) {
	.hp-slider--grid .hp-slider__track {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   9. WOOCOMMERCE PRODUCT ARCHIVES — fixed 3-column grid, square images
   woocommerce/archive-product.php cards use the same .portfolio-card /
   .portfolio-card__img markup/classes as the Portfolio archive (see
   section 8), whose default there is 16:9 landscape — overridden back
   to square here, scoped to body.woocommerce so the Portfolio archive
   itself is untouched. Grid: parent theme's auto-fill default replaced
   with a steady 3/2/1 columns, matching the rest of the site's grids.
   ============================================================ */

.woocommerce ul.products {
	grid-template-columns: repeat(3, 1fr) !important;
}

body.woocommerce .portfolio-card__img,
body.woocommerce .portfolio-card__img-placeholder {
	aspect-ratio: 1 / 1 !important;
}

@media (max-width: 900px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr !important;
	}
}

/* Infinite scroll: mechanism + spinner/sentinel/pagination-hiding styles now
   live in the parent theme (assets/js/enhancements.js GridInfiniteScroll,
   assets/css/enhancements.css) — see [data-infinite-scroll] markup in
   woocommerce/archive-product.php. */