/**
 * Sections: the layout of each pattern in patterns/.
 *
 * Each pattern's outer Group carries its BEM block class (for example .cta),
 * and every block inside that's styled carries an element class
 * (.cta__title). The rules here target those classes only, so the pattern
 * looks the same wherever a client inserts it. See "BEM rules" in CLAUDE.md.
 * Running text in a slot is styled from the slot with :where(p), because a
 * new paragraph doesn't keep a class.
 *
 * Child margins: core's flow layout sets margins between a Group's children
 * outside any layer. Where a section owns that spacing it uses !important,
 * marked "owns spacing".
 */
@layer blocks {
	/* ---------- Shared section heads ---------- */

	/* Heading and intro stacked. */
	.section-head {
		display: grid;
		gap: 1.6rem;
		max-width: 56rem;
	}

	.section-head > * {
		margin: 0 !important; /* owns spacing */
	}

	.section-head > :where(p) {
		max-width: 38rem;
		color: var(--text-muted);
		font-size: var(--text-l);
	}

	/* Heading on the left, intro on the right. */
	.split-head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 1.4rem 4rem;
		align-items: end;
	}

	.split-head > * {
		margin: 0 !important; /* owns spacing */
	}

	/* Heading widths are in em, not ch. ch is the width of the font's zero,
	   so it changes when a web font loads and the page jumps. 7.9em is 12ch
	   of the system heading font; set it to suit each build's font. */
	.split-head__title {
		max-width: 7.9em;
	}

	.split-head > :where(p) {
		max-width: 36rem;
		color: var(--text-muted);
		font-size: 1.15rem;
	}

	@media (max-width: 900px) {
		.split-head {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	/* ---------- Call to action ---------- */

	.cta__grid {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		gap: 2.5rem 4rem;
		align-items: center;
	}

	.cta__grid > * {
		margin: 0 !important; /* owns spacing */
	}

	@media (max-width: 860px) {
		.cta__grid {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.cta__title {
		max-width: 7.9em; /* 12ch of the system heading font, in em (see .split-head) */
		font-size: var(--h1);
	}

	.cta__content > :where(p) {
		max-width: 32rem;
		margin-top: 1.4rem !important; /* owns spacing */
		color: var(--text-muted);
		font-size: 1.2rem;
	}

	/* Two buttons stacked on the right, the same width, lined up with the
	   middle of the heading. The booking button is the big one. */
	.cta__side {
		align-self: center;
		justify-self: end;
		width: min(100%, 24rem);
	}

	.cta__actions {
		display: grid !important; /* core override: Buttons is flex outside any layer */
		gap: 0.8rem;
	}

	.cta__actions > * {
		width: 100%;
	}

	.cta__actions .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	.cta__book {
		--btn-padding-block: 1.4rem;
		--btn-font-size: 1.2rem;
	}

	@media (max-width: 860px) {
		.cta__side {
			justify-self: start;
		}
	}

	/* ---------- Page hero (inner pages) ----------
	   The title band at the top of inner pages: breadcrumbs and the title.
	   The templates give it the Alternate section style, under the solid
	   header. Under the transparent header (Landing page template) it needs
	   a dark style, such as Brand section, and extra room at the top for
	   the header. */

	.page-hero {
		padding-block: var(--section-space-m);
	}

	body:has(.site-header--overlay) .page-hero {
		padding-block-start: clamp(8rem, 12vw, 10rem);
	}

	.page-hero__inner > * {
		margin: 0 !important; /* owns spacing */
	}

	.page-hero__inner > * + * {
		margin-top: 1.4rem !important; /* owns spacing */
	}

	.page-hero__title {
		max-width: 10.5em; /* 16ch of the system heading font, in em (see .split-head) */
		font-size: var(--h2);
	}

	.page-hero__lede {
		max-width: 38rem;
		color: var(--text-muted);
		font-size: var(--text-l);
	}

	/* The breadcrumb is the page's only label above the h1: small, muted,
	   with the current page in the heading colour. */
	.page-hero__breadcrumbs {
		color: var(--text-muted);
		font-size: var(--text-s);
	}

	.page-hero__breadcrumbs a {
		color: inherit;
		text-decoration: none;
	}

	.page-hero__breadcrumbs a:hover {
		color: var(--heading-color);
		text-decoration: underline;
	}

	.page-hero__breadcrumbs [aria-current] {
		color: var(--heading-color);
	}

	.page-hero__breadcrumbs + .page-hero__title {
		margin-top: 1.1rem !important; /* owns spacing */
	}

	.page-hero__actions {
		margin-top: 2.4rem !important; /* owns spacing */
	}

	/* ---------- Term filter: a row of category or sector pills ----------
	   A label and a core Categories block (any taxonomy) above a grid of
	   posts. Used on the articles index and archives. */

	.term-filter {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.8rem 1.4rem;
		margin-bottom: clamp(2rem, 4vw, 3rem) !important; /* owns spacing */
	}

	.term-filter > * {
		margin: 0 !important; /* owns spacing */
	}

	.term-filter__label {
		color: var(--text-muted);
		font-size: var(--text-xs);
	}

	.term-filter__list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.term-filter__list a {
		display: inline-block;
		padding: 0.45rem 0.9rem;
		border: 1px solid var(--border-color-strong);
		border-radius: var(--radius-pill);
		color: var(--heading-color);
		font-size: 0.95rem;
		text-decoration: none;
	}

	.term-filter__list a:hover,
	.term-filter__list .current-cat a {
		border-color: var(--heading-color);
		background: var(--heading-color);
		color: var(--bg-body);
	}

	/* ---------- Split: media and text side by side ---------- */

	.split-media {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--container-gap);
		align-items: center;
	}

	.split-media > * {
		margin: 0 !important; /* owns spacing */
	}

	.split-media--reverse > .split-media__media {
		order: 2;
	}

	@media (max-width: 860px) {
		.split-media {
			grid-template-columns: minmax(0, 1fr);
		}

		.split-media--reverse > .split-media__media {
			order: 0;
		}
	}

	.split-media__image img {
		width: 100%;
		border-radius: var(--radius);
	}

	.split-media__media--panel {
		display: grid;
		place-items: center;
		padding: clamp(1.5rem, 4vw, 3rem);
		border-radius: var(--radius);
		background: var(--bg-surface-alt);
	}

	.split-media__media--panel .split-media__image img {
		width: auto;
		max-height: 30rem;
		border-radius: var(--radius);
	}

	.split-media__content > * + * {
		margin-top: 1.2rem !important; /* owns spacing */
	}

	.split-media__content > :where(p) {
		max-width: 36rem;
		color: var(--text-muted);
	}

	.split-media__actions {
		margin-top: 2rem !important; /* owns spacing */
	}

	/* ---------- Post index: a Query Loop of cards ----------
	   The posts page (templates/home.html) and its archives (templates/archive.html). Each post is a
	   Group with the Image card style; this sets the grid and the date. */

	.card-posts {
		gap: var(--grid-gap) !important; /* owns spacing */
	}

	@media (min-width: 600px) and (max-width: 960px) {
		.card-posts {
			grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* core override: core keeps 3 columns down to 600px */
		}
	}

	/* On phones the grid is one column of minmax(0, 1fr). Core's 1fr track
	   grows to fit a wide featured image, and the page then scrolls
	   sideways (found on presstwood.design, 23 October 2026). */
	@media (max-width: 599px) {
		.card-posts {
			grid-template-columns: minmax(0, 1fr) !important; /* core override */
		}
	}

	.card-posts > li {
		min-width: 0;
		display: flex;
	}

	.card--post {
		flex: 1;
	}

	/* Article titles are the point of the card, so they're bigger than a
	   standard card heading. */
	.card--post .card__title {
		font-size: clamp(1.4rem, 1.15rem + 0.7vw, 1.8rem);
		line-height: 1.2;
	}

	/* The date sits at the bottom, so a row of cards lines up. */
	.card--post .card__date {
		margin-top: auto !important; /* owns spacing */
		padding-top: 1.2rem;
		color: var(--text-muted);
		font-size: 0.85rem;
	}

	.post-index__pages {
		margin-top: clamp(3rem, 6vw, 4rem) !important; /* owns spacing */
		gap: 0.4rem;
	}

	.post-index__pages :is(a, .current) {
		display: inline-grid;
		place-items: center;
		min-width: 2.5rem;
		height: 2.5rem;
		padding-inline: 0.8rem;
		border-radius: var(--radius-pill);
		color: var(--heading-color);
		text-decoration: none;
	}

	.post-index__pages .current {
		background: var(--heading-color);
		color: var(--bg-body);
	}

	/* ---------- Card grid: cards under a section head ----------
	   Any Group of cards (Text, Icon or Image card styles) with a grid
	   utility. This only sets its distance from the heading above. */

	.section-head + .card-grid {
		margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; /* owns spacing */
	}

	/* ---------- Feature grid: a row of icon cards ----------
	   The look comes from the Icon card style on each child; this only sets
	   the grid and its distance from the heading. */

	.feature-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
		gap: var(--grid-gap);
		margin-top: clamp(3rem, 6vw, 4rem) !important; /* owns spacing */
	}

	.feature-grid > * {
		margin: 0 !important; /* owns spacing */
	}

	/* ---------- Detail steps: numbered rows, text beside each heading ---------- */

	.detail-steps {
		margin-top: clamp(3rem, 6vw, 4rem) !important; /* owns spacing */
		counter-reset: detail-step;
	}

	.detail-steps__item {
		display: grid;
		grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.4fr);
		gap: 1rem clamp(1.5rem, 4vw, 4rem);
		margin: 0 !important; /* owns spacing */
		padding-block: clamp(1.8rem, 3vw, 2.6rem);
		border-top: 1px solid var(--border-color-strong);
		counter-increment: detail-step;
	}

	.detail-steps__item::before {
		content: counter(detail-step, decimal-leading-zero);
		color: var(--link-color);
		font-family: var(--font-heading);
		font-size: var(--h4);
		letter-spacing: var(--heading-tracking);
		line-height: 1.1;
	}

	.detail-steps__item > * {
		margin: 0 !important; /* owns spacing */
	}

	.detail-steps__title {
		font-size: var(--h4);
		line-height: 1.1;
	}

	.detail-steps__body > * + * {
		margin-top: 0.8rem !important; /* owns spacing */
	}

	.detail-steps__body > :where(p) {
		color: var(--text-muted);
	}

	@media (max-width: 760px) {
		.detail-steps__item {
			grid-template-columns: 3rem minmax(0, 1fr);
		}

		.detail-steps__body {
			grid-column: 2;
		}
	}

	/* ---------- FAQ: core Accordion ---------- */

	.faq__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
		gap: 2rem 4rem;
		align-items: start;
	}

	.faq__grid > * {
		margin: 0 !important; /* owns spacing */
	}

	@media (max-width: 900px) {
		.faq__grid {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	/* Each question is a white card with a soft shadow, matching the
	   check-up tiles. The plus is drawn in CSS so it sits dead centre in
	   its circle; core turns it into a cross when the item opens. */
	.faq__list {
		display: grid;
		gap: 0.75rem;
	}

	.faq__list .wp-block-accordion-item {
		margin: 0 !important; /* owns spacing */
		border-radius: var(--radius);
		background: var(--bg-surface);
		box-shadow: var(--shadow-s);
	}

	.faq__list .wp-block-accordion-heading {
		margin: 0 !important; /* owns spacing */
		font-family: var(--font-body);
		font-size: 1.1rem;
		font-weight: 500;
		letter-spacing: normal;
		line-height: 1.4;
	}

	.faq__list .wp-block-accordion-heading__toggle {
		gap: 1.5rem;
		padding: 1.25rem 1.5rem !important; /* core override: core sets the toggle padding outside any layer */
		text-align: start;
	}

	.faq__list .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
		text-decoration: none !important; /* core override: core underlines the title on hover outside any layer */
	}

	/* Core sizes the icon at 1.2em, so the font size sets the circle:
	   1.875rem x 1.2 = 2.25rem. The "+" character is hidden and redrawn. */
	.faq__list .wp-block-accordion-heading__toggle-icon {
		--faq-icon: var(--link-color);
		position: relative;
		flex: none;
		border-radius: var(--radius-circle);
		background: light-dark(var(--secondary-l-5), rgb(255 255 255 / 0.08));
		color: transparent;
		font-size: 1.875rem;
		transition: background-color 0.2s, transform 0.2s;
	}

	.faq__list .wp-block-accordion-heading__toggle-icon::before,
	.faq__list .wp-block-accordion-heading__toggle-icon::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0.85rem;
		height: 2px;
		border-radius: 1px;
		background: var(--faq-icon);
		translate: -50% -50%;
	}

	.faq__list .wp-block-accordion-heading__toggle-icon::after {
		rotate: 90deg;
	}

	.faq__list .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon,
	.faq__list .is-open .wp-block-accordion-heading__toggle-icon {
		--faq-icon: var(--white);
		background: var(--primary);
	}

	.faq__list .wp-block-accordion-panel {
		padding: 0 1.5rem 1.5rem;
	}

	.faq__list .wp-block-accordion-panel > * {
		max-width: 44rem;
		margin-block: 0 !important; /* owns spacing */
		color: var(--text-muted);
	}

	.faq__list .wp-block-accordion-panel > * + * {
		margin-top: 0.8rem !important; /* owns spacing */
	}

	/* ---------- Contact panel: form and details ---------- */

	.contact-panel {
		display: grid;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: var(--container-gap);
		align-items: start;
	}

	.contact-panel > * {
		margin: 0 !important; /* owns spacing */
	}

	@media (max-width: 900px) {
		.contact-panel {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.contact-form {
		display: grid;
		gap: 1.2rem;
		padding: clamp(1.5rem, 4vw, 2.5rem);
		border-radius: var(--radius);
		background: var(--bg-surface);
		box-shadow: var(--shadow-l);
	}

	.contact-form__row {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
		gap: 1.2rem;
	}

	.contact-form__label {
		display: grid;
		gap: 0.45rem;
		color: var(--heading-color);
		font-size: 0.95rem;
		font-weight: 500;
	}

	.contact-form__field {
		width: 100%;
		padding: 0.85rem 1rem;
		border: 1px solid var(--border-color-strong);
		border-radius: var(--radius);
		background: var(--bg-body);
		color: var(--text-color);
		font: inherit;
		font-size: 1rem;
	}

	textarea.contact-form__field {
		min-height: 9rem;
		resize: vertical;
	}

	.contact-form__field:focus-visible {
		border-color: var(--link-color);
	}

	.contact-form__submit {
		justify-self: start;
		padding: 1.05rem 1.55rem;
		border: 1px solid var(--primary);
		border-radius: var(--radius);
		background: var(--primary);
		color: var(--white);
		font: inherit;
		font-size: 1.05rem;
		font-weight: 500;
		cursor: pointer;
	}

	.contact-form__submit:hover {
		background: var(--primary-hover);
	}

	.contact-form__note {
		color: var(--text-muted);
		font-size: var(--text-xs);
	}

	.contact-details__title {
		font-size: var(--h4);
		line-height: 1.15;
	}

	.contact-details > * + * {
		margin-top: 1.4rem !important; /* owns spacing */
	}

	.contact-details__list {
		display: grid;
		gap: 1rem;
	}

	.contact-details__list > * {
		margin: 0 !important; /* owns spacing */
	}

	.contact-details__item > * {
		margin: 0 !important; /* owns spacing */
	}

	.contact-details__icon {
		--icon-size: 1.4rem;
		flex: none;
		color: var(--link-color);
	}

	/* Bound contact details (Settings > Business details) */
	.contact-details__link {
		--btn-text: var(--link-color);
		--btn-text-hover: var(--link-color-hover);
	}

	.contact-hours {
		display: grid;
		gap: 0.35rem;
		max-width: 22rem;
	}

	.contact-hours > * {
		margin: 0 !important; /* owns spacing */
	}

	.contact-hours__row {
		padding-bottom: 0.35rem;
		border-bottom: 1px solid var(--border-color);
	}

	.contact-hours__row > * {
		margin: 0 !important; /* owns spacing */
	}

	/* A day left blank in Business details loses its value; hide its label too.
	   :has() is the only way to see that the value is missing. */
	.contact-hours__row:has(> :only-child) {
		display: none !important; /* core override: the Group's flex layout sets display outside any layer */
	}

	.contact-hours__day {
		color: var(--heading-color);
		font-weight: 500;
	}

	.contact-hours__note {
		padding-block: 0.5rem 0.35rem;
		color: var(--text-muted);
		font-size: var(--text-xs);
	}
}