/**
 * Section Color System
 *
 * Applies background/text colors to section style variations.
 * Color tokens are defined in variables.css (--section-*-bg, --section-*-text).
 * Section variations are registered in styles/sections/*.json.
 */

/* ============================================
   Section Background & Text Colors
   !important needed to override stale TT5
   utility classes (has-accent-*-background-color)
   that may remain in page content.
   ============================================ */

.wp-block-group.is-style-projekte-colors,
.wp-block-columns.is-style-projekte-colors,
.wp-block-column.is-style-projekte-colors,
.tgbw-post-card.is-style-projekte-colors {
	background-color: var(--section-projekte-bg) !important;
	color: var(--section-projekte-text) !important;
}

.wp-block-group.is-style-presse-colors,
.wp-block-columns.is-style-presse-colors,
.wp-block-column.is-style-presse-colors,
.tgbw-post-card.is-style-presse-colors {
	background-color: var(--section-presse-bg) !important;
	color: var(--section-presse-text) !important;
}

.wp-block-group.is-style-publikationen-colors,
.wp-block-columns.is-style-publikationen-colors,
.wp-block-column.is-style-publikationen-colors,
.tgbw-post-card.is-style-publikationen-colors {
	background-color: var(--section-publikationen-bg) !important;
	color: var(--section-publikationen-text) !important;
}

.wp-block-group.is-style-stellen-colors,
.wp-block-columns.is-style-stellen-colors,
.wp-block-column.is-style-stellen-colors,
.tgbw-post-card.is-style-stellen-colors {
	background-color: var(--section-stellen-bg) !important;
	color: var(--section-stellen-text) !important;
}

.wp-block-group.is-style-beitraege-colors,
.wp-block-columns.is-style-beitraege-colors,
.wp-block-column.is-style-beitraege-colors,
.tgbw-post-card.is-style-beitraege-colors {
	background-color: var(--section-beitraege-bg) !important;
	color: var(--section-beitraege-text) !important;
}

.wp-block-group.is-style-header-colors,
.wp-block-columns.is-style-header-colors,
.wp-block-column.is-style-header-colors,
.tgbw-post-card.is-style-header-colors {
	background-color: var(--section-header-bg) !important;
	color: var(--section-header-text) !important;
}

.wp-block-group.is-style-body-colors,
.wp-block-columns.is-style-body-colors,
.wp-block-column.is-style-body-colors,
.tgbw-post-card.is-style-body-colors {
	background-color: var(--section-body-bg) !important;
	color: var(--section-body-text) !important;
}

.wp-block-group.is-style-light-background,
.wp-block-columns.is-style-light-background,
.wp-block-column.is-style-light-background,
.tgbw-post-card.is-style-light-background {
	background-color: var(--section-light-bg) !important;
	color: var(--section-light-text) !important;
}

/* ============================================
   Bleed Width Utilities (opt-in)

   Added as "Additional CSS class(es)" on a group so they
   stack on top of any color style. They make the colored
   background grow OUTWARD past the 800px text column while
   keeping the inner text aligned with plain paragraphs, plus
   a little breathing room above/below. Do not also set manual
   padding on the group — the class supplies it.
   ============================================ */

/* Small bleed: the box is the 800px text column plus a small spill
   (one spacing step) on each side, left-aligned like plain text. The
   inner content area is exactly the 800px column, so the text lines up
   with the surrounding paragraphs while the colored background sticks
   out a little. */
.tgbw-bleed-inset {
	max-width: calc(
		var(--wp--style--global--content-size, 800px) +
			2 * var(--wp--preset--spacing--40)
	);
	margin-left: calc(-1 * var(--wp--preset--spacing--40));
	margin-right: auto;
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	box-sizing: border-box;
}

/* Full bleed: background spans the full viewport. Symmetric inline
   padding rebuilds the original content box inside the bleed (percent
   resolves against the post-content width, so no centering is assumed),
   then the inner blocks are capped to the 800px column and left-aligned
   to match plain text. */
.tgbw-bleed-full {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-block: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--40);
	padding-inline: max(
		var(--wp--preset--spacing--80),
		calc((100vw - 100%) / 2)
	);
	box-sizing: border-box;
}

.tgbw-bleed-full > * {
	max-width: var(--wp--style--global--content-size, 800px);
	margin-left: 0;
	margin-right: auto;
}

/* ============================================
   Color Inheritance (headings, links, dates)
   ============================================ */

[class*="is-style-"] h1,
[class*="is-style-"] h2,
[class*="is-style-"] h3,
[class*="is-style-"] h4,
[class*="is-style-"] h5,
[class*="is-style-"] h6,
[class*="is-style-"] .wp-block-post-title,
[class*="is-style-"] .wp-block-heading {
	color: inherit;
}

[class*="is-style-"] a,
[class*="is-style-"] a:visited {
	color: inherit;
}

[class*="is-style-"] .wp-block-post-title a,
[class*="is-style-"] .wp-block-post-title a:visited,
[class*="is-style-"] .wp-block-post-title a:hover,
[class*="is-style-"] .wp-block-post-title a:active {
	color: inherit;
}

