/*
 * Visual Builder canvas.
 *
 * Every rule here is scoped to .geefit-canvas, which only exists on pages using
 * the "GeeFit Visual Builder" template. Existing pages are untouched.
 *
 * Purpose: reproduce, for block-built pages, the exact spacing relationship the
 * hand-built templates already have with the fixed site header.
 *
 * The header is `fixed` and h-20 (5rem) / lg:h-26 (6.5rem). The hand-built page
 * templates start with a hero that carries its own pt-20, so <main> itself has
 * no offset. We mirror that:
 *
 *   - a canvas that starts with a hero pattern gets zero offset (identical to
 *     the existing pages, because the hero supplies its own padding);
 *   - a canvas that starts with any other section gets the header's height as
 *     padding, so content never slides underneath it.
 */

.geefit-canvas {
	padding-top: 5rem; /* h-20 - matches the header height on mobile. */
}

@media (min-width: 1024px) {
	.geefit-canvas {
		padding-top: 6.5rem; /* lg:h-26 - matches the header height on desktop. */
	}
}

/*
 * A hero pattern is designed to sit beneath the fixed header and already
 * includes pt-20, so cancel the canvas offset entirely when one leads the page.
 * Net result: exactly the same markup geometry as front-page.php.
 */
.geefit-canvas > .gf-hero:first-child {
	margin-top: -5rem;
}

@media (min-width: 1024px) {
	.geefit-canvas > .gf-hero:first-child {
		margin-top: -6.5rem;
	}
}

/*
 * Sections are full-bleed. The canvas has no container of its own, so a block
 * marked "Full width" simply spans the viewport, exactly like the <section>
 * elements in the hand-built templates.
 */
