/* ==========================================================================
   EAST EUROPE NEWS — homepage grids (front page only)
   Breakpoints: < 768 phone · 768 tablet · 1024 small desktop · 1280 desktop.
   Columns that may host an aside use container queries (.sec-main).
   A Hero  B Top Stories  C Feature+List  D Dark  E Structured  F Magazine
   G Balanced  H Data  I Visual  J Scoreboard  K Mosaic  L Latest
   M Trending  N Most Read  O Editor's Picks  + Countries, Briefing
   ========================================================================== */

.home-sec { padding-block: clamp(24px, 3.5vw, 44px); }
.home-sec--hero { padding-top: clamp(16px, 2.5vw, 28px); }

/* Sections with a ranking column. */
.sec-main { container-type: inline-size; min-width: 0; }
.sec-body.has-aside { display: grid; gap: var(--gap-lg); }
@media (min-width: 1024px) {
	.sec-body.has-aside { grid-template-columns: minmax(0, 1fr) 300px; }
	.sec-aside { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
}
@media (min-width: 1280px) { .sec-body.has-aside { grid-template-columns: minmax(0, 1fr) 340px; } }

/* A — Hero ------------------------------------------------------------------- */
.hero-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 3px double var(--color-text);
}
.hero-head__title { margin: 0; font-size: var(--fs-xl); }
.hero-head__date { margin: 0; color: var(--color-muted); font-size: var(--fs-sm); }

