/**
 * Studiolo — pattern helpers.
 *
 * Only what core blocks and the theme's block styles cannot express on their
 * own: full-bleed band gutters, section heads, numbered counters, stats, the
 * client wall, team cards, awards rows, contact details and journal cards.
 *
 * Built exclusively from --st-* design tokens and logical properties, so every
 * Customizer combination (dark presets, large radii, uppercase headings,
 * density, type ratio…) keeps working, in LTR and RTL.
 *
 * @package Studiolo
 */

/* -------------------------------------------------------------------------
 * Bands & panels
 * ---------------------------------------------------------------------- */

/* Full-bleed bands keep their inner content on the site's gutter grid. */
.st-band.alignfull {
	padding-inline: var(--st-gutter);
}

/* Inset panels (e.g. the call-to-action) follow the card radius. */
.st-panel {
	border-radius: var(--st-radius-card);
}

/* -------------------------------------------------------------------------
 * Shared rhythm inside pattern sections
 * ---------------------------------------------------------------------- */

:where(.st-hero, .st-section-head__title, .st-cta__title, .st-studio-intro, .st-testimonial, .st-stats, .st-services-list, .st-awards, .st-faq, .st-story, .st-contact__form, .st-clients) .is-style-label + :is(.wp-block-heading, .wp-block-quote) {
	margin-block-start: var(--st-space-xs);
}

:where(.st-hero, .st-section-head, .st-cta, .st-studio-intro) .wp-block-heading {
	text-wrap: balance;
}

:where(.st-hero__media, .st-page-image, .st-studio-intro .wp-block-image, .st-team__portrait) img {
	border-radius: var(--st-radius-media);
}

/* -------------------------------------------------------------------------
 * Section heads: title on the start side, actions or aside on the end side
 * ---------------------------------------------------------------------- */

.wp-block-group.st-section-head {
	row-gap: var(--st-space-m);
	column-gap: var(--st-space-2xl);
}

.st-section-head__title {
	flex: 1 1 28rem;
	max-inline-size: 52rem;
}

.st-section-head__aside {
	flex: 0 1 26rem;
	margin-block: 0;
}

.st-section-head > .wp-block-buttons {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
 * Heroes
 * ---------------------------------------------------------------------- */

.st-hero .is-style-display {
	max-inline-size: 18ch;
}

.st-page-intro .is-style-display {
	max-inline-size: 20ch;
}

.st-hero .is-style-lead {
	max-inline-size: 40rem;
}

.st-hero__footer {
	row-gap: var(--st-space-l);
}

.st-hero-split .st-hero__text > .wp-block-heading {
	max-inline-size: 16ch;
}

/* Full-width image hero: text stays readable on the image, whatever the preset. */
.wp-block-cover.st-hero-image {
	--st-color-focus: currentColor;
}

.wp-block-cover.st-hero-image :is(.is-style-label, .is-style-lead, .st-muted) {
	color: inherit;
}

.wp-block-cover.st-hero-image .is-style-display {
	max-inline-size: 16ch;
}

.wp-block-cover.st-hero-image .is-style-lead {
	max-inline-size: 36rem;
}

.wp-block-cover.st-hero-image .wp-block-button.is-style-arrow .wp-block-button__link {
	color: inherit;
}

/* -------------------------------------------------------------------------
 * Numbered items (services grid, process steps)
 * ---------------------------------------------------------------------- */

.st-numbered {
	counter-reset: st-step;
}

.st-numbered__item {
	counter-increment: st-step;
}

.st-numbered__item::before {
	content: counter(st-step, decimal-leading-zero);
	display: block;
	margin-block-end: var(--st-space-l);
	font-family: var(--st-font-ui);
	font-size: var(--st-fs--1);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--st-ui-tracking);
	line-height: 1;
	color: var(--st-color-muted);
}

.st-numbered > .wp-block-column > .st-numbered__item {
	block-size: 100%;
}

.st-steps > .st-step {
	padding-block-start: var(--st-space-m);
	border-block-start: max(1px, var(--st-border-width)) solid var(--st-color-border);
}

.st-steps > .st-step::before {
	font-family: var(--st-font-heading);
	font-size: var(--st-fs-3);
	font-weight: var(--st-heading-weight);
	letter-spacing: var(--st-heading-tracking);
	font-synthesis-weight: none;
	color: var(--st-color-text);
}

