/* ==========================================================================
   Homepage (D-58) — port of redesign-sample/index.html.
   Breakpoints: 640 (two-column lists, swipe rows end), 768 (billboard, promo), 1024 (main splits).
   Phones keep the D-34 trims through .hide-mobile (layout.css).
   ========================================================================== */

/* The live banner runs edge to edge, so main carries no top padding; sections own their spacing. */
.site-main.home { padding-block: 0 var(--s-7); }

/* Lists on this page are plain rows: no markers, no indent (numbers come from the ranked card). */
:where(.home) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }

/* The page's one h1 is for assistive tech and search engines; it takes a scale size so it does not count as an extra one. */
.home-h1 { font-size: var(--fs-6); }

/* Live banner ------------------------------------------------------------------ */
.home-live {
	display: block;
	border-bottom: 1px solid var(--line);
	background: var(--tint);
	color: inherit;
}

.home-live__in {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	min-height: 44px;
}

.home-live__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	flex: none;
	padding: 2px var(--s-3);
	border-radius: var(--radius);
	background: var(--live-fill);
	color: var(--white);
	font-size: var(--fs-7);
	font-weight: 700;
}

.home-live__badge .live-dot { background: var(--white); }

.home-live__title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	color: var(--heading);
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.home-live__meta {
	flex: none;
	color: var(--muted);
	font-size: var(--fs-7);
}

@media (hover: hover) {
	.home-live:hover .home-live__title { text-decoration: underline; text-underline-offset: 0.25em; }
}

/* Lead + ताजा rail ------------------------------------------------------------- */
.home-top { margin-top: var(--s-6); }

.home-top__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-6);
}

@media (min-width: 1024px) {
	.home-top__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gutter); }
	.home-latest { padding-left: var(--gutter); border-left: 1px solid var(--line); }
}

.home-latest__head {
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--line);
	color: var(--heading);
	font-size: var(--t-sec);
}

.home-latest__list > li {
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--line);
	break-inside: avoid;
}

@media (min-width: 640px) {
	.home-latest__list { columns: 2; column-gap: var(--gutter); }
}

@media (min-width: 1024px) {
	.home-latest__list { columns: 1; }
}

/* Top stories: three text-forward rows ------------------------------------------ */
.home-topstories {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 var(--gutter);
	margin-top: var(--s-6);
	border-top: 1px solid var(--line);
}

.home-topstories > .card {
	padding: var(--s-4) 0;
	border-bottom: 1px solid var(--line);
}

.home-topstories > .card:last-child { border-bottom: 0; }

@media (min-width: 1024px) {
	.home-topstories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.home-topstories > .card { border-bottom: 0; }
}

/* Ads after the top stories: leaderboard on desktop, MPU on phones and tablets. No ad, no wrapper. */
.home-top__ad { margin-top: var(--s-6); }
.home-top__ad--desktop { display: none; }
@media (min-width: 1024px) {
	.home-top__ad--desktop { display: block; }
	.home-top__ad--mpu { display: none; }
}

.home-billboard { display: none; margin-top: var(--s-7); }
@media (min-width: 768px) {
	.home-billboard { display: block; }
}

/* Shared list: text rows with hairline dividers ---------------------------------- */
.home-list > li {
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--line);
	break-inside: avoid;
}

.home-list > li:last-child { border-bottom: 0; }

/* समाचार + लोकप्रिय ---------------------------------------------------------------- */
.home-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-6);
	margin-top: var(--s-7);
}

.home-band__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-4) var(--gutter);
}

@media (min-width: 640px) {
	.home-band__grid .home-list { columns: 2; column-gap: var(--gutter); }
}

@media (min-width: 1024px) {
	.home-band { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gutter); }
	.home-band__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
	.home-band__grid .home-list { columns: 1; }
}

.ranked > li {
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--line);
}

/* Category pairs -------------------------------------------------------------------- */
.home-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-6);
	margin-top: var(--s-7);
}

.home-pair > :only-child { grid-column: 1 / -1; }

@media (min-width: 1024px) {
	.home-pair { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gutter); }
	.home-pair--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

.home-pair__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-4) var(--gutter);
}

@media (min-width: 1024px) {
	.home-pair__grid:not(.home-pair__grid--stack) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.home-pair__narrow > .card { margin-bottom: var(--s-2); }

/* Market tiles (economy block, ainn-markets): up to three across, each at least 6.5rem wide. The minimum grows
   with the text size, so at 150% and 200% the tiles wrap to two rows or one column instead of running off a phone. */
.home-markets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(6.5rem, calc((100% - 2 * var(--s-2)) / 3)), 1fr));
	gap: var(--s-2);
	margin-bottom: var(--s-4);
}

.home-markets a {
	display: block;
	height: 100%;
	padding: var(--s-2);
	border-radius: var(--radius-lg);
	background: var(--bg-soft);
	transition: transform var(--dur-press) var(--ease-out);
}

.home-markets a:active { transform: scale(calc(1 - 0.03 * var(--m))); }

.home-markets__label {
	display: block;
	color: var(--muted);
	font-size: var(--fs-7);
	line-height: var(--lh-ui);
}

.home-markets__value {
	display: block;
	color: var(--heading);
	font: 700 var(--fs-6) / var(--lh-ui) var(--font-ui);
	white-space: nowrap;
}

.home-markets__value.is-up { color: var(--success-text); }
.home-markets__value.is-down { color: var(--brand-ink); }

/* प्रविधि on the navy band ------------------------------------------------------------ */
.home-navy {
	margin-top: var(--s-7);
	padding-block: var(--s-7);
	background: var(--band-bg);
	color: var(--on-navy-muted);
}