.hero { display: grid; gap: var(--gap); }
.hero .card--lead .card__title { font-size: var(--fs-3xl); line-height: 1.08; }
.hero .card--lead .card__excerpt { font-size: var(--fs-md); }
.hero__side { display: grid; gap: var(--gap); }
.hero__side .card__title { font-size: var(--fs-lg); }
.hero__latest-title {
	margin: 0 0 8px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero__lead, .hero__latest { grid-column: 1 / -1; }
	.hero__side { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero__latest .mini-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
	.hero__latest .mini-list > li:nth-last-child(2) { border-bottom: 0; }
	.hero__latest .mini-list > li:nth-child(2) { padding-top: 4px; }
}
@media (min-width: 1024px) {
	.hero { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.hero__lead { grid-column: span 8; }
	.hero__side { grid-column: span 4; grid-template-columns: 1fr; align-content: start; }
	.hero__latest .mini-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hero__latest .mini-list > li:nth-child(3) { padding-top: 4px; }
	.hero__latest .mini-list > li:nth-last-child(3) { border-bottom: 0; }
}
@media (min-width: 1280px) {
	.hero__lead { grid-column: span 7; }
	.hero__side { grid-column: span 3; }
	.hero__latest { grid-column: span 2; padding-left: var(--gap); border-left: var(--rule); }
	.hero__latest .mini-list { display: block; }
	.hero__latest .mini-list > li { border-bottom: var(--rule); padding-top: 12px; }
	.hero__latest .mini-list > li:first-child { padding-top: 4px; }
	.hero__latest .mini-list > li:last-child { border-bottom: 0; }
}

/* B — Top Stories ------------------------------------------------------------- */
.ts { display: grid; gap: var(--gap-lg); }
.ts__lead .card__title { font-size: var(--fs-2xl); }
.ts__row { display: grid; gap: var(--gap); }
@container (min-width: 560px) {
	.ts__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card--split { flex-direction: row; align-items: center; gap: var(--gap-lg); }
	.card--split .card__media { flex: 0 0 56%; }
}
@container (min-width: 960px) { .ts__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* C — Feature + List ------------------------------------------------------------ */
.fl { display: grid; gap: var(--gap-lg); }
.fl__lead .card__title { font-size: var(--fs-xl); }
.fl__list > .card { padding-block: 14px; border-bottom: var(--rule); }
.fl__list > .card:first-child { padding-top: 0; }
.fl__list > .card:last-child { border-bottom: 0; }
@container (min-width: 640px) {
	.fl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.fl__list .card__media { flex-basis: 136px; }
}

/* D — Dark special coverage ------------------------------------------------------ */
.home-sec.is-dark {
	margin-block: clamp(16px, 3vw, 32px);
	background:
		repeating-linear-gradient(90deg, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 80px),
		var(--color-dark-panel);
	color: var(--color-on-dark-muted);
}
.is-dark .sec-head { border-top-color: rgb(255 255 255 / 0.5); }
.is-dark .sec-head__title, .is-dark .sec-head__more, .is-dark .card__link, .is-dark .card__title { color: #fff; }
.is-dark .sec-head__kicker { color: #93C5FD; }
.is-dark .card__excerpt { color: var(--color-on-dark-muted); }
.is-dark .meta { color: #8DA2B8; }
.is-dark .card__media { background: rgb(255 255 255 / 0.06); }
.is-dark .card:hover .card__link { text-decoration-color: #93C5FD; }
.is-dark :focus-visible, .is-dark .card:has(.card__link:focus-visible) { outline-color: #93C5FD; }

.dk { display: grid; gap: var(--gap-lg); }
.dk__lead .card__title { font-size: var(--fs-2xl); }
.dk__list > .card { padding-block: 14px; border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.dk__list > .card:first-child { padding-top: 0; }
.dk__timeline-title {
	margin: 0 0 12px;
	color: #fff;
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.timeline { position: relative; display: grid; gap: 16px; padding-left: 18px; border-left: 1px solid rgb(255 255 255 / 0.25); }
.timeline__item { position: relative; }
.timeline__item::before {
	content: "";
	position: absolute;
	top: 5px;
	left: -23px;
	width: 9px;
	height: 9px;
	background: var(--color-dark-panel);
	border: 2px solid #93C5FD;
	border-radius: 50%;
}
@media (min-width: 1024px) {
	.dk { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.dk__lead { grid-column: span 7; }
	.dk__list { grid-column: span 5; }
	.dk__timeline { grid-column: 1 / -1; padding-top: 8px; }
	.timeline {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		gap: var(--gap);
		padding: 18px 0 0;
		border-left: 0;
		border-top: 1px solid rgb(255 255 255 / 0.25);
	}
	.timeline__item::before { top: -24px; left: 0; }
}

/* E — Structured ------------------------------------------------------------------ */
.st { display: grid; gap: var(--gap-lg); }
.st__texts > .card { padding-block: 14px; border-bottom: var(--rule); }
.st__texts > .card:first-child { padding-top: 0; }
.st__texts > .card:last-child { border-bottom: 0; }
.st__side { display: grid; gap: var(--gap); align-content: start; }
@media (min-width: 768px) {
	.st { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
	.st__side { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
	.st { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.st__lead { grid-column: span 4; }
	.st__side { grid-column: span 4; padding-left: var(--gap); border-left: var(--rule); }
}

/* F — Magazine -------------------------------------------------------------------- */
.mg { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mg__wide, .mg__minis { grid-column: 1 / -1; }
.mg__wide .card { aspect-ratio: 16 / 10; height: auto; }
.mg__wide .card__title { font-size: var(--fs-xl); }
.mg__portrait .card__title { font-size: var(--fs-base); }
.mg__minis { display: grid; gap: var(--gap); padding-top: 4px; border-top: var(--rule); }
.mg__minis .card { padding-top: 12px; }
@media (min-width: 768px) {
	.mg__minis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mg__portrait .card__title { font-size: var(--fs-md); }
}
@media (min-width: 1024px) {
	.mg { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.mg__wide { grid-column: span 6; }
	.mg__wide .card { aspect-ratio: auto; height: 100%; min-height: 360px; }
	.mg__portrait { grid-column: span 3; }
}

/* G — Balanced --------------------------------------------------------------------- */
.bl { display: grid; gap: var(--gap); }
.bl > .card .card__title { font-size: var(--fs-lg); }
.headline-list { padding: 4px 0 0; border-top: 2px solid var(--color-text); }
@media (min-width: 768px) {
	.bl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bl .headline-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
	.bl .headline-list > li { border-bottom: var(--rule); }
}
@media (min-width: 1024px) {
	.bl.has-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bl.has-list .headline-list { grid-column: auto; display: block; }
	.bl.has-list .headline-list > li:last-child { border-bottom: 0; }
}

/* H — Data + News ------------------------------------------------------------------- */
.dt { display: grid; gap: var(--gap-lg); }
.card--row-lg { flex-direction: column; }
.card--row-lg .card__title { font-size: var(--fs-xl); }
.dt__list > .card { padding-block: 14px; border-bottom: var(--rule); }
.dt__list > .card:first-child { padding-top: 0; }
@media (min-width: 600px) {
	.card--row-lg { flex-direction: row; gap: var(--gap); }
	.card--row-lg .card__media { flex: 0 0 48%; }
}
@media (min-width: 1024px) {
	.dt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.dt__list { padding-left: var(--gap); border-left: var(--rule); }
}

/* I — Visual magazine ---------------------------------------------------------------- */
.vs { display: grid; gap: var(--gap); }
.vs__big { display: grid; gap: var(--gap); }
.vs__big .card__title { font-size: var(--fs-xl); }
.vs__small {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 72%;
	gap: 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	scrollbar-width: thin;
}
.vs__small > .card { scroll-snap-align: start; }
.card--dest .card__title { font-size: var(--fs-md); }
.card--dest .card__body { padding: 40px 16px 14px; }
@media (min-width: 768px) {
	.vs__big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vs__small { grid-auto-columns: minmax(0, 1fr); overflow: visible; padding: 0; }
	.vs__small .card__media { aspect-ratio: 16 / 10; }
}

/* J — News + Scoreboard ----------------------------------------------------------------- */
.sb { display: grid; gap: var(--gap); }
.sb__lead .card__title { font-size: var(--fs-xl); }
.sb__grid { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb__grid .card__title { font-size: var(--fs-base); }
@media (min-width: 1024px) {
	.sb { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.sb__lead { grid-column: span 6; }
	.sb__grid { grid-column: span 6; }
	.sb.has-widget .sb__lead { grid-column: span 5; }
	.sb.has-widget .sb__grid { grid-column: span 4; grid-template-columns: 1fr; }
	.sb.has-widget > :last-child { grid-column: span 3; }
}

/* K — Editorial mosaic ------------------------------------------------------------------ */
.mz { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
.mz > .card { height: 100%; }
.mz .card__title { font-size: var(--fs-base); }
.mz .card__body { padding: 40px 14px 12px; }
.mz__lead { grid-column: 1 / -1; grid-row: span 2; }
.mz__lead .card__title { font-size: var(--fs-xl); }
.mz__b { grid-row: span 2; }
.mz__d { grid-column: 1 / -1; }
@media (min-width: 1024px) {
	.mz { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: var(--gap); }
	.mz__lead { grid-column: 1 / 3; grid-row: 1 / 3; }
	.mz__a { grid-column: 3; grid-row: 1; }
	.mz__b { grid-column: 4; grid-row: 1 / 3; }
	.mz__c { grid-column: 3; grid-row: 2; }
	.mz__d { grid-column: 1 / -1; grid-row: 3; }
	.mz .card__title { font-size: var(--fs-md); }
	.mz__lead .card__title, .mz__d .card__title { font-size: var(--fs-2xl); }
}

/* L — Latest feed (rows live in main.css) */
.feed__more { margin: 24px 0 0; text-align: center; }

/* M — Trending (standalone) ------------------------------------------------------------------ */
.rank-row { display: grid; gap: 0 var(--gap); }
.rank-row > li { padding: 14px 0; border-bottom: var(--rule); }
@media (min-width: 600px) { .rank-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.rank-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.rank-row > li { border-bottom: 0; border-left: var(--rule); padding: 0 0 0 16px; }
	.rank-row > li:first-child { border-left: 0; padding-left: 0; }
}

/* N — Most read (standalone) ------------------------------------------------------------------ */
.rank--wide .rank__list { columns: 2 280px; column-gap: var(--gap-lg); }
.rank--wide .rank__list > li { break-inside: avoid; }

/* O — Editor's picks ---------------------------------------------------------------------------- */
.home-sec--editors-picks .container { position: relative; }
.ep { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.ep .card__title { font-size: var(--fs-lg); }

/* Briefing strip ----------------------------------------------------------------------------------- */
.home-sec--briefing { padding-block: 0 8px; }
.briefing { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* The utility bar already shows the date on desktop. */
@media (min-width: 1024px) { .hero-head__date { display: none; } }
/* Latest feed without a ranking column: keep a readable measure. */
.home-sec--latest .sec-body:not(.has-aside) .sec-main { max-width: 880px; }

/* Section accents are all navy (#102A43); on dark panels use the light accent instead. */
.is-dark .sec-head::before { background: #93C5FD; }