/*
 * Responsive overrides (phones).
 *
 * The block content is laid out for desktop with inline styles (fixed spacers,
 * side margins, font sizes), so most rules here need !important to win over
 * them. Blocks have few custom classes, so sections are targeted structurally
 * with :has(). Breakpoint matches WordPress' own column stacking (781px).
 */

@media (max-width: 781px) {

	/* ------------------------------------------------------------------
	 * Spacing scale & gutters
	 * ------------------------------------------------------------------ */

	body {
		--wp--preset--spacing--50: 20px; /* also the page side gutter */
		--wp--preset--spacing--60: 32px;
		--wp--preset--spacing--70: 40px;
		--wp--preset--spacing--80: 48px;
	}

	/* Desktop spacers: drop the ones used to offset columns, tame the rest. */
	.wp-block-column > .wp-block-spacer {
		display: none;
	}

	:is(main, .entry-content) .wp-block-spacer {
		height: 24px !important;
	}

	/* Section groups with fixed desktop margins (57px etc.). */
	:is(main, .entry-content) .wp-block-group[style*="margin-top:57px"] {
		margin-top: 40px !important;
		margin-bottom: 40px !important;
	}

	/* Framed images: the cover block's default 430px min-height leaves
	 * empty bands above and below the photo. */
	:is(main, .entry-content) .wp-block-cover.frame-background-image {
		min-height: 0 !important;
		padding: 24px !important;
	}

	/* Stacked columns: one consistent gap. */
	:is(main, .entry-content) .wp-block-columns {
		gap: 24px;
	}

	/* Blocks placed straight into a full-width group get no gutter. */
	.entry-content > main.alignfull > :is(h2, p, .wp-block-cover.frame-background-image) {
		margin-left: var(--wp--preset--spacing--50) !important;
		margin-right: var(--wp--preset--spacing--50) !important;
	}

	/* ------------------------------------------------------------------
	 * Header
	 * ------------------------------------------------------------------ */

	.header-fixed > .wp-block-group {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	.header-fixed .wp-block-site-logo img {
		width: 120px;
	}

	/* Spacer behind the fixed header: 24 + logo (64) + 24. */
	body:not(.block-editor-iframe__body) .wp-site-blocks::before {
		height: 112px !important;
	}

	/* ------------------------------------------------------------------
	 * Typography
	 * ------------------------------------------------------------------ */

	/* Gotham headings in the content (not covers, not script headings). */
	:is(main, .entry-content) h2:not(.has-malina-1-font-family):not(.wp-block-cover h2) {
		font-size: 30px !important;
		line-height: 1.15;
	}

	/* Long, line-broken copy reads better left-aligned on a narrow screen. */
	:is(main, .entry-content) h2.has-text-align-center:not(.wp-block-cover h2):not(.has-malina-1-font-family),
	:is(main, .entry-content) h2.has-text-align-right:not(.wp-block-cover h2),
	:is(main, .entry-content) p.has-text-align-center:has(br):not(.wp-block-cover p) {
		text-align: left !important;
	}

	/* Desktop side margins used to nudge headings into place. */
	:is(main, .entry-content) h2:not(.wp-block-cover h2) {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Hero */
	.hero-header h2.has-malina-1-font-family {
		font-size: 52px !important;
		line-height: 1.15;
	}

	/* ------------------------------------------------------------------
	 * Script (Malina) headings layered over / under Gotham headings
	 * ------------------------------------------------------------------ */

	:is(main, .entry-content) h2.has-malina-1-font-family:not(.wp-block-cover h2) {
		font-size: min(64px, 14.5vw) !important;
		line-height: 1 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		position: relative;
	}

	.wp-block-column h2.has-malina-1-font-family {
		text-align: left !important;
	}

	/* Script above the heading */
	:is(main, .entry-content) h2.negative-margin-bottom {
		margin-bottom: -18px !important;
	}

	/* Script below the heading ("Inside") */
	:is(main, .entry-content) h2.negative-margin-top {
		margin-top: -8px !important;
	}

	/* Script + heading side by side in a row ("Why these meditations matter") */
	:is(main, .entry-content) .wp-block-group.is-nowrap:has(> h2.has-malina-1-font-family) {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	:is(main, .entry-content) .wp-block-group.is-nowrap:has(> h2.has-malina-1-font-family) > h2 {
		flex-basis: auto !important;
	}

	:is(main, .entry-content) .wp-block-group.is-nowrap:has(> h2.has-malina-1-font-family) > h2.has-malina-1-font-family {
		margin-bottom: 22px !important;
	}

	:is(main, .entry-content) h2.negative-margin-left {
		margin-left: 0 !important;
	}

	/* ------------------------------------------------------------------
	 * Designed bullet lists (icon column + text column)
	 * ------------------------------------------------------------------ */

	:is(main, .entry-content) .wp-block-columns:has(> .wp-block-column[style*="flex-basis:32px"]) {
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 20px;
		margin: 0;
	}

	:is(main, .entry-content) .wp-block-columns:has(> .wp-block-column[style*="flex-basis:32px"]) > .wp-block-column[style*="flex-basis:32px"] {
		flex: 0 0 32px !important;
	}

	:is(main, .entry-content) .wp-block-columns:has(> .wp-block-column[style*="flex-basis:32px"]) > .wp-block-column:not([style*="flex-basis:32px"]) {
		flex: 1 1 auto !important;
	}

	:is(main, .entry-content) .wp-block-column[style*="flex-basis:32px"] img {
		width: 32px;
		height: auto;
	}

	/* A bullet list's rows */
	:is(main, .entry-content) :is(.wp-block-group, .wp-block-column):has(> .wp-block-columns > .wp-block-column[style*="flex-basis:32px"]) > .wp-block-columns {
		margin-block: 16px 0;
	}

	:is(main, .entry-content) .wp-block-group.is-vertical:has(> .wp-block-columns > .wp-block-column[style*="flex-basis:32px"]) {
		gap: 0;
	}

	/* Two bullet lists side by side -> one list. */
	:is(main, .entry-content) .wp-block-group.is-nowrap:has(> .wp-block-group > .wp-block-columns > .wp-block-column[style*="flex-basis:32px"]) {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* ------------------------------------------------------------------
	 * Reordering stacked columns to follow the phone mockups
	 * ------------------------------------------------------------------ */

	/* Image | heading + copy, with closing headings under the image
	 * (home: "My child would learn…" / "Harmony and connection…"). */
	:is(main, .entry-content) .wp-block-column:has(> .frame-background-image + .wp-block-spacer + h2) {
		display: contents;
	}

	:is(main, .entry-content) .wp-block-column:has(> .frame-background-image + .wp-block-spacer + h2) > *,
	:is(main, .entry-content) .wp-block-column:has(> .frame-background-image + .wp-block-spacer + h2) + .wp-block-column {
		flex-basis: 100% !important;
		margin: 0 !important;
	}

	:is(main, .entry-content) .wp-block-column:has(> .frame-background-image + .wp-block-spacer + h2) > .frame-background-image {
		order: 1;
	}

	:is(main, .entry-content) .wp-block-column:has(> .frame-background-image + .wp-block-spacer + h2) + .wp-block-column {
		order: 2;
	}

	:is(main, .entry-content) .wp-block-column:has(> .frame-background-image + .wp-block-spacer + h2) > h2 {
		order: 3;
	}

	/* Two framed images in one column + text in the other: interleave them
	 * (1:1 sessions: image, "Motherhood was never meant…", image). */
	:is(main, .entry-content) .wp-block-column:has(> .frame-background-image + .frame-background-image) {
		display: contents;
	}

	:is(main, .entry-content) .wp-block-column:has(> .frame-background-image + .frame-background-image) > *,
	:is(main, .entry-content) .wp-block-column:has(> .frame-background-image + .frame-background-image) + .wp-block-column {
		flex-basis: 100% !important;
		margin: 0 !important;
	}

	:is(main, .entry-content) .wp-block-column:has(> .frame-background-image + .frame-background-image) > .frame-background-image:first-child {
		order: 1;
	}

	:is(main, .entry-content) .wp-block-column:has(> .frame-background-image + .frame-background-image) + .wp-block-column {
		order: 2;
	}

	:is(main, .entry-content) .wp-block-column:has(> .frame-background-image + .frame-background-image) > .frame-background-image + .frame-background-image {
		order: 3;
	}

	/* Heading + framed image | copy, then another heading: heading, copy,
	 * image, rest (the method: "When you return…"; guided meditations:
	 * "A return to seeing your child clearly"). */
	:is(main, .entry-content) .wp-block-columns:has(> .wp-block-column:first-child > h2 + .wp-block-spacer + .frame-background-image) {
		gap: 24px;
	}

	:is(main, .entry-content) .wp-block-columns:has(> .wp-block-column:first-child > h2 + .wp-block-spacer + .frame-background-image) > .wp-block-column {
		display: contents;
	}

	:is(main, .entry-content) .wp-block-columns:has(> .wp-block-column:first-child > h2 + .wp-block-spacer + .frame-background-image) > .wp-block-column > * {
		flex-basis: 100%;
		margin-block: 0 !important;
		order: 2;
	}

	:is(main, .entry-content) .wp-block-columns:has(> .wp-block-column:first-child > h2 + .wp-block-spacer + .frame-background-image) > .wp-block-column:first-child > h2 {
		order: 1;
	}

	:is(main, .entry-content) .wp-block-columns:has(> .wp-block-column:first-child > h2 + .wp-block-spacer + .frame-background-image) > .wp-block-column:first-child > .frame-background-image {
		order: 3;
		margin-block: 16px !important;
	}

	:is(main, .entry-content) .wp-block-columns:has(> .wp-block-column:first-child > h2 + .wp-block-spacer + .frame-background-image) > .wp-block-column:last-child > h2,
	:is(main, .entry-content) .wp-block-columns:has(> .wp-block-column:first-child > h2 + .wp-block-spacer + .frame-background-image) > .wp-block-column:last-child > h2 ~ * {
		order: 4;
	}

	/* A script heading directly before a heading inside a reordered column
	 * ("What you'll experience" + "Inside"): keep them tight. */
	:is(main, .entry-content) .wp-block-columns:has(> .wp-block-column:first-child > h2 + .wp-block-spacer + .frame-background-image) > .wp-block-column > h2.negative-margin-top {
		margin-top: -14px !important;
	}

	/* Home "Why mothers" block: a 3-column grid plus a quote row, flattened
	 * into: script, heading, beliefs, quote, list, image, closing copy. */
	:is(main, .entry-content) .wp-block-group:has(> .wp-block-columns > .wp-block-column > .negative-margin-bottom):has(> .wp-block-columns + .wp-block-columns) {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	:is(main, .entry-content) .wp-block-group:has(> .wp-block-columns > .wp-block-column > .negative-margin-bottom):has(> .wp-block-columns + .wp-block-columns) :is(.wp-block-columns, .wp-block-column, .wp-block-group) {
		display: contents;
	}

	:is(main, .entry-content) .wp-block-group:has(> .wp-block-columns > .wp-block-column > .negative-margin-bottom):has(> .wp-block-columns + .wp-block-columns) :is(p, h2, figure) {
		margin: 0 !important;
		max-width: none;
	}

	:is(main, .entry-content) .wp-block-group:has(> .wp-block-columns > .wp-block-column > .negative-margin-bottom):has(> .wp-block-columns + .wp-block-columns) > .wp-block-columns:first-child > .wp-block-column:first-child > * {
		order: 3;
	}

	:is(main, .entry-content) .wp-block-group:has(> .wp-block-columns > .wp-block-column > .negative-margin-bottom):has(> .wp-block-columns + .wp-block-columns) h2.negative-margin-bottom {
		order: 1;
		margin-bottom: -24px !important; /* cancels the 24px flex gap */
	}

	:is(main, .entry-content) .wp-block-group:has(> .wp-block-columns > .wp-block-column > .negative-margin-bottom):has(> .wp-block-columns + .wp-block-columns) h2.negative-margin-bottom + h2 {
		order: 2;
	}

	:is(main, .entry-content) .wp-block-group:has(> .wp-block-columns > .wp-block-column > .negative-margin-bottom):has(> .wp-block-columns + .wp-block-columns) > .wp-block-columns + .wp-block-columns h2 {
		order: 4;
	}

	:is(main, .entry-content) .wp-block-group:has(> .wp-block-columns > .wp-block-column > .negative-margin-bottom):has(> .wp-block-columns + .wp-block-columns) .wp-block-column .wp-block-columns > .wp-block-column:first-child > * {
		order: 5;
	}

	:is(main, .entry-content) .wp-block-group:has(> .wp-block-columns > .wp-block-column > .negative-margin-bottom):has(> .wp-block-columns + .wp-block-columns) > .wp-block-columns + .wp-block-columns figure {
		order: 6;
	}

	:is(main, .entry-content) .wp-block-group:has(> .wp-block-columns > .wp-block-column > .negative-margin-bottom):has(> .wp-block-columns + .wp-block-columns) > .wp-block-columns + .wp-block-columns figure img {
		width: 100%;
		max-width: 420px;
	}

	:is(main, .entry-content) .wp-block-group:has(> .wp-block-columns > .wp-block-column > .negative-margin-bottom):has(> .wp-block-columns + .wp-block-columns) .wp-block-column .wp-block-columns > .wp-block-column:last-child > * {
		order: 7;
	}

	/* ------------------------------------------------------------------
	 * Other stacked rows
	 * ------------------------------------------------------------------ */

	/* "Stillness  Presence  Safety" */
	:is(main, .entry-content) .wp-block-group.is-nowrap.is-content-justification-space-between:has(> h2 + h2 + h2) {
		flex-direction: column;
		gap: 16px;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Quote + small image in a row */
	:is(main, .entry-content) .wp-block-group.is-nowrap:has(> h2 + figure) {
		flex-direction: column;
		align-items: stretch;
	}

	/* ------------------------------------------------------------------
	 * Mailing list CTA form
	 * ------------------------------------------------------------------ */

	.email-cta {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.email-input,
	.email-button {
		width: 100%;
		box-sizing: border-box;
		padding: 18px 24px;
	}

	.email-button {
		text-align: center;
	}

	.wp-block-cover:has(.email-cta) h3 {
		font-size: 30px !important;
		line-height: 1.1;
	}

	/* Mailchimp embed ("Join the community" page) */
	#mc_embed_signup {
		width: auto !important;
		max-width: 100%;
	}

	#mc_embed_signup form {
		padding: 0 !important;
	}

	/* ------------------------------------------------------------------
	 * Footer
	 * ------------------------------------------------------------------ */

	footer.wp-block-template-part > .wp-block-group > .wp-block-group.is-nowrap:first-child {
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	footer.wp-block-template-part .wp-block-site-logo {
		margin-bottom: 16px;
	}

	footer.wp-block-template-part .wp-block-site-logo img {
		width: 197px;
	}

	/* Contact rows: icon + text, left edges aligned in a centred column. */
	footer.wp-block-template-part .wp-block-group.is-nowrap:has(> figure + .wp-block-group) {
		width: 240px;
		gap: 16px;
	}

	footer.wp-block-template-part .wp-block-group.is-nowrap > figure {
		flex: 0 0 71px;
	}

	footer.wp-block-template-part .wp-block-group.is-nowrap > figure img {
		width: 71px;
		height: auto;
	}

	/* Instagram */
	footer.wp-block-template-part > .wp-block-group > .wp-block-group.is-nowrap:has(> figure.is-resized) {
		justify-content: center;
		margin-top: 40px;
	}

	footer.wp-block-template-part > .wp-block-group > .wp-block-group.is-nowrap:has(> figure.is-resized) > figure {
		flex: 0 0 25px;
	}
}