/**
 * Delve Site Manager — template stylesheet.
 *
 * Polish layer applied to any post that has the `dd-tpl` wrapper class
 * (added on the outer group of each template in templates/library/).
 *
 * All colours and type sizes route through the brand-token CSS vars emitted
 * by includes/dd-brand-tokens.php so a brand change in admin instantly
 * re-flows every template instance.
 *
 * Naming: `.dd-tpl` is the base, `.dd-tpl-<section>` scopes per section,
 * `.dd-tpl--<variant>` is template-specific overrides.
 */

/* ---------- FRONT-END BASE RESET ----------
 *
 * `single-blank.php` emits no theme styles, so without these the body has
 * the browser default 8px margin, images can overflow, etc.
 *
 * Scoped to the body element. Only loads on Site Manager CPT pages because
 * the enqueue is gated server-side, so it's safe to apply unconditionally.
 */
body {
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
}

/* ---------- FLOW LAYOUT MARGIN OVERRIDE ----------
 *
 * WP core injects `:root :where(.is-layout-flow) > * { margin-block-start: 1.2rem; }`
 * via global styles, which adds unwanted top spacing to every direct child of a
 * flow-layout container on our pages. Our templates handle their own rhythm via
 * `.dd-stack-*` and section padding, so flatten the WP default to 0.
 *
 * Same selector + specificity as core's rule, loaded after — cascade order wins.
 */
:root :where(.is-layout-flow) > * {
	margin-block-start: 0;
}

/* ---------- EDITOR CANVAS WIDTH OVERRIDE ----------
 *
 * The block editor constrains the canvas content to a narrow width by
 * default (driven by `--wp--style--global--content-size` from theme.json,
 * usually 620–760px). That makes `alignfull` sections look fake — they
 * only span the canvas, not the viewport — and the editor view doesn't
 * match what visitors actually see on the front-end.
 *
 * SCOPING — these rules apply to our 4 CPTs only. Two layers:
 *   1. The CSS file is only enqueued when editing one of our CPTs (see
 *      `dd_templates_enqueue_styles_editor` in includes/dd-templates.php).
 *   2. Outer-admin selectors are also gated by `body.dd-tpl-cpt`, added
 *      via `admin_body_class` filter on those same CPTs.
 *
 * The iframe canvas body itself doesn't inherit `body.dd-tpl-cpt`, so the
 * iframe-only selectors below rely on a content gate: they only fire when
 * a `.dd-tpl` wrapper is actually present in the canvas. That way the file
 * can be enqueued on every Site Manager CPT (some of which are also used
 * for non-template content) without the unconstrain rules hijacking pasted
 * GB markup, plain Gutenberg posts, etc.
 */

/* --- Iframe canvas (inside the block editor's iframe). Gated by `.dd-tpl` presence. --- */

:where(.editor-styles-wrapper:has(.dd-tpl)),
:where(body.block-editor-iframe__body:has(.dd-tpl)) {
	--wp--style--global--content-size: 1280px;
	--wp--style--global--wide-size: 1280px;
	max-width: none !important;
}

:where(.editor-styles-wrapper:has(.dd-tpl)) :where(.is-root-container),
:where(.editor-styles-wrapper:has(.dd-tpl)) :where(.wp-site-blocks),
:where(.editor-styles-wrapper:has(.dd-tpl)) :where(.block-editor-block-list__layout) {
	max-width: none !important;
}

/* Direct children of the root container (top-level blocks) expand to the
 * full canvas width so alignfull renders edge-to-edge just like the
 * front-end. Inner constrained groups still apply their own contentSize
 * via the inline `wp-container-X` rule WP generates. */
:where(.editor-styles-wrapper:has(.dd-tpl)) :where(.is-root-container) > :not(.alignleft):not(.alignright) {
	max-width: none;
}

/* --- Outer admin frame (around the canvas). Scoped to our CPTs via body class. --- */

