/**
 * Hilaal — homepage modules.
 *
 * Loaded only on a front page that uses the module builder.
 */

.chr-module {
	padding-block: calc(var(--chr-module-gap) / 2);
}

.chr-module:first-child {
	padding-top: clamp(24px, 3vw, 40px);
}

.chr-module.is-bg-alt {
	background-color: var(--chr-bg-alt);
}

.chr-module.is-bg-dark {
	background-color: var(--chr-secondary);
	--chr-heading: #fff;
	--chr-text: rgba(255, 255, 255, .82);
	--chr-muted: rgba(255, 255, 255, .6);
	--chr-border: rgba(255, 255, 255, .14);
	--chr-surface: rgba(255, 255, 255, .06);
	color: var(--chr-text);
}

.chr-module.is-bg-dark .chr-card__title a {
	color: #fff;
}

.chr-module.is-width-full > .chr-container {
	width: 100%;
}

/* Section header --------------------------------------------------------- */

.chr-section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 26px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--chr-border);
}

.chr-section-header__title {
	position: relative;
	margin: 0;
	padding-bottom: 12px;
	margin-bottom: -13px;
	font-size: clamp(21px, 2.2vw, 28px);
}

.chr-section-header__title span {
	display: inline-block;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--chr-primary);
}

.chr-section-header__subtitle {
	margin: 6px 0 0;
	color: var(--chr-muted);
	font-size: 15px;
}

.chr-section-header__link {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	flex: none;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.chr-section-header__link .chr-icon {
	transition: transform var(--chr-transition);
}

.chr-section-header__link:hover .chr-icon {
	transform: translateX(3px);
}

/* Hero grid -------------------------------------------------------------- */

/* The lead and the secondary stack are one row, so both columns end on the
   same line whatever the number of secondary stories. */

.chr-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
	gap: var(--chr-gap);
	align-items: stretch;
}

.chr-hero-grid__lead,
.chr-hero-grid__rest {
	display: grid;
	gap: var(--chr-gap);
	min-height: 0;
}

.chr-hero-grid__rest {
	grid-auto-rows: 1fr;
}

.chr-hero-grid__lead > .chr-card,
.chr-hero-grid__rest > .chr-card {
	height: 100%;
}

.chr-hero-grid__lead > .chr-card--overlay {
	min-height: clamp(360px, 40vw, 520px);
}

.chr-hero-grid__rest > .chr-card--overlay {
	min-height: 150px;
}

/* Hero split ------------------------------------------------------------- */

.chr-hero-split {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(24px, 3.5vw, 48px);
	align-items: start;
}

.chr-hero-split__list {
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: chr-split;
}

.chr-hero-split__item {
	counter-increment: chr-split;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--chr-border);
}

.chr-hero-split__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* Feature card ----------------------------------------------------------- */

/* A feature card leads a block on its own, so there is nothing beside it to
   line up with and no reason to hold three lines of headline space open. */

.chr-card--feature {
	--chr-card-title-size: clamp(24px, 2.4vw, 34px);
	--chr-card-title-leading: 1.18;
	--chr-card-title-lines: 3;
	--chr-card-title-reserve: 0;
	--chr-card-excerpt-lines: 3;
}

/* Trending --------------------------------------------------------------- */

.chr-trending {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--chr-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: chr-trending;
}

.chr-trending__item {
	display: flex;
	align-items: stretch;
	gap: 14px;
	padding-right: var(--chr-gap);
	border-right: 1px solid var(--chr-border);
}

.chr-trending__item:last-child {
	border-right: 0;
	padding-right: 0;
}

.chr-trending__rank {
	flex: none;
	min-width: .8em;
	color: var(--chr-cat, var(--chr-primary));
	font-family: var(--chr-font-heading);
	font-size: 42px;
	font-weight: 800;
	line-height: .84;
	font-variant-numeric: tabular-nums;
	opacity: .28;
	transition: opacity var(--chr-transition);
}

