/*
 * Media Creative Hub — consolidated responsive breakpoints.
 * Mobile-first content stays legible by default; these rules progressively
 * simplify grids and stack toolbars/heroes on smaller viewports.
 */

/* ---------------- ≤1280px ---------------- */
@media (max-width: 1280px) {
	:root {
		--mch-section-padding: 96px;
	}

	.mch-portfolio-grid,
	.mch-grid-standard .mch-portfolio-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------------- ≤1024px ---------------- */
@media (max-width: 1024px) {
	.mch-portfolio-grid,
	.mch-grid-standard .mch-portfolio-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mch-grid-masonry .mch-portfolio-grid {
		column-count: 2;
	}

	.mch-grid-editorial .mch-portfolio-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.mch-grid-editorial .mch-portfolio-card.mch-card-featured {
		grid-column: span 4;
		grid-row: span 1;
	}

	.mch-grid-editorial .mch-portfolio-card {
		grid-column: span 2;
	}

	.mch-services-grid {
		--mch-services-columns: 2 !important;
	}

	.mch-process-steps {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}

	.mch-testimonials-grid {
		--mch-testimonial-columns: 1 !important;
	}

	.mch-project-overview-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mch-featured-project,
	.mch-case-study-widget,
	.mch-project-mobile-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

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

	.mch-footer-brand {
		grid-column: span 3;
		max-width: 480px;
	}
}

/* ---------------- ≤900px (tablet) ---------------- */
@media (max-width: 900px) {
	:root {
		--mch-section-padding: 72px;
	}

	.mch-blog-layout.mch-sidebar-right,
	.mch-blog-layout.mch-sidebar-left {
		grid-template-columns: 1fr;
	}

	.mch-blog-layout.mch-sidebar-left .mch-blog-sidebar {
		order: 1;
	}

	.mch-blog-posts {
		grid-template-columns: repeat(2, 1fr);
	}

	.mch-portfolio-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}

	.mch-portfolio-toolbar-secondary {
		margin-left: 0;
		width: 100%;
		justify-content: space-between;
	}

	.mch-portfolio-filters {
		width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 4px;
	}

	.mch-quick-view-content {
		grid-template-columns: 1fr;
	}

	.mch-quick-view-media {
		aspect-ratio: 16 / 9;
	}
}

/* ---------------- ≤768px ---------------- */
@media (max-width: 768px) {
	.mch-portfolio-grid,
	.mch-grid-standard .mch-portfolio-grid,
	.mch-grid-editorial .mch-portfolio-grid {
		grid-template-columns: 1fr;
	}

	.mch-grid-masonry .mch-portfolio-grid {
		column-count: 1;
	}

	.mch-grid-editorial .mch-portfolio-card,
	.mch-grid-editorial .mch-portfolio-card.mch-card-featured {
		grid-column: span 1;
		grid-row: span 1;
	}

	.mch-portfolio-skeleton {
		grid-template-columns: 1fr;
	}

	.mch-blog-posts {
		grid-template-columns: 1fr;
	}

	.mch-services-grid {
		--mch-services-columns: 1 !important;
	}

	.mch-process-steps {
		grid-template-columns: 1fr;
	}

	.mch-project-overview-grid,
	.mch-project-gallery-grid,
	.mch-project-nav-grid {
		grid-template-columns: 1fr;
	}

	.mch-project-nav-next {
		text-align: left;
		align-items: flex-start;
	}

	.mch-client-logos {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		padding-bottom: 8px;
	}

	.mch-client-logos.mch-scroll-mobile {
		-webkit-overflow-scrolling: touch;
	}

	.mch-fallback-nav {
		display: none;
	}

	.mch-header-phone {
		display: none !important;
	}

	.mch-header-cta-default {
		display: none;
	}

	.mch-header-cta-stuck {
		display: inline-flex !important;
	}

	.mch-header-menu-toggle {
		display: inline-flex !important;
	}

	.mch-footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mch-footer-brand {
		grid-column: span 2;
	}
}

/* ---------------- ≤600px ---------------- */
@media (max-width: 600px) {
	:root {
		--mch-section-padding: 56px;
	}

	.mch-container,
	.mch-container-wide {
		padding-inline: 18px;
	}

	.mch-portfolio-search-input {
		min-width: 0;
		width: 100%;
	}

	.mch-quick-view-modal {
		padding: 0;
	}

	.mch-quick-view-dialog {
		max-height: 100vh;
		height: 100vh;
		border-radius: 0;
	}

	.mch-404 {
		padding-block: 96px;
	}

	.mch-testimonial-large {
		padding: 32px;
	}

	/* Small footer on mobile: tighter padding/gaps/margins throughout so the
	   stacked single-column layout doesn't run unnecessarily tall. */
	.mch-fallback-footer-bar {
		padding-top: 40px;
	}

	.mch-footer-grid {
		grid-template-columns: 1fr;
		gap: 28px;
		padding-bottom: 32px;
	}

	.mch-footer-brand {
		grid-column: span 1;
		max-width: none;
	}

	.mch-footer-brand .mch-fallback-logo {
		margin-bottom: 12px;
	}

	.mch-footer-description {
		max-width: none;
	}

	.mch-footer-social {
		margin-top: 20px;
	}

	.mch-footer-contact-list {
		gap: 10px;
		margin: 8px 0 16px;
	}

	.mch-newsletter-title {
		margin-top: 0;
	}

	.mch-newsletter-text {
		margin: 6px 0 12px;
	}

	.mch-footer-bottom {
		padding-block: 16px;
	}

	.mch-footer-bottom-inner {
		flex-direction: column;
		align-items: center;
	}

	.mch-fallback-logo-line-1 {
		font-size: 1.25rem;
	}

	.mch-mobile-nav {
		padding: 88px 20px 24px;
	}
}

/* ---------------- ≤480px ---------------- */
@media (max-width: 480px) {
	.mch-btn {
		width: 100%;
		justify-content: center;
	}

	.mch-404-links {
		flex-direction: column;
	}

	.mch-metrics-row {
		gap: 24px;
	}
}