body.dd-tpl-cpt :where(.edit-post-visual-editor__content-area),
body.dd-tpl-cpt :where(.editor-visual-editor),
body.dd-tpl-cpt :where(.editor-visual-editor__post-title-wrapper),
body.dd-tpl-cpt :where(.interface-interface-skeleton__content) {
	max-width: none !important;
}

/* ---------- BASE TYPOGRAPHY + RHYTHM ---------- */

.dd-tpl {
	color: var(--wp--preset--color--delve-gray-900, #0f172a);
	font-family: var(--delve-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.6;

	/* The OUTER template wrapper itself spans full viewport / canvas width.
	 * The contentSize set on this group in JSON (1080px) is overridden so
	 * sections inside can run edge-to-edge or set their own widths via the
	 * block style variations registered below. Inner sections still respect
	 * their individual contentSize / variation classes. */
	max-width: none !important;

	/* Override the WP global content-size (defaults to ~646px) for content
	 * under our templates. Sections with their own explicit contentSize win
	 * via the more-specific `wp-container-X` selector WP generates inline,
	 * so this only affects content that didn't declare its own width.
	 *
	 * Targets the rule:
	 *   .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	 *     max-width: var(--wp--style--global--content-size);
	 *   }
	 */
	--wp--style--global--content-size: 1080px;
	--wp--style--global--wide-size: 1280px;
}

/* Belt-and-braces: also nuke the inherited max-width on direct children of
 * any constrained layout sitting inside `.dd-tpl`, so a stray block without
 * its own layout doesn't get clamped to the (now overridden) global.
 *
 * Higher specificity than `:where(...)` so this wins regardless of CSS
 * source order. Each section's own `wp-container-X` selector still beats
 * this when contentSize is explicitly set on the section.
 */
.dd-tpl .is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull) {
	max-width: 1080px;
}

/* ---------- SECTION WIDTH VARIATIONS ----------
 *
 * Block style variations registered in includes/dd-templates.php for
 * `core/group`. Authors pick a width from the Styles panel; the resulting
 * `is-style-dd-w-*` class overrides the constrained contentSize.
 *
 * Specificity (0,3,0) beats WP's inline `wp-container-X` rule (0,2,0) and
 * the `.is-layout-constrained` fallback above, so these win without
 * `!important` regardless of source order.
 */
.wp-block-group.is-style-dd-w-narrow.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull) {
	max-width: 640px;
}

.wp-block-group.is-style-dd-w-content.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull) {
	max-width: 760px;
}

.wp-block-group.is-style-dd-w-wide.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull) {
	max-width: 1080px;
}

.wp-block-group.is-style-dd-w-extra-wide.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull) {
	max-width: 1280px;
}

.dd-tpl :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--delve-gray-950, #020617);
	font-family: var(--delve-font-heading, inherit);
	letter-spacing: -0.015em;
	line-height: 1.15;
}

.dd-tpl :where(h1) {
	letter-spacing: -0.025em;
	line-height: 1.05;
}

