/* ==========================================================================
   Common — containers, section rhythm, text roles, grids, utilities.
   Values mirror the Figma Make Tailwind classes (noted inline).
   ========================================================================== */

/* ---- Containers ---- */

/* Self-contained sections rendered by dynamic blocks (max-w-[1240px] px-5 lg:px-8). */
.efa-container {
	width: 100%;
	max-width: calc(1176px + 2 * var(--efa-gutter));
	margin-inline: auto;
	padding-inline: var(--efa-gutter);
}

/* ---- Sections (py-16 lg:py-20) ---- */
.efa-section {
	padding-block: 4rem;
}

@media (min-width: 1024px) {
	.efa-section {
		padding-block: 5rem;
	}
}

.efa-border-t { border-top: 2px solid var(--efa-line-10); }
.efa-border-b { border-bottom: 2px solid var(--efa-line-10); }
.efa-border-y { border-block: 2px solid var(--efa-line-10); }

.efa-section--center {
	text-align: center;
}

/* ---- Vertical rhythm inside stacks ---- */
.efa-section .efa-stack > *,
.efa-stack > * {
	margin-block: 0;
}

.efa-section .efa-stack > * + *,
.efa-page-header .efa-stack > * + * {
	margin-top: 1rem;
}

.efa-section .efa-stack > .efa-eyebrow + .wp-block-heading,
.efa-page-header .efa-stack > .efa-eyebrow + .wp-block-heading {
	margin-top: 0.5rem;
}

.efa-section .efa-stack > * + .wp-block-buttons {
	margin-top: 2rem;
}

/* ---- Text roles ---- */
.efa-eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--wp--preset--color--leaf-deep);
}

.has-pine-dark-background-color .efa-eyebrow {
	color: var(--wp--preset--color--leaf);
}

.efa-lead {
	font-size: 1.125rem;
	line-height: 1.75rem;
	color: var(--efa-ink-80);
}

@media (min-width: 640px) {
	.efa-lead--lg {
		font-size: 1.25rem;
		line-height: 1.75rem;
	}
}

.efa-lead strong {
	color: var(--wp--preset--color--pine-dark);
}

.has-pine-dark-background-color .efa-lead {
	color: var(--efa-white-85);
}

.has-pine-dark-background-color .efa-lead strong {
	color: inherit;
}

.efa-fineprint {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--efa-white-60);
}

/* Page-header titles: text-4xl sm:text-6xl leading-tight */
.efa-main .efa-page-header__title,
.efa-page-header .efa-page-header__title {
	font-size: 2.25rem;
	line-height: 1.25;
}

@media (min-width: 640px) {
	.efa-main .efa-page-header__title,
	.efa-page-header .efa-page-header__title {
		font-size: 3.75rem;
	}
}

/* Listen title: text-4xl sm:text-5xl (default line heights) */
.efa-main .efa-page-header__title--5xl,
.efa-page-header .efa-page-header__title--5xl {
	line-height: 2.5rem;
}

@media (min-width: 640px) {
	.efa-main .efa-page-header__title--5xl,
	.efa-page-header .efa-page-header__title--5xl {
		font-size: 3rem;
		line-height: 1;
	}
}

.efa-main .efa-subsection-title {
	font-size: 1.5rem;
	line-height: 2rem;
}

@media (min-width: 640px) {
	.efa-main .efa-subsection-title {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}
}

/* Pill badge (e.g. "Celebrating 20 Years") */
.efa-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	border-radius: 9999px;
	background: var(--wp--preset--color--leaf);
	padding: 0.375rem 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--wp--preset--color--pine-dark);
	--efa-icon-size: 1rem;
}

/* Soft notice pill ("Our Patreon launches soon") */
.efa-notice {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	border-radius: 9999px;
	background: var(--efa-leaf-15);
	padding: 0.5rem 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--pine-deep);
	--efa-icon-size: 1rem;
	--efa-icon-color: var(--wp--preset--color--leaf-deep);
}

/* ---- Section head: heading left, link right (items-end justify-between) ---- */
.efa-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

.efa-section-head > * {
	margin: 0 !important;
}

.efa-section .efa-section-head + * {
	margin-top: 2rem;
}

/* ---- Two-column splits (grid items-center gap-10 → lg columns) ---- */
.efa-split {
	display: grid;
	align-items: center;
	gap: 2.5rem;
}

.efa-split > * {
	margin: 0 !important;
	min-width: 0;
}

@media (min-width: 1024px) {
	.efa-split--half {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4rem;
	}

	.efa-split--wide-text {
		grid-template-columns: 1.15fr 0.85fr;
		gap: 4rem;
	}
}

.efa-split--media-first > :first-child {
	order: 2;
}

@media (min-width: 1024px) {
	.efa-split--media-first > :first-child {
		order: 0;
	}
}

/* ---- Card grids ---- */
.efa-grid {
	display: grid;
	gap: 1.5rem;
}

.efa-grid > * {
	margin: 0 !important;
	min-width: 0;
}