.chr-trending__item:hover .chr-trending__rank {
	opacity: .6;
}

.chr-trending__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1 1 auto;
}

/* Same rule as the cards: a fixed headline block and a byline held against the
   bottom, so the five entries of a trending row line up. */

.chr-trending__body > .chr-meta {
	margin-top: auto;
}

.chr-trending__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0;
	min-height: calc(3 * 1.32em);
	font-size: 17px;
	line-height: 1.32;
	overflow-wrap: break-word;
}

.chr-trending__title a {
	color: var(--chr-heading);
	text-decoration: none;
}

.chr-trending__title a:hover,
.chr-trending__title a:focus-visible {
	color: var(--chr-primary);
}

/* Editor's picks --------------------------------------------------------- */

.chr-picks {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(24px, 3.5vw, 44px);
	align-items: start;
}

.chr-picks__rest {
	display: grid;
	gap: 18px;
}

.chr-picks__rest .chr-card + .chr-card {
	padding-top: 18px;
	border-top: 1px solid var(--chr-border);
}

/* Category showcase ------------------------------------------------------ */

.chr-showcase {
	display: grid;
	grid-template-columns: repeat(var(--chr-columns, 3), minmax(0, 1fr));
	gap: clamp(24px, 3vw, 40px);
}

.chr-showcase--2 { --chr-columns: 2; }
.chr-showcase--3 { --chr-columns: 3; }
.chr-showcase--4 { --chr-columns: 4; }

.chr-showcase__column {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.chr-showcase__title {
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--chr-cat, var(--chr-primary));
	font-size: 18px;
}

.chr-showcase__title a {
	color: var(--chr-heading);
	text-decoration: none;
}

.chr-showcase__column .chr-card--compact + .chr-card--compact {
	padding-top: 14px;
	border-top: 1px solid var(--chr-border);
}

/* Tabs ------------------------------------------------------------------- */

.chr-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--chr-border);
}

.chr-tabs__tab {
	position: relative;
	padding: .7em 1.05em;
	border: 0;
	background: none;
	color: var(--chr-muted);
	font-family: var(--chr-font-menu);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: color var(--chr-transition);
}

.chr-tabs__tab::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background-color: var(--chr-cat, var(--chr-primary));
	transform: scaleX(0);
	transition: transform var(--chr-transition);
}

.chr-tabs__tab:hover {
	color: var(--chr-heading);
}

.chr-tabs__tab[aria-selected="true"] {
	color: var(--chr-heading);
}

.chr-tabs__tab[aria-selected="true"]::after {
	transform: scaleX(1);
}

.chr-tabs__panel:focus-visible {
	outline-offset: 6px;
}

.chr-tabs__more {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin-top: 22px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

/* Two column ------------------------------------------------------------- */

.chr-two-column {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--chr-sidebar-width);
	gap: clamp(28px, 4vw, 52px);
	align-items: stretch;
}

.chr-two-column.is-single {
	grid-template-columns: minmax(0, 1fr);
}

.chr-two-column__sticky {
	position: sticky;
	top: calc(var(--chr-header-offset, 0px) + 24px);
	max-height: calc(100vh - var(--chr-header-offset, 0px) - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.chr-two-column__sticky::-webkit-scrollbar {
	width: 6px;
}

.chr-two-column__sticky::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background-color: var(--chr-border);
}

.chr-loop--list .chr-card + .chr-card {
	margin-top: 26px;
	padding-top: 26px;
	border-top: 1px solid var(--chr-border);
}

/* Newsletter block ------------------------------------------------------- */

.chr-newsletter-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	padding: clamp(26px, 4vw, 48px);
	border-radius: calc(var(--chr-radius) * 1.6);
	background-color: var(--chr-surface);
}

.chr-module.is-bg-default .chr-newsletter-block,
.chr-module.is-bg-alt .chr-newsletter-block {
	border: 1px solid var(--chr-border);
}