.dd-tpl :where(h2) {
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.dd-tpl :where(p) {
	color: var(--wp--preset--color--delve-gray-700, #334155);
}

.dd-tpl :where(a) {
	text-decoration: none;
	transition: color 0.15s ease;
}

.dd-tpl :where(a):hover {
	color: var(--wp--preset--color--delve-primary, #0d9488);
}

/* ---------- SECTION RHYTHM ---------- */

.dd-tpl > .wp-block-group,
.dd-tpl > main > .wp-block-group {
	padding-top: clamp(3rem, 6vw, 6rem);
	padding-bottom: clamp(3rem, 6vw, 6rem);
}

.dd-tpl .dd-tpl-strip {
	padding-top: 0.75rem !important;
	padding-bottom: 0.75rem !important;
}

/* ---------- HERO ---------- */

.dd-tpl-hero {
	min-height: clamp(420px, 60vh, 640px);
}

.dd-tpl-hero :where(h1) {
	color: #ffffff;
	max-width: 24ch;
	margin-inline: auto;
	font-weight: 700;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
}

.dd-tpl-hero :where(p) {
	color: rgba(255, 255, 255, 0.9);
	max-width: 60ch;
	margin-inline: auto;
}

.dd-tpl-hero .wp-block-buttons {
	margin-top: 1.5rem;
}

/* Light hero variant (no background image) */
.dd-tpl-hero--light {
	min-height: auto;
}

.dd-tpl-hero--light::before {
	display: none;
}

.dd-tpl-hero--light :where(h1) {
	color: var(--wp--preset--color--delve-gray-950, #020617);
}

.dd-tpl-hero--light :where(p) {
	color: var(--wp--preset--color--delve-gray-700, #334155);
}

/* ---------- TRUST STRIP ---------- */

.dd-tpl-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem 2.5rem;
	background-color: var(--wp--preset--color--delve-gray-50, #f8fafc);
	border-block: 1px solid var(--wp--preset--color--delve-gray-100, #f1f5f9);
}

.dd-tpl-trust > * {
	margin: 0 !important;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--delve-gray-700, #334155);
	font-weight: 500;
}

.dd-tpl-trust strong {
	color: var(--wp--preset--color--delve-gray-950, #020617);
	font-weight: 700;
}

/* ---------- BUTTONS ----------
 *
 * Brand buttons render through block-style variations registered for
 * `core/button` in includes/dd-templates.php (`is-style-delve-{main,alt,text}`).
 * The actual padding / radius / colour / hover rules are emitted dynamically
 * by `delve_dd_brand_build_stylesheet_css()` so they re-skin with the brand
 * tokens — DO NOT add hardcoded button styles here.
 *
 * The generic fallback below only applies to buttons authored without a
 * brand variation (e.g. legacy posts) so they don't look completely
 * unstyled. New templates must use one of the brand variations.
 */
.dd-tpl .wp-block-button:not(.is-style-delve-main):not(.is-style-delve-alt):not(.is-style-delve-text) .wp-block-button__link {
	font-weight: 600;
	letter-spacing: 0.005em;
	border-radius: var(--delve-radius-md, 8px);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.dd-tpl .wp-block-button:not(.is-style-delve-main):not(.is-style-delve-alt):not(.is-style-delve-text) .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

/* ---------- SPACING + RADIUS UTILITIES ----------
 *
 * Token-backed utility classes templates apply via `className` (Gutenberg
 * "Additional CSS class(es)" or the className attribute in block markup).
 * Replaces inline `style.spacing.padding` / `style.border.radius` so the
 * same template renders with the receiving site's spacing/radius scale.
 *
 * Naming convention: `dd-{property}-{size}`. Sizes map to brand-token keys.
 */

/* Vertical (block-direction) section padding. */
.dd-pad-block-2xs { padding-block: var(--delve-space-2xs, 0.25rem); }
.dd-pad-block-xs  { padding-block: var(--delve-space-xs, 0.5rem); }
.dd-pad-block-sm  { padding-block: var(--delve-space-sm, 1rem); }
.dd-pad-block-md  { padding-block: var(--delve-space-md, 1.5rem); }
.dd-pad-block-lg  { padding-block: var(--delve-space-lg, 3rem); }
.dd-pad-block-xl  { padding-block: var(--delve-space-xl, 4rem); }
.dd-pad-block-2xl { padding-block: var(--delve-space-2xl, 6rem); }

/* Horizontal (inline-direction) padding — useful for capping section gutters. */
.dd-pad-x-2xs { padding-inline: var(--delve-space-2xs, 0.25rem); }
.dd-pad-x-xs  { padding-inline: var(--delve-space-xs, 0.5rem); }
.dd-pad-x-sm  { padding-inline: var(--delve-space-sm, 1rem); }
.dd-pad-x-md  { padding-inline: var(--delve-space-md, 1.5rem); }
.dd-pad-x-lg  { padding-inline: var(--delve-space-lg, 3rem); }

/* All-sides padding (for cards / CTAs / inner groups). */
.dd-pad-sm { padding: var(--delve-space-sm, 1rem); }
.dd-pad-md { padding: var(--delve-space-md, 1.5rem); }
.dd-pad-lg { padding: var(--delve-space-lg, 3rem); }
.dd-pad-xl { padding: var(--delve-space-xl, 4rem); }

/* Vertical rhythm between direct children — `.dd-stack-md > h2 + p` etc. */
.dd-stack-xs > * + * { margin-block-start: var(--delve-space-xs, 0.5rem); }
.dd-stack-sm > * + * { margin-block-start: var(--delve-space-sm, 1rem); }
.dd-stack-md > * + * { margin-block-start: var(--delve-space-md, 1.5rem); }
.dd-stack-lg > * + * { margin-block-start: var(--delve-space-lg, 3rem); }

/* Border radius scale. */
.dd-radius-none { border-radius: var(--delve-radius-none, 0); }
.dd-radius-sm   { border-radius: var(--delve-radius-sm, 4px); }
.dd-radius-md   { border-radius: var(--delve-radius-md, 8px); }
.dd-radius-lg   { border-radius: var(--delve-radius-lg, 14px); }
.dd-radius-pill { border-radius: var(--delve-radius-pill, 999px); }

/* ---------- SECTION HEADERS ---------- */

.dd-tpl .dd-tpl-section-eyebrow {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--delve-primary, #0d9488);
	margin-bottom: 1rem;
}

/* ---------- FEATURE / SERVICE GRID ---------- */

.dd-tpl-feature-grid .wp-block-column {
	padding: 2rem 1.5rem;
	background-color: #ffffff;
	border: 1px solid var(--wp--preset--color--delve-gray-100, #f1f5f9);
	border-radius: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dd-tpl-feature-grid .wp-block-column:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
	border-color: var(--wp--preset--color--delve-gray-200, #e2e8f0);
}

.dd-tpl-feature-grid .wp-block-column :where(h3) {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

.dd-tpl-feature-grid .wp-block-column :where(p) {
	margin: 0;
	font-size: 0.9375rem;
}

.dd-tpl-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--delve-primary, #0d9488) 12%,
		transparent
	);
	color: var(--wp--preset--color--delve-primary, #0d9488);
	font-weight: 700;
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

/* ---------- PROJECT / SHOWCASE GRID ---------- */

.dd-tpl-showcase-grid .wp-block-column {
	background-color: #ffffff;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--delve-gray-100, #f1f5f9);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dd-tpl-showcase-grid .wp-block-column:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
}

.dd-tpl-showcase-grid .wp-block-image {
	margin: 0 !important;
}

.dd-tpl-showcase-grid .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.dd-tpl-showcase-grid .dd-tpl-showcase-body {
	padding: 1.25rem 1.5rem 1.5rem;
}

.dd-tpl-showcase-grid .dd-tpl-showcase-body :where(h3) {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.dd-tpl-showcase-grid .dd-tpl-showcase-body :where(p) {
	margin: 0;
	font-size: 0.9375rem;
}

/* ---------- ALTERNATING IMAGE / TEXT ROWS ---------- */

.dd-tpl-alt-row {
	gap: clamp(1.5rem, 4vw, 4rem) !important;
}

.dd-tpl-alt-row .wp-block-image {
	margin: 0;
}

.dd-tpl-alt-row .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.dd-tpl-alt-row :where(h3) {
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.dd-tpl-alt-row :where(p) {
	margin: 0;
}

/* ---------- NUMBERED STEPS ---------- */

.dd-tpl-steps {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
	counter-reset: dd-step;
}

@media (min-width: 782px) {
	.dd-tpl-steps {
		grid-template-columns: repeat(4, 1fr);
		gap: 2rem;
	}
}

.dd-tpl-step {
	position: relative;
	padding-top: 4.5rem;
}

.dd-tpl-step::before {
	counter-increment: dd-step;
	content: counter(dd-step, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background-color: var(--wp--preset--color--delve-primary, #0d9488);
	color: #ffffff;
	font-weight: 700;
	font-size: 1.125rem;
	border-radius: 12px;
	box-shadow: 0 6px 16px rgba(13, 148, 136, 0.25);
}

.dd-tpl-step :where(h3) {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.dd-tpl-step :where(p) {
	margin: 0;
	font-size: 0.9375rem;
}

/* ---------- FAQ ACCORDION ---------- */

.dd-tpl-faq {
	display: grid;
	gap: 0.75rem;
	max-width: 760px;
	margin-inline: auto;
}

.dd-tpl-faq .wp-block-details {
	background-color: #ffffff;
	border: 1px solid var(--wp--preset--color--delve-gray-100, #f1f5f9);
	border-radius: 10px;
	padding: 0;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dd-tpl-faq .wp-block-details:hover {
	border-color: var(--wp--preset--color--delve-gray-200, #e2e8f0);
}

.dd-tpl-faq .wp-block-details[open] {
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
	border-color: var(--wp--preset--color--delve-gray-200, #e2e8f0);
}

.dd-tpl-faq .wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	padding: 1.125rem 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--delve-gray-950, #020617);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.dd-tpl-faq .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.dd-tpl-faq .wp-block-details > summary::after {
	content: "+";
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--delve-primary, #0d9488);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.2s ease;
}

.dd-tpl-faq .wp-block-details[open] > summary::after {
	transform: rotate(45deg);
}

.dd-tpl-faq .wp-block-details > :not(summary) {
	padding: 0 1.25rem 1.25rem;
	margin: 0;
}

.dd-tpl-faq .wp-block-details > :not(summary):where(p) {
	color: var(--wp--preset--color--delve-gray-700, #334155);
	line-height: 1.7;
}

/* ---------- LEAD FORM AREA ---------- */

.dd-tpl-cta {
	position: relative;
	border-radius: 16px;
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--delve-light-bg, #ecfdf5) 0%,
		#ffffff 100%
	);
	border: 1px solid var(--wp--preset--color--delve-gray-100, #f1f5f9);
}

.dd-tpl-cta-form {
	max-width: 560px;
	margin-inline: auto;
}

.dd-tpl-cta-form > * {
	margin-block: 0;
}

/* ---------- BULLETS WITH BOLD OPENERS ---------- */

.dd-tpl-bullet-list {
	list-style: none;
	padding: 0 !important;
	display: grid;
	gap: 1rem;
}

.dd-tpl-bullet-list li {
	position: relative;
	padding-left: 2rem;
	line-height: 1.7;
}

.dd-tpl-bullet-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--delve-primary, #0d9488) 18%,
		transparent
	);
	background-image: radial-gradient(
		circle,
		var(--wp--preset--color--delve-primary, #0d9488) 0 30%,
		transparent 32%
	);
}

/* ---------- SECTION DIVIDERS ---------- */

.dd-tpl-section-pale {
	background-color: var(--wp--preset--color--delve-gray-50, #f8fafc);
}

.dd-tpl-section-light {
	background-color: var(--wp--preset--color--delve-light-bg, #ecfdf5);
}

/* ---------- RESPONSIVE COLUMN GAPS ---------- */

.dd-tpl .wp-block-columns {
	gap: clamp(1rem, 2.5vw, 2rem);
}

@media (max-width: 781px) {
	.dd-tpl-feature-grid .wp-block-column,
	.dd-tpl-showcase-grid .wp-block-column {
		margin-bottom: 1rem;
	}
}

/* ---------- DELVE BLOCK POLISH ---------- */

.dd-tpl .wp-block-dd-star-rating {
	display: flex;
	justify-content: center;
}

.dd-tpl .wp-block-dd-reviews-widget {
	max-width: 1080px;
	margin-inline: auto;
}

/* ============================================================
 * PREMIUM SERVICE LANDING (templates/library/premium-service-landing.php)
 * ============================================================
 *
 * Pixel-perfect rebuild of the long-form home-improvement landing pattern.
 * The template uses GenerateBlocks v2 elements for layout primitives — these
 * rules cover the bits that don't fit cleanly inline:
 *
 *   - Section-level responsive padding (5 breakpoints)
 *   - Hero / final-CTA pinned-padding overrides
 *   - Gold star icons in the social-proof bar
 *   - Radial brand glow on the dark final CTA
 *   - Primary CTA hover state
 *
 * Everything else (colours, sizes, gaps, grid columns, card styling) is
 * inline on the GenerateBlocks block via `styles` + `css` so the layout
 * is self-contained when the post markup is exported.
 */

/* Sections are full-bleed (so background colours / images stretch edge to
 * edge), but their CONTENT is capped at 1380px wide. The trick: padding-
 * inline scales up beyond the 50px minimum on screens wider than ~1480px,
 * so content never exceeds 1380px while gutters remain comfortable. The
 * narrower breakpoints below revert to fixed gutters once the formula
 * doesn't matter.
 */
.dd-tpl--premium-service .dd-prem-section {
	padding-block: 100px;
	padding-inline: max(50px, calc((100% - 1380px) / 2));
}

@media (max-width: 1119px) {
	.dd-tpl--premium-service .dd-prem-section {
		padding-block: 70px;
		padding-inline: 35px;
	}
}

@media (max-width: 1023px) {
	.dd-tpl--premium-service .dd-prem-section {
		padding-block: 60px;
		padding-inline: 30px;
	}
}

@media (max-width: 767px) {
	.dd-tpl--premium-service .dd-prem-section {
		padding-block: 50px;
		padding-inline: 25px;
	}
}

@media (max-width: 479px) {
	.dd-tpl--premium-service .dd-prem-section {
		padding-inline: 20px;
	}
}

/* Hero pins to the spec's exact 40/30/80/30 padding regardless of breakpoint
 * — overrides the .dd-prem-section defaults above. */
.dd-tpl--premium-service .dd-prem-hero {
	padding: 40px 30px 80px 30px;
}

@media (max-width: 767px) {
	.dd-tpl--premium-service .dd-prem-hero {
		padding: 40px 15px;
	}
}

/* Star bar overrides: no section padding, just the inline 20px from the
 * block. Keeps the strip thin. */
.dd-tpl--premium-service .dd-prem-stars-bar {
	padding-block: 20px !important;
	padding-inline: 20px !important;
}

/* Gold stars in the social-proof bar. Hardcoded gold (#D69D2A) is universal
 * — it doesn't follow brand. Kept here rather than inline to keep the
 * template lint-clean of bare hex values. */
.dd-tpl--premium-service .dd-prem-stars {
	display: inline-flex;
	gap: 2px;
	color: #D69D2A;
	line-height: 0;
}

.dd-tpl--premium-service .dd-prem-stars svg {
	fill: currentColor;
}

/* Final CTA: radial brand-coloured glow above and below the headline.
 * `color-mix` swaps with the brand primary so it follows the brand. */
.dd-tpl--premium-service .dd-prem-final-cta::before,
.dd-tpl--premium-service .dd-prem-final-cta::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--wp--preset--color--delve-primary, #5d44a2) 40%, transparent) 0%,
		transparent 70%
	);
	z-index: 1;
	pointer-events: none;
}

.dd-tpl--premium-service .dd-prem-final-cta::before {
	top: -20%;
	height: 40%;
	filter: blur(30px);
}

.dd-tpl--premium-service .dd-prem-final-cta::after {
	bottom: -30%;
	height: 50%;
	filter: blur(40px);
}

/* Final-CTA padding is responsive too — drop it to ~80px on mobile so the
 * 70vh min-height does the work instead of fixed 140px padding. */
@media (max-width: 767px) {
	.dd-tpl--premium-service .dd-prem-final-cta {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}
}

/* Primary CTA hover state. Inline `css` field on the GB text block isn't
 * meant to carry hover/transition rules, so they live here instead. */
.dd-tpl--premium-service .dd-prem-cta-button {
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.dd-tpl--premium-service .dd-prem-cta-button:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--wp--preset--color--delve-secondary, #4a308f) 30%, transparent);
	color: #ffffff;
}

/* Final-CTA button is sized up 1.2× per the spec. */
.dd-tpl--premium-service .dd-prem-cta-button--lg {
	transform: scale(1.2);
	transform-origin: center;
	margin-block: 12px;
}

.dd-tpl--premium-service .dd-prem-cta-button--lg:hover {
	transform: scale(1.2) translateY(-1px);
}

/* ============================================================
 * FITNESS STUDIO LANDING (templates/library/fitness-studio-landing.php)
 * ============================================================
 *
 * Dark-theme PT/fitness landing page. Layout primitives are GenerateBlocks
 * v2; this block covers the bits that don't fit cleanly inline AND carries
 * the dark-theme defaults so the page renders correctly even if the brand
 * stylesheet hasn't been enqueued yet (e.g. inside the editor iframe, or
 * before the admin saves brand tokens for the first time).
 *
 *   - Variant-wide dark theme (root bg + default text colours)
 *   - Per-section bg defaults — `.dd-fs-section` and `.dd-fs-section--alt`,
 *     scoped under `.dd-tpl--fitness-studio` so they win specificity over
 *     the GB-emitted `.gb-element-*` rules and provide hex fallback values
 *     the template markup itself can't carry (lint forbids non-white/black
 *     hex in templates to keep them brand-portable).
 *   - Skewed primary CTA shape (E2W aesthetic, brand-coloured fill)
 *   - Card hover lift on solution / service / process grids
 *   - GB Pro accordion open-state highlight
 *   - Final-CTA radial brand glow
 *   - Image-placeholder visual (gray dashed box where authors swap in real
 *     images at edit time)
 *   - Mobile grid collapses (4-col → 2 → 1, 3-col → 2 → 1, 2-col → 1)
 *
 * Hex fallbacks inside `var()` use Tailwind slate values — slate-500 is the
 * default `neutralSeed`, so the fallback ladder mirrors what the brand
 * stylesheet would emit for a fresh install.
 */

.dd-tpl--fitness-studio {
	background-color: var(--delve-gray-950, #020617);
	color: #ffffff;
}

.dd-tpl--fitness-studio :where(p, li) {
	color: var(--delve-gray-300, #cbd5e1);
}

.dd-tpl--fitness-studio :where(h1, h2, h3, h4, h5, h6) {
	color: #ffffff;
}

/* Section bg defaults. Specificity (0,2,1) beats GB's auto-generated
 * `.gb-element-*` rule (0,1,0) so these win regardless of source order
 * and provide a working fallback when the brand stylesheet is absent. */
.dd-tpl--fitness-studio .dd-fs-section {
	background-color: var(--delve-gray-950, #020617);
}

.dd-tpl--fitness-studio .dd-fs-section--alt {
	background-color: var(--delve-gray-900, #0f172a);
}

/* Skewed CTA — preserves the E2W shape but the colour comes from
 * delve-primary so it follows the brand. The label counter-skews so it
 * stays readable while the box is angled. */
.dd-fs-btn {
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	transform: skew(-10deg);
}

.dd-fs-btn:hover {
	background-color: var(--delve-gray-800, #1e293b) !important;
	color: #ffffff !important;
	transform: skew(-10deg) translateY(-2px);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--delve-brand-primary, #0d9488) 25%, transparent);
}

.dd-fs-btn .dd-fs-btn-label {
	display: inline-block;
	transform: skew(10deg);
}

/* Card hover lift on solution / service / process grids. */
.dd-fs-card {
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.dd-fs-card:hover {
	border-color: var(--delve-brand-primary, #0d9488) !important;
	transform: translateY(-3px);
}

/* Card bg defaults — same specificity reasoning as the section bg block
 * above. Solution / process cards sit on .dd-fs-section (gray-950) and
 * elevate to gray-900; service cards sit on .dd-fs-section (gray-950) and
 * elevate to gray-800 for a bit more pop on the 8-card grid. */
.dd-tpl--fitness-studio .dd-fs-card {
	background-color: var(--delve-gray-900, #0f172a);
	border: 1px solid var(--delve-gray-800, #1e293b);
}

.dd-tpl--fitness-studio .dd-fs-section .dd-fs-card.dd-fs-card--svc {
	background-color: var(--delve-gray-800, #1e293b);
	border-color: var(--delve-gray-700, #334155);
}

/* Eyebrow accent: 30×2 horizontal bar before/after the eyebrow text. */
.dd-fs-eyebrow-line {
	display: inline-block;
	width: 30px;
	height: 2px;
	background-color: var(--delve-brand-primary, #0d9488);
	vertical-align: middle;
	flex-shrink: 0;
}

/* Image placeholder — replace at edit time by swapping the wrapping
 * generateblocks/element for a generateblocks/media block. The dashed
 * border + gray fill makes it obvious during authoring that this slot
 * needs a real image before the page goes live. */
.dd-fs-img-placeholder {
	background-color: var(--delve-gray-800, #1e293b);
	border: 1px dashed var(--delve-gray-700, #334155);
	color: var(--delve-gray-500, #64748b);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	font-size: 0.85rem;
	text-align: center;
	padding: 1rem;
}

/* Final-CTA radial brand glow. Same trick as the premium-service template
 * — color-mix swaps with delve-primary so the glow follows the brand. */
.dd-tpl--fitness-studio .dd-fs-final-cta {
	position: relative;
	overflow: hidden;
}

.dd-tpl--fitness-studio .dd-fs-final-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--delve-brand-primary, #0d9488) 18%, transparent) 0%,
		transparent 60%
	);
	pointer-events: none;
	z-index: 0;
}

.dd-tpl--fitness-studio .dd-fs-final-cta > * {
	position: relative;
	z-index: 1;
}

/* FAQ accordion (generateblocks-pro/accordion) polish — primary-colour
 * highlight on hover and on the currently-open toggle. The GB Pro JS adds
 * `gb-block-is-current` to the active toggle. */
.dd-tpl--fitness-studio .gb-accordion__toggle {
	transition: color 0.2s ease;
}

.dd-tpl--fitness-studio .gb-accordion__toggle:is(:hover, :focus, .gb-block-is-current) {
	color: var(--delve-brand-primary, #0d9488) !important;
}

.dd-tpl--fitness-studio .gb-accordion__toggle-icon {
	transition: transform 0.2s ease;
	color: var(--delve-brand-primary, #0d9488);
}

/* Mobile grid collapses. Inline grid-template-columns on the GB element
 * sets the desktop layout; these media queries override at narrow widths.
 * !important is used to win against the inline `style` attribute that GB
 * outputs from the `styles` field. */
@media (max-width: 1023px) {
	.dd-tpl--fitness-studio .dd-fs-grid-4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.dd-tpl--fitness-studio .dd-fs-grid-3 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.dd-tpl--fitness-studio .dd-fs-grid-2 {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 575px) {
	.dd-tpl--fitness-studio .dd-fs-grid-4,
	.dd-tpl--fitness-studio .dd-fs-grid-3 {
		grid-template-columns: 1fr !important;
	}
}