/* ==========================================================================
   Colitco — homepage blocks
   Mirrors the prototype's home layout.
   ========================================================================== */

.section-panel {
	padding: 1.25rem;
}

@media (min-width: 640px) {
	.section-panel { padding: 1.5rem; }
}

/* Hero + snapshot ----------------------------------------------------------- */

.hero-block {
	display: grid;
	overflow: hidden;
	min-width: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--card);
	box-shadow: 0 2px 10px color-mix(in oklab, var(--primary) 3%, transparent);
}

@media (min-width: 1280px) {
	.hero-block {
		grid-template-columns: minmax(0, 72fr) minmax(350px, 28fr);
		min-height: 520px;
	}
}

.hero-block__story {
	min-width: 0;
}

.hero-block__snapshot {
	min-width: 0;
	border-top: 1px solid var(--border);
}

@media (min-width: 1280px) {
	.hero-block__snapshot {
		border-top: 0;
		border-left: 1px solid var(--border);
	}
}

/* The hero sits inside the shared panel, so it drops its own frame. */
.hero-block .hero-story {
	height: 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

/* Market snapshot ----------------------------------------------------------- */

.snapshot {
	height: 100%;
	padding: 1.25rem;
}

@media (min-width: 640px) {
	.snapshot { padding: 1.5rem; }
}

.snapshot__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem;
}

.snapshot__link {
	font-size: 0.625rem;
	font-weight: 600;
	color: var(--accent);
	white-space: nowrap;
}

.snapshot__tabs {
	display: flex;
	gap: 0.25rem;
	margin-top: 0.75rem;
	overflow-x: auto;
	border-bottom: 1px solid var(--border);
}

.snapshot__tab {
	flex-shrink: 0;
	min-height: 2.5rem;
	padding: 0 0.75rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--muted-foreground);
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.snapshot__tab:hover { color: var(--accent); }

.snapshot__tab[aria-selected="true"] {
	border-bottom-color: var(--accent);
	color: var(--accent);
}

.quote-row {
	display: grid;
	grid-template-columns: minmax(68px, 1fr) auto 54px 72px;
	align-items: center;
	gap: 0.5rem;
	margin-inline: -0.5rem;
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid var(--border);
	border-radius: calc(var(--radius) - 4px);
	transition: background-color 0.15s ease;
}

@media (min-width: 640px) {
	.quote-row { grid-template-columns: minmax(82px, 1fr) auto 58px 88px; }
}

.quote-row:last-child { border-bottom: 0; }
.quote-row:hover { background: var(--secondary); color: inherit; }

.quote-row__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.625rem;
	font-weight: 500;
	color: var(--muted-foreground);
}

.quote-row__value {
	text-align: right;
	font-size: 0.75rem;
}

.quote-row__change {
	text-align: right;
	font-size: 0.625rem;
}

.quote-row__spark { justify-self: end; }

/* Featured story panel ------------------------------------------------------ */

.featured-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	overflow: hidden;
}

.featured-panel__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.featured-panel__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.featured-panel__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.5rem;
}

@media (min-width: 640px) {
	.featured-panel__body { padding: 1.75rem; }
}

.featured-panel__title {
	margin-top: 0.5rem;
	font-family: var(--font-editorial);
	font-weight: 400;
	font-size: 1.875rem;
	line-height: 1.12;
	transition: color 0.15s ease;
}

.featured-panel:hover .featured-panel__title { color: var(--accent); }

.featured-panel__summary {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--secondary-foreground);
}

.featured-panel__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 1.25rem;
	font-size: 0.75rem;
	color: var(--muted-foreground);
}

/* Movers + sentiment -------------------------------------------------------- */

.movers-block {
	min-width: 0;
	height: 100%;
}

