/*
 * MEG redesign: front page only.
 * Hero, Top stories, Latest and the category rows. Shared tag/card/grid/art rules live in meg-base.css.
 * Logical properties only; physical left/right lives in rtl.css.
 */

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

html body.meg main.meg-home-main {
	display: block;
	font: 500 16px/1.45 var(--meg-sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

html body.meg main.meg-home-main a,
html body.meg main.meg-home-main a:hover,
html body.meg main.meg-home-main a:focus-visible {
	color: inherit;
}

/* Hero: full-bleed Kohl band, image ~60% to the inline-start screen edge --- */

.meg-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
}

html body.meg .meg-hero__art {
	min-block-size: clamp(420px, 40vw, 660px);
}

html body.meg .meg-hero__art img {
	position: absolute;
	inset: 0;
}

/* No zoom on the hero image. */
html body.meg .meg-hero .meg-hero__art img,
html body.meg .meg-hero a.meg-hero__art:hover img {
	transform: none;
	transition: none;
}

.meg-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 20px;
	padding-block: 48px;
	padding-inline: 44px 40px;
}

html body.meg .meg-hero__title {
	margin: 0;
	font-size: clamp(32px, 3.3vw, 54px);
	color: inherit;
}

html body.meg .meg-hero__link {
	color: inherit;
	text-decoration: none;
}

html body.meg main.meg-home-main .meg-hero__link {
	transition: color 0.3s ease;
}

html body.meg main.meg-home-main .meg-hero__link:hover,
html body.meg main.meg-home-main .meg-hero__link:focus-visible {
	color: var(--meg-dusk);
	text-decoration: none;
}

html body.meg .meg-hero__dek {
	max-inline-size: 44ch;
	margin: 0;
	color: var(--meg-offwhite);
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.45;
	opacity: 0.85;
}

html body.meg .meg-hero__by {
	margin: 0;
	color: var(--meg-muted-dk);
}

html body.meg main.meg-home-main .meg-hero__btn {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	background-color: var(--meg-dusk);
	color: var(--meg-kohl);
	font: 700 12px/1.2 var(--meg-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Arrow nudges 4px towards the reading direction (rtl.css negates it). */
.meg-hero__arr {
	display: inline-block;
	transition: transform 0.25s ease;
}

.meg-hero__btn:hover .meg-hero__arr,
.meg-hero__btn:focus-visible .meg-hero__arr {
	transform: translateX(4px);
}

/* Story links: only the title underline (.meg-ul) shows on hover, not the base link underline. */
html body.meg main.meg-home-main :is(.meg-tcard, .meg-row, .meg-hcard, .meg-short):is(:hover, :focus-visible) {
	text-decoration: none;
}

/* Top stories --------------------------------------------------------------- */

/*
 * Title underline: none at rest, 1.5px fading in on hover/focus (stated here
 * at higher specificity so no inherited link or heading rule shows it at rest).
 */
html body.meg main.meg-home-main .meg-tcard .meg-ul {
	text-decoration-line: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.22em;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.25s ease;
}

html body.meg main.meg-home-main .meg-tcard:is(:hover, :focus-visible) .meg-ul {
	text-decoration-color: currentColor;
}

.meg-top {
	padding-block: 28px 8px;
}

.meg-top__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

html body.meg .meg-tcard {
	display: grid;
	align-content: start;
	gap: 12px;
	min-inline-size: 0;
	text-decoration: none;
}

html body.meg .meg-tcard__art {
	aspect-ratio: 16 / 9;
}

html body.meg .meg-tcard__title {
	margin: 0;
	font: 700 17px/1.25 var(--meg-sans);
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}

/* Latest: full-width list ---------------------------------------------------- */

.meg-latest__list {
	display: grid;
}

html body.meg .meg-row {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 22px;
	padding-block: 18px;
	border-block-end: 1px solid var(--meg-line);
	text-decoration: none;
}

html body.meg .meg-row:first-child {
	padding-block-start: 0;
}

html body.meg .meg-row__art {
	aspect-ratio: 16 / 9;
}

.meg-row__txt {
	display: grid;
	align-content: start;
	gap: 7px;
	min-inline-size: 0;
}

html body.meg .meg-row__title {
	margin: 0;
	font: 700 19px/1.25 var(--meg-sans);
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}

html body.meg .meg-row__dek {
	margin: 0;
	color: var(--meg-muted);
	font-size: 15px;
}

html body.meg .meg-row__time {
	color: var(--meg-muted);
}

html body.meg main.meg-home-main .meg-more {
	display: block;
	box-sizing: border-box;
	inline-size: 100%;
	margin: 24px 0 0;
	padding: 14px;
	border: 1px solid var(--meg-kohl);
	border-radius: 0;
	background: none;
	color: var(--meg-kohl);
	font: 400 12px/1.2 var(--meg-mono);
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

html body.meg main.meg-home-main .meg-more:hover,
html body.meg main.meg-home-main .meg-more:focus-visible {
	background-color: var(--meg-kohl);
	color: var(--meg-offwhite);
}

html body.meg main.meg-home-main .meg-more[aria-busy="true"] {
	cursor: progress;
	opacity: 0.6;
}

/* Rows: cards (Easter Eggs, Game Recs, Events; card rules in meg-base.css) - */

/* Two light sections in a row share one gap: the second drops its top padding. */
:is(.meg-latest, .meg-row-cards, .meg-row-shorts) + :is(.meg-row-cards, .meg-row-shorts) {
	padding-block-start: 0;
}

/* Watch: 9/16 tiles, platform chip, title over a gradient ------------------- */

.meg-shorts {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

html body.meg .meg-short {
	display: block;
	min-inline-size: 0;
	text-decoration: none;
}

html body.meg .meg-short__art {
	aspect-ratio: 9 / 16;
	background-color: var(--meg-art-dark);
}

/* Bottom shade keeps the title readable over any image. */
.meg-short__art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(14, 14, 14, 0.85), rgba(14, 14, 14, 0) 50%);
	pointer-events: none;
}

html body.meg .meg-short__plat {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	z-index: 1;
	padding: 4px 7px;
	background-color: var(--meg-offwhite);
	color: var(--meg-kohl);
	font-size: 10px;
	line-height: 1.2;
}

.meg-short__title {
	position: absolute;
	inset-inline: 12px;
	inset-block-end: 12px;
	z-index: 1;
	color: var(--meg-offwhite);
	font: 700 16px/1.2 var(--meg-sans);
}

/* Breakpoints --------------------------------------------------------------- */

@media (max-width: 1000px) {
	.meg-top__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Watch side-scrolls with snap; direction: rtl starts it from the right.
	 * It runs to the screen edge, and snaps one gutter in, so tiles are not
	 * cut off at the gutter.
	 */
	.meg-shorts {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: minmax(170px, 42%);
		margin-inline: calc(var(--meg-pad) * -1);
		padding-inline: var(--meg-pad);
		padding-block-end: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--meg-pad);
	}

	html body.meg .meg-short {
		scroll-snap-align: start;
	}
}

@media (max-width: 900px) {
	.meg-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	html body.meg .meg-hero__art {
		min-block-size: 0;
		aspect-ratio: 4 / 3;
	}

	.meg-hero__copy {
		padding-block: 28px 36px;
		padding-inline: var(--meg-pad);
	}
}

@media (max-width: 560px) {
	html body.meg .meg-row {
		grid-template-columns: 116px minmax(0, 1fr);
		gap: 14px;
	}

	html body.meg .meg-row__title {
		font-size: 16px;
	}

	html body.meg .meg-row__dek {
		display: none;
	}
}

@media (max-width: 520px) {
	.meg-top__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	html body.meg .meg-tcard {
		grid-template-columns: 120px minmax(0, 1fr);
		align-items: start;
	}

	html body.meg .meg-tcard__art {
		grid-row: span 2;
	}
}

/* Latest + Latest Reviews rail ------------------------------------------------ */

/*
 * The rail is a 360px Kohl box beside Latest, sticky under the header while
 * the list scrolls. Without scored reviews there is no rail and no grid.
 */
.meg-latest--rail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 56px;
	align-items: start;
}