.st-service-card__list {
	margin-block-start: var(--st-space-l);
}

/* -------------------------------------------------------------------------
 * Four-up columns: 2 × 2 on tablets instead of four squeezed columns
 * ---------------------------------------------------------------------- */

@media (min-width: 600px) and (max-width: 1023px) {
	.wp-block-columns.st-cols-4.st-cols-4 {
		flex-wrap: wrap !important;
		row-gap: var(--st-space-xl);
	}

	.wp-block-columns.st-cols-4.st-cols-4 > .wp-block-column {
		flex-basis: calc(50% - var(--st-space-l)) !important;
		flex-grow: 1;
	}
}

/* -------------------------------------------------------------------------
 * Stats
 * ---------------------------------------------------------------------- */

.st-stat {
	padding-block-start: var(--st-space-m);
	border-block-start: max(1px, var(--st-border-width)) solid var(--st-color-border);
}

.st-stat__value {
	margin-block: 0;
	font-family: var(--st-font-heading);
	font-weight: var(--st-heading-weight);
	letter-spacing: var(--st-heading-tracking);
	text-transform: var(--st-heading-case);
	font-variant-numeric: lining-nums tabular-nums;
	font-synthesis-weight: none;
	line-height: 1;
}

.st-stat > .st-stat__label {
	margin-block-start: var(--st-space-xs);
}

/* -------------------------------------------------------------------------
 * Client wall (styled text names — no logo files)
 * ---------------------------------------------------------------------- */

.wp-block-list.st-logo-wall {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: max(1px, var(--st-border-width));
	padding: 0;
	background: var(--st-color-border);
	border: max(1px, var(--st-border-width)) solid var(--st-color-border);
	border-radius: min(var(--st-radius-card), var(--st-space-l));
	overflow: hidden;
}

.wp-block-list.st-logo-wall > li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: calc(var(--st-space-3xl) * 1.25);
	margin: 0;
	padding: var(--st-space-m);
	background: var(--st-color-bg);
	color: var(--st-color-text);
	font-family: var(--st-font-heading);
	font-size: var(--st-fs-1);
	font-weight: var(--st-heading-weight);
	letter-spacing: var(--st-heading-tracking);
	text-transform: var(--st-heading-case);
	font-synthesis-weight: none;
	line-height: 1.15;
	text-align: center;
	overflow-wrap: anywhere;
}

/* A little typographic variety so the wall reads like a set of wordmarks. */
.wp-block-list.st-logo-wall > li:nth-child(3n + 2) {
	font-family: var(--st-font-body);
	font-style: italic;
	text-transform: none;
}

.wp-block-list.st-logo-wall > li:nth-child(4n + 3) {
	font-family: var(--st-font-ui);
	font-style: normal;
	font-size: var(--st-fs--1);
	letter-spacing: calc(var(--st-ui-tracking) + 0.06em);
	text-transform: uppercase;
}

