/* Flavor Speed — Mobile responsive fixes */

/* ------------------------------------------------
   1. Reduce section padding on mobile
   ------------------------------------------------ */
@media (max-width: 781px) {
	/* Sections using spacing|70 (~70-90px) → tighter on mobile */
	.wp-block-group.alignfull > .wp-block-group,
	.wp-block-group.alignfull {
		padding-top: clamp(32px, 6vw, var(--wp--preset--spacing--70)) !important;
		padding-bottom: clamp(32px, 6vw, var(--wp--preset--spacing--70)) !important;
	}

	/* Hero uses spacing|80 — reduce more aggressively */
	.wp-block-group.alignfull[style*="spacing--80"] {
		padding-top: clamp(40px, 8vw, var(--wp--preset--spacing--80)) !important;
		padding-bottom: clamp(40px, 8vw, var(--wp--preset--spacing--80)) !important;
	}
}

/* ------------------------------------------------
   2. Stats bar: 4 cols → 2×2 grid on small phones
   ------------------------------------------------ */
@media (max-width: 600px) {
	.has-accent-2-background-color > .wp-block-columns.alignwide {
		flex-wrap: wrap !important;
		gap: 24px 16px;
	}

	.has-accent-2-background-color > .wp-block-columns.alignwide > .wp-block-column {
		flex-basis: calc(50% - 8px) !important;
		flex-grow: 0 !important;
	}
}

/* ------------------------------------------------
   3. Risk reversal: 4 cols → 2×2 grid on tablets,
      single column on small phones
   ------------------------------------------------ */
@media (max-width: 781px) and (min-width: 601px) {
	.has-accent-5-background-color > .wp-block-columns.alignwide:has(> .wp-block-column:nth-child(4)) {
		flex-wrap: wrap !important;
		gap: 24px;
	}

	.has-accent-5-background-color > .wp-block-columns.alignwide:has(> .wp-block-column:nth-child(4)) > .wp-block-column {
		flex-basis: calc(50% - 12px) !important;
		flex-grow: 0 !important;
	}
}

/* ------------------------------------------------
   4. Buttons stack vertically on small phones
   ------------------------------------------------ */
@media (max-width: 480px) {
	.wp-block-buttons {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons > .wp-block-button .wp-block-button__link {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
}

/* ------------------------------------------------
   5. Header CTA button: ensure 44px touch target
   ------------------------------------------------ */
@media (max-width: 781px) {
	.wp-block-group.alignfull[style*="border-bottom"] .wp-block-button .wp-block-button__link {
		min-height: 44px;
		min-width: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 10px 20px;
		white-space: nowrap;
	}
}

/* ------------------------------------------------
   6. Footer bottom row: allow wrapping
   ------------------------------------------------ */
@media (max-width: 600px) {
	/* Target the bottom bar with copyright + privacy */
	.wp-block-group.alignfull[style*="border-top"] .wp-block-group.alignwide[style*="margin-top"] {
		flex-wrap: wrap !important;
		gap: 8px;
		justify-content: center !important;
	}

	/* Footer top section: stack columns, center text */
	.wp-block-group.alignfull[style*="border-top"] > .wp-block-group.alignwide {
		gap: 32px;
		justify-content: center !important;
	}

	.wp-block-group.alignfull[style*="border-top"] > .wp-block-group.alignwide > .wp-block-group {
		align-items: center !important;
		text-align: center;
	}
}

/* ------------------------------------------------
   7. Case study nested Before/After columns
   ------------------------------------------------ */
@media (max-width: 600px) {
	/* Keep before/after side-by-side even when outer cols stack */
	.wp-block-column .wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: nowrap !important;
	}

	.wp-block-column .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 50% !important;
	}

	/* Reduce inner card padding on mobile */
	.wp-block-column[style*="border-radius: 12px"],
	.wp-block-column[style*="border-radius:12px"] {
		padding: var(--wp--preset--spacing--30) !important;
	}
}

/* ------------------------------------------------
   8. Pricing cards: tighter padding on mobile
   ------------------------------------------------ */
@media (max-width: 781px) {
	.wp-block-columns.alignwide > .wp-block-column[style*="border-radius:12px"][style*="spacing--50"] {
		padding-top: var(--wp--preset--spacing--40) !important;
		padding-bottom: var(--wp--preset--spacing--40) !important;
	}
}