.chr-newsletter-block__icon {
	margin-bottom: 12px;
	color: var(--chr-primary);
}

.chr-newsletter-block__title {
	margin: 0 0 .35em;
	font-size: clamp(23px, 2.4vw, 32px);
}

.chr-newsletter-block__lead {
	margin: 0;
	color: var(--chr-muted);
	max-width: 52ch;
}

/* Carousel --------------------------------------------------------------- */

.chr-carousel {
	position: relative;
}

.chr-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--chr-gap) * (var(--chr-carousel-columns, 3) - 1))) / var(--chr-carousel-columns, 3));
	gap: var(--chr-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.chr-carousel__track::-webkit-scrollbar {
	display: none;
}

.chr-carousel__track > * {
	scroll-snap-align: start;
}

.chr-carousel__track--2 { --chr-carousel-columns: 2; }
.chr-carousel__track--3 { --chr-carousel-columns: 3; }
.chr-carousel__track--4 { --chr-carousel-columns: 4; }
.chr-carousel__track--5 { --chr-carousel-columns: 5; }

.chr-carousel.is-static .chr-carousel__track {
	grid-auto-flow: row;
	overflow: visible;
}

.chr-carousel__controls {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	margin-top: 16px;
}

.chr-carousel__button,
.chr-slider__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--chr-border);
	border-radius: 50%;
	background-color: var(--chr-surface);
	color: var(--chr-heading);
	font-size: 19px;
	cursor: pointer;
	transition: border-color var(--chr-transition), background-color var(--chr-transition), color var(--chr-transition);
}

.chr-carousel__button:hover:not([disabled]),
.chr-slider__button:hover:not([disabled]) {
	border-color: var(--chr-primary);
	background-color: var(--chr-primary);
	color: var(--chr-on-primary);
}

.chr-carousel__button[disabled],
.chr-slider__button[disabled] {
	opacity: .4;
	cursor: default;
}

/* Custom HTML module ----------------------------------------------------- */

.chr-html-module > *:last-child {
	margin-bottom: 0;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1023px) {
	.chr-hero-grid,
	.chr-hero-split,
	.chr-picks,
	.chr-two-column,
	.chr-newsletter-block {
		grid-template-columns: minmax(0, 1fr);
	}

	.chr-showcase--3,
	.chr-showcase--4 { --chr-columns: 2; }

	.chr-carousel__track {
		--chr-carousel-columns: 2;
	}

	/* Both sides, so the right-to-left sheet has nothing left to flip. */
	.chr-trending__item {
		padding-right: 0;
		padding-left: 0;
		border-right: 0;
		border-left: 0;
	}
}

@media (max-width: 560px) {
	.chr-showcase { --chr-columns: 1; }

	.chr-carousel__track {
		--chr-carousel-columns: 1;
	}

	.chr-section-header {
		align-items: flex-start;
	}
}

/* ==========================================================================
   Homepage sidebar
   ========================================================================== */

/* Modules above the starting point stay full width; from there down the stack
   runs beside the widget area. */

/* The tracks stretch deliberately. Aligning them to the start would collapse
   the aside to the height of its widgets, and a sticky child cannot travel
   inside a box no taller than itself. */

.chr-home-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--chr-sidebar-width);
	gap: clamp(28px, 4vw, 52px);
	align-items: stretch;
}

.chr-home-layout--left {
	grid-template-columns: var(--chr-sidebar-width) minmax(0, 1fr);
}

.chr-home-layout--left .chr-home-layout__main {
	order: 2;
}

.chr-home-layout__main,
.chr-home-layout__aside {
	min-width: 0;
}

