/* core/group — is-style-cta-panel  (brain tasks/testimonials-2026)
   The design's `.cta`: an ocean-deep panel with a 32px radius, and the two
   buttons as they resolve under `data-theme="dark"`.

   Why the radius lives here and not on `ndsBorderRadius`: the theme's group
   extension DROPS a `4xl` radius on any nested group ("only first-level blocks
   get 4xl", library/nds-group-extension.php), and this panel sits inside a
   section wrapper. 32px exists only as 4xl, so the attribute can never apply
   here. The smaller slugs are not suppressed and are still used elsewhere.

   Why the buttons are restyled rather than set with colour attributes: the
   theme declares button colours with `!important` — `.button, .wp-block-button
   .wp-block-button__link { color: ... !important }` and an
   `is-style-nds-secondary/outline` rule that forces raven text. No block
   attribute and no amount of specificity beats an `!important` declaration, so
   these have to carry it too. Scoped to `.is-style-cta-panel`, so nothing
   outside this panel is affected. */
.wp-block-group.is-style-cta-panel{border-radius:32px}

/* .btn--primary under dark: --color-bg-brand flips to frost, text to raven. */
.wp-block-group.is-style-cta-panel .wp-block-button:not(.is-style-outline) .wp-block-button__link{
	background-color:var(--p-frost-100,#F5FAFF) !important;
	color:var(--p-raven-500,#1A1E22) !important;
	border-color:transparent !important;
}
.wp-block-group.is-style-cta-panel .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
	background-color:var(--p-frost-300,#E2EFFE) !important;
	color:var(--p-raven-500,#1A1E22) !important;
}

/* .btn--secondary: transparent, light text, 1px light border. */
.wp-block-group.is-style-cta-panel .wp-block-button.is-style-outline .wp-block-button__link{
	background-color:transparent !important;
	color:var(--p-frost-100,#F5FAFF) !important;
	border:1px solid rgba(245,250,255,0.4) !important;
}
.wp-block-group.is-style-cta-panel .wp-block-button.is-style-outline .wp-block-button__link:hover{
	background-color:rgba(245,250,255,0.08) !important;
	color:var(--p-frost-100,#F5FAFF) !important;
	border-color:var(--p-frost-100,#F5FAFF) !important;
}

@media (max-width:781px){
	/* The design drops `.cta` from 96px to 56px here. The block attribute is a
	   single value for all widths, so the responsive step lives with the style —
	   96px of padding on a 390px screen leaves almost no room for the copy. */
	.wp-block-group.is-style-cta-panel{
		border-radius:24px;
		padding:56px !important;
	}
}
@media (max-width:480px){
	.wp-block-group.is-style-cta-panel{padding:32px 24px !important}
}

/* core/group — is-style-cta-panel-centred  (case studies: Powy, 2026-10-28)
   The case-study CTA: a navy panel with the copy centred, a brand-blue primary button
   and a light outline one. The panel itself is block attributes (moonshine gradient,
   ndsTheme: dark, padding, centred text and buttons); this style adds only what an
   attribute cannot: the 32px radius (a nested group cannot take ndsBorderRadius 4xl,
   see above) and the primary button's brand fill — inside a dark group the theme turns
   the primary frost with !important. The outline button keeps the theme's dark look. */
.wp-block-group.is-style-cta-panel-centred{border-radius:32px}
.wp-block-group.is-style-cta-panel-centred .wp-block-button:not(.is-style-outline) .wp-block-button__link{
	background-color:var(--wp--preset--color--background-brand-default-light,#0E60C3) !important;
	color:var(--wp--preset--color--text-default-alternative-light,#F5FAFF) !important;
	border-color:transparent !important;
}
.wp-block-group.is-style-cta-panel-centred .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
	background-color:var(--wp--preset--color--background-brand-default-hover-light,#083A75) !important;
	color:var(--wp--preset--color--text-default-alternative-light,#F5FAFF) !important;
}
@media (max-width:781px){
	.wp-block-group.is-style-cta-panel-centred{border-radius:24px}
}

/* Long labels (Powy case study, 2026-10-27; both CTA panels). The theme fixes every
   button's height (56px, 40px on phones) with !important, so a label that wraps spills
   out of the button. Keep that height as the MINIMUM and let the button grow. A one-line
   label is 25.2px + 2 x 4px + 2px border = 35.2px, under both minimums, so a button whose
   label fits on one line renders exactly as before (Testimonials measured before and after). */
.wp-block-group:is(.is-style-cta-panel,.is-style-cta-panel-centred) .wp-block-button__link{
	height:auto !important;
	min-height:var(--spacing-7xl,56px);
	padding-top:var(--spacing-xs,4px) !important;
	padding-bottom:var(--spacing-xs,4px) !important;
}