/*
 * Section patterns — "Bild & Text" (contained, media left/right toggle) and
 * "Bild randabfallend links" (full-bleed media on the left).
 * Both built on core/media-text so the media position and background colour
 * stay editable from the block controls.
 */

/*
 * Any full-width group with a background colour inside page content is a
 * "section" — give it vertical breathing room by default. Both classes are
 * native (from the align + background-colour controls), not theme-specific,
 * and a block's own Spacing panel setting (inline style) still overrides
 * this. Scoped to .yogaacademie-content so it doesn't also catch the
 * navigation/footer template parts, which share the same class combination
 * without being a content "section".
 */
.yogaacademie-content .wp-block-group.alignfull.has-background {
	padding-block: clamp(2rem, 8vw, 3rem);
}

.yogaacademie-content .wp-block-group {
	margin-top: 1rem;
}

/*
 * A plain content group following a full-width section: the section boundary is
 * a stronger break than the 1rem above, so it takes the same 3rem the sections
 * keep between themselves. Two stacked sections stay flush on their own, via
 * the negative margin below.
 */
@media (max-width: 622px) {
	.yogaacademie-content .wp-block-group.alignfull.has-background + .wp-block-group:not(.alignfull) {
		margin-top: 3rem;
	}
}

/* Visible gap between two stacked full-width background sections, e.g.
   same-colour sand sections that would otherwise blend into one block. */
.yogaacademie-content .wp-block-group.alignfull.has-background + .wp-block-group.alignfull.has-background {
	    margin: -3rem auto 0 auto;
}

.yogaacademie-content .wp-block-group + h2 {
	margin-top: clamp(2rem, 6vw, 4rem);
}

/*
 * Below 781px core stacks `is-stacked-on-mobile`, so a media-text's image lands
 * directly under the coloured section above it — any gap there reads as a seam
 * between two blocks that should meet. Both margins go: adjacent siblings
 * collapse, so the larger of the two would otherwise survive.
 */
@media (max-width: 781px) {
	.yogaacademie-content .wp-block-group.alignfull.has-background:has(+ .wp-block-media-text) {
		margin-bottom: 0;
	}

	.yogaacademie-content .wp-block-group.alignfull.has-background + .wp-block-media-text {
		margin-top: 0;
	}
}

.yogaacademie-eyebrow,
.wp-block-paragraph.is-style-ya-eyebrow {
	margin-bottom: 0.75rem;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--color-charcoal) 65%, transparent);
}

/*
 * Contained media + text.
 * Without a background: a plain two-column band with a gap between image and text.
 * With a background: a card — background spans the full section, the image sits
 * flush to its outer edge, the text column carries the inner padding.
 */
.yogaacademie-section {
	align-items: center;
	gap: clamp(1.5rem, 5vw, 4rem);
}

.yogaacademie-section .wp-block-media-text__content {
	padding: 0;
}

.yogaacademie-section .yogaacademie-eyebrow {
	margin-top: 0;
}

.yogaacademie-section.has-background {
	gap: 0;
}

.yogaacademie-section.has-background .wp-block-media-text__content {
	padding: clamp(2rem, 6vw, 4.5rem);
}

/*
 * Stacked on mobile the image sits above the text instead of beside it, so the
 * desktop card inset only pushes the heading down — the page gutter is enough.
 * Has to live here: responsive.css sets the same 1rem gutter but loses on
 * specificity against the rule above.
 */
@media (max-width: 781px) {
	.yogaacademie-section.has-background .wp-block-media-text__content {
		padding: 1.5rem 1rem;
	}
}

/* Full-bleed variant: image runs to the left screen edge, text stays readable. */
.yogaacademie-section--bleed {
	align-items: center;
	gap: 0;
}

.yogaacademie-section--bleed .wp-block-media-text__content {
	padding-block: clamp(2.5rem, 7vw, 6rem);
	padding-inline: clamp(1.5rem, 5vw, 4rem);
	max-width: 44rem;
}

@media (max-width: 781px) {
	.yogaacademie-section--bleed .wp-block-media-text__content {
		padding-inline: clamp(1rem, 5vw, 2rem);
	}
}

/* Sand section: inner content column, capped narrower than the full-bleed background. */
.yogaacademie-section__inner {
	max-width: 900px;
	text-align: left;
}

/* Wider variant for content that needs more room than the standard reading column (e.g. card grids). */
.yogaacademie-section__inner--wide {
	max-width: 1300px;
}

/* On a sand background the AURUM Link's sand underline/arc lose contrast. */
.yogaacademie-section--sand .wp-block-button.is-style-ya-link .wp-block-button__link::before {
	background-color: var(--color-charcoal);
}

.yogaacademie-section--sand .wp-block-button.is-style-ya-link .wp-block-button__link::after {
	border-bottom-color: var(--color-charcoal);
}