/* ==========================================================================
   Front page — broadsheet hero, dossier columns, split, band, picks, trio, stream
   ========================================================================== */

.home > section { margin-block-end: 48px; }

/* ---------- Broadsheet hero ---------- */
.front { padding-block-start: 22px; }
.front__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; border-block-end: 1px solid var(--rule); padding-block-end: 8px; margin-block-end: 18px; }
.front__h1 { font-size: var(--fs-md); margin: 0; color: var(--green); }
.front__date { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

.lead__head { margin-block-end: 18px; }
.lead__kicker { display: inline-block; background: var(--green); color: var(--white); font-weight: 700; font-size: var(--fs-sm); padding: 2px 12px; text-decoration: none; margin-block-end: 10px; }
.lead__kicker:hover { background: var(--ink); color: var(--white); }
.lead__title { font-size: var(--fs-3xl); line-height: 1.3; margin: 0; max-inline-size: 30ch; }
.lead__title a { text-decoration: none; }
.lead__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.lead__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 28px; align-items: start; }
.lead__media { margin: 0; aspect-ratio: 16 / 9; background: var(--tint); overflow: hidden; }
.lead__media img, .lead__media .noimg { inline-size: 100%; block-size: 100%; object-fit: cover; aspect-ratio: auto; }
.lead__text { border-block-start: 4px solid var(--ink); padding-block-start: 14px; }
.lead__standfirst { font: 400 var(--fs-lg)/1.95 var(--text); margin-block-end: 12px; }
.lead__meta { font-size: var(--fs-xs); color: var(--muted); }
.lead__context { margin-block-start: 18px; background: var(--tint); padding: 14px 18px; }
.lead__context-title { font-size: var(--fs-sm); color: var(--green); margin-block-end: 6px; }
.lead__context ul { list-style: none; }
.lead__context li { padding-block: 8px; border-block-start: 1px solid var(--rule); font-weight: 500; }
.lead__context li:first-child { border-block-start: 0; }
.lead__context a { text-decoration: none; }

/* three text-only secondaries, separated by vertical rules */
.seconds { display: grid; grid-template-columns: repeat(3, 1fr); margin-block-start: 28px; border-block-start: 1px solid var(--ink); padding-block-start: 16px; }
.seconds--2 { grid-template-columns: repeat(2, 1fr); }
.seconds--1 { grid-template-columns: 1fr; }
.seconds .card { padding-inline: 20px; border-inline-start: 1px solid var(--rule); }
.seconds .card:first-child { padding-inline-start: 0; border-inline-start: 0; }
.seconds .card:last-child { padding-inline-end: 0; }
.seconds .card__title { font-size: var(--fs-xl); }

/* ---------- Dossier: newspaper columns ---------- */
.dossier__cols { display: grid; grid-template-columns: repeat(4, 1fr); }
.dossier__cols--3 { grid-template-columns: 1.4fr 1fr 1fr; }
.dossier__cols--5 { grid-template-columns: 1.4fr repeat(4, 1fr); }
.dossier__cols--6, .dossier__cols--7, .dossier__cols--8 { grid-template-columns: repeat(4, 1fr); row-gap: 24px; }
.dossier__cols--4 { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.dossier .card { padding-inline: 18px; border-inline-start: 1px solid var(--rule); }
.dossier .card:first-child { padding-inline-start: 0; border-inline-start: 0; }
.dossier .card .card__media { aspect-ratio: 16 / 10; margin-block-end: 12px; }
.dossier .card:first-child .card__title { font-size: var(--fs-xl); }

/* ---------- Split: thumbs | numbered analysis ---------- */
.split__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; }
.split--single .split__grid { grid-template-columns: 1fr; }
.split__analysis { background: var(--tint); padding: 0 22px 18px; }
.split__analysis .sec-head { margin-inline: -22px; padding-inline: 22px; }
.split__ranked { list-style: none; }
.split__ranked li { padding-block: 14px; border-block-end: 1px solid var(--rule); }
.split__ranked li:last-child { border-block-end: 0; }
.split__ranked .card__title { font-size: var(--fs-lg); }

