/**
 * PunjabiTime News — Homepage category GRID styling (additive, safe).
 *
 * Loaded last (priority 97) by pt-homepage-grid.php. Pairs with the corrected
 * sandbox front-page template (front-page-grid.php), where every category
 * section after Top Stories outputs .pt-card-grid--four.pt-cat-grid with up to
 * 8 standard cards.
 *
 * Makes those sections compact, equal, balanced 4-up grids with controlled
 * ~180-220px images, readable (not huge) titles, short clamped excerpts, and
 * clean consistent spacing. Top Stories keeps its lead layout. Light + dark.
 *
 * Changes NO posts, settings, header, footer, AdSense, or category URLs.
 */

/* ================================================================== *
 * CATEGORY GRID — 4 equal columns on desktop (4 + 4 = up to 8 posts).
 * ================================================================== */
.pt-home--grid .pt-cat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 22px;
	align-items: stretch;
}

/* Equal cards: column flex so bodies line up and rows stay even. */
.pt-home--grid .pt-cat-grid .pt-card {
	display: flex;
	flex-direction: column;
}

.pt-home--grid .pt-cat-grid .pt-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* Controlled image height (~180-220px desktop), consistent ratio, no stretch. */
.pt-home--grid .pt-cat-grid .pt-card__image {
	overflow: hidden;
	border-radius: 3px;
	margin: 0 0 10px;
}

.pt-home--grid .pt-cat-grid .pt-card__image img {
	width: 100%;
	height: 200px;
	aspect-ratio: auto;
	object-fit: cover;
	display: block;
}

/* Readable but not huge titles. */
.pt-home--grid .pt-cat-grid .pt-card__title {
	font-size: 17px;
	line-height: 1.22;
	margin: 0 0 6px;
}

.pt-home--grid .pt-cat-grid .pt-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Short clamped excerpts. */
.pt-home--grid .pt-cat-grid .pt-card__excerpt {
	font-size: 13.5px;
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* When a section has fewer than 4 posts, keep cards compact and left-aligned
 * instead of stretching across the whole row. */
.pt-home--grid .pt-cat-grid {
	justify-content: start;
}

.pt-home--grid .pt-cat-grid:has(> .pt-card:only-child) {
	grid-template-columns: minmax(0, 300px);
}

.pt-home--grid .pt-cat-grid:has(> .pt-card:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 300px));
}

.pt-home--grid .pt-cat-grid:has(> .pt-card:nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ================================================================== *
 * SECTION SPACING + “View all” header (consistent, clean).
 * ================================================================== */
.pt-home--grid .pt-section {
	padding: 26px 0;
}

.pt-home--grid .pt-section__head {
	margin-bottom: 16px;
}

.pt-home--grid .pt-section__head a {
	white-space: nowrap;
}

/* ================================================================== *
 * RESPONSIVE
 * ================================================================== */

/* Large tablet / small desktop: 3 across. */
@media (max-width: 1200px) {
	.pt-home--grid .pt-cat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Tablet: 2 across. */
@media (max-width: 900px) {
	.pt-home--grid .pt-cat-grid,
	.pt-home--grid .pt-cat-grid:has(> .pt-card:nth-child(3):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pt-home--grid .pt-cat-grid .pt-card__image img {
		height: 180px;
	}
}

/* Mobile: 2-up stays for a compact news feel; very narrow -> 1-up. */
@media (max-width: 560px) {
	.pt-home--grid .pt-cat-grid,
	.pt-home--grid .pt-cat-grid:has(> .pt-card:only-child),
	.pt-home--grid .pt-cat-grid:has(> .pt-card:nth-child(2):last-child),
	.pt-home--grid .pt-cat-grid:has(> .pt-card:nth-child(3):last-child) {
		grid-template-columns: 1fr;
	}
	.pt-home--grid .pt-cat-grid .pt-card__image img {
		height: 200px;
	}
	.pt-home--grid .pt-section {
		padding: 20px 0;
	}
}

/* ================================================================== *
 * DARK MODE — inherit the theme's approved card colours; just keep image
 * frames clean. (No hardcoded light colours so dark mode stays correct.)
 * ================================================================== */
html.pt-dark-mode .pt-home--grid .pt-cat-grid .pt-card__image {
	background: rgba(255, 255, 255, 0.04);
}

/* Safety: never let a stray feature/lead card sneak into a category section. */
.pt-home--grid .pt-grid-section .pt-card--lead .pt-card__image img,
.pt-home--grid .pt-grid-section .pt-feature-grid__main .pt-card__image img {
	height: 200px;
	max-height: 200px;
}