/* ==========================================================================
   Egittosì — Layout
   Main landmark · containers · sections & tones · stack · grid · split ·
   utilities · scroll lock · section head · page hero · breadcrumbs
   ========================================================================== */

.site-main {
	display: block;
	flex: 1 0 auto;
}

.site-main:focus {
	outline: none;
}

/* Containers --------------------------------------------------------------- */

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

.container--wide {
	max-width: calc(var(--container-wide) + 2 * var(--gutter));
}

.container--narrow {
	max-width: calc(var(--container-narrow) + 2 * var(--gutter));
}

/* Sections ------------------------------------------------------------------ */

.section {
	position: relative;
	padding-block: var(--section-y);
}

.section--tight {
	padding-block: var(--section-y-sm);
}

.section--ivory {
	background-color: var(--c-ivory);
}

.section--white {
	background-color: var(--c-white);
}

.section--sand {
	background-color: var(--c-sand-100);
}

.section--navy {
	background-color: var(--c-nile-900);
	color: color-mix(in srgb, var(--c-white) 80%, var(--c-nile-900));
}

.section--navy :is(h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4) {
	color: var(--c-white);
}

.section--navy :is(h1, h2, h3, .display, .h1, .h2, .h3) em {
	color: var(--c-gold-400);
}

.section--navy :is(.lead, .text-muted) {
	color: color-mix(in srgb, var(--c-white) 70%, var(--c-nile-900));
}

.section--navy :where(a:not([class])) {
	color: var(--c-gold-300);
}

/* Stack (vertical rhythm) ------------------------------------------------- */

.stack > * + * {
	margin-block-start: var(--stack-space, var(--space-5));
}

.stack--sm {
	--stack-space: var(--space-3);
}

.stack--lg {
	--stack-space: var(--space-7);
}

/* Grid ------------------------------------------------------------------------ */

.grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--grid-gap, clamp(1.75rem, 1rem + 2.4vw, 3rem));
}

@media (min-width: 768px) {
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Split (two-column editorial) --------------------------------------------- */

.split {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 6rem);
	align-items: center;
}

@media (min-width: 1024px) {
	.split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.split--even {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.split--wide-first {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.split--reverse > :first-child {
		order: 2;
	}

	.split--top {
		align-items: start;
	}
}

/* Utilities ------------------------------------------------------------------ */

.text-center {
	text-align: center;
}

.text-start {
	text-align: start;
}

.mx-auto {
	margin-inline: auto;
}

.measure {
	max-width: 38rem;
}

/* Scroll lock (EGT.utils.lockScroll) */
html.is-scroll-locked,
html.is-scroll-locked body {
	overflow: hidden;
}

html.is-scroll-locked body {
	padding-inline-end: var(--scrollbar-w, 0px);
}

/* Section head ----------------------------------------------------------------- */

.section-head {
	display: grid;
	gap: var(--space-5);
	margin-block-end: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.section-head__main {
	display: grid;
	justify-items: start;
	gap: var(--space-4);
	max-width: 48rem;
}

.section-head__title {
	font-size: var(--fs-h2);
}

.section-head--h3 .section-head__title,
.section-head--h4 .section-head__title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-display);
}

.section-head__text {
	max-width: 40rem;
	color: var(--c-text-soft);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.section-head--center {
	justify-items: center;
	text-align: center;
}

.section-head--center .section-head__main {
	justify-items: center;
	margin-inline: auto;
}

.section-head--light .section-head__title {
	color: var(--c-white);
}

.section-head--light .section-head__title em {
	color: var(--c-gold-400);
}

.section-head--light .section-head__text {
	color: color-mix(in srgb, var(--c-white) 74%, var(--c-nile-900));
}

@media (min-width: 1024px) {
	.section-head.has-link:not(.section-head--center) {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
	}

	.section-head__aside {
		padding-block-end: 0.5rem;
	}
}

/* Page hero ------------------------------------------------------------------ */

.page-hero {
	--ph-h: clamp(380px, 52svh, 560px);
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
}

.page-hero--medium {
	--ph-h: clamp(460px, 70svh, 760px);
}

.page-hero--large {
	--ph-h: clamp(540px, 88svh, 960px);
}

.page-hero__inner {
	position: relative;
}

.page-hero__content {
	display: grid;
	justify-items: start;
	gap: var(--space-4);
	max-width: 56rem;
}

.page-hero--align-center .page-hero__content {
	justify-items: center;
	margin-inline: auto;
	text-align: center;
}

.page-hero__title {
	max-width: 18ch;
	font-size: var(--fs-h1);
	line-height: 1.02;
}

.page-hero--large .page-hero__title {
	font-size: var(--fs-display);
}

.page-hero--compact .page-hero__title {
	max-width: 22ch;
}

.page-hero__subtitle {
	max-width: 40rem;
	color: var(--c-text-soft);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	margin-block-start: var(--space-1);
}

.page-hero__after {
	width: 100%;
	max-width: 40rem;
	margin-block-start: var(--space-3);
}

/* Cinematic image variant */
.page-hero--image {
	min-height: var(--ph-h);
	padding-block: calc(var(--header-h) + var(--space-8)) clamp(3rem, 2rem + 4vw, 6rem);
	background-color: var(--c-nile-900);
	color: var(--c-white);
}

.page-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.page-hero__media :is(img, .img-fallback) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--c-nile-950) 58%, transparent) 0%, transparent 30%),
		linear-gradient(0deg, color-mix(in srgb, var(--c-nile-950) 80%, transparent) 0%, color-mix(in srgb, var(--c-nile-950) 34%, transparent) 48%, transparent 78%);
}