/* ---------- Band: tinted full width ---------- */
.band { background: var(--tint); padding-block: 28px 34px; border-block: 1px solid var(--rule); }
.band .sec-head { border-block-start-color: var(--green); }
.band__intro { font: 400 var(--fs-md)/1.8 var(--text); color: var(--muted); max-inline-size: 70ch; margin-block: -6px 18px; }
.band__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.band__grid--4 { grid-template-columns: repeat(4, 1fr); }
.band__grid--5, .band__grid--6 { grid-template-columns: repeat(3, 1fr); }
.card--band { background: var(--white); display: flex; flex-direction: column; border-block-end: 3px solid var(--green); }
.card--band .card__media { aspect-ratio: 16 / 10; }
.card--band .card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.card--band .card__meta { margin-block-start: auto; }

/* ---------- Picks strip ---------- */
.picks { background: var(--ink); color: var(--white); padding-block: 26px 30px; }
.picks a { color: var(--white); }
.picks__title { font-size: var(--fs-xl); margin-block-end: 16px; display: flex; align-items: center; gap: 12px; }
.picks__title::after { content: ""; flex: 1; block-size: 1px; background: rgba(255,255,255,.35); }
.picks__list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: pk; }
.picks__item { counter-increment: pk; border-block-start: 3px solid #4ade80; padding-block-start: 10px; }
.picks__kicker { font-size: var(--fs-xs); font-weight: 700; color: #bbf7d0 !important; text-decoration: none; }
.picks__headline { font-size: var(--fs-md); margin: 4px 0 0; line-height: 1.6; }
.picks__headline a { text-decoration: none; }
.picks__headline a:hover { text-decoration: underline; }

/* ---------- Trio ---------- */
.trio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.trio__grid--2 { grid-template-columns: repeat(2, 1fr); }
.trio__grid--1 { grid-template-columns: 1fr; }
.card--lead3 .card__media { aspect-ratio: 16 / 10; margin-block-end: 10px; }
.card--lead3 .card__title { font-size: var(--fs-lg); }
.trio__list { list-style: none; margin-block-start: 8px; }
.trio__list li { padding-block: 10px; border-block-start: 1px solid var(--rule); }

/* ---------- Stream + sidebar ---------- */
.stream__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.dossier__cols, .dossier__cols--4, .dossier__cols--5 { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
	.dossier .card:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
	.picks__list { grid-template-columns: repeat(2, 1fr); }
	.stream__grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; }
}
@media (max-width: 900px) {
	.lead__grid { grid-template-columns: 1fr; gap: 16px; }
	.lead__text { border-block-start-width: 2px; }
	.split__grid { grid-template-columns: 1fr; gap: 32px; }
	.band__grid, .band__grid--4 { grid-template-columns: repeat(2, 1fr); }
	.trio__grid { grid-template-columns: 1fr 1fr; }
	.trio__col:last-child { grid-column: 1 / -1; }
	.stream__grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.home > section { margin-block-end: 36px; }
	.lead__title { font-size: 1.75rem; }
	.seconds, .seconds--2 { grid-template-columns: 1fr; }
	.seconds .card { padding-inline: 0; border-inline-start: 0; border-block-start: 1px solid var(--rule); padding-block: 12px; }
	.seconds .card:first-child { border-block-start: 0; padding-block-start: 0; }
	.dossier__cols, .dossier__cols--3, .dossier__cols--4, .dossier__cols--5 { grid-template-columns: 1fr; }
	.dossier .card { padding-inline: 0; border-inline-start: 0; border-block-start: 1px solid var(--rule); padding-block-start: 14px; }
	.dossier .card:first-child { border-block-start: 0; padding-block-start: 0; }
	.band__grid, .band__grid--4 { grid-template-columns: 1fr; }
	.picks__list { grid-template-columns: 1fr; gap: 14px; }
	.trio__grid { grid-template-columns: 1fr; gap: 28px; }
	.split__analysis { padding-inline: 16px; }
	.split__analysis .sec-head { margin-inline: -16px; padding-inline: 16px; }
}