.meg-latest__main {
	min-inline-size: 0;
}

html body.meg .meg-rail {
	position: sticky;
	inset-block-start: calc(var(--meg-header-h, 64px) + 24px);
	box-sizing: border-box;
	min-inline-size: 0;
	padding: 24px;
}

html body.admin-bar .meg-rail {
	inset-block-start: calc(32px + var(--meg-header-h, 64px) + 24px);
}

html body.meg .meg-rail__title {
	margin: 0 0 18px;
	font-size: 26px;
	color: inherit;
}

html body.meg .meg-rail__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

html body.meg .meg-rail__list li {
	margin: 0;
	padding: 0;
}

html body.meg main.meg-home-main .meg-rv {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding-block: 14px;
	border-block-start: 1px solid var(--meg-line-dk);
	color: var(--meg-offwhite);
	text-decoration: none;
}

html body.meg .meg-rv__cover {
	aspect-ratio: 3 / 4;
}

.meg-rv__txt {
	min-inline-size: 0;
}

html body.meg .meg-rv__name {
	display: block;
	margin-block-end: 5px;
	font: 700 16px/1.2 var(--meg-sans);
	overflow-wrap: anywhere;
}

html body.meg main.meg-home-main .meg-rv:is(:hover, :focus-visible) .meg-rv__name {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.22em;
}

html body.meg .meg-rv__on {
	display: block;
	font-size: 10px;
	color: var(--meg-muted-dk);
}

.meg-score {
	display: grid;
	justify-items: center;
	gap: 5px;
	text-align: center;
}

html body.meg .meg-score__tier {
	font-size: 9px;
	color: var(--meg-muted-dk);
}

html body.meg .meg-rv--essential .meg-score__tier {
	color: var(--meg-dusk);
}

.meg-rail__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--meg-line-dk);
}

html body.meg main.meg-home-main .meg-rail__foot a {
	color: var(--meg-offwhite);
	text-decoration: underline;
	text-underline-offset: 3px;
}

html body.meg main.meg-home-main .meg-rail__foot a:is(:hover, :focus-visible) {
	text-decoration-color: var(--meg-dusk);
}

/* Narrow screens: the rail drops under the list and stops sticking. */
@media (max-width: 1000px) {
	.meg-latest--rail {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	html body.meg .meg-rail {
		position: static;
	}
}