/*
 * Modality patterns. Handle `modality-patterns`. Loaded on singulars whose content
 * uses a theme pattern, and always in the editor.
 */

.mty-pattern {
	padding-block: var(--mty-section-space);
}

.mty-pattern__inner {
	width: 100%;
	max-width: calc(var(--mty-container) + 2 * var(--mty-gutter-safe));
	margin-inline: auto;
	padding-inline: var(--mty-gutter-safe);
}

.mty-pattern > .mty-pattern__inner > :last-child,
.mty-pattern__inner .wp-block-column > :last-child {
	margin-block-end: 0;
}

.mty-pattern h2,
.mty-pattern h3 {
	margin-block-start: 0;
}

/* Bands */
.mty-pattern--surface:not(.has-background) {
	background-color: var(--mty-color-surface);
}

.mty-pattern--primary:not(.has-background) {
	background-color: var(--mty-color-primary);
}

.mty-pattern--primary,
.mty-pattern--primary h2,
.mty-pattern--primary p {
	color: #fff;
}

.mty-pattern--primary .wp-block-button__link {
	border-color: #fff;
	background-color: #fff;
	color: var(--mty-on-white);
}

.mty-pattern--primary .wp-block-button__link:hover {
	border-color: var(--mty-color-surface);
	background-color: var(--mty-color-surface);
	color: var(--mty-on-white);
}

/* Two plain sections side by side share their spacing. */
.mty-pattern--plain + .mty-pattern--plain {
	padding-block-start: 0;
}

/* A plain section at the very start or end of the content already has the main area's spacing. */
.mty-entry__content > .mty-pattern--plain:first-child {
	padding-block-start: 0;
}

.mty-entry__content > .mty-pattern--plain:last-child {
	padding-block-end: 0;
}

/* A coloured band at the start or end meets the title bar and footer with no gap. */
.mty-main:has(.mty-entry > .entry-content:first-child > :is(.mty-pattern--surface, .mty-pattern--primary):first-child) {
	padding-block-start: 0;
}

.mty-main:has(.mty-area__content > .mty-entry:last-child > .entry-content:last-child > :is(.mty-pattern--surface, .mty-pattern--primary):last-child) {
	padding-block-end: 0;
}

.mty-full-width > .mty-pattern--plain:first-child {
	padding-block-start: var(--mty-section-space);
}

/* Heading: label and title on the left, introduction on the right. */
.mty-pattern__head {
	display: grid;
	gap: var(--mty-space-s);
	margin-block-end: var(--mty-space-l);
}

.mty-pattern__head:last-child {
	margin-block-end: 0;
}

.mty-pattern__title > :last-child,
.mty-pattern__head > .mty-lede {
	margin-block-end: 0;
}

@media (min-width: 900px) {
	.mty-pattern__head {
		grid-template-columns: 5fr 6fr;
		gap: var(--mty-space-l) var(--mty-space-xl);
		align-items: end;
	}
}

/* Two columns with a generous gap. Core's columns stack at 781px. */
.wp-block-columns.mty-split {
	gap: var(--mty-space-l) var(--mty-space-xl);
	margin-block-end: 0;
}

@media (min-width: 900px) {
	.wp-block-columns.mty-split--narrow-start > .wp-block-column:first-child {
		flex: 0 0 34%;
	}

	.wp-block-columns.mty-split--narrow-start > .wp-block-column:last-child {
		flex: 1 1 0;
	}
}

/* Checklist */
.mty-checks {
	margin: var(--mty-space-m) 0 0;
	padding: 0;
	list-style: none;
}

.mty-checks li {
	position: relative;
	padding-block: .65rem;
	padding-inline-start: 1.8rem;
	border-block-start: 1px solid var(--mty-color-line);
}

.mty-checks li::before {
	content: "";
	position: absolute;
	inset-block-start: 1.2em;
	inset-inline-start: .2rem;
	width: .85rem;
	height: .45rem;
	border-block-end: 2px solid var(--mty-color-accent);
	border-inline-start: 2px solid var(--mty-color-accent);
	transform: rotate(-45deg);
}

/* Key numbers */
.mty-stat {
	padding-block: var(--mty-space-m);
	border-block-start: 1px solid var(--mty-color-line);
}

.mty-stat:first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

.mty-stat:last-child {
	padding-block-end: 0;
}

.mty-stat__number {
	margin: 0;
	color: var(--mty-color-primary);
	font-family: var(--mty-font-heading);
	font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);
	font-weight: var(--mty-weight-heading);
	line-height: 1.05;
	letter-spacing: var(--mty-heading-tracking);
}