.geefit-canvas > .alignfull,
.geefit-canvas > .wp-block-group.alignfull {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/*
 * Core adds a default vertical gap between top level blocks. The design carries
 * its own section padding (py-16 lg:py-18), so remove the extra gap to keep the
 * rhythm identical to the existing pages.
 */
.geefit-canvas > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* -------------------------------------------------------------------------
 * Image helpers.
 *
 * The core Image block renders  <figure class="wp-block-image"><img> , so a
 * custom class name lands on the figure and never reaches the <img> that the
 * design sizes and crops. `gf-img-cover` puts the sizing classes on the figure
 * (where they work) and makes the inner <img> fill it, which renders exactly
 * like the design's  <img class="w-full h-full object-cover object-center"> .
 * ---------------------------------------------------------------------- */

.geefit-canvas .gf-img-cover,
.editor-styles-wrapper .gf-img-cover {
	display: block;
	margin: 0;
	overflow: hidden;
}

.geefit-canvas .gf-img-cover img,
.editor-styles-wrapper .gf-img-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

/* -------------------------------------------------------------------------
 * Hero image panel.
 *
 * The hand-built heroes paint the right hand image with `bg-cover bg-center`
 * on a div and lay a gradient over it in a second, empty div. Neither is
 * editable. The pattern uses a real Image block instead - visually identical,
 * because an absolutely positioned object-cover image renders the same as a
 * bg-cover background - and draws the gradient here as a pseudo element so
 * there is no empty decorative block for the client to trip over.
 * ---------------------------------------------------------------------- */

.geefit-canvas .gf-hero-panel,
.editor-styles-wrapper .gf-hero-panel {
	position: absolute;
	inset-block: 0;
	right: 0;
	overflow: hidden;
}

.geefit-canvas .gf-hero-panel::after,
.editor-styles-wrapper .gf-hero-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	/*
	 * Deliberately NO z-index.
	 *
	 * The figure is position:absolute with z-index:auto, so it creates no
	 * stacking context and a z-index here would join the section's context at
	 * level 1 - painting the gradient OVER the headline, which sits in a
	 * position:relative wrapper at z-index auto. That cropped the hero text.
	 *
	 * Left on auto, paint order follows the DOM: the image panel comes first,
	 * the copy after, so the copy stays on top. Same as the hand-built hero,
	 * where the gradient is a plain sibling div with no z-index either.
	 */
	/* from-black via-black/20 to-transparent */
	background-image: linear-gradient(
		to right,
		rgb(0, 0, 0) 0%,
		rgba(0, 0, 0, 0.2) 50%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* Inner page heroes use a slightly stronger mid stop (via-black/30). */
.geefit-canvas .gf-hero-panel--strong::after,
.editor-styles-wrapper .gf-hero-panel--strong::after {
	background-image: linear-gradient(
		to right,
		rgb(0, 0, 0) 0%,
		rgba(0, 0, 0, 0.3) 50%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* -------------------------------------------------------------------------
 * Button variants.
 *
 * The core Button block renders  <div class="wp-block-button"><a class="
 * wp-block-button__link"> , so a custom class name lands on the wrapper and
 * never reaches the anchor the design styles. These rules reproduce each
 * design button on the anchor itself, using the exact values the Tailwind
 * utilities compile to:
 *
 *   px-6 = 1.5rem   px-7 = 1.75rem   px-8 = 2rem   py-3 = 0.75rem
 *   text-sm = 0.875rem / 1.25rem     font-semibold = 600
 *   rounded-full = 9999px            hover:opacity-90 = 0.9
 *
 * Core's own button padding comes from a :where() rule with zero specificity,
 * so these override cleanly without !important.
 * ---------------------------------------------------------------------- */

.geefit-canvas .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem; /* gap-4 */
}

.geefit-canvas .wp-block-button__link {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: 9999px;
	font-family: Poppins, sans-serif;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border: 0;
	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Solid green - the primary call to action. */
.geefit-canvas .is-style-geefit-green .wp-block-button__link {
	background-color: rgb(106, 185, 68);
	color: #ffffff;
}

.geefit-canvas .is-style-geefit-green .wp-block-button__link:hover {
	opacity: 0.9;
}

/*
 * Session card badge. The design sets the green background with an inline
 * style; a Paragraph block only emits inline styles it has attributes for, so
 * the colour lives here instead.
 */
.geefit-canvas .gf-badge,
.editor-styles-wrapper .gf-badge {
	background-color: rgb(106, 185, 68);
}

/* section-reviews.php uses a wider button (px-7) than the standard px-6. */
.geefit-canvas .gf-btn-wide .wp-block-button__link {
	padding-left: 1.75rem;
	padding-right: 1.75rem;
}

/* The coach card uses a slightly shorter button (py-2.5 rather than py-3). */
.geefit-canvas .gf-btn-compact .wp-block-button__link {
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
}

/* Outlined, for use on the black sections. */
.geefit-canvas .is-style-geefit-outline .wp-block-button__link {
	background-color: transparent;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.4);
}

.geefit-canvas .is-style-geefit-outline .wp-block-button__link:hover {
	background-color: #6ab944;
}

/* Black and white pills, used inside the green CTA band (px-7). */
.geefit-canvas .is-style-geefit-black .wp-block-button__link {
	background-color: #000000;
	color: #ffffff;
	padding-left: 1.75rem;
	padding-right: 1.75rem;
}

.geefit-canvas .is-style-geefit-black .wp-block-button__link:hover {
	background-color: #111827; /* hover:bg-gray-900 */
}

.geefit-canvas .is-style-geefit-white .wp-block-button__link {
	background-color: #ffffff;
	color: #000000;
	padding-left: 1.75rem;
	padding-right: 1.75rem;
}

.geefit-canvas .is-style-geefit-white .wp-block-button__link:hover {
	background-color: #f3f4f6; /* hover:bg-gray-100 */
}

/*
 * Stacked, full width buttons inside the Group Training green card
 * (flex flex-col gap-3, each button `block text-center px-6 py-3`).
 *
 * Declared after the black/white styles above deliberately: those set px-7 at
 * the same specificity, so this has to come later to win the cascade.
 */
.geefit-canvas .gf-btn-stack {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.geefit-canvas .gf-btn-stack .wp-block-button {
	width: 100%;
}

.geefit-canvas .gf-btn-stack .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* -------------------------------------------------------------------------
 * Green tick list.
 *
 * The hand-built sections draw each bullet as a <span> holding an inline SVG,
 * which means adding a list item requires editing markup. The patterns use a
 * plain core List block instead - so the client just presses Enter for a new
 * point - and the marker is drawn here as a pseudo element.
 *
 * Values match the design exactly:
 *   w-5 h-5 = 1.25rem   rounded-full = 9999px   gap-3 / space-y-3 = 0.75rem
 *   mt-0.5 = 0.125rem   icon = 11px white check, stroke-width 3
 * ---------------------------------------------------------------------- */

.geefit-canvas .gf-ticklist,
.editor-styles-wrapper .gf-ticklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.geefit-canvas .gf-ticklist li,
.editor-styles-wrapper .gf-ticklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 1rem; /* text-[16px] */
}

.geefit-canvas .gf-ticklist li + li,
.editor-styles-wrapper .gf-ticklist li + li {
	margin-top: 0.75rem;
}

.geefit-canvas .gf-ticklist li::before,
.editor-styles-wrapper .gf-ticklist li::before,
.geefit-canvas .gf-pill::before,
.editor-styles-wrapper .gf-pill::before {
	content: "";
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 9999px;
	background-color: rgb(106, 185, 68);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px 11px;
	margin-top: 0.125rem;
}

/* Tick list on a dark section. */
.geefit-canvas .gf-ticklist--dark li,
.editor-styles-wrapper .gf-ticklist--dark li {
	color: #ffffff;
}

/* -------------------------------------------------------------------------
 * "What's Included" pills.
 *
 * bg-white/5 border border-white/10 rounded-xl px-5 py-4, with the same green
 * tick marker. Each pill is a Group block, so the client duplicates one to add
 * another item.
 * ---------------------------------------------------------------------- */

.geefit-canvas .gf-pill,
.editor-styles-wrapper .gf-pill {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem;
	padding: 1rem 1.25rem;
}

.geefit-canvas .gf-pill::before,
.editor-styles-wrapper .gf-pill::before {
	margin-top: 0;
}

.geefit-canvas .gf-pill p,
.editor-styles-wrapper .gf-pill p {
	margin: 0;
	color: #ffffff;
	font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
 * Programme page price card.
 *
 * The design draws the green border with an inline style. A Group block only
 * emits inline styles it has attributes for, so putting one in the saved markup
 * would fail block validation. The border lives here instead, and the button
 * inside the card runs full width (block w-full text-center in the design).
 * ---------------------------------------------------------------------- */

.geefit-canvas .gf-price-card,
.editor-styles-wrapper .gf-price-card {
	border-color: rgb(106, 185, 68);
}

.geefit-canvas .gf-btn-block,
.editor-styles-wrapper .gf-btn-block {
	display: block;
	width: 100%;
}

.geefit-canvas .gf-btn-block .wp-block-button,
.editor-styles-wrapper .gf-btn-block .wp-block-button {
	width: 100%;
}

.geefit-canvas .gf-btn-block .wp-block-button__link,
.editor-styles-wrapper .gf-btn-block .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Star rating.
 *
 * geefit_stars() prints five 16px green Lucide stars inside `flex gap-1 mb-5`.
 *
 * These are drawn as a pseudo element on the review card itself rather than as
 * their own block. An empty Group block would render the block inserter
 * placeholder inside the editor - a large white box sitting on top of the
 * quote - so the stars must not be a block at all. As a pseudo element they are
 * also impossible for the client to delete by accident.
 *
 * 5 stars x 16px + 4 gaps x 4px (gap-1) = 96px wide, 16px tall.
 * ---------------------------------------------------------------------- */

.geefit-canvas .gf-review-card::before,
.editor-styles-wrapper .gf-review-card::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 96px;
	height: 16px;
	margin-bottom: 1.25rem; /* mb-5 */
	background-repeat: repeat-x;
	background-size: 20px 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%236AB944' stroke='%236AB944' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
 * "Learn More >" link.
 *
 * The design pairs the link text with a chevron-right icon. Drawing it here
 * keeps the link a plain, editable piece of text in the editor rather than a
 * block of SVG markup the client has to work around.
 *
 * inline-flex items-center gap-1 text-sm font-semibold hover:underline
 * ---------------------------------------------------------------------- */

.geefit-canvas .gf-link-arrow,
.editor-styles-wrapper .gf-link-arrow {
	margin-top: auto;
	font-size: 0.875rem;
	font-weight: 600;
}

.geefit-canvas .gf-link-arrow a,
.editor-styles-wrapper .gf-link-arrow a {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: #000000;
	text-decoration: none;
}

.geefit-canvas .gf-link-arrow a:hover,
.editor-styles-wrapper .gf-link-arrow a:hover {
	text-decoration: underline;
}

.geefit-canvas .gf-link-arrow a::after,
.editor-styles-wrapper .gf-link-arrow a::after {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
 * FAQ accordion.
 *
 * The pattern uses the core Details block instead of the theme's custom
 * button/JS accordion, so the client can add and edit questions visually with
 * no developer involvement. These rules reproduce the design's row styling
 * (border border-white/10 rounded-xl, px-6 py-5) on the native element.
 * ---------------------------------------------------------------------- */

.geefit-canvas .gf-faq .wp-block-details {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem; /* rounded-xl */
	overflow: hidden;
	margin: 0;
}

.geefit-canvas .gf-faq .wp-block-details summary {
	padding: 1.25rem 1.5rem; /* py-5 px-6 */
	color: #ffffff;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	list-style: none;
}

.geefit-canvas .gf-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.geefit-canvas .gf-faq .wp-block-details summary::after {
	content: "";
	float: right;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: 0.25rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 200ms ease;
}

.geefit-canvas .gf-faq .wp-block-details[open] summary::after {
	transform: rotate(-135deg);
}

.geefit-canvas .gf-faq .wp-block-details > *:not(summary) {
	padding: 0 1.5rem 1.25rem; /* px-6 pb-5 */
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.875rem;
	line-height: 1.625;
	margin: 0;
}

/* Light variant of the same accordion, for use on white sections. */
.geefit-canvas .gf-faq--light .wp-block-details {
	border-color: #e5e7eb;
}

.geefit-canvas .gf-faq--light .wp-block-details summary {
	color: #000000;
}

.geefit-canvas .gf-faq--light .wp-block-details > *:not(summary) {
	color: rgba(0, 0, 0, 0.8);
}

/* -------------------------------------------------------------------------
 * Personal Training package cards.
 *
 * The design sets the card border and the highlighted card's green background
 * with inline styles. A Group block only emits inline styles it has attributes
 * for, so both live here as classes instead.
 *
 * Declared at the end of the file deliberately: the package button uses px-6,
 * while the black/white block styles above set px-7 at the same specificity,
 * so this has to come later to win the cascade.
 * ---------------------------------------------------------------------- */

.geefit-canvas .gf-pkg,
.editor-styles-wrapper .gf-pkg {
	border: 2px solid rgb(229, 231, 235);
}

.geefit-canvas .gf-pkg--featured,
.editor-styles-wrapper .gf-pkg--featured {
	border: 0;
	background-color: rgb(106, 185, 68);
}

.geefit-canvas .gf-pkg-btn .wp-block-button,
.editor-styles-wrapper .gf-pkg-btn .wp-block-button {
	width: 100%;
}

.geefit-canvas .gf-pkg-btn .wp-block-button__link,
.editor-styles-wrapper .gf-pkg-btn .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* -------------------------------------------------------------------------
 * Small tick list.
 *
 * template-parts/check-list.php renders its rows at text-sm (0.875rem) with a
 * heavier stroke on the check mark (stroke-width 4), whereas the lists inside
 * section-checklist.php sit at text-[16px] with stroke-width 3. Stay Strong 50+
 * uses the check-list.php variant, so it needs its own size and icon.
 * ---------------------------------------------------------------------- */

.geefit-canvas .gf-ticklist--sm li,
.editor-styles-wrapper .gf-ticklist--sm li {
	font-size: 0.875rem;
}

.geefit-canvas .gf-ticklist--sm li::before,
.editor-styles-wrapper .gf-ticklist--sm li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
 * Green outlined pill.
 *
 * The "View Timetable" button on Home and Programs is bordered and lettered in
 * the brand green with px-8, not the white-on-dark outline used elsewhere:
 *
 *   px-8 py-3 rounded-full text-sm font-semibold border
 *   border-color: rgb(106,185,68); color: rgb(106,185,68); hover:bg-white/10
 *
 * Declared last so it beats is-style-geefit-outline, which sets a white border
 * at the same specificity.
 * ---------------------------------------------------------------------- */

.geefit-canvas .gf-btn-pill .wp-block-button__link,
.editor-styles-wrapper .gf-btn-pill .wp-block-button__link {
	background-color: transparent;
	color: rgb(106, 185, 68);
	border: 1px solid rgb(106, 185, 68);
	padding-left: 2rem;
	padding-right: 2rem;
}

.geefit-canvas .gf-btn-pill .wp-block-button__link:hover,
.editor-styles-wrapper .gf-btn-pill .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

/* -------------------------------------------------------------------------
 * About page: gallery tiles, black tick markers, qualification bullets.
 * ---------------------------------------------------------------------- */

/* Tile gradient. The design lays it in an empty div; drawn here so there is no
   empty decorative block in the editor. Caption sits above it via z-10. */
.geefit-canvas .gf-tile::after,
.editor-styles-wrapper .gf-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* from-black/80 via-black/20 to-transparent, upwards */
	background-image: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.8) 0%,
		rgba(0, 0, 0, 0.2) 50%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* "Our Promise" uses a black marker and text-black/80 at the default size. */
.geefit-canvas .gf-ticklist--black li,
.editor-styles-wrapper .gf-ticklist--black li {
	color: rgba(0, 0, 0, 0.8);
}

.geefit-canvas .gf-ticklist--black li::before,
.editor-styles-wrapper .gf-ticklist--black li::before {
	background-color: #000000;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Team qualification list: small green dots (w-1.5, gap-2, space-y-1). */
.geefit-canvas .gf-quals,
.editor-styles-wrapper .gf-quals {
	list-style: none;
	margin: 0;
	padding: 0;
}

.geefit-canvas .gf-quals li,
.editor-styles-wrapper .gf-quals li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: #000000;
}

.geefit-canvas .gf-quals li + li,
.editor-styles-wrapper .gf-quals li + li {
	margin-top: 0.25rem;
}

.geefit-canvas .gf-quals li::before,
.editor-styles-wrapper .gf-quals li::before {
	content: "";
	flex: 0 0 auto;
	width: 0.375rem;
	height: 0.375rem;
	margin-top: 0.375rem;
	border-radius: 9999px;
	background-color: rgb(106, 185, 68);
}

/* Team photos crop from the top (object-top), not the centre. */
.geefit-canvas .gf-img-top img,
.editor-styles-wrapper .gf-img-top img {
	object-position: top;
}

/* -------------------------------------------------------------------------
 * Full width buttons on small screens.
 *
 * The design puts `w-full sm:w-fit` on the home hero buttons and on the green
 * CTA band buttons: they fill the width on a phone and shrink to their content
 * from the sm breakpoint up. A core Button renders an inline-block anchor
 * inside a wrapper div, so neither fills on its own - measured at 375px the
 * hero buttons were 250px and 191px instead of the full column.
 *
 * The programme heroes do NOT need this: their wrapper is `flex flex-col`, so
 * the buttons already stretch. Only the `flex flex-wrap` wrappers carry it.
 * ---------------------------------------------------------------------- */

@media (max-width: 639px) {
	.geefit-canvas .gf-btn-fluid .wp-block-button,
	.editor-styles-wrapper .gf-btn-fluid .wp-block-button {
		width: 100%;
	}

	.geefit-canvas .gf-btn-fluid .wp-block-button__link,
	.editor-styles-wrapper .gf-btn-fluid .wp-block-button__link {
		display: block;
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Memberships comparison table.
 *
 * Built as a core Table block so the client can edit cells, add and remove
 * rows visually. Core's own table styles add a border to every cell, which the
 * design does not have, so they are cleared here and the design's own row
 * striping, black header and green link column are applied instead.
 *
 * Row striping matches the template: odd rows white, even rows grey.
 * ---------------------------------------------------------------------- */

.geefit-canvas .gf-compare table,
.editor-styles-wrapper .gf-compare table {
	width: 100%;
	font-size: 0.875rem;
	border-collapse: collapse;
}

.geefit-canvas .gf-compare th,
.geefit-canvas .gf-compare td,
.editor-styles-wrapper .gf-compare th,
.editor-styles-wrapper .gf-compare td {
	border: 0;
	padding: 1rem 1.5rem; /* px-6 py-4 */
	font-size: 1rem;
	text-align: left;
}

.geefit-canvas .gf-compare thead tr,
.editor-styles-wrapper .gf-compare thead tr {
	background-color: #000000;
	color: #ffffff;
}

.geefit-canvas .gf-compare th,
.editor-styles-wrapper .gf-compare th {
	font-family: Barlow, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.geefit-canvas .gf-compare tbody tr:nth-child(odd),
.editor-styles-wrapper .gf-compare tbody tr:nth-child(odd) {
	background-color: #ffffff;
}

.geefit-canvas .gf-compare tbody tr:nth-child(even),
.editor-styles-wrapper .gf-compare tbody tr:nth-child(even) {
	background-color: #f3f4f6; /* bg-gray-100 */
}

.geefit-canvas .gf-compare td:first-child,
.editor-styles-wrapper .gf-compare td:first-child {
	color: #000000;
}

.geefit-canvas .gf-compare td:last-child,
.editor-styles-wrapper .gf-compare td:last-child {
	font-weight: 600;
	color: rgb(106, 185, 68);
}

.geefit-canvas .gf-compare td a,
.editor-styles-wrapper .gf-compare td a {
	color: inherit;
	text-decoration: none;
}

.geefit-canvas .gf-compare td a:hover,
.editor-styles-wrapper .gf-compare td a:hover {
	text-decoration: underline;
}

/* Contact page buttons: px-8 py-4, and the hours button is font-bold. */
.geefit-canvas .gf-btn-lg .wp-block-button__link,
.editor-styles-wrapper .gf-btn-lg .wp-block-button__link {
	padding: 1rem 2rem;
}

.geefit-canvas .gf-btn-bold .wp-block-button__link,
.editor-styles-wrapper .gf-btn-bold .wp-block-button__link {
	font-weight: 700;
	font-family: Barlow, sans-serif;
}

/* -------------------------------------------------------------------------
 * Success Stories: transformation cards and milestone tiles.
 *
 * The design sets these colours with inline styles. A block only emits inline
 * styles it has attributes for, so they live here as classes instead.
 * ---------------------------------------------------------------------- */

/*
 * Transformation photo pane.
 *
 * The pane used to be a fixed h-52 window with an object-cover photo, which
 * cropped the square before/after collages the client uploads. It now takes the
 * photo's own height so the whole image shows, and only falls back to a fixed
 * height while a card has no photo yet.
 *
 * The two ways a photo can land here are both covered: a real Image block (what
 * the converter writes) and the Group block's own background image (what the
 * editor offers when you style the pane directly).
 */
.geefit-canvas .gf-photo-pane,
.editor-styles-wrapper .gf-photo-pane {
	min-height: 13rem; /* h-52 - the placeholder height, kept for empty cards. */
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.geefit-canvas .gf-photo-pane figure,
.editor-styles-wrapper .gf-photo-pane figure {
	display: block;
	width: 100%;
	margin: 0;
}

.geefit-canvas .gf-photo-pane img,
.editor-styles-wrapper .gf-photo-pane img {
	display: block;
	width: 100%;
	height: auto;
}

.geefit-canvas .gf-duration,
.editor-styles-wrapper .gf-duration {
	background-color: rgb(106, 185, 68);
	color: #ffffff;
}

/* Results list: small green dots (w-1.5, gap-2, space-y-1.5). */
.geefit-canvas .gf-wins,
.editor-styles-wrapper .gf-wins {
	list-style: none;
	margin: 0;
	padding: 0;
}

.geefit-canvas .gf-wins li,
.editor-styles-wrapper .gf-wins li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #000000;
	font-size: 1rem;
}

.geefit-canvas .gf-wins li + li,
.editor-styles-wrapper .gf-wins li + li {
	margin-top: 0.375rem;
}

.geefit-canvas .gf-wins li::before,
.editor-styles-wrapper .gf-wins li::before {
	content: "";
	flex: 0 0 auto;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background-color: rgb(106, 185, 68);
}

.geefit-canvas .gf-pullquote,
.editor-styles-wrapper .gf-pullquote {
	border-left-width: 2px;
	border-left-style: solid;
	border-color: rgb(106, 185, 68);
}

.geefit-canvas .gf-milestone-icon,
.editor-styles-wrapper .gf-milestone-icon {
	background-color: rgba(106, 185, 68, 0.125);
}

/* -------------------------------------------------------------------------
 * Mobile hero with the heading over the image.
 *
 * Client request: on mobile the image took the top of the screen and the
 * heading began underneath it, pushing the real content well down the page.
 * This lifts the headline onto the image over a soft dark gradient, keeps the
 * descriptive paragraphs below on black, and keeps the whole thing compact.
 *
 * Desktop is untouched - these rules only apply inside the mobile variant.
 * ---------------------------------------------------------------------- */

.geefit-canvas .gf-hero-m,
.editor-styles-wrapper .gf-hero-m {
	position: relative;
}

/*
 * How far down the image the headline starts.
 *
 * A fixed panel height does NOT work here. The copy sits at the bottom, so the
 * headline's start position becomes a function of how many lines it runs to:
 * with a 390px panel the six-line Body Recomp heading began at 40% while the
 * three-line home page heading began at 65%. Same rule, wildly different
 * result - the very inconsistency the client raised.
 *
 * Instead the panel grows with its content and the headline is pushed down by a
 * fixed offset, so every page shows the same band of photograph above the text
 * and every hero stays proportionate to its own heading.
 *
 *   panel height = offset + gradient ramp + heading + bottom padding
 *
 * The offset lives on the copy (below) rather than here.
 */
.geefit-canvas .gf-hero-m__inner,
.editor-styles-wrapper .gf-hero-m__inner {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* Floor for a very short heading; longer ones simply grow past it. */
	min-height: 280px;
	overflow: hidden;
}

/* The photograph fills the panel behind the copy. */
.geefit-canvas .gf-hero-m__img,
.editor-styles-wrapper .gf-hero-m__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/*
 * The copy sits in normal flow at the bottom, so a long headline makes the
 * panel taller rather than spilling over the image. The gradient lives on this
 * element, which keeps it tied to the text it has to make readable.
 */
.geefit-canvas .gf-hero-m__copy,
.editor-styles-wrapper .gf-hero-m__copy {
	position: relative;
	width: 100%;
	/*
	 * Clear photograph above the headline, identical on every page. This plus
	 * the 4rem gradient ramp below puts the first line of the heading 159px
	 * down the image whether the heading runs to three lines or six.
	 *
	 * 95px keeps the tallest hero (Body Recomp, six lines) at 48% of a phone
	 * screen. At 111px it hit exactly 50%, which brushes the "not half the
	 * screen" limit.
	 */
	margin-top: 95px;
	padding: 4rem 1rem 1.5rem;
	background-image: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.55) 45%,
		rgba(0, 0, 0, 0) 100%
	);
}

@media (min-width: 640px) {
	.geefit-canvas .gf-hero-m__copy,
	.editor-styles-wrapper .gf-hero-m__copy {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/*
 * Consistent, compact heading leading across every mobile hero.
 *
 * The templates were not consistent: the home page asks for `leading-tighter`,
 * which was never compiled into the Tailwind build and so fell back to the
 * browser default, while the programme heroes use `leading-tight` (1.25). Two
 * pages therefore set their hero headings differently. Setting it here fixes
 * the value in one place, so every mobile hero matches whatever the markup says.
 */
/* The big green statement line - the page h1. */
.geefit-canvas .gf-hero-m__copy h1,
.editor-styles-wrapper .gf-hero-m__copy h1 {
	line-height: 1.05;
}

/* The smaller supporting headline underneath it. */
.geefit-canvas .gf-hero-m__copy h2,
.editor-styles-wrapper .gf-hero-m__copy h2 {
	line-height: 1.3;
}

/* The panel's own bottom padding sets the gap under the headline block. */
.geefit-canvas .gf-hero-m__copy > *:last-child,
.editor-styles-wrapper .gf-hero-m__copy > *:last-child {
	margin-bottom: 0;
}

/*
 * Per-page crop control, so the headline never lands on a face. Add one of
 * these to the hero and the photograph shifts within its frame.
 */
.geefit-canvas .gf-hero-m--top .gf-hero-m__img img,
.editor-styles-wrapper .gf-hero-m--top .gf-hero-m__img img {
	object-position: top;
}

.geefit-canvas .gf-hero-m--bottom .gf-hero-m__img img,
.editor-styles-wrapper .gf-hero-m--bottom .gf-hero-m__img img {
	object-position: bottom;
}

.geefit-canvas .gf-hero-m--left .gf-hero-m__img img,
.editor-styles-wrapper .gf-hero-m--left .gf-hero-m__img img {
	object-position: left center;
}

.geefit-canvas .gf-hero-m--right .gf-hero-m__img img,
.editor-styles-wrapper .gf-hero-m--right .gf-hero-m__img img {
	object-position: right center;
}