/*
 * Mobile sizing corrections for the homepage — HAND-WRITTEN.
 * Edit this file, not site.css.
 *
 * site.css is regenerated by scripts/migrate-snippets.sh from the old
 * custom-css-js snippets; anything added there is lost on the next rebuild.
 * This file is the home for CSS we author ourselves.
 *
 * WHY THE SELECTORS LOOK LIKE THIS
 *   The layouts live in the database, not in this repo (see DEPLOY.md, "The
 *   mental model"), and both page-builder plugins in use write their spacing as
 *   *inline* declarations:
 *     - Otter/themeisle emits `#<block-id>{padding-left:69px;…}` inside a <style>
 *       in the body — ID specificity, and later in document order than this
 *       stylesheet, so it wins every tie. Repeating the ID *and* a class gives
 *       (1,1,0) against its (1,0,0), which wins on specificity rather than order.
 *     - Core block markup writes `style="padding-right:var(…spacing--60)"`
 *       straight onto the element, which only !important can override.
 *   Where a plain override suffices (max-width, max-height) it is used instead.
 *
 * WHY EVERYTHING IS SCOPED
 *   An earlier draft applied rules 1 and 4 by class, site-wide. Measured with
 *   scripts/visual-diff.mjs, that regressed four other pages: Otter blocks on
 *   /unser-team/ and /robo-wunderkind-steam-bildung/ correctly have *no* side
 *   padding, and a blanket rule imposed a 31px gutter on them, narrowing the
 *   content. A rule that can only relax an existing value is not expressible in
 *   CSS, so each rule is pinned to the block or page it was written for.
 *
 * Breakpoint: 781px, matching the width at which core stacks wp-block-columns.
 */

/* ---------------------------------------------------------------------------
 * 1. The GLS section: Otter padding meant for a side-by-side desktop layout.
 *
 * The block is padded 69px left / 23px right, and its text column a further
 * 100px on the right. Below 960px Otter stacks the columns but keeps those
 * values, so on a 390px screen the text gets 198px — every line wraps after
 * three words, and the CTA inside collapses to an 89px circle with its label
 * spilling outside the pill.
 *
 * Otter has per-breakpoint padding controls: the block emits empty
 * `@media (max-width:600px){}` and `@media (max-width:960px){}` rules, so the
 * Tablet/Mobile tabs were simply never filled in. Setting them in the editor is
 * the durable fix (DEPLOY.md D3); this makes the section behave until then, and
 * falls back to the site's own gutter so it lines up with every other section.
 *
 * NOTE: these IDs are generated by Otter and are stable for the life of the
 * block, but re-creating the block from scratch would mint new ones and these
 * rules would silently stop matching. If the GLS section ever reverts to
 * crushed text on mobile, re-read the IDs from the page source.
 * ------------------------------------------------------------------------- */
@media (max-width: 781px) {
	#wp-block-themeisle-blocks-advanced-columns-40f45ced.wp-block-themeisle-blocks-advanced-columns {
		padding-left: var(--wp--preset--spacing--50);
		padding-right: var(--wp--preset--spacing--50);
	}

	#wp-block-themeisle-blocks-advanced-column-be9c5916.wp-block-themeisle-blocks-advanced-column {
		padding-right: 0;
	}
}

/* ---------------------------------------------------------------------------
 * 2. Partner logo rows: gutters sized for a desktop canvas.
 *
 * .myPartners-row is padded with spacing--60 — `min(10.5rem, 13vw)`, so 51px a
 * side at 390px. That is 26% of the screen spent on margin, which pushes the
 * logo grid down to one or two logos per row. spacing--10 is a flat 1rem.
 *
 * The row belongs to the MyPartners synced pattern, which renders only on the
 * homepage, so no page scope is needed.
 * ------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.myPartners-row {
		padding-left: var(--wp--preset--spacing--10) !important;
		padding-right: var(--wp--preset--spacing--10) !important;
	}
}

/* ---------------------------------------------------------------------------
 * 3. Fixed-width logos authored against the desktop layout.
 *
 * Core's image block stores a resize as an inline `width:301px` with no
 * responsive counterpart. 301px is 23% of the 1280px desktop canvas and 77% of a
 * 390px phone, so the GLS lockup reads as a hero image on mobile.
 *
 * Targeted by attachment class rather than by a blanket cap on centred images:
 * the same selector also matches classroom photos and product screenshots that
 * are *meant* to run near-full-width, and no CSS rule can tell a logo from a
 * photo. wp-image-<id> is the attachment ID and survives re-editing the block.
 * ------------------------------------------------------------------------- */
