/* Breakpoint fine-tuning. Component files already carry their own
   min-width rules; this file handles cross-cutting adjustments verified
   at 1920/1440/1280/1024/768/480/390/375/360. */

.u-hide-mobile { display: none; }
@media (min-width: 1024px) { .u-hide-mobile { display: initial; } }
.u-hide-desktop { display: initial; }
@media (min-width: 1024px) { .u-hide-desktop { display: none; } }

/* Large desktops: let the canvas breathe instead of stretching the grid */
@media (min-width: 1600px) {
	:root { --container-max: 1360px; }
}

/* Body padding so the sticky mobile CTA bar never covers content */
@media (max-width: 1023px) {
	body { padding-bottom: 76px; }
}

/* Small phones — tighten rhythm further and force single columns */
@media (max-width: 479px) {
	.stats { grid-template-columns: 1fr; gap: var(--sp-6); text-align: start; }
	.stat { display: flex; align-items: baseline; gap: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: var(--sp-4); }
	.stat__label { margin-top: 0; }
	.hero__actions { flex-direction: column; }
	.hero__actions .btn { width: 100%; }
	.hero__trust { gap: var(--sp-5); }
	.compare-list { gap: var(--sp-4); }
	.category-tiles { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
	.cta-banner { padding: var(--sp-7) var(--sp-4); }
	.cta-banner .btn { width: 100%; }
}

@media (max-width: 389px) {
	:root { --fs-lead: 1rem; }
	.hero__badge { max-width: 220px; }
	.btn-lg { padding: 1rem 1.75rem; }
}

/* Tablet portrait: 2-col grids still, but tighten gaps */
@media (min-width: 640px) and (max-width: 1023px) {
	.portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Print */
@media print {
	.site-header, .mobile-menu, .float-actions, .mobile-cta-bar, .skip-link { display: none !important; }
}