@media (min-width: 768px) {
	.movers-block { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.movers-block { display: block; }
}

.movers-block__movers,
.sentiment {
	padding: 1.25rem;
}

@media (min-width: 640px) {
	.movers-block__movers,
	.sentiment { padding: 1.5rem; }
}

.sentiment {
	border-top: 1px solid var(--border);
}

@media (min-width: 768px) {
	.sentiment { border-top: 0; border-left: 1px solid var(--border); }
}

@media (min-width: 1024px) {
	.sentiment { border-left: 0; border-top: 1px solid var(--border); }
}

.movers-block__empty {
	margin-top: 1rem;
	font-size: 0.6875rem;
	color: var(--muted-foreground);
}

.movers-block__all {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.25rem;
	min-height: 2.75rem;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
}

/* Sentiment gauge ----------------------------------------------------------- */

.sentiment__gauge {
	position: relative;
	display: grid;
	place-items: center;
	margin-top: 0.75rem;
}

.sentiment__gauge svg {
	width: 140px;
	height: 78px;
}

.sentiment__value {
	position: absolute;
	bottom: 0;
	text-align: center;
}

.sentiment__value b {
	display: block;
	font-size: 1.875rem;
	line-height: 1;
}

.sentiment__value span {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--positive);
}

.sentiment__foot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 0.75rem;
	margin-top: 0.75rem;
	font-size: 0.6875rem;
}

.sentiment__foot a {
	font-weight: 700;
	white-space: nowrap;
}

/* Country comparison -------------------------------------------------------- */

.comparison {
	min-width: 0;
	height: 100%;
	padding: 1.25rem;
}

@media (min-width: 640px) {
	.comparison { padding: 1.5rem; }
}

.comparison__grid {
	display: grid;
	min-width: 0;
	margin-top: 0.75rem;
}

@media (min-width: 640px) {
	.comparison__grid {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}

	.comparison__side + .comparison__vs + .comparison__side {
		border-left: 1px solid var(--border);
	}
}

.comparison__side {
	min-width: 0;
	padding: 1rem;
}

.comparison__country {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
}

.comparison__flag {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--border);
	border-radius: 0.25rem;
	font-size: 0.5625rem;
	color: var(--muted-foreground);
}

.comparison__name {
	margin-top: 1rem;
	font-size: 0.75rem;
	color: var(--muted-foreground);
}

.comparison__figures {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
	margin-top: 0.25rem;
}

.comparison__figures b { font-size: 1.25rem; }

.comparison__vs {
	display: grid;
	place-items: center;
	padding: 0.25rem 0;
}

@media (min-width: 640px) {
	.comparison__vs { padding: 0 0.5rem; }
}

.comparison__vs span {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 0.5625rem;
	font-weight: 700;
	color: var(--muted-foreground);
}

.comparison__link {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 2.75rem;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
}

/* Watchlist ----------------------------------------------------------------- */

.watchlist {
	min-width: 0;
	height: 100%;
	padding: 1.25rem;
}

@media (min-width: 640px) {
	.watchlist { padding: 1.5rem; }
}

.watchlist__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem;
}

.watchlist__edit {
	border: 0;
	background: none;
	font-size: 0.625rem;
	font-weight: 600;
	color: var(--muted-foreground);
	transition: color 0.15s ease;
}

.watchlist__edit:hover { color: var(--accent); }

.watchlist__empty {
	margin-top: 1rem;
	font-size: 0.6875rem;
	color: var(--muted-foreground);
}

.watchlist__rows { margin-top: 0.75rem; }

.watchlist__row {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr) 3rem 4rem 3.75rem;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.25rem;
	border-bottom: 1px solid var(--border);
	font-size: 0.6875rem;
}

.watchlist__row:last-child { border-bottom: 0; }

.watchlist__toggle {
	display: grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	padding: 0;
	border: 0;
	background: none;
}

.watchlist__mark {
	display: block;
	width: 0.75rem;
	height: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.25rem;
}

.watchlist__row.is-on .watchlist__mark {
	border-color: var(--accent);
	background: var(--accent);
}

.watchlist__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
}

.watchlist__ticker { color: var(--muted-foreground); }
.watchlist__change { text-align: right; }

/* Movers tabs, matching the demo's three-up filter row --------------------- */

