/**
 * PunjabiTime News — Phase 1 polish (additive, safe).
 *
 * Loaded via the Novamira sandbox loader AFTER all other stylesheets so it wins
 * without editing main.css. Scope:
 *   T3  Homepage layout stabilisation (consistent images, capped headlines,
 *       reduced blank space, hide empty category sections).
 *   T4  Single article page — centered, clean reading width.
 *   T5  Hide Opinion (homepage section + nav/drawer/footer links) for now.
 *   T6  Desktop 3-line menu opens the left charcoal drawer (CSS half; the JS
 *       already wires the click — this exposes the drawer on desktop too).
 *
 * Does NOT change posts, images, categories, menus, AdSense, the cream page
 * background, the dark footer design, or the active theme. Fully reversible:
 * disable / delete the sandbox loader (pt-phase1-polish.php) and this file.
 */

/* ================================================================== *
 * T5 — HIDE OPINION (links). Category is NOT deleted; only hidden.
 * Re-enable by deleting this block (and the homepage rule below).
 * Matches the primary nav, the drawer list, and the footer "More" link.
 * ================================================================== */
.pt-header--ft .pt-menu a[href*="/opinion"],
.pt-header--ft .pt-menu a[href*="/category/opinion"],
.pt-drawer__nav a[href*="/opinion"],
.pt-drawer__nav a[href*="/category/opinion"],
.pt-site-footer a[href*="/opinion"],
.pt-site-footer a[href*="/category/opinion"] {
	display: none !important;
}

/* Hide the menu list-item wrapper too (so spacing stays even). */
.pt-header--ft .pt-menu > li:has(> a[href*="opinion"]),
.pt-drawer__nav li:has(> a[href*="opinion"]),
.pt-site-footer li:has(> a[href*="opinion"]) {
	display: none !important;
}

/* ================================================================== *
 * T3 + T5 — HIDE EMPTY HOMEPAGE SECTIONS automatically.
 * Any homepage section that rendered a "No posts…" empty message is hidden.
 * When that category gets posts later, the .pt-empty disappears and the
 * section returns on its own. (Top Stories / Latest / Trending always have
 * content on a live site, so they are unaffected.)
 * ================================================================== */
.pt-home .pt-section:has(> .pt-container > .pt-empty),
.pt-home .pt-section:has(> .pt-container .pt-card-grid > .pt-empty),
.pt-home .pt-section:has(> .pt-container .pt-feature-grid > .pt-empty),
.pt-home .pt-opinion-section {
	display: none !important;
}

/* The Opinion homepage section is explicitly hidden for Phase 1 regardless of
 * :has() support (it currently has zero posts). Remove this line to re-enable. */
.pt-home .pt-opinion-section { display: none !important; }

/* Safety: if JS marks a section empty (fallback for browsers without :has()). */
.pt-home .pt-section.pt-is-empty { display: none !important; }

/* ================================================================== *
 * T3 — HOMEPAGE LAYOUT STABILISATION
 * ================================================================== */

/* Consistent image aspect ratios across every homepage card type so rows line
 * up. (main.css already sets 16/10; we re-assert + cover to avoid stretch.) */
.pt-home .pt-card__image img,
.pt-home .pt-video-card__image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Lead cards get a slightly wider cinematic ratio but stay bounded. */
.pt-home .pt-card--lead .pt-card__image img,
.pt-home .pt-top-grid__lead .pt-card__image img {
	aspect-ratio: 16 / 9;
}

/* Mini cards stay square (thumbnail list). */
.pt-home .pt-card--mini .pt-card__image img {
	aspect-ratio: 1 / 1;
}

/* Cap oversized headlines so a long title never blows a card out of shape. */
.pt-home .pt-card--lead .pt-card__title {
	font-size: clamp(26px, 2.8vw, 40px);
	line-height: 1.1;
}

.pt-home .pt-card__title {
	font-size: clamp(18px, 1.6vw, 24px);
	line-height: 1.14;
}

/* Clamp card titles + excerpts to keep card heights even (no runaway cards). */
.pt-home .pt-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pt-home .pt-card--lead .pt-card__title a {
	-webkit-line-clamp: 4;
}

