/**
 * Direction A: The Private Meaning.
 *
 * This component consumes only the global Lupet tokens. Content may change in
 * WordPress; typography, grid, spacing and motion remain code-owned.
 */

.lupet-brand-philosophy {
	min-height: min(54rem, 92svh);
	overflow: clip;
}

.lupet-brand-philosophy__layout {
	align-items: end;
	min-height: calc(min(54rem, 92svh) - (var(--lupet-section-space) * 2));
}

.lupet-brand-philosophy__copy {
	grid-column: 1 / -1;
	min-width: 0;
}

.lupet-brand-philosophy__eyebrow {
	margin-bottom: var(--lupet-space-5);
	color: var(--lupet-color-accent);
}

.lupet-brand-philosophy__heading {
	max-width: 11.5em;
	overflow-wrap: break-word;
}

.lupet-brand-philosophy__body-group {
	max-width: 21rem;
	margin-top: var(--lupet-space-6);
}

.lupet-brand-philosophy__body {
	color: var(--lupet-color-text-muted);
}

.lupet-brand-philosophy__link {
	margin-top: var(--lupet-space-5);
}

.lupet-brand-philosophy__figure {
	--lupet-media-position: 50% 50%;
	grid-column: 1 / -1;
	justify-self: end;
	width: min(78%, 18rem);
	margin: var(--lupet-space-8) 0 0;
	background: var(--lupet-color-media-placeholder-light);
}

.lupet-brand-philosophy.lupet-motion-ready .lupet-brand-philosophy__figure {
	transition-delay: 100ms, 100ms;
	transition-duration: var(--lupet-motion-duration-image), var(--lupet-motion-duration-image);
}

.lupet-brand-philosophy__figure picture {
	display: block;
	width: 100%;
	height: 100%;
}

.lupet-brand-philosophy__figure img {
	filter: saturate(0.82);
}

.lupet-brand-philosophy__artwork-note {
	position: absolute;
	right: var(--lupet-space-4);
	bottom: var(--lupet-space-4);
	z-index: 1;
	color: var(--lupet-color-on-media);
	font-family: var(--lupet-font-sans);
	font-size: 0.55rem;
	font-weight: var(--lupet-font-weight-semibold);
	letter-spacing: var(--lupet-letter-spacing-label);
	line-height: 1.4;
	text-transform: uppercase;
}

.lupet-brand-philosophy .lupet-text-link:focus-visible {
	outline-color: var(--lupet-color-focus);
}

@media (min-width: 48rem) {
	.lupet-brand-philosophy__copy {
		align-self: stretch;
		display: grid;
		grid-column: 1 / span 5;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--lupet-layout-grid-gap);
	}

	.lupet-brand-philosophy__heading-group {
		grid-column: 1 / -1;
	}

	.lupet-brand-philosophy__body-group {
		align-self: end;
		grid-column: 2 / span 3;
		margin-top: var(--lupet-space-10);
	}

	.lupet-brand-philosophy__figure {
		grid-column: 6 / span 3;
		width: min(100%, 20rem);
		margin-top: 0;
	}
}

@media (min-width: 75rem) {
	.lupet-brand-philosophy__copy {
		grid-column: 1 / span 7;
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}

	.lupet-brand-philosophy__body-group {
		grid-column: 2 / span 4;
	}

	.lupet-brand-philosophy__figure {
		grid-column: 9 / span 4;
		width: min(100%, 21rem);
	}
}

@media (max-width: 47.99rem) {
	.lupet-brand-philosophy {
		min-height: 0;
	}

	.lupet-brand-philosophy__layout {
		align-items: start;
		min-height: 0;
	}

	.lupet-brand-philosophy__heading {
		font-size: clamp(2.25rem, 10vw, 2.625rem);
		line-height: 1.02;
		max-width: 9.25em;
	}

	.lupet-brand-philosophy__body-group {
		max-width: 20.25rem;
	}

	.lupet-brand-philosophy__figure {
		width: min(78%, 17.5rem);
	}
}

@media (max-width: 359px) {
	.lupet-brand-philosophy__heading {
		font-size: 2.125rem;
	}

	.lupet-brand-philosophy__figure {
		width: 82%;
	}
}