@media (min-width: 640px) {
	.wp-block-list.st-logo-wall {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.wp-block-list.st-logo-wall {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.wp-block-list.st-logo-wall {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Testimonial
 * ---------------------------------------------------------------------- */

.st-testimonial .wp-block-quote {
	max-inline-size: 60rem;
}

/* -------------------------------------------------------------------------
 * Team
 * ---------------------------------------------------------------------- */

.st-team__portrait {
	margin-block-end: 0;
	overflow: hidden;
	border-radius: var(--st-radius-media);
}

.st-team__portrait img {
	display: block;
	inline-size: 100%;
}

.st-team__member > .st-team__name {
	margin-block-start: var(--st-space-s);
}

.st-team__member > .st-team__role {
	margin-block-start: var(--st-space-3xs);
	font-size: var(--st-fs--1);
}

/* -------------------------------------------------------------------------
 * Services list rows
 * ---------------------------------------------------------------------- */

.st-services-list__items > .st-services-list__item {
	margin-block-start: 0;
	padding-block: var(--st-space-l);
}

.st-services-list__item > .wp-block-heading {
	margin-block: 0;
}

.st-services-list__item > .st-muted {
	margin-block: var(--st-space-xs) 0;
}

@media (min-width: 782px) {
	.st-services-list__item {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		column-gap: var(--st-space-l);
		align-items: baseline;
	}

	.st-services-list__item > .st-muted {
		margin-block-start: 0;
	}
}

/* -------------------------------------------------------------------------
 * Awards rows: year · award · project
 * ---------------------------------------------------------------------- */

.wp-block-list.st-awards__list > li {
	display: grid;
	grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr);
	column-gap: var(--st-space-m);
	row-gap: var(--st-space-3xs);
	align-items: baseline;
}

.wp-block-list.st-awards__list > li > strong {
	font-family: var(--st-font-ui);
	font-size: var(--st-fs--1);
	font-weight: inherit;
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--st-ui-tracking);
	color: var(--st-color-muted);
}

.wp-block-list.st-awards__list > li > em {
	grid-column: 2;
	font-size: var(--st-fs--1);
	font-style: normal;
	color: var(--st-color-muted);
}

@media (min-width: 782px) {
	.wp-block-list.st-awards__list > li {
		grid-template-columns: minmax(5rem, auto) minmax(0, 1fr) minmax(0, 16rem);
	}

	.wp-block-list.st-awards__list > li > em {
		grid-column: auto;
		text-align: end;
	}
}

/* -------------------------------------------------------------------------
 * Contact details
 * ---------------------------------------------------------------------- */

.st-contact__item {
	padding-block-start: var(--st-space-m);
	border-block-start: max(1px, var(--st-border-width)) solid var(--st-color-border);
}

.st-contact__value {
	overflow-wrap: anywhere;
}

:is(.st-contact__value, .st-contact__social) a {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: max(1px, var(--st-border-width));
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--st-duration-fast) var(--st-ease);
}

:is(.st-contact__value, .st-contact__social) a:is(:hover, :focus-visible) {
	text-decoration-color: currentColor;
}

.wp-block-list.st-contact__social > li {
	margin-block: 0;
}

.st-contact__note {
	padding: var(--st-space-l);
	border: max(1px, var(--st-border-width)) dashed var(--st-color-border);
	border-radius: var(--st-radius-card);
}

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

.wp-block-group.st-cta__inner {
	row-gap: var(--st-space-l);
	column-gap: var(--st-space-2xl);
}

.st-cta__title {
	flex: 1 1 26rem;
	min-inline-size: 0;
	max-inline-size: 52rem;
}

.st-cta__actions {
	flex: 0 1 24rem;
}

.st-cta__actions > .st-muted {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
 * Journal cards (query loop)
 * ---------------------------------------------------------------------- */

.st-journal-latest__query {
	margin-block-start: var(--st-space-xl);
}

.st-post-card {
	position: relative;
	block-size: 100%;
}

.st-post-card .wp-block-post-featured-image {
	margin-block-end: var(--st-space-s);
	overflow: hidden;
	border-radius: var(--st-radius-media);
}

.st-post-card .wp-block-post-featured-image img {
	display: block;
	inline-size: 100%;
}

.st-post-card .wp-block-post-title {
	margin-block-start: var(--st-space-2xs);
}

.st-post-card .wp-block-post-title a {
	color: inherit;
	text-decoration-line: none;
}

/* One link per card: the title link covers the whole card. */
.st-post-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.st-post-card:hover .wp-block-post-title a {
	text-decoration-line: underline;
	text-decoration-thickness: max(1px, var(--st-border-width));
	text-underline-offset: 0.15em;
}

@supports selector(:has(*)) {
	.st-post-card:has(.wp-block-post-title a:focus-visible) {
		outline: 2px solid var(--st-color-focus);
		outline-offset: 3px;
	}

	.st-post-card .wp-block-post-title a:focus-visible {
		outline: none;
	}
}

@media (min-width: 601px) and (max-width: 959px) {
	.st-journal-latest .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Motion (only when the Motion setting is on and the visitor allows it)
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.st-motion :is(.st-team__portrait, .st-post-card .wp-block-post-featured-image) img {
		transition: scale var(--st-duration) var(--st-ease);
	}

	.st-motion .st-team__member:hover .st-team__portrait img,
	.st-motion .st-post-card:hover .wp-block-post-featured-image img {
		scale: 1.03;
	}
}