.page-hero--image .page-hero__title {
	color: var(--c-white);
}

.page-hero--image .page-hero__title em {
	color: var(--c-gold-300);
}

.page-hero--image .page-hero__subtitle {
	color: color-mix(in srgb, var(--c-white) 86%, transparent);
}

.page-hero--image .meta-chip {
	color: var(--c-white);
}

.page-hero--image .meta-chip .icon {
	color: var(--c-gold-300);
}

.page-hero__credit {
	position: absolute;
	inset-block-end: var(--space-3);
	inset-inline-end: var(--gutter);
	margin: 0;
	color: color-mix(in srgb, var(--c-white) 62%, transparent);
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
}

@media (min-width: 1024px) {
	.page-hero--image.page-hero--align-left .page-hero__shade {
		background:
			linear-gradient(90deg, color-mix(in srgb, var(--c-nile-950) 46%, transparent) 0%, transparent 62%),
			linear-gradient(180deg, color-mix(in srgb, var(--c-nile-950) 55%, transparent) 0%, transparent 28%),
			linear-gradient(0deg, color-mix(in srgb, var(--c-nile-950) 74%, transparent) 0%, color-mix(in srgb, var(--c-nile-950) 26%, transparent) 46%, transparent 76%);
	}
}

/* Typographic variant */
.page-hero--plain {
	padding-block: clamp(3rem, 2rem + 5vw, 7rem) clamp(2.75rem, 1.75rem + 4vw, 5.5rem);
	border-block-end: 1px solid var(--c-border);
	background: linear-gradient(180deg, var(--c-ivory) 0%, var(--c-ivory-2) 100%);
}

.page-hero--plain.page-hero--large {
	min-height: clamp(420px, 62svh, 680px);
}

.has-hero .page-hero--plain {
	padding-block-start: calc(var(--header-h) + clamp(3rem, 2rem + 5vw, 7rem));
}

.page-hero--plain .page-hero__content::after {
	content: "";
	width: 64px;
	height: 1px;
	margin-block-start: var(--space-3);
	background-color: var(--c-gold-500);
}

.page-hero__deco {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
	z-index: -1;
	width: min(92vw, 760px);
	color: var(--c-gold-500);
	opacity: 0.2;
	pointer-events: none;
}

.page-hero__deco svg {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 1024px) {
	.page-hero__deco {
		width: min(56vw, 820px);
		opacity: 0.3;
	}
}

/* Breadcrumbs ------------------------------------------------------------------ */

.breadcrumbs {
	margin-block-end: var(--space-2);
	color: var(--c-text-muted);
	font-size: var(--fs-xs);
	letter-spacing: 0.03em;
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
}

.breadcrumbs__link {
	color: inherit;
	text-decoration: none;
}

.breadcrumbs__link:hover {
	color: var(--c-nile-700);
	text-decoration: underline;
}

.breadcrumbs__sep {
	display: inline-flex;
	opacity: 0.55;
}

.breadcrumbs__current {
	max-width: 34ch;
	overflow: hidden;
	color: var(--c-heading);
	font-weight: var(--fw-medium);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.page-hero--image .breadcrumbs {
	color: color-mix(in srgb, var(--c-white) 78%, transparent);
}

.page-hero--image .breadcrumbs__link:hover,
.page-hero--image .breadcrumbs__current {
	color: var(--c-white);
}