.chr-home-layout.is-sticky .chr-home-layout__sticky {
	position: sticky;
	top: calc(var(--chr-header-offset, 0px) + 24px);
	max-height: calc(100vh - var(--chr-header-offset, 0px) - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.chr-home-layout.is-sticky .chr-home-layout__sticky::-webkit-scrollbar {
	width: 6px;
}

.chr-home-layout.is-sticky .chr-home-layout__sticky::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background-color: var(--chr-border);
}

/* Inside the column a module has no container and no full-bleed background:
   the column is the width. */

.chr-module.is-width-column {
	padding-inline: 0;
}

.chr-module.is-width-column.is-bg-alt,
.chr-module.is-width-column.is-bg-dark {
	padding-inline: clamp(18px, 3vw, 30px);
	border-radius: var(--chr-radius);
}

/* ==========================================================================
   Full bleed feature
   ========================================================================== */

.chr-feature-full {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(420px, 66vh, 720px);
	isolation: isolate;
	overflow: hidden;
}

.chr-feature-full__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	border-radius: 0;
}

.chr-feature-full__media img,
.chr-feature-full__media .chr-thumbnail__fallback {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

.chr-feature-full::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgb(6 12 22 / .94) 6%, rgb(6 12 22 / .5) 52%, rgb(6 12 22 / .1) 100%);
}

.chr-feature-full__body {
	padding-block: clamp(28px, 5vw, 64px);
	color: #fff;
}

.chr-feature-full__title {
	max-width: 20ch;
	margin: 14px 0 .3em;
	font-size: clamp(30px, 5vw, 64px);
	line-height: 1.05;
	letter-spacing: -.02em;
}

.chr-feature-full__title a {
	color: #fff;
	text-decoration: none;
}

.chr-feature-full__excerpt {
	max-width: 56ch;
	margin: 0 0 14px;
	color: rgb(255 255 255 / .86);
	font-size: clamp(16px, 1.4vw, 19px);
}

.chr-feature-full .chr-meta,
.chr-feature-full .chr-meta a {
	color: rgb(255 255 255 / .84);
}

/* ==========================================================================
   Masonry
   ========================================================================== */

.chr-masonry {
	columns: var(--chr-columns, 3);
	column-gap: var(--chr-gap);
}

.chr-masonry--2 { --chr-columns: 2; }
.chr-masonry--3 { --chr-columns: 3; }
.chr-masonry--4 { --chr-columns: 4; }
.chr-masonry--5 { --chr-columns: 5; }

.chr-masonry__item {
	break-inside: avoid;
	margin-bottom: var(--chr-gap);
}

/* The point of masonry is uneven heights, so the fixed crop is released — but
   a portrait original would otherwise run to a full screen on its own, so the
   height is capped and anything past it is cropped. */

.chr-card--masonry .chr-card__media img {
	aspect-ratio: auto;
	max-height: 440px;
	object-fit: cover;
}

/* ==========================================================================
   Magazine block
   ========================================================================== */

.chr-magazine {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: clamp(24px, 3.5vw, 44px);
	align-items: start;
}

.chr-magazine__main {
	display: grid;
	gap: var(--chr-gap);
	min-width: 0;
}

.chr-magazine__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--chr-gap);
}

.chr-magazine__list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: chr-magazine;
}

.chr-magazine__item {
	counter-increment: chr-magazine;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--chr-border);
}

.chr-magazine__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.chr-magazine__item .chr-card__title::before {
	content: counter(chr-magazine);
	margin-inline-end: .5em;
	color: var(--chr-cat, var(--chr-primary));
	font-size: .85em;
	font-variant-numeric: tabular-nums;
	opacity: .55;
}

/* ==========================================================================
   Timeline
   ========================================================================== */

.chr-timeline {
	position: relative;
	margin: 0;
	padding: 0;
	padding-inline-start: 26px;
	list-style: none;
}

.chr-timeline::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	inset-inline-start: 5px;
	width: 2px;
	background: linear-gradient(to bottom, var(--chr-border), transparent);
}

.chr-timeline__item {
	position: relative;
	padding-bottom: 26px;
}

.chr-timeline__item:last-child {
	padding-bottom: 0;
}

