/**
 * Homepage section: Popular Celebrity Homes.
 *
 * A deliberately different layout family from Latest Celebrity Homes, which is
 * a 3-up grid of equal vertical cards. Here one lead story takes half the
 * section and three compact horizontal rows fill the other half, so the two
 * sections do not read as the same component twice.
 *
 * Everything else comes from existing primitives (.ha-media, .ha-eyebrow,
 * .ha-card, .ha-h3, .ha-body, .ha-meta, .ha-section-head).
 *
 * Loaded on the homepage only, enqueued by inc/home-popular.php.
 *
 * @package GeneratePress_Child
 */

/* Lead story left, stacked list right, roughly 50/50. */
.ha-popular {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--ha-gap-lg);
	align-items: start;
}

/* The lead headline sits between the section H2 and the small row titles. */
.ha-popular__lead .ha-card__title {
	font-size: clamp(1.375rem, 2vw, 1.875rem);
}

.ha-popular__list {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Compact row: small square thumbnail, then the text. */
.ha-popular__item {
	display: grid;
	grid-template-columns: clamp(4.5rem, 9vw, 6.5rem) minmax(0, 1fr);
	gap: var(--ha-gap-sm);
	align-items: start;
	padding: var(--ha-gap-sm) 0;
	border-top: var(--ha-border-width) solid var(--ha-rule);
	min-width: 0;
}

/* First row aligns flush with the top of the lead image. */
.ha-popular__list > .ha-popular__item:first-child {
	padding-top: 0;
	border-top: 0;
}

.ha-popular__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

/* Tablet and below: lead first, then the rows, in source order. */
@media (max-width: 63.9375em) {

	.ha-popular {
		grid-template-columns: 1fr;
		gap: var(--ha-gap);
	}

	.ha-popular__list > .ha-popular__item:first-child {
		padding-top: var(--ha-gap-sm);
		border-top: var(--ha-border-width) solid var(--ha-rule);
	}
}