/* ==========================================================================
   AnyCoin News - homepage (front page only)
   Order: A Lead story band (graphite) → L Latest News + Market Board → section grids
   → S Section index. Breakpoints: < 768 phone · 768 tablet · 1024 desktop · 1280 wide.
   On phones the news feed comes first and the full market board follows it.
   ========================================================================== */

.home-sec { padding-block: clamp(28px, 4vw, 48px); }
.home-sec + .home-sec { padding-top: 0; }

/* Sections with an aside column (market board / rankings). */
.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) 340px; }
}
@media (min-width: 1280px) { .sec-body.has-aside { grid-template-columns: minmax(0, 1fr) 380px; } }

/* A - Lead story band ------------------------------------------------------------ */
.home-sec--hero {
	padding-block: clamp(20px, 3vw, 36px) clamp(28px, 4vw, 48px);
	background:
		radial-gradient(700px 360px at 92% 0%, rgb(25 184 174 / 0.16), transparent 70%),
		linear-gradient(180deg, var(--color-dark-panel), #152338);
	color: var(--color-on-dark-muted);
}
.home-sec--hero + .home-sec { padding-top: clamp(28px, 4vw, 48px); }
.home-sec--hero :focus-visible, .home-sec--hero .card:has(.card__link:focus-visible) { outline-color: var(--color-focus-dark); }
.hero-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	margin-bottom: clamp(16px, 2vw, 24px);
}
.hero-head__title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--color-accent);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.hero-head__title::before { content: ""; width: 12px; height: 13px; background: var(--color-accent); clip-path: var(--hex); }
.hero-head__date { margin: 0; color: var(--color-on-dark-muted); font-size: var(--fs-sm); }

/* Six stories, all the same size: 1 → 2 → 3 columns. */
.hero-grid { display: grid; gap: clamp(20px, 2.4vw, 32px) var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card--hero { gap: 14px; }
.card--hero .card__media { border-radius: 12px; background: var(--color-dark-2); box-shadow: 0 12px 28px rgb(0 0 0 / 0.22); }
.card--hero .card__title { font-size: var(--fs-lg); line-height: 1.22; }
.card--hero .card__link { color: #fff; }
.card--hero:hover .card__link { color: var(--color-accent); }
.card--hero .kicker { color: var(--color-accent); }
.card--hero .card__excerpt { color: #C9D5E3; font-size: 15px; }
.card--hero .card__meta { color: var(--color-on-dark-muted); }

/* L - Latest News + Market Board ---------------------------------------------------- */
.feed__more { margin: 20px 0 0; text-align: center; }
.home-sec--news-markets .sec-aside { min-width: 0; }

.mkt-board {
	padding: 18px;
	background: var(--color-dark-panel);
	border-radius: 14px;
	color: var(--color-on-dark-muted);
}
.mkt-board__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 14px; }
.mkt-board__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: #fff; font-size: var(--fs-lg); }
.mkt-board__title::before { content: ""; width: 14px; height: 15px; background: var(--color-accent); clip-path: var(--hex); }
.mkt-board__note { margin: 0; flex-basis: 100%; color: var(--color-on-dark-muted); font-size: 12px; }
.mkt-board :focus-visible { outline-color: var(--color-focus-dark); }
.mkt-card {
	padding: 14px 16px 14px;
	background: var(--color-surface);
	border-radius: var(--radius);
	color: var(--color-body);
}
.mkt-card :focus-visible { outline-color: var(--color-focus); }
.mkt-card + .mkt-card { margin-top: 12px; }
.mkt-card__title {
	margin: 0 0 8px;
	color: var(--color-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
@media (min-width: 640px) and (max-width: 1023.98px) {
	/* Tablet: board cards in two columns under the feed. */
	.mkt-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.mkt-board__head { grid-column: 1 / -1; margin: 0; }
	.mkt-card + .mkt-card { margin-top: 0; }
}

/* S - Section index (hexagon tiles) ------------------------------------------------- */
.sec-index { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.sec-index__link {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 12px;
	align-items: center;
	height: 100%;
	padding: 14px 16px;
	background: var(--color-surface);
	border: 1px solid transparent;
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	color: var(--color-text);
	text-decoration: none;
	transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.sec-index__link:hover { border-color: var(--color-secondary); transform: translateY(-1px); color: var(--color-text); }
.sec-index__hex {
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 44px; height: 48px;
	background: var(--color-dark-panel);
	clip-path: var(--hex);
	color: var(--color-accent);
	font-weight: 800;
	font-size: 18px;
}
.sec-index__link:hover .sec-index__hex { background: var(--color-secondary); color: #fff; }
.sec-index__text { display: flex; flex-direction: column; min-width: 0; }
.sec-index__name { font-weight: 700; line-height: 1.25; }
.sec-index__kicker { color: var(--color-muted); font-size: 13px; line-height: 1.35; }
.sec-index__count { grid-column: 2; color: var(--color-secondary); font-family: var(--font-mono); font-size: 12px; font-weight: 600; }

/* 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); }

/* 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 an aside: keep a readable measure. */
.home-sec--latest .sec-body:not(.has-aside) .sec-main { max-width: 880px; }

/* On dark panels the hexagon bullet keeps the bright accent. */
.is-dark .sec-head::before { background: var(--color-accent); }