.pt-home .pt-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 16px;
	line-height: 1.5;
}

/* Make the four-up grids stretch evenly so short cards don’t leave gaps. */
.pt-home .pt-card-grid {
	align-items: stretch;
}

.pt-home .pt-card-grid .pt-card {
	display: flex;
	flex-direction: column;
}

.pt-home .pt-card-grid .pt-card .pt-card__body {
	flex: 1 1 auto;
}

/* Reduce excess vertical blank space between sections. */
.pt-home .pt-section {
	padding: 30px 0;
}

.pt-home .pt-section:first-child {
	padding-top: 24px;
}

/* Feature section: keep the lead from dominating; tighten the side list. */
.pt-home .pt-feature-grid {
	grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
	gap: 28px;
}

.pt-home .pt-feature-grid__list {
	gap: 14px;
}

/* Trending: even columns, no stray empty cells. */
.pt-home .pt-trending-list {
	gap: 18px 20px;
}

/* Tablet: make the four-up grids two-up and keep ratios tidy. */
@media (max-width: 1100px) {
	.pt-home .pt-card-grid--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile: single column, comfortable spacing, controlled headline sizes. */
@media (max-width: 820px) {
	.pt-home .pt-section {
		padding: 22px 0;
	}

	.pt-home .pt-card--lead .pt-card__title {
		font-size: 26px;
	}

	.pt-home .pt-card__title {
		font-size: 21px;
	}

	.pt-home .pt-feature-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* ================================================================== *
 * T4 — SINGLE ARTICLE PAGE (uses index.php .pt-single-fallback)
 * Centered, clean reading width, sized + centered featured image.
 * ================================================================== */
body.single .pt-archive .pt-container {
	max-width: 760px;
}

body.single .pt-page-header {
	max-width: 760px;
	margin-inline: auto;
	text-align: left;
}

body.single .pt-page-header h1 {
	font-family: var(--pt-head, Georgia, serif);
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.14;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* Override the loop grid on single posts: one centered column. */
body.single .pt-loop-grid {
	display: block;
	max-width: 760px;
	margin-inline: auto;
}

body.single .pt-single-fallback {
	max-width: 760px;
	margin-inline: auto;
}

/* Featured image: centered, sized, never stretched. */
body.single .pt-single-fallback__image {
	margin: 0 auto 22px;
}

body.single .pt-single-fallback__image img {
	width: 100%;
	max-height: 460px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 3px;
}

/* Meta row under the title. */
body.single .pt-single-fallback .pt-meta {
	margin: 4px 0 18px;
}

/* Readable body: comfortable measure + paragraph rhythm. */
body.single .pt-entry-content {
	font-family: var(--pt-body, Georgia, serif);
	font-size: 19px;
	line-height: 1.75;
	color: var(--pt-ink, #111);
}

body.single .pt-entry-content > * {
	max-width: 100%;
}

body.single .pt-entry-content p,
body.single .pt-entry-content ul,
body.single .pt-entry-content ol,
body.single .pt-entry-content blockquote {
	margin: 0 0 1.3em;
}

body.single .pt-entry-content h2 {
	margin: 1.6em 0 0.5em;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.2;
}

body.single .pt-entry-content h3 {
	margin: 1.4em 0 0.45em;
	font-size: clamp(20px, 2vw, 25px);
	line-height: 1.25;
}

body.single .pt-entry-content img {
	margin: 1.2em auto;
	border-radius: 3px;
}

body.single .pt-entry-content figure {
	margin: 1.4em 0;
}

body.single .pt-entry-content blockquote {
	padding-left: 18px;
	border-left: 3px solid var(--pt-gold, #d4af37);
	color: var(--pt-ink-soft, #4c4546);
	font-style: italic;
}

@media (max-width: 820px) {
	body.single .pt-archive .pt-container,
	body.single .pt-loop-grid,
	body.single .pt-single-fallback,
	body.single .pt-page-header {
		max-width: 100%;
	}

	body.single .pt-entry-content {
		font-size: 18px;
	}
}

/* ================================================================== *
 * T6 — DESKTOP DRAWER (>= 1025px)
 * The drawer/overlay markup + JS already exist; the mobile-nav CSS only
 * reveals them <=1024px. Here we expose the SAME charcoal drawer on desktop
 * when the 3-line menu button is clicked (body.pt-drawer-open). The desktop
 * primary nav bar and search are untouched.
 * ================================================================== */
@media (min-width: 1025px) {
	/* Overlay behind the drawer, dims the page. */
	.pt-drawer-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1100;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 200ms ease, visibility 200ms ease;
	}

	.pt-drawer-overlay[hidden] {
		display: block;
	}

	body.pt-drawer-open .pt-drawer-overlay {
		opacity: 1;
		visibility: visible;
	}

	/* The left charcoal drawer (matches mobile + footer). */
	.pt-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 1200;
		width: min(380px, 90vw);
		background: var(--ptn-drawer-bg, #1f252e);
		color: var(--ptn-drawer-ink, #c3c8d0);
		transform: translateX(-100%);
		transition: transform 220ms ease;
		overflow-y: auto;
		box-shadow: 2px 0 22px rgba(0, 0, 0, 0.35);
	}

	body.pt-drawer-open .pt-drawer {
		transform: translateX(0);
	}

	/* Lock background scroll on desktop while the drawer is open. */
	body.pt-drawer-open {
		overflow: hidden;
	}

	/* Drawer internals (mirror the mobile styling so it looks identical). */
	.pt-drawer__head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
		padding: 22px 20px 18px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.10);
		box-shadow: inset 0 3px 0 0 var(--ptn-red, #9e1b1b);
	}

	.pt-drawer__brand a {
		font-family: var(--pt-head, Georgia, serif);
		font-weight: 700;
		font-size: 28px;
		letter-spacing: -0.03em;
		color: var(--ptn-drawer-head, #f4f1ec);
	}

	.pt-drawer__brand p {
		margin: 6px 0 0;
		font-family: var(--pt-ui, Arial, sans-serif);
		font-size: 12px;
		letter-spacing: 0.04em;
		color: var(--ptn-drawer-ink, #c3c8d0);
	}

	.pt-drawer__close {
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		line-height: 1;
		font-size: 28px;
		color: var(--ptn-drawer-ink, #c3c8d0);
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 2px;
		cursor: pointer;
		transition: color 150ms ease, border-color 150ms ease;
	}

	.pt-drawer__close:hover,
	.pt-drawer__close:focus-visible {
		color: #fff;
		border-color: var(--ptn-red, #9e1b1b);
	}

	.pt-drawer__nav {
		padding: 14px 0 28px;
	}

	.pt-drawer__heading {
		margin: 16px 20px 8px;
		font-family: var(--pt-ui, Arial, sans-serif);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: #7f8794;
	}

	.pt-drawer__nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.pt-drawer__nav a {
		display: block;
		padding: 12px 20px;
		font-family: var(--pt-ui, Arial, sans-serif);
		font-size: 15px;
		font-weight: 600;
		color: var(--ptn-drawer-ink, #c3c8d0);
		border-left: 3px solid transparent;
		transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
	}

	.pt-drawer__nav a:hover,
	.pt-drawer__nav a:focus-visible {
		color: #fff;
		background: rgba(255, 255, 255, 0.04);
		border-left-color: var(--ptn-red, #9e1b1b);
	}

	.pt-drawer__nav .is-active > a {
		color: #fff;
		border-left-color: var(--ptn-red, #9e1b1b);
		background: rgba(158, 27, 27, 0.16);
	}

	.pt-drawer__useful a {
		font-size: 14px;
		font-weight: 500;
		color: #9aa1ab;
	}

	/* Make sure the desktop 3-line menu button is clearly visible/clickable. */
	.pt-header--ft .pt-masthead__left .pt-menu-toggle {
		display: inline-flex;
	}
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.pt-drawer,
	.pt-drawer-overlay {
		transition: none;
	}
}