[class*="is-style-"] .wp-block-post-date,
[class*="is-style-"] .wp-block-post-date time {
	color: inherit;
}

/* ============================================
   Projekte colored section (single-projekte)
   Per-post background/text colors are injected
   inline on .projekt-color-section; these rules
   make headings, links and tags follow the
   chosen text color.
   ============================================ */
.projekt-color-section h1,
.projekt-color-section h2,
.projekt-color-section h3,
.projekt-color-section h4,
.projekt-color-section h5,
.projekt-color-section h6,
.projekt-color-section .wp-block-heading,
.projekt-color-section a,
.projekt-color-section a:visited,
.projekt-color-section .wp-block-post-terms {
	color: inherit;
}

/* Extra breathing room at the bottom of the colored section. */
.projekt-color-section.tgbw-bleed-full {
	padding-bottom: var(--wp--preset--spacing--70);
}

/* ============================================
   Global Button Styles
   ============================================ */

.wp-block-button__link,
.wp-element-button,
a.wp-block-button__link {
	border: var(--button-border-width) solid currentColor !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	color: currentColor !important;
	padding: var(--button-padding-block) var(--button-padding-inline) !important;
	font-family: var(--font-family-base) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: var(--font-weight-bold) !important;
	text-decoration: none !important;
	transition: var(--button-transition) !important;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
a.wp-block-button__link:hover {
	background-color: var(--section-body-text) !important;
	border-color: var(--section-body-text) !important;
	color: var(--section-body-bg) !important;
	text-decoration: none !important;
}

.wp-block-button__link:focus,
.wp-element-button:focus,
a.wp-block-button__link:focus {
	outline: 2px solid var(--wp--preset--color--rot-4) !important;
	outline-offset: 2px !important;
}

/* ============================================
   Section-Specific Button Hover Colors

   The neutral page backgrounds (body-colors, light-background) are listed
   first so that a colored card nested inside them (e.g. an is-style-presse-colors
   card inside an is-style-body-colors section) wins the hover style — these
   selectors share specificity, so later source order takes precedence.
   ============================================ */

.is-style-body-colors .wp-block-button__link:hover,
.is-style-body-colors .wp-element-button:hover {
	color: var(--section-body-bg) !important;
	background-color: var(--section-body-text) !important;
	border-color: var(--section-body-text) !important;
}

.is-style-light-background .wp-block-button__link:hover,
.is-style-light-background .wp-element-button:hover {
	color: var(--section-light-bg) !important;
	background-color: var(--section-light-text) !important;
	border-color: var(--section-light-text) !important;
}

.is-style-projekte-colors .wp-block-button__link:hover,
.is-style-projekte-colors .wp-element-button:hover {
	color: var(--section-projekte-bg) !important;
	background-color: var(--section-projekte-text) !important;
	border-color: var(--section-projekte-text) !important;
}

.is-style-presse-colors .wp-block-button__link:hover,
.is-style-presse-colors .wp-element-button:hover {
	color: var(--section-presse-bg) !important;
	background-color: var(--section-presse-text) !important;
	border-color: var(--section-presse-text) !important;
}

.is-style-publikationen-colors .wp-block-button__link:hover,
.is-style-publikationen-colors .wp-element-button:hover {
	color: var(--section-publikationen-bg) !important;
	background-color: var(--section-publikationen-text) !important;
	border-color: var(--section-publikationen-text) !important;
}

.is-style-stellen-colors .wp-block-button__link:hover,
.is-style-stellen-colors .wp-element-button:hover {
	color: var(--section-stellen-bg) !important;
	background-color: var(--section-stellen-text) !important;
	border-color: var(--section-stellen-text) !important;
}

.is-style-beitraege-colors .wp-block-button__link:hover,
.is-style-beitraege-colors .wp-element-button:hover {
	color: var(--section-beitraege-bg) !important;
	background-color: var(--section-beitraege-text) !important;
	border-color: var(--section-beitraege-text) !important;
}

.is-style-header-colors .wp-block-button__link:hover,
.is-style-header-colors .wp-element-button:hover {
	color: var(--section-header-bg) !important;
	background-color: var(--section-header-text) !important;
	border-color: var(--section-header-text) !important;
}

/* ============================================
   Publikationen Card Layout
   ============================================ */

.publikationen-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.publikationen-card-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.publikationen-card-button {
	margin-top: auto;
	padding-top: 1rem;
}

.publikationen-card-image {
	aspect-ratio: 3/4;
	overflow: hidden;
	flex-shrink: 0;
	margin-top: var(--wp--preset--spacing--30);
}

.publikationen-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.is-style-publikationen-colors .publikation-content,
.featured-item-publikationen .publikation-content {
	color: inherit;
	background-color: transparent;
	padding: 0;
}

.is-style-publikationen-colors .publikation-content p,
.is-style-publikationen-colors .publikation-meta,
.featured-item-publikationen .publikation-content p,
.featured-item-publikationen .publikation-meta {
	color: inherit;
}

.is-style-publikationen-colors .publikation-meta {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: none !important;
}