/* ==========================================================================
   FITOORNAMA — EDITORIAL LAYOUT
   ========================================================================== */

.editorial-container {
	width: min(
		calc(100% - (var(--gutter) * 2)),
		var(--container)
	);
	margin-inline: auto;
}

.editorial-container-wide {
	width: min(
		calc(100% - (var(--gutter) * 2)),
		var(--container-wide)
	);
	margin-inline: auto;
}

.editorial-text {
	max-width: var(--container-text);
}

.editorial-reading {
	max-width: var(--reading-width);
}

/* Section rhythm */

main > section:not(.hero):not(.featured-story) {
	position: relative;
	padding-block: var(--section-space);
}

main > section.compact {
	padding-block: var(--section-space-small);
}

/* Homepage colour rhythm */

.daastaan,
.safarnaama,
.kaarnaama {
	background: var(--color-surface);
}

.roznaamcha,
.khat {
	background: var(--color-background-soft);
}

.tasveerkhana,
.mulaqat {
	color: var(--color-background);
	background: var(--color-green-dark);
}

/* Editorial grids */

.editorial-grid {
	display: grid;
	grid-template-columns:
		minmax(0, 1.35fr)
		minmax(0, 0.9fr);
	gap: var(--grid-gap-large);
	align-items: center;
}

.editorial-grid.reverse {
	grid-template-columns:
		minmax(0, 0.9fr)
		minmax(0, 1.35fr);
}

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

.editorial-grid.reverse > :last-child {
	order: 1;
}

/* Dividers */

.editorial-divider {
	width: 72px;
	height: 1px;
	margin: 32px 0;
	background: var(--color-gold);
}

/* Chapter numbers */

.chapter-number {
	position: absolute;
	top: clamp(36px, 5vw, 70px);
	left: 50%;
	z-index: 0;
	color: rgba(30, 30, 30, 0.026);
	font-family: var(--font-heading);
	font-size: clamp(5rem, 10vw, 10rem);
	font-weight: 500;
	line-height: 1;
	pointer-events: none;
	user-select: none;
	transform: translateX(-50%);
}

.tasveerkhana .chapter-number,
.mulaqat .chapter-number {
	color: rgba(247, 244, 237, 0.045);
}

/* Image system */

.editorial-image {
	position: relative;
	overflow: hidden;
	background: var(--color-background-soft);
}

.editorial-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 1.25s var(--ease-cinematic),
		filter 0.8s ease;
}

.editorial-image:hover img {
	filter: brightness(1.025) contrast(1.02);
	transform: scale(1.025);
}

/* Responsive */

@media (max-width: 1024px) {

	.editorial-grid,
	.editorial-grid.reverse {
		grid-template-columns: 1fr;
		gap: clamp(48px, 8vw, 76px);
	}

	.editorial-grid.reverse > :first-child,
	.editorial-grid.reverse > :last-child {
		order: initial;
	}
}

@media (max-width: 768px) {

	main > section:not(.hero):not(.featured-story) {
		padding-block: clamp(76px, 16vw, 110px);
	}

	.chapter-number {
		font-size: 4.5rem;
	}
}