@media (max-width: 781px) {
	/* GLS Berlin lockup, homepage partnership section. */
	.wp-block-image > img.wp-image-4861,
	/*
	 * /gls-train-the-future-partnerschaft/ hero. 4859 is the GLS lockup at
	 * 302px; 4128 is the Train the Future lockup stacked directly beneath it at
	 * 300px. They are one visual pair, so both are capped together — shrinking
	 * only the GLS half would leave TTF as the larger of the two, which reads
	 * worse than leaving both alone. Neither attachment is used anywhere else.
	 */
	.wp-block-image > img.wp-image-4859,
	.wp-block-image > img.wp-image-4128 {
		max-width: min(100%, 200px);
		height: auto;
	}
}

/* ---------------------------------------------------------------------------
 * 5. Long words in headings must not make the page scroll sideways.
 *
 * The /gls-train-the-future-partnerschaft/ H2 begins "GLS x Train the Future
 * Partnerschaft – Zukunftsorientiertes …". Its inline fluid size floors at
 * 2.244rem (35.9px), and at that size "Zukunftsorientiertes" is wider than a
 * 390px screen, so the whole document scrolls to 405px — the worst class of
 * mobile defect, because it affects every section of the page, not just the
 * heading.
 *
 * `hyphens: auto` would be the prettier fix but is not usable here: the German
 * content is served under `<html lang="en-GB">`, so the browser would apply
 * English hyphenation patterns to German compounds.
 *
 * SCOPED TO THIS ONE PAGE, DELIBERATELY. An earlier draft applied break-word to
 * all headings site-wide on the theory that it is inert unless a word genuinely
 * cannot fit. It is not: /makeblock-steam-bildung/ has an H1 in a container
 * crushed to ~154px by the same Otter padding bug as rule 1, and its words were
 * spilling *outside that container* while still fitting the viewport — which
 * rendered cleanly as "Makeblock / – / Kreativität / trifft / Technik". Adding
 * break-word chopped it into "Makebl / ock – / Kreativi / tät". Overflow that
 * stays inside the viewport is not worth trading for a mid-word break.
 *
 * The clean fix here is to lower this heading's minimum fluid font size in the
 * editor (it floors at 2.244rem; roughly 2.1rem would let the word wrap at a
 * space instead). That would make this rule inert rather than wrong.
 * ------------------------------------------------------------------------- */
@media (max-width: 781px) {
	body.page-id-4851 h1,
	body.page-id-4851 h2,
	body.page-id-4851 h3 {
		overflow-wrap: break-word;
	}
}

/* ---------------------------------------------------------------------------
 * 4. Fixed-height spacers on the homepage.
 *
 * Spacer blocks carry an inline pixel height chosen on a desktop screen. The
 * homepage stacks five of 100px or more; a 110px spacer is 13% of an 844px phone
 * viewport, which reads as the page having ended.
 *
 * max-height needs no !important — the inline style sets `height`, a different
 * property — and it only bites on spacers that are already oversized: anything
 * authored at 56px or less is untouched.
 *
 * Scoped to the front page. The same oversizing exists on other pages; widening
 * this is a matter of deleting `body.home`, but that changes the vertical rhythm
 * of eleven pages and should be a deliberate decision, not a side effect.
 * ------------------------------------------------------------------------- */
@media (max-width: 781px) {
	body.home .wp-block-spacer {
		max-height: 56px;
	}
}