/*
 * MediaHub - responsive.css
 * Breakpoint chinh: mobile-first.
 * mobile:  < 640px
 * tablet:  640px - 1023px
 * desktop: >= 1024px
 */

/* ---------- Tablet & below ---------- */
@media (max-width: 1023px) {
	.single-layout,
	.layout-with-sidebar,
	.contact-grid {
		grid-template-columns: 1fr;
	}

	.hero-feature__grid {
		grid-template-columns: 1fr;
	}

	.hero-feature__media {
		min-height: 240px;
	}

	.post-grid--3,
	.category-grid,
	.value-grid,
	.team-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hero-brand,
	.about-teaser,
	.newsletter-cta,
	.standards-grid {
		grid-template-columns: 1fr;
	}

	.split-heading {
		align-items: flex-start;
	}

	.hero-brand__media {
		order: -1;
		aspect-ratio: 16 / 9;
	}

	.category-chip-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.stat-row {
		grid-template-columns: repeat(2, 1fr);
		row-gap: var(--space-5);
	}

	.site-branding__dateline {
		display: none;
	}
}

/* ---------- Mobile navigation ---------- */
@media (max-width: 900px) {
	.main-navigation {
		display: none;
		flex-basis: 100%;
		order: 3;
		padding-block: var(--space-3);
		border-top: 1px solid var(--color-accent-soft);
	}

	.main-navigation.is-open {
		display: block;
		width: 100%;
	}

	.main-navigation > ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.main-navigation > ul > li {
		width: 100%;
	}

	.main-navigation a {
		width: 100%;
		padding-block: var(--space-2);
		border-bottom: none;
	}

	.main-navigation ul ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		padding-left: var(--space-4);
		display: none;
	}

	.main-navigation li:hover > ul,
	.main-navigation li:focus-within > ul {
		display: block;
	}

	.site-header__inner {
		flex-wrap: wrap;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.site-branding {
		flex: 1;
	}

	.lang-switcher--desktop {
		display: none;
	}

	.lang-switcher--mobile {
		display: inline-flex;
		margin-top: var(--space-3);
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 639px) {
	.post-grid,
	.post-grid--3,
	.category-grid,
	.value-grid,
	.team-grid,
	.stat-row,
	.category-chip-grid {
		grid-template-columns: 1fr;
	}

	.newsletter-cta__form {
		flex-direction: column;
	}

	.river-item {
		grid-template-columns: 1fr;
	}

	.form-row {
		grid-template-columns: 1fr;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
	}

	.cta-banner {
		flex-direction: column;
		align-items: flex-start;
	}

	.post-nav {
		grid-template-columns: 1fr;
	}

	.post-nav--next {
		text-align: left;
	}

	.error-404__code {
		font-size: 3.5rem;
	}

	.page-hero__banner {
		aspect-ratio: 4 / 3;
	}
}