/*! Unplug India — newspaper reader.
 *
 * Hand written rather than Tailwind utilities. The theme loads a prebuilt
 * main.css that only contains the classes its templates were compiled with, so
 * a utility written here (sticky, object-contain, h-8, snap, max-h) would
 * silently do nothing. This file is loaded only on the homepage, the epaper
 * archive and a single edition.
 */

.uix-no-scroll {
	overflow: hidden;
}

/* --- Homepage block ----------------------------------------------------- */

.uix-epaper-band {
	margin-top: 2.5rem;
	border: 1px solid var(--color-line);
	border-radius: 0.5rem;
	background: var(--color-sand);
	overflow: hidden;
}

.uix-epaper-band__inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem;
}

.uix-epaper-band__cover {
	display: block;
	position: relative;
	width: 9.5rem;
	flex: 0 0 9.5rem;
	aspect-ratio: auto; display:flex; align-items:flex-start; justify-content:center;
	border-radius: 0.375rem;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--color-line);
	box-shadow: 0 4px 14px -6px rgb(15 23 42 / 0.35);
}

.uix-epaper-band__cover img {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

/*
 * Homepage variant. The band runs under the lead story there, so it is a
 * strip rather than a poster: smaller cover, tighter padding, no top margin.
 */
.uix-epaper-band--compact {
	margin-top: 1.75rem;
	background: #fff;
}

.uix-epaper-band--compact .uix-epaper-band__inner {
	gap: 0.875rem;
	padding: 0.875rem;
}

.uix-epaper-band--compact .uix-epaper-band__cover {
	width: 8.5rem;
	flex: 0 0 8.5rem;
}

.uix-epaper-band--compact .uix-epaper-band__title {
	font-size: clamp(1.25rem, 3vw, 1.625rem);
	font-weight: 800;
}

.uix-epaper-band--compact .uix-epaper-band__meta {
	margin-top: 0.25rem;
}

@media (min-width: 640px) {
	.uix-epaper-band--compact .uix-epaper-band__cover {
		width: 7rem;
		flex: 0 0 7rem;
	}
}

.uix-epaper-band__label {
	display: inline-block;
	background: var(--color-brand);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.125rem 0.5rem;
	border-radius: 0.125rem;
}

.uix-epaper-band__title {
	font-family: var(--font-head);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 800;
	line-height: 1.15;
	margin-top: 0.5rem;
}

.uix-epaper-band__meta {
	font-size: 0.875rem;
	color: var(--color-muted);
	margin-top: 0.25rem;
}

.uix-epaper-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.875rem;
	background: var(--color-brand);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	transition: background-color 0.15s ease;
}

.uix-epaper-btn:hover {
	background: var(--color-brand-dark);
}

.uix-epaper-btn--ghost {
	background: transparent;
	color: var(--color-brand);
	border: 1px solid var(--color-brand);
	padding: 0.4375rem 1rem;
}

.uix-epaper-btn--ghost:hover {
	background: var(--color-brand);
	color: #fff;
}

.uix-epaper-btn--sm {
	font-size: 0.75rem;
	padding: 0.375rem 0.75rem;
}

.uix-epaper-band__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.875rem;
}

/* --- Archive ------------------------------------------------------------ */

.uix-epaper-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 1.25rem;
}

@media (min-width: 40rem) {
	.uix-epaper-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.uix-epaper-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.uix-epaper-card {
	display: block;
	border: 1px solid var(--color-line);
	border-radius: 0.375rem;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.uix-epaper-card:hover {
	border-color: var(--color-brand);
}

.uix-epaper-card__cover {
	display: block;
	aspect-ratio: auto; display:flex; align-items:flex-start; justify-content:center;
	background: var(--color-sand);
	overflow: hidden;
}

.uix-epaper-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.uix-epaper-card__body {
	padding: 0.5rem 0.625rem 0.625rem;
}

.uix-epaper-card__date {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-brand);
}

.uix-epaper-card__pages {
	font-size: 0.6875rem;
	color: var(--color-muted);
	margin-top: 0.125rem;
}

.uix-epaper-months {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: 0.75rem;
}

.uix-epaper-months a {
	font-size: 0.75rem;
	padding: 0.25rem 0.625rem;
	border: 1px solid var(--color-line);
	border-radius: 9999px;
	color: var(--color-muted);
}

.uix-epaper-months a:hover,
.uix-epaper-months a.is-current {
	border-color: var(--color-brand);
	color: var(--color-brand);
}

/* --- Reader ------------------------------------------------------------- */

.uix-reader {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	-webkit-user-select: none;
	user-select: none;
}

.uix-reader__bar {
	position: sticky;
	top: 0;
	z-index: 20;
	width: 100%;
	background: rgb(255 255 255 / 0.96);
	backdrop-filter: blur(6px);
	border: 1px solid var(--color-line);
	border-radius: 0.375rem;
	padding: 0.5rem 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.8125rem;
}

.uix-reader__hint {
	color: var(--color-muted);
	font-size: 0.6875rem;
}

@media (max-width: 40rem) {
	.uix-reader__hint {
		display: none;
	}
}

.uix-reader__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	width: 100%;
}