.efa-grid--gap-4 { gap: 1rem; }
.efa-grid--gap-5 { gap: 1.25rem; }

@media (min-width: 640px) {
	.efa-grid--sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
	.efa-grid--md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.efa-grid--md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.efa-grid--lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.efa-grid--lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Stat tiles (rounded-2xl border-white/15 bg-white/5 p-6) ---- */
.efa-stats {
	display: grid;
	gap: 1rem;
}

.efa-stats > * {
	margin: 0 !important;
}

.efa-stats--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.efa-stats--4 {
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.efa-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.efa-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.efa-stat {
	border: 2px solid rgb(255 255 255 / 0.15);
	border-radius: 1rem;
	background: rgb(255 255 255 / 0.05);
	padding: 1.5rem;
}

.efa-stat__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 800;
	color: var(--wp--preset--color--leaf);
}

.efa-stat__label {
	margin-top: 0.5rem !important;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--efa-white-85);
}

.efa-stat__label--display {
	margin-top: 0.25rem !important;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
}

/* ---- Search field (shared by the header panel + archive) ---- */
.efa-search-field {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.75rem;
	border: 2px solid var(--efa-line-25);
	border-radius: 9999px;
	background: #fff;
	padding-inline: 1.25rem;
	transition: border-color 0.15s var(--efa-ease), box-shadow 0.15s var(--efa-ease);
}

.efa-search-field:focus-within {
	border-color: var(--wp--preset--color--pine);
	box-shadow: 0 0 0 4px rgb(30 92 58 / 0.15);
}

.efa-search-field .efa-i {
	color: var(--wp--preset--color--pine-deep);
}

.efa-search-field input {
	width: 100%;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0.75rem 0;
	font-family: inherit;
	font-size: 1.125rem;
	line-height: 1.75rem;
	color: var(--wp--preset--color--ink);
	-webkit-appearance: none;
	appearance: none;
}

.efa-search-field input::placeholder {
	color: var(--efa-ink-45);
	opacity: 1;
}

/* The field's ring is the visible focus indicator — no second outline. */
.efa-search-field input:focus,
.efa-search-field input:focus-visible {
	outline: none;
}

/* ---- Back link ---- */
.efa-back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--pine);
	text-decoration: none;
}

.efa-back-link:hover {
	color: var(--wp--preset--color--pine-deep);
}

.efa-back-link .efa-i {
	width: 1rem;
	height: 1rem;
}

.efa-i--flip {
	transform: rotate(180deg);
}

.efa-i--lg {
	width: 1.5rem;
	height: 1.5rem;
}

.efa-i--red {
	color: var(--wp--preset--color--heart-red);
}

/* ---- Max widths (max-w-*) ---- */
.efa-mw-xs { max-width: 20rem; }
.efa-mw-md { max-width: 28rem; }
.efa-mw-xl { max-width: 36rem; }
.efa-mw-2xl { max-width: 42rem; }
.efa-mw-3xl { max-width: 48rem; }
.efa-mw-4xl { max-width: 56rem; }

/*
 * Narrow blocks placed directly in a constrained section would be centred by
 * the layout; the Figma left-aligns them to the 1176px content column.
 */
.efa-section.is-layout-constrained:not(.efa-section--center) > [class*="efa-mw-"],
.wp-block-cover__inner-container.is-layout-constrained > [class*="efa-mw-"] {
	margin-left: max(0px, calc((100% - 1176px) / 2)) !important;
	margin-right: auto !important;
}

.efa-section--center .efa-mw-xs,
.efa-section--center .efa-mw-md,
.efa-section--center .efa-mw-xl,
.efa-section--center .efa-mw-2xl {
	margin-inline: auto !important;
}

/* ---- Margin-top utilities (mt-*) — win over layout block gaps ---- */
.efa-mt-0 { margin-top: 0 !important; }
.efa-mt-1 { margin-top: 0.25rem !important; }
.efa-mt-2 { margin-top: 0.5rem !important; }
.efa-mt-3 { margin-top: 0.75rem !important; }
.efa-mt-4 { margin-top: 1rem !important; }
.efa-mt-5 { margin-top: 1.25rem !important; }
.efa-mt-6 { margin-top: 1.5rem !important; }
.efa-mt-7 { margin-top: 1.75rem !important; }
.efa-mt-8 { margin-top: 2rem !important; }
.efa-mt-10 { margin-top: 2.5rem !important; }
.efa-mt-12 { margin-top: 3rem !important; }
.efa-mt-14 { margin-top: 3.5rem !important; }

/* Constrained sections: flush first child, explicit rhythm after. */
.efa-section > :first-child {
	margin-top: 0;
}

/* ---- Editor-only notice for empty dynamic blocks ---- */
.efa-editor-notice {
	border: 2px dashed var(--efa-line-25);
	border-radius: 1rem;
	padding: 1.5rem;
	font-size: 1rem;
	color: var(--efa-ink-70);
	text-align: center;
}