/* Hero */
/* .about-hero__grid is a core Columns block (widths set on the columns
   themselves); only vertical centering + gap need overriding here. */
.about-hero__grid.wp-block-columns {
	align-items: center;
	gap: 3rem;
}

@media (min-width: 900px) {
	.about-hero__grid.wp-block-columns {
		gap: 4rem;
	}
}

.about-hero__content h1 {
	margin-block: 1.25rem 1.5rem;
	max-width: 16ch;
}

.about-hero__content h1 em {
	font-family: var(--font-body);
	font-style: italic;
}

.about-hero__lead {
	color: var(--ink-muted);
	line-height: 1.7;
	max-width: 40ch;
	margin-bottom: 2.5rem;
}

.about-hero__stats.wp-block-columns {
	border-top: 1px solid var(--border);
	padding-top: 1.5rem;
	margin-top: 2.5rem;
	gap: 2.5rem;
}

.about-hero__stats .wp-block-column {
	flex-grow: 0;
}

.about-hero__stat-value {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	margin-top: 0.25rem;
}

.about-hero__media-wrap {
	position: relative;
}

.about-hero__media {
	aspect-ratio: 4 / 5;
}

.about-hero__badge {
	position: absolute;
	bottom: -1.5rem;
	left: -1.5rem;
	background: var(--surface);
	border: 1px solid var(--border);
	padding: 1.25rem 1.5rem;
	display: none;
}

@media (min-width: 900px) {
	.about-hero__badge {
		display: block;
	}
}

.about-hero__badge-name {
	font-style: italic;
	font-family: var(--font-body);
	margin-top: 0.25rem;
}

/* Philosophy list (asymmetric — intro + divided list, not three cards) */
.philosophy-list {
	background: var(--surface-sunken);
}

/* .philosophy-list__grid is a core Columns block; widths come from the
   columns themselves (2/5 + 3/5), just gap needs overriding here. */
.philosophy-list__grid.wp-block-columns {
	gap: 3rem;
}

@media (min-width: 900px) {
	.philosophy-list__grid.wp-block-columns {
		gap: 4rem;
	}
}

.philosophy-list__intro h2 {
	margin-bottom: 1.25rem;
}

.philosophy-list__intro h2 em {
	font-style: italic;
}

.philosophy-list__intro p {
	color: var(--ink-muted);
	line-height: 1.7;
}

.philosophy-list__items {
	display: flex;
	flex-direction: column;
}

.philosophy-list__item {
	padding-block: 1.25rem;
	border-top: 1px solid var(--border);
}

.philosophy-list__item:last-child {
	border-bottom: 1px solid var(--border);
}

.philosophy-list__item .icon {
	color: var(--accent-ink);
	margin-bottom: 1rem;
}

.philosophy-list__item h3 {
	font-size: 1.375rem;
	margin-bottom: 0.5rem;
}

.philosophy-list__item p {
	color: var(--ink-muted);
	line-height: 1.6;
	max-width: 50ch;
}

/* Studio bento */
.studio__heading {
	text-align: center;
	max-width: 42rem;
	margin-inline: auto;
	margin-bottom: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.studio__heading p {
	color: var(--ink-muted);
	margin-inline: auto;
}

/* .studio__row is a core Columns block (photo row); the info band sits
   below as its own full-width group. Row items stretch to a shared
   height rather than each computing its own aspect-ratio from its own
   column width (see the archive-gallery fix for why that matters). */
.studio__row.wp-block-columns {
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
	align-items: stretch;
	min-height: 16rem;
}

@media (min-width: 900px) {
	.studio__row.wp-block-columns {
		min-height: 20rem;
	}
}

.studio__cell {
	position: relative;
	height: 100%;
}

.studio__cell-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-label);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--surface);
	background: color-mix(in srgb, var(--ink) 25%, transparent);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.studio__cell:hover .studio__cell-label {
	opacity: 1;
}

.studio__cell--info {
	background: var(--surface-sunken);
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.5rem;
	padding: 2rem;
}

.studio__cell--info .icon {
	color: var(--accent-ink);
	margin-bottom: 0.5rem;
}

.studio__cell--info h4 {
	font-size: 1.25rem;
	margin-bottom: 0.25rem;
}