/**
 * StyleCloud Stacking Cards — frontend + editor shared styles.
 *
 * Each card's content is now built from native Gutenberg blocks (Heading,
 * Paragraph, Buttons, Gallery) via InnerBlocks. The block's CSS does three
 * things: provide neutral type/colour fallbacks via custom properties,
 * style the sticky card wrapper, and pin the gallery to the bottom of the
 * card so the title row stays at the top regardless of card height.
 *
 * Theme controls colours/fonts via CSS custom properties. The block reads
 * --wp--preset--color--* values from theme.json when available, otherwise
 * falls back to a neutral palette so the block looks intentional out of
 * the box on any theme.
 *
 *   --scc-bg                section + card background  (fallback: #ffffff)
 *   --scc-fg                primary text colour        (fallback: #111111)
 *   --scc-fg-muted          body text colour           (fallback: #555555)
 *   --scc-border            card top divider colour    (fallback: rgba(17,17,17,.14))
 *   --scc-font-serif        heading font stack         (fallback: Georgia stack)
 *   --scc-font-sans         body / eyebrow font stack  (fallback: system-ui stack)
 *
 * Layout controlled inline by render.php:
 *   --scc-stack-offset       how far each card peeks below the one above
 *   --scc-top-offset         sticky top distance for the first card
 *   --scc-card-height        height of each card
 *   --scc-card-padding-top   space above the title (above the divider)
 *   --scc-card-padding-bottom space below the gallery
 *   --scc-mobile-bp          breakpoint at which sticky disables (px)
 */

.stylecloud-stacking-cards {
	--scc-bg:          var(--wp--preset--color--background, #ffffff);
	--scc-fg:          var(--wp--preset--color--foreground, #111111);
	--scc-fg-muted:    var(--wp--preset--color--foreground-muted, #555555);
	--scc-border:      rgba( 17, 17, 17, 0.14 );
	--scc-font-serif:  var(--wp--preset--font-family--serif, Georgia, 'Times New Roman', serif);
	--scc-font-sans:   var(--wp--preset--font-family--sans, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif);

	background: var(--scc-bg);
	color: var(--scc-fg);
	/* Modest top padding for breathing room from the previous section.
	   Bottom padding is intentionally 0 so the next section sits right
	   against where the cards finish leaving. Spacing is in rem so it scales
	   with the user's root font-size; authors can override via the Spacing
	   inspector panel if they want a different rhythm. */
	padding-block-start: 4rem;
	padding-block-end:   0;
}

.stylecloud-stacking-cards__list {
	padding: 0;
	position: relative;
}

/* ─── Individual card (rendered by stacking-card/render.php) ─── */

.stylecloud-stacking-card {
	position: sticky;
	/* top is set inline per-card based on its index */
	height: var(--scc-card-height, 60vh);
	min-height: 22.5rem;
	margin-bottom: 0;
	/* Background lives on the wrapper (not __inner) so Gutenberg's native
	   colour picker can paint it. The var() fallback applies when the author
	   hasn't picked a colour. Inline styles + .has-*-background-color rules
	   from Gutenberg win on specificity. */
	background: var(--scc-bg);
	/* Clip content that's taller than the card's height so it can't bleed
	   into the next section on shorter viewports. Authors who need more
	   room can bump "Card height" in the inspector or use "auto". */
	overflow: hidden;
}

.stylecloud-stacking-card__inner {
	border-top: 1px solid var(--scc-border);
	padding: var(--scc-card-padding-top, 2rem) 0 var(--scc-card-padding-bottom, 2rem);
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	box-sizing: border-box;
}

/* The card's content is whatever native Gutenberg blocks the author chose.
   We don't force absolute positioning or grid layouts on individual blocks
   any more — let theme styles and block supports do their job. The few
   rules below give a sensible editorial baseline IF the theme hasn't
   styled the relevant block (most themes have, in which case theme wins
   on specificity anyway). */

.stylecloud-stacking-card__inner .wp-block-heading {
	font-family: var(--scc-font-serif);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
	max-width: 32ch;
}

.stylecloud-stacking-card__inner > p {
	font-family: var(--scc-font-sans);
	line-height: 1.6;
	color: var(--scc-fg-muted);
	max-width: 56ch;
	margin: 0;
}

.stylecloud-stacking-card__inner .wp-block-buttons {
	margin: 0;
}

/* ─── Mobile fallback ─── */

@media (max-width: 768px) {
	.stylecloud-stacking-cards.is-disabled-on-mobile .stylecloud-stacking-card {
		position: static;
		height: auto;
		min-height: 0;
	}
	.stylecloud-stacking-cards.is-disabled-on-mobile .stylecloud-stacking-card__inner {
		height: auto;
	}
}

/* Note: the mobile breakpoint above is hard-coded at 768px because CSS @media
   queries cannot read custom properties. If a future revision needs the
   breakpoint to be authoring-controlled, emit an inline <style> block from
   render.php using the --scc-mobile-bp value instead. */