/* Section block — tokens only (CLAUDE.md §6). */

.doryo-section__inner {
	margin-inline: auto;
	padding-inline: var(--wp--custom--container--padding-mobile);
}

@media (min-width: 782px) {
	.doryo-section__inner {
		padding-inline: var(--wp--custom--container--padding-desktop);
	}
}

/* Content width */
.doryo-section--w-content .doryo-section__inner {
	max-width: var(--wp--style--global--content-size);
}

.doryo-section--w-wide .doryo-section__inner {
	max-width: var(--wp--style--global--wide-size);
}

/* Wide sections keep body copy at a reading measure (Figma: headings run
   wide, paragraphs stay ~720px) — long lines across 1280px are unreadable. */
.doryo-section--w-wide .acf-innerblocks-container > p {
	max-width: 46rem;
}

/* Vertical padding */
.doryo-section--pad-none {
	padding-block: 0;
}

.doryo-section--pad-compact {
	padding-block: var(--wp--preset--spacing--5-xl);
}

.doryo-section--pad-default {
	padding-block: var(--wp--preset--spacing--6-xl);
}

.doryo-section--pad-spacious {
	padding-block: var(--wp--preset--spacing--7-xl);
}

@media (min-width: 782px) {
	.doryo-section--pad-compact {
		padding-block: var(--wp--preset--spacing--6-xl);
	}

	.doryo-section--pad-default {
		padding-block: var(--wp--preset--spacing--8-xl);
	}

	.doryo-section--pad-spacious {
		padding-block: var(--wp--preset--spacing--9-xl);
	}
}

/* Backgrounds */
.doryo-section--bg-none {
	background: transparent;
}

.doryo-section--bg-subtle {
	background: var(--wp--preset--color--bg-subtle);
}

.doryo-section--bg-brand-subtle {
	background: var(--wp--preset--color--brand-subtle);
}

/*
 * Split layout: content stacks in the left column, the (last) image sits in a
 * right column beside it — e.g. service cards left, decorative image right.
 * Mobile stays stacked (single column, image below).
 */
.doryo-section--layout-split-media .acf-innerblocks-container > figure.wp-block-image {
	max-width: 100%;
	margin-inline: auto;
	/* Stacked (below 900px) the image drops under the content and would sit
	   flush against it — give it breathing room. The grid below resets this to
	   margin:0 once the image moves into its own column. */
	margin-block-start: var(--wp--preset--spacing--4-xl);
	/* Decorative split image is always softly rounded (Figma template). */
	border-radius: var(--wp--custom--radius--4-xl);
	overflow: hidden;
}

.doryo-section--layout-split-media .acf-innerblocks-container > figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 900px) {
	/* ACF wraps <InnerBlocks/> in .acf-innerblocks-container, so the grid lives
	   there — that is the real flow parent of the section's blocks. */
	.doryo-section--layout-split-media .acf-innerblocks-container {
		display: grid;
		grid-template-columns: minmax( 0, 1.5fr ) minmax( 0, 1fr );
		column-gap: var(--wp--preset--spacing--6-xl);
	}

	.doryo-section--layout-split-media .acf-innerblocks-container > * {
		grid-column: 1;
	}

	.doryo-section--layout-split-media .acf-innerblocks-container > figure.wp-block-image {
		grid-column: 2;
		grid-row: 1 / span 99;
		align-self: center;
		margin: 0;
	}

	/* A card grid breaks out of the split: full section width below the
	   head + image row, so the cards get room for their three columns. */
	.doryo-section--layout-split-media .acf-innerblocks-container > .doryo-card-grid {
		grid-column: 1 / -1;
		margin-block-start: var(--wp--preset--spacing--6-xl);
	}
}

/*
 * FAQ split (Figma Landingpage-Template): eyebrow/heading/intro form a head
 * column on the left, the FAQ list keeps its reading measure on the right.
 * Mobile stays stacked; the grid mirrors the split-media pattern above.
 */
@media (min-width: 900px) {
	.doryo-section--layout-split-faq .acf-innerblocks-container {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 2.1fr );
		column-gap: var(--wp--preset--spacing--6-xl);
	}

	.doryo-section--layout-split-faq .acf-innerblocks-container > * {
		grid-column: 1;
	}

	.doryo-section--layout-split-faq .acf-innerblocks-container > .doryo-faq {
		grid-column: 2;
		grid-row: 1 / span 99;
		/* List starts where the intro copy starts on the left — below the
		   eyebrow + heading block, not at the very top of the section. */
		margin-block-start: var(--wp--preset--spacing--9-xl);
	}
}

/* Dark brand sections: flip text/link colors for AA contrast. The hero
   variant uses the brand gradient instead of the flat section color. */
.doryo-section--bg-dark {
	background: var(--wp--preset--color--bg-brand-section);
}

.doryo-section--bg-hero {
	background: var(--wp--custom--gradient--hero);
	/* The overlay header floats on top of this section (page-landing) — add
	   its height plus breathing room above the content. */
	padding-block-start: calc( var(--wp--preset--spacing--7-xl) + var(--wp--preset--spacing--6-xl) );
}

@media (min-width: 782px) {
	.doryo-section--bg-hero {
		padding-block-start: calc( var(--wp--preset--spacing--9-xl) + var(--wp--preset--spacing--8-xl) );
	}
}

/* Hero split: slightly smaller image and a wider gutter than the default
   split-media ratio, so the title never crowds the picture. */
@media (min-width: 900px) {
	.doryo-section--bg-hero.doryo-section--layout-split-media .acf-innerblocks-container {
		grid-template-columns: minmax( 0, 1.9fr ) minmax( 0, 1fr );
		column-gap: var(--wp--preset--spacing--9-xl);
	}
}

.doryo-section--bg-dark,
.doryo-section--bg-hero {
	color: var(--wp--preset--color--fg-on-brand);
}

:is(.doryo-section--bg-dark, .doryo-section--bg-hero) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--fg-on-brand);
}

:is(.doryo-section--bg-dark, .doryo-section--bg-hero) a:not(.doryo-button) {
	color: var(--wp--preset--color--fg-on-brand);
	text-decoration-color: var(--wp--preset--color--fg-on-brand-muted);
}

:is(.doryo-section--bg-dark, .doryo-section--bg-hero) a:not(.doryo-button):hover {
	color: var(--wp--preset--color--fg-on-brand-muted);
}