.chr-timeline__marker {
	position: absolute;
	top: 7px;
	inset-inline-start: -26px;
	width: 12px;
	height: 12px;
	border: 2px solid var(--chr-bg);
	border-radius: 50%;
	background-color: var(--chr-cat, var(--chr-primary));
}

.chr-timeline__item.is-live .chr-timeline__marker {
	animation: chr-pulse 1.6s ease-in-out infinite;
}

.chr-timeline__time {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--chr-muted);
	font-family: var(--chr-font-meta);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

.chr-timeline__clock {
	color: var(--chr-heading);
	font-weight: 600;
}

.chr-timeline__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 6px 0 0;
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.3;
	overflow-wrap: break-word;
}

.chr-timeline__title a {
	color: var(--chr-heading);
	text-decoration: none;
}

.chr-timeline__title a:hover,
.chr-timeline__title a:focus-visible {
	color: var(--chr-cat, var(--chr-primary));
}

.chr-timeline__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 6px 0 0;
	color: var(--chr-muted);
	font-size: 15px;
	line-height: var(--chr-card-excerpt-leading, 1.6);
	overflow-wrap: break-word;
}

.chr-timeline .chr-category {
	margin-top: 4px;
}

/* ==========================================================================
   Two lists side by side
   ========================================================================== */

.chr-dual-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}

.chr-dual-list__title {
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--chr-border);
	font-size: 18px;
}

.chr-dual-list__title span {
	display: inline-block;
	padding-bottom: 10px;
	margin-bottom: -11px;
	border-bottom: 2px solid var(--chr-primary);
}

.chr-dual-list__items {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chr-dual-list__item {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--chr-border);
}

.chr-dual-list__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* ==========================================================================
   Explore by topic
   ========================================================================== */

.chr-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chr-pills__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: .7em 1.1em;
	border: 1px solid var(--chr-border);
	border-radius: 999px;
	color: var(--chr-heading);
	font-family: var(--chr-font-menu);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--chr-transition), background-color var(--chr-transition), color var(--chr-transition), transform var(--chr-transition);
}

.chr-pills__link:hover,
.chr-pills__link:focus-visible {
	border-color: var(--chr-cat, var(--chr-primary));
	background-color: var(--chr-cat, var(--chr-primary));
	color: var(--chr-cat-contrast, var(--chr-on-primary));
	transform: translateY(-1px);
}