.uix-page {
	margin: 0;
	width: 100%;
	cursor: zoom-in;
}

.uix-page__frame {
	position: relative;
	width: 100%;
	background: var(--color-sand);
	border: 1px solid var(--color-line);
	border-radius: 0.25rem;
	overflow: hidden;
}

.uix-page__ph,
.uix-page__img {
	width: 100%;
	height: auto;
	display: block;
}

/* The full image is transparent until decoded, so the thumbnail shows through
 * and the page never flashes empty. */
.uix-page__ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	
}

.uix-page__img {
	position: relative;
	width: 100%;
	height: auto;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.uix-page__img.is-ready {
	opacity: 1;
}

.uix-page__cap {
	text-align: center;
	font-size: 0.6875rem;
	color: var(--color-muted);
	margin-top: 0.375rem;
	font-variant-numeric: tabular-nums;
}

.uix-reader__loader {
	font-size: 0.8125rem;
	color: var(--color-muted);
	padding: 0.5rem 0 1.5rem;
}

/* --- Full-screen page view ---------------------------------------------- */

.uix-viewer {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgb(11 11 15 / 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	overflow: auto;
}

.uix-viewer img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	background: #fff;
	border-radius: 0.25rem;
}

.uix-viewer__close {
	position: fixed;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 61;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: rgb(255 255 255 / 0.12);
	color: #fff;
	border: 0;
	cursor: pointer;
}

.uix-viewer__close:hover {
	background: rgb(255 255 255 / 0.24);
}

.uix-viewer__cap {
	position: fixed;
	bottom: 0.75rem;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 0.75rem;
	background: rgb(0 0 0 / 0.5);
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-variant-numeric: tabular-nums;
}

/* --- State page --------------------------------------------------------- */

.uix-state-grid {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 48rem) {
	.uix-state-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.uix-state-card {
	border: 1px solid var(--color-line);
	border-radius: 0.5rem;
	padding: 1rem;
	background: #fff;
}

.uix-state-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--color-brand);
	margin-bottom: 0.5rem;
}

.uix-state-card__name {
	font-family: var(--font-head);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-brand);
}

.uix-state-card__count {
	font-size: 0.6875rem;
	color: var(--color-muted);
}

.uix-state-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.uix-state-card__list li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--color-line);
}

.uix-state-card__list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.uix-state-card__city {
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.uix-state-card__title {
	display: block;
	font-size: 0.875rem;
	line-height: 1.4;
	margin-top: 0.125rem;
}

.uix-state-card__title:hover {
	color: var(--color-brand);
}

.uix-state-card__time {
	font-size: 0.6875rem;
	color: var(--color-muted);
	margin-top: 0.125rem;
	display: block;
}

/* Newspaper PDF pages: render every page at the full container width.
 * Kept last in the file and !important on purpose. The <img> elements carry
 * width/height attributes, and any later or more specific rule that reintroduced
 * an intrinsic size collapsed page 1 back to a narrow strip while pages 2..n
 * (built by JS, no intrinsic size clash) stayed full width. */
.uix-page,
.uix-page__frame {
	width: 100% !important;
	max-width: 100% !important;
}

/* The real page image only. Deliberately not ".uix-page__frame img": that would
 * also match .uix-page__ph, the blurred placeholder, which relies on
 * height:100% + object-fit:cover to fill the frame before the page decodes. */
.uix-page__img {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: none !important;
	object-fit: contain !important;
}

/* The full-screen viewer is a different job: the page has to FIT the viewport,
 * not fill its width. Sizing it to the overlay width made a newspaper page
 * taller than the screen, so it covered the entire backdrop and left nowhere
 * to click to close, while the overlay scrolled a giant image instead of
 * showing the page. max-height plus object-fit:contain does the fitting, and
 * it survives browser zoom, where the viewport is much shorter than the page.
 */
.uix-viewer img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
}