.mty-stat__label {
	margin: .25rem 0 0;
	color: var(--mty-color-muted);
}

/* Numbered rows */
.mty-rows {
	counter-reset: mty-row;
}

.mty-row {
	counter-increment: mty-row;
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: .25rem var(--mty-space-m);
	padding-block: var(--mty-space-m);
	border-block-start: 1px solid var(--mty-color-line);
}

.mty-row::before {
	content: counter(mty-row, decimal-leading-zero);
	grid-row: span 2;
	padding-block-start: .3em;
	color: var(--mty-color-accent);
	font-family: var(--mty-font-accent);
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .06em;
}

.mty-row > * {
	grid-column: 2;
	margin-block-end: 0;
}

.mty-row h3 {
	font-size: var(--mty-h4);
}

.mty-rows--services .mty-row:last-child,
.mty-rows--steps .mty-row:last-child {
	padding-block-end: 0;
}

.mty-rows--steps .mty-row:first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

@media (min-width: 900px) {
	.mty-rows--services .mty-row {
		grid-template-columns: 3.5rem minmax(0, 4fr) minmax(0, 7fr);
		align-items: baseline;
	}

	.mty-rows--services .mty-row::before {
		grid-row: auto;
	}

	.mty-rows--services .mty-row > * {
		grid-column: auto;
	}
}

/* Quotes */
.mty-pattern .wp-block-quote.mty-quote {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--mty-color-heading);
	font-family: var(--mty-font-heading);
	font-size: 1.25rem;
	line-height: 1.45;
}

.mty-pattern .wp-block-quote.mty-quote p {
	margin-block-end: var(--mty-space-s);
}

.mty-pattern .wp-block-quote.mty-quote cite {
	display: block;
	color: var(--mty-color-muted);
	font-family: var(--mty-font-accent);
	font-size: .9rem;
	font-style: normal;
	line-height: 1.5;
}

.mty-pattern .wp-block-quote.mty-quote--lead {
	max-width: 58rem;
	margin-block-end: var(--mty-space-l);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
	line-height: 1.25;
	letter-spacing: var(--mty-heading-tracking);
}

.wp-block-columns.mty-quote-pair {
	gap: var(--mty-space-l) var(--mty-space-xl);
	margin-block-end: 0;
	padding-block-start: var(--mty-space-m);
	border-block-start: 1px solid var(--mty-color-line);
}

/* Questions and answers */
.mty-faq .wp-block-details {
	border-block-start: 1px solid var(--mty-color-line);
}

.mty-faq .wp-block-details:last-child {
	border-block-end: 1px solid var(--mty-color-line);
}

.mty-faq summary {
	display: flex;
	gap: var(--mty-space-s);
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	padding-block: .9rem;
	color: var(--mty-color-heading);
	font-family: var(--mty-font-heading);
	font-size: 1.15em;
	font-weight: var(--mty-weight-heading);
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.mty-faq summary::-webkit-details-marker {
	display: none;
}

.mty-faq summary::after {
	content: "+";
	flex: none;
	color: var(--mty-color-accent);
	font-family: var(--mty-font-accent);
	font-size: 1.3em;
	font-weight: 400;
	line-height: 1;
}

.mty-faq details[open] > summary::after {
	content: "\2212";
}

.mty-faq details > p {
	margin-block-end: var(--mty-space-m);
}

/* Contact rows */
.mty-contact-row {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	gap: var(--mty-space-s);
	margin: 0;
	padding-block: .85rem;
	border-block-start: 1px solid var(--mty-color-line);
}

.mty-contact-row:last-child {
	border-block-end: 1px solid var(--mty-color-line);
}

.mty-contact-row strong {
	color: var(--mty-color-muted);
	font-family: var(--mty-font-accent);
	font-size: .9rem;
	font-weight: 500;
	line-height: inherit;
}

/* Call to action */
.mty-pattern__cta > :last-child {
	margin-block-end: 0;
}

.mty-pattern__cta-text > :last-child {
	margin-block-end: var(--mty-space-m);
}

@media (min-width: 900px) {
	.mty-pattern__cta {
		display: flex;
		gap: var(--mty-space-xl);
		align-items: center;
		justify-content: space-between;
	}

	.mty-pattern__cta-text {
		max-width: 44rem;
	}

	.mty-pattern__cta-text > :last-child {
		margin-block-end: 0;
	}

	.mty-pattern__cta .wp-block-buttons {
		flex: none;
	}
}