.movers__tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	margin-top: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--border);
}

.movers__tab {
	border: 0;
	background: none;
	padding: 0;
	font-size: 0.625rem;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
	color: var(--muted-foreground);
	transition: color 0.15s ease;
}

.movers__tab:hover,
.movers__tab[aria-selected="true"] {
	color: var(--accent);
}

.movers__list { margin-top: 0.25rem; }

/* The demo's row is 1fr / 42px / 62px. */
.movers__row {
	grid-template-columns: minmax(0, 1fr) 42px 62px;
	border-bottom: 0;
	padding-block: 0.5rem;
}

/* Just in: dot column is 8px, and the link sits at the foot ---------------- */

.story-rail__item {
	grid-template-columns: 8px minmax(0, 1fr);
}

.story-rail__dot {
	margin-left: 0;
	margin-top: 0.5rem;
}

.story-rail__all {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	margin-top: 1.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	transition: color 0.15s ease;
}

.story-rail__all:hover { color: var(--accent); }

/* Newsletter panel: arrow button joined to the field ----------------------- */

.newsletter-form__row--joined {
	grid-template-columns: minmax(0, 1fr) 2.75rem;
	gap: 0;
}

.newsletter-form__row--joined input[type="email"] {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: 0;
}

.newsletter-form__go {
	width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* The demo's newsletter card fills its column and pins the form to the foot. */
.newsletter:not(.newsletter--wide) {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 16rem;
	height: 100%;
}

/* --------------------------------------------------------------------------
   Corrections against the demo, section by section
   -------------------------------------------------------------------------- */

/*
 * Homepage panels use the demo's SectionHeader, which has no rule under
 * it. Only archives use SectionShell, which does.
 */
.section-panel .section-shell__head {
	padding-bottom: 0;
	border-bottom: 0;
}

.section-panel .section-shell__body {
	margin-top: 1.25rem;
}

/* Hero: text first on small screens, as the demo has it. */
.hero-block .hero-story__body,
.hero-story__body {
	order: 0;
}

.hero-story__image {
	min-height: 18rem;
}

@media (min-width: 768px) {
	.hero-story__title {
		max-width: 13ch;
	}
}

/* --------------------------------------------------------------------------
   Fixes found by comparing the rendered page against the demo
   -------------------------------------------------------------------------- */

/*
 * An element given display by a class beats the hidden attribute, so
 * every watchlist row and tab panel stayed visible. This restores the
 * attribute's meaning wherever the theme relies on it.
 */
[hidden] {
	display: none !important;
}

/* The hero image must fill the panel, not sit at its natural height. */
.hero-block__story,
.hero-block .hero-story {
	height: 100%;
}

.hero-story__image {
	align-self: stretch;
	height: 100%;
	min-height: 18rem;
	object-fit: cover;
}

@media (min-width: 768px) {
	.hero-story__image {
		aspect-ratio: auto;
	}
}

/* Snapshot column fills the panel height too. */
.hero-block__snapshot,
.hero-block__snapshot .snapshot {
	height: 100%;
}

/* Cards on the homepage show read time only, as the demo does. */
.section-panel .story-card__foot .article-meta > *:not(:last-child) {
	display: none;
}

.section-panel .story-card__foot .article-meta {
	gap: 0;
}

/* Editor-only notice where a section has no content to render. */
.colitco-widget-placeholder {
	padding: 1.5rem;
	border: 1px dashed var(--border);
	border-radius: var(--radius);
	background: var(--secondary);
	color: var(--secondary-foreground);
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: center;
}

.colitco-widget-placeholder__note {
	display: inline-block;
	margin-top: 0.375rem;
	font-size: 0.6875rem;
	color: var(--muted-foreground);
}

/* Movers laid out three across, as the markets pages do. */
.movers-grid {
	display: grid;
	gap: 1rem;
}

@media (min-width: 768px) {
	.movers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.movers-grid .movers { padding: 1.25rem; }

/* A single featured video fills the row. */
.video-grid--single { grid-template-columns: minmax(0, 1fr); }