/* ==========================================================================
   Solus IT Child — Responsive refinements
   Breakpoints getest op: 375 / 430 / 768 / 1024 / 1440 / 1920
   ========================================================================== */

/* Geen enkel element mag horizontaal overflow veroorzaken. */
html, body {
	overflow-x: hidden;
}
img, svg {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------
   ≤ 1024px — tablet: hero/why-solus 2-koloms blijft, iets compacter
   -------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.solus-hero__text,
	.solus-why__text {
		max-width: none;
	}
	.solus-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.solus-testimonial-card {
		flex-basis: calc(50% - 12px);
		max-width: none;
	}
	.solus-dashboard {
		max-width: none;
	}
	.solus-feature-grid,
	.solus-feature-grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	.solus-process-steps,
	.solus-team-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------------------
   ≤ 900px — hero/why-solus/proactief vallen terug naar 1 kolom.
   Volgorde in de HTML is al tekst-eerst-dan-afbeelding, dus dit werkt
   direct goed op mobiel zonder extra reorder-CSS.
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
	.solus-hero__grid,
	.solus-why__grid,
	.solus-proactive__grid {
		flex-direction: column;
		align-items: stretch;
	}
	.solus-hero__text,
	.solus-hero__media,
	.solus-why__text,
	.solus-why__media,
	.solus-proactive__text,
	.solus-dashboard-card {
		max-width: none;
		flex-basis: auto;
	}
	.solus-hero__floating-card {
		left: 16px;
		bottom: 16px;
		max-width: 200px;
	}
	.solus-why__quote {
		position: static;
		margin-top: 16px;
		max-width: none;
	}
	.solus-why__info-card {
		position: static;
		margin-top: 12px;
		max-width: none;
	}
	.solus-section-header {
		flex-direction: column;
		align-items: flex-start !important;
	}
	.solus-dashboard {
		flex-direction: column;
	}
	.solus-dashboard__sidebar {
		flex-direction: row;
		width: 100%;
	}
	.solus-usp-bar {
		margin-top: 2rem;
	}
	.solus-usp-bar__inner {
		flex-direction: column;
	}
	.solus-usp-item {
		flex-basis: auto;
		width: 100%;
		padding-bottom: 14px;
		border-bottom: 1px solid var(--solus-border);
	}
	.solus-usp-item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
	.solus-page-hero__grid,
	.solus-split__grid,
	.solus-split--reverse .solus-split__grid {
		flex-direction: column;
		align-items: stretch;
	}
	.solus-page-hero--centered .solus-page-hero__grid {
		flex-direction: column;
	}
	.solus-page-hero__content,
	.solus-page-hero__visual,
	.solus-split__text,
	.solus-split__visual {
		max-width: none;
		flex-basis: auto;
	}
	.solus-page-hero--split-dark .solus-page-hero__grid {
		gap: 1.5rem;
	}
	.solus-contact-grid,
	.solus-support-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------
   ≤ 768px — cards worden 1 kolom, footer-kolommen stapelen
   -------------------------------------------------------------------- */
@media (max-width: 768px) {
	.solus-services-grid {
		grid-template-columns: 1fr;
	}
	.solus-testimonial-card {
		flex-basis: 100%;
		max-width: none;
	}
	.solus-dashboard__row,
	.solus-dashboard__tiles {
		grid-template-columns: 1fr;
	}
	.solus-footer-columns {
		flex-direction: column;
	}
	.solus-footer-col--brand {
		margin-bottom: 8px;
	}
	.solus-footer-bottom {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 10px;
	}
	.solus-feature-grid,
	.solus-feature-grid--cols-2,
	.solus-feature-grid--cols-4,
	.solus-process-steps,
	.solus-team-grid,
	.solus-service-nav__items,
	.solus-vacatures-grid,
	.solus-contact-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------
   ≤ 600px — kleine telefoons: knoppen full-width, header compacter
   -------------------------------------------------------------------- */
@media (max-width: 600px) {
	.solus-site-header__inner {
		padding-block: 14px;
		min-height: 64px;
	}
	.solus-hero__ctas .wp-block-button {
		width: 100%;
	}
	.solus-hero__ctas .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
	.solus-cta__buttons .wp-block-button {
		width: 100%;
	}
	.solus-cta__buttons .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
	.solus-hero__floating-card {
		position: static;
		margin-top: 16px;
	}
}