.chr-pills__count {
	padding: .1em .55em;
	border-radius: 999px;
	background-color: var(--chr-bg-alt);
	color: var(--chr-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.chr-pills__link:hover .chr-pills__count,
.chr-pills__link:focus-visible .chr-pills__count {
	background-color: rgb(255 255 255 / .22);
	color: inherit;
}

/* ==========================================================================
   Contributors
   ========================================================================== */

.chr-contributors {
	display: grid;
	grid-template-columns: repeat(var(--chr-columns, 3), minmax(0, 1fr));
	gap: var(--chr-gap);
}

.chr-contributors--2 { --chr-columns: 2; }
.chr-contributors--3 { --chr-columns: 3; }
.chr-contributors--4 { --chr-columns: 4; }
.chr-contributors--5 { --chr-columns: 5; }

.chr-contributor {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--chr-border);
	border-radius: var(--chr-radius);
	background-color: var(--chr-surface);
	transition: border-color var(--chr-transition), box-shadow var(--chr-transition);
}

.chr-contributor:hover {
	border-color: transparent;
	box-shadow: var(--chr-shadow-md);
}

.chr-contributor__avatar img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.chr-contributor__body {
	min-width: 0;
}

.chr-contributor__name {
	margin: 0;
	font-size: 16px;
}

.chr-contributor__name a {
	color: var(--chr-heading);
	text-decoration: none;
}

.chr-contributor__role {
	margin: 2px 0 0;
	color: var(--chr-primary);
	font-size: 13px;
	font-weight: 600;
}

.chr-contributor__count {
	margin: 2px 0 0;
	color: var(--chr-muted);
	font-size: 13px;
}

/* ==========================================================================
   Responsive for the modules above
   ========================================================================== */

@media (max-width: 1023px) {
	.chr-home-layout,
	.chr-home-layout--left,
	.chr-magazine,
	.chr-dual-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.chr-home-layout--left .chr-home-layout__main {
		order: 0;
	}

	/* Stacked, the sidebar is just another block: nothing to stick to, and a
	   viewport-height cap would turn it into a scrollable box. */
	.chr-home-layout.is-sticky .chr-home-layout__sticky,
	.chr-two-column__sticky {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.chr-masonry--4,
	.chr-masonry--5 { --chr-columns: 3; }

	.chr-contributors--4,
	.chr-contributors--5 { --chr-columns: 3; }
}

@media (max-width: 780px) {
	.chr-masonry,
	.chr-masonry--3,
	.chr-masonry--4,
	.chr-masonry--5 { --chr-columns: 2; }

	.chr-magazine__pair {
		grid-template-columns: minmax(0, 1fr);
	}

	.chr-contributors,
	.chr-contributors--3,
	.chr-contributors--4,
	.chr-contributors--5 { --chr-columns: 2; }
}

@media (max-width: 560px) {
	.chr-masonry,
	.chr-masonry--2,
	.chr-masonry--3,
	.chr-masonry--4,
	.chr-masonry--5 { --chr-columns: 1; }

	.chr-contributors,
	.chr-contributors--2,
	.chr-contributors--3,
	.chr-contributors--4,
	.chr-contributors--5 { --chr-columns: 1; }
}

/* ==========================================================================
   Column-aware modules
   ==========================================================================

   Beside a sidebar the main column is far narrower than the window, so the
   viewport breakpoints above would leave four cards squeezed into 600px. Inside
   the column the same steps run against the column's own width instead. */

.chr-home-layout__main {
	container-type: inline-size;
	container-name: chr-column;
}

@container chr-column (max-width: 900px) {
	.chr-grid--4,
	.chr-grid--5 { --chr-columns: 3; }

	.chr-masonry--4,
	.chr-masonry--5 { --chr-columns: 3; }

	.chr-contributors--4,
	.chr-contributors--5 { --chr-columns: 3; }

	.chr-showcase--4 { --chr-columns: 3; }

	.chr-magazine,
	.chr-picks,
	.chr-hero-split,
	.chr-hero-grid,
	.chr-dual-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container chr-column (max-width: 660px) {
	.chr-grid--3,
	.chr-grid--4,
	.chr-grid--5 { --chr-columns: 2; }

	.chr-masonry,
	.chr-masonry--3,
	.chr-masonry--4,
	.chr-masonry--5 { --chr-columns: 2; }

	.chr-contributors,
	.chr-contributors--3,
	.chr-contributors--4,
	.chr-contributors--5 { --chr-columns: 2; }

	.chr-showcase,
	.chr-showcase--3,
	.chr-showcase--4 { --chr-columns: 2; }

	.chr-magazine__pair {
		grid-template-columns: minmax(0, 1fr);
	}

	.chr-trending {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Both sides, so the right-to-left sheet has nothing left to flip. */
	.chr-trending__item {
		padding-right: 0;
		padding-left: 0;
		border-right: 0;
		border-left: 0;
	}
}

@container chr-column (max-width: 440px) {
	.chr-grid--2,
	.chr-grid--3,
	.chr-grid--4,
	.chr-grid--5 { --chr-columns: 1; }

	.chr-masonry,
	.chr-masonry--2,
	.chr-masonry--3,
	.chr-masonry--4,
	.chr-masonry--5 { --chr-columns: 1; }

	.chr-contributors,
	.chr-contributors--2,
	.chr-contributors--3,
	.chr-contributors--4,
	.chr-contributors--5 { --chr-columns: 1; }

	.chr-showcase,
	.chr-showcase--2,
	.chr-showcase--3,
	.chr-showcase--4 { --chr-columns: 1; }
}