.home-navy .section-head { border-top-color: var(--sky); }
.home-navy .section-head__title { color: var(--white); }
.home-navy .section-head__more { color: var(--sky); }

.home-navy__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-6) var(--gutter);
}

/* Tablet: the image lead runs the full row (image left, text right). */
@media (min-width: 640px) {
	.home-navy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home-navy__grid > .card--feature { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; column-gap: var(--gutter); }
	.home-navy__links { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
	.home-navy__grid { grid-template-columns: 5fr 4fr 4fr 3fr; }
	.home-navy__grid--solo { grid-template-columns: 5fr 4fr 4fr; }
	.home-navy__grid > .card--feature { grid-column: auto; grid-template-columns: minmax(0, 1fr); align-items: start; }
	.home-navy__links { grid-column: auto; }
}

.home-navy__links li { border-bottom: 1px solid color-mix(in srgb, var(--white) 20%, transparent); }

.home-navy__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	color: var(--white);
	font-weight: 700;
}

.home-navy__links .icon { --icon-size: 16px; }
@media (hover: hover) { .home-navy__links a:hover span { text-decoration: underline; text-underline-offset: 0.25em; } }

/* Opinion: a tinted band; a swipe row on phones, a grid from 640 ------------------------ */
.home-voices {
	margin-top: var(--s-7);
	padding-block: var(--s-7);
	background: var(--bg-soft);
}

:root[data-theme="dark"] .home-voices { background: var(--tint); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .home-voices { background: var(--tint); }
}

.home-voices__grid {
	display: flex;
	gap: var(--s-4);
	margin-inline: calc(-1 * var(--page-gutter));
	padding: 2px var(--page-gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--page-gutter);
	scrollbar-width: none;
}

.home-voices__grid::-webkit-scrollbar { display: none; }
.home-voices__grid > .card { flex: 0 0 min(82%, 300px); scroll-snap-align: start; align-content: start; }

@media (min-width: 640px) {
	.home-voices__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-5) var(--gutter);
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}
}

@media (min-width: 1024px) {
	.home-voices__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* मल्टिमिडिया --------------------------------------------------------------------------- */
.home-multimedia { margin-top: var(--s-7); }

.home-multimedia__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-6) var(--gutter);
}

@media (min-width: 1024px) {
	.home-multimedia__grid:not(.home-multimedia__grid--solo) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.home-multimedia__photo {
	margin-top: var(--s-4);
	padding-top: var(--s-4);
	border-top: 1px solid var(--line);
}

.home-list--rows + .home-multimedia__photo { margin-top: 0; }

/* प्रदेश ---------------------------------------------------------------------------------- */
.home-provinces { margin-top: var(--s-7); }
.home-provinces__tabs { flex-wrap: wrap; padding-bottom: var(--s-2); }

@media (min-width: 1024px) {
	.home-provinces__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); }
}

.home-provinces__list > li {
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--line);
}

.home-provinces__more { margin-top: var(--s-4); }
.home-empty { color: var(--muted); }

/* ePaper + newsletter: one band ------------------------------------------------------------ */
.home-promo-wrap { margin-top: var(--s-7); }

.home-promo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

@media (min-width: 1024px) {
	.home-promo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.home-promo h2 { font-size: var(--t-sec); }
.home-promo p { margin-top: var(--s-1); color: var(--text); }

.home-promo__epaper {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: var(--s-5);
	align-items: center;
	padding: var(--s-5);
	background: var(--bg-soft);
}

.home-promo__epaper > div { display: grid; gap: var(--s-2); justify-items: start; }
.home-promo__epaper p { margin: 0; }

.home-promo__icon {
	display: grid;
	place-items: center;
	aspect-ratio: 1240 / 1754;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--navy);
	--icon-size: 36px;
}

:root[data-theme="dark"] .home-promo__icon { color: var(--sky); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .home-promo__icon { color: var(--sky); }
}

.home-promo__icon--cover { padding: 0; }
.home-promo__icon--cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.home-promo .home-promo__edition { color: var(--muted); font-size: var(--fs-7); } /* .home-promo p (above) would otherwise win on specificity */

.home-promo__newsletter {
	padding: var(--s-5);
	background: var(--tint);
}

.home-promo__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-top: var(--s-4);
}

.home-promo__form input[type="email"] {
	flex: 1 1 160px;
	min-width: 0;
	min-height: 44px;
	padding: 0 var(--s-3);
	border: 1px solid var(--muted); /* 3:1 against the tint */
	border-radius: var(--radius-lg);
	background: var(--bg);
	color: var(--ink);
	font-size: var(--fs-6);
}

/* Red is for urgency and one CTA per view (the masthead ePaper button): the form button is navy. */
.home-promo__form .btn--primary { background: var(--fill-selected); }
@media (hover: hover) { .home-promo__form .btn--primary:hover { background: var(--navy-2); } }
:root[data-theme="dark"] .home-promo__form .btn--primary { box-shadow: inset 0 0 0 1px var(--focus); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .home-promo__form .btn--primary { box-shadow: inset 0 0 0 1px var(--focus); }
}

/* थप समाचार ---------------------------------------------------------------------------------- */
.home-more { margin-top: var(--s-7); }

.home-stream > .card--line {
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--line);
}

.home-more__actions {
	display: grid;
	justify-items: center;
	gap: var(--s-3);
	margin-top: var(--s-5);
}

.home-more__status { color: var(--muted); font-size: var(--fs-7); }
.home-more__status:empty { display: none; }

/* Skeleton rows while a page loads */
.home-skel {
	display: grid;
	gap: var(--s-2);
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--line);
}

.home-skel .skeleton { display: block; height: 14px; }
.home-skel .skeleton:first-child { width: 22%; }
.home-skel .skeleton:last-child { width: 78%; height: 18px; }