/* Mobile homepage layout. Kept separate from the production CSS bundle so
   stylesheet optimization caches cannot keep the earlier category layout. */
.home .hero > *,
.home .hero__side > *,
.home .latest > *,
.home .cat-grid > *,
.home .cat-grid__side > *,
.home .cat-grid__side .card__body {
	min-width: 0;
	max-width: 100%;
}

.home .cat-grid__lead-link {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

@media (max-width: 1024px) {
	.home .hero,
	.home .latest,
	.home .cat-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.home .hero__side {
		grid-column: 1 / -1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
	}

	.home .cat-grid__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.home .container {
		width: calc(100% - 2rem);
		max-width: calc(100% - 2rem);
		margin-inline: auto;
	}

	.home .hero,
	.home .hero__side,
	.home .headlines__list,
	.home .latest,
	.home .cat-grid,
	.home .cat-grid__side {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		grid-template-columns: minmax(0, 1fr);
	}

	.home .cat-grid__lead-link {
		height: clamp(240px, 70vw, 320px);
		min-height: 0;
		max-height: 320px;
		aspect-ratio: auto;
	}

	.home .cat-grid__lead-media,
	.home .cat-grid__lead-media img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.home .cat-grid__side .card--compact {
		display: grid;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		grid-template-columns: clamp(80px, 25vw, 112px) minmax(0, 1fr);
		gap: 0.9rem;
		align-items: start;
	}

	.home .cat-grid__side .card--compact .card__media {
		display: block;
		width: 100%;
		min-width: 0;
		max-width: 112px;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		border-radius: 10px;
	}

	.home .cat-grid__side .card--compact .card__media img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.home .cat-grid__side .card--compact .card__body {
		padding-top: 0;
	}

	.home .hero__content,
	.home .headlines__link,
	.home .news-row__body,
	.home .card__body,
	.home .section__title,
	.home .popular__link {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.home .site-header__inner {
		gap: 0.5rem;
	}

	.home .site-header .site-branding {
		flex: 1 1 auto;
		min-width: 0;
	}

	.home .site-header .site-logo {
		max-width: 100%;
		font-size: clamp(0.75rem, 3.8vw, 1.1rem);
	}

	.home .site-header__actions,
	.home .site-header__actions > button {
		flex-shrink: 0;
	}

	.home .search-form__field {
		min-width: 0;
	}
}