/*
 * layout/spacing.css — the fixed mobile section padding and heights.
 *
 * Imported LAST in main.css, after the patterns. That position is deliberate:
 * this file has to win.
 *
 * THE SPLIT
 * ---------
 * Medium (768px+) and Large (1024px+)  the editor owns it. Whatever is set in
 *                                      the block sidebar's Dimensions panel
 *                                      applies.
 * Small (0-767px)                      fixed by this file. 20px left/right,
 *                                      32px top/bottom, on every section.
 *
 * WHY MOBILE IS FIXED
 * -------------------
 * The editor's Dimensions panel writes ONE padding value as an inline style:
 *
 *     <div class="wp-block-cover fcs-home-hero" style="padding-bottom:112px">
 *
 * Core has no per-breakpoint spacing control, so that single value would
 * otherwise apply at every size — a 112px desktop gap would leave a huge hole
 * under the copy on a phone. Pinning Small here means an editor can set the
 * desktop padding freely without ever breaking the mobile layout.
 *
 * WHY !IMPORTANT
 * --------------
 * An inline style beats any stylesheet rule, including one inside a media
 * query — media queries add no specificity. !important is the only way a
 * stylesheet can override an inline style, so it is load-bearing here, not a
 * shortcut. It is scoped to one media query and one property group.
 *
 * This is the only sanctioned !important in the codebase. Do not copy the idiom
 * into pattern CSS.
 *
 * WHICH ELEMENTS
 * --------------
 * Every pattern root, listed explicitly rather than matched with a wildcard, so
 * adding a pattern is a deliberate opt-in and nothing inside a section (cards,
 * inner groups) is caught by accident.
 *
 * ADDING A PATTERN: add its root class to the selector list below.
 *
 * THE ONE EXCEPTION: RICH TEXT
 * ----------------------------
 * .fcs-rich-text is deliberately NOT listed. Its sidebar has separate Mobile and
 * Desktop tabs for padding, margin and background, written as custom properties
 * and read by patterns/rich-text.css — so its Small values are the editor's, and
 * pinning them here would silently override that choice.
 */

@media ( max-width: 767px ) {
	.fcs-business-directory,
	.fcs-contact,
	.fcs-features,
	.fcs-home-hero.wp-block-cover,
	.fcs-image-with-text,
	.fcs-latest-news,
	.fcs-lead-gen,
	.fcs-logo-cloud,
	.fcs-multicolumn,
	.fcs-tables,
	.fcs-text-banner,
	.fcs-upcoming-events {
		padding-block: 32px !important;
		padding-inline: 20px !important;
	}

	/*
	 * News Archive and News Single take the 32px standard vertically — there
	 * is no mobile design for either — but their gutters are on the inner
	 * (below), not the root.
	 */
	.fcs-calendar,
	.fcs-news-archive,
	.fcs-news-single,
	.fcs-staff-directory {
		padding-block: 32px !important;
	}

	/*
	 * Breadcrumbs pins its gutter on the INNER, not the root.
	 *
	 * Its 20px has to sit on the inner alignwide group so the trail lines up
	 * with the header logo rather than being indented inside the 1240px cap at
	 * Large — see patterns/bread-crumbs.css. But the gutter still has to exist
	 * at Small, where alignwide constrains nothing and the inner spans the full
	 * viewport, so it is pinned here on the inner instead of the root.
	 *
	 * Any future pattern that moves its gutter to an inner wrapper for the same
	 * alignment reason belongs in this selector too.
	 *
	 * Interior Hero Banner is exactly that case, twice over: both its title band
	 * and its nav bar are alignfull with an alignwide child, for the same reason
	 * and with the same 20px.
	 *
	 * News Archive too: its root is alignfull and its inner (the Query block)
	 * alignwide, so the card grid lines up with the logo at Large.
	 *
	 * News Single has the same alignfull -> alignwide shape, for the same reason.
	 *
	 * So does Staff Directory: its inner is the directory block, alignwide, so
	 * the filter rule and the card grid line up with the logo at Large.
	 *
	 * And Calendar, the same shape: its inner is the calendar block.
	 */
	.fcs-bread-crumbs__inner,
	.fcs-calendar__inner,
	.fcs-interior-hero__inner,
	.fcs-interior-hero__nav-inner,
	.fcs-news-archive__inner,
	.fcs-news-single__inner,
	.fcs-staff-directory__inner {
		padding-inline: 20px !important;
	}

	/*
	 * Three sections state their own mobile vertical padding in the design
	 * rather than taking the 32px standard. All are followed as drawn.
	 *
	 *   Breadcrumbs      20px — Figma 7953:7451, the SAME as its desktop value.
	 *                    It is the one section that does not grow on desktop:
	 *                    a 64px band holding a single 24px row does not need
	 *                    32px on a phone, and padding it further would make the
	 *                    trail taller than the nav row it sits under.
	 *   Image with Text  40px — Figma 10060:7871, against 64px on desktop
	 *                    (9906:10502). It stacks a full-width photograph above
	 *                    its copy and repeats down a page more than any other
	 *                    section, so the extra 8px is doing visible work.
	 *   Multicolumn      64px — Figma 10060:7836, against 112px on desktop
	 *                    (7926:1117). It is the tallest section on the page and
	 *                    carries a card slider, so it needs the breathing room.
	 *
	 * Interior Hero Banner is two bands and takes its desktop figures through to
	 * Small for both, rather than the 32px standard:
	 *
	 *   Title band  64px — Figma 7953:2768. It holds one 60px line of display
	 *               type and nothing else, so the padding IS the band; cutting
	 *               it to 32px would leave the title crowded against the
	 *               breadcrumb above and the nav bar below.
	 *   Nav bar     20px — Figma 7911:7249, the same at every size for the same
	 *               reason Breadcrumbs is: a single 24px row of links does not
	 *               need more on a phone.
	 */
	.fcs-bread-crumbs {
		padding-block: 20px !important;
	}

	.fcs-interior-hero.wp-block-cover {
		padding-block: 64px !important;
	}

	.fcs-interior-hero__nav {
		padding-block: 20px !important;
	}

	.fcs-image-with-text {
		padding-block: 40px !important;
	}

	/*
	 * Latest News sits in the same homepage run as Multicolumn and was built as
	 * one before it became a query, so it keeps Multicolumn's 64px. Upcoming
	 * Events is the same Multicolumn lookalike (Figma 10148:9546, 64px on
	 * desktop too) and takes the same.
	 */
	.fcs-latest-news,
	.fcs-multicolumn,
	.fcs-upcoming-events {
		padding-block: 64px !important;
	}

	/*
	 * Cover's Minimum height control has the same one-value-for-all-breakpoints
	 * problem as the Dimensions panel, and writes inline too:
	 *
	 *     <div class="wp-block-cover fcs-home-hero" style="min-height:1000px">
	 *
	 * The hero is 1000px on desktop and 600px on mobile (Figma 9904:10602 /
	 * 10060:7803). An editor raising the desktop figure would otherwise make the
	 * phone hero 1000px tall — most of a viewport of photograph before any copy.
	 *
	 * So Small is pinned here and the editor keeps Medium/Large, exactly as with
	 * padding above. The pattern's own CSS still carries the 600/1000 pair for
	 * the case where no inline value has been written yet.
	 */
	.fcs-home-hero.wp-block-cover {
		min-height: 600px !important;
	}
}