/**
 * Latest-posts feed (infinite scroll) — full-width section used on the
 * single-survey page and below the two-column layout on regular posts.
 *
 * Card / sponsored-cell / sentinel styling comes from archive-posts-grid.css
 * + article-card.css — this file only widens the grid to THREE columns (the
 * archive runs two next to its sidebar; this section always spans the full
 * container) and adds the section shell.
 *
 * Desktop-first like the rest of the theme (base = desktop, max-width
 * overrides). The grid rules are scoped `.hm-latest-feed .hm-archive-grid`
 * (two classes) so they outrank archive-posts-grid.css's one-class rules
 * regardless of stylesheet print order.
 */

.hm-latest-feed {
	padding-block: var(--hm-space-section) 80px;
}

.hm-latest-feed__container {
	padding-inline: 16px;
}

.hm-latest-feed__heading {
	display: flex;
	align-items: flex-end;
	gap: 15px;
	color: var(--hm-color-text);
	font-weight: 900;
	font-size: 32px;
	line-height: 1;
	margin-block: 0 26px;
	unicode-bidi: isolate;
}

.hm-latest-feed__dot {
	flex-shrink: 0;
	margin-block-end: 2px;
}

.hm-latest-feed .hm-archive-grid {
	grid-template-columns: repeat(3, 1fr);
}

/* Tablet — drop to the archive's two columns. */
@media (max-width: 1023px) {
	.hm-latest-feed .hm-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile — single column (re-declared because the scoped desktop rule
   outranks the archive stylesheet's one-class mobile rule). */
@media (max-width: 767px) {
	.hm-latest-feed .hm-archive-grid {
		grid-template-columns: 1fr;
	}

	.hm-latest-feed {
		padding-block: 40px 48px;
	}

	.hm-latest-feed__container {
		padding-inline: 20px;
	}

	.hm-latest-feed__heading {
		font-size: 26px;
	}
}