/* =============================================
   Responsive / Mobile-first breakpoints
   Alle pagina's: index, services, waarom-qps, about, contacts
   Breakpoints:
     xs  < 576px
     sm  576px – 767px
     md  768px – 991px
     lg  992px – 1199px
   ============================================= */

/* ─────────────────────────────────────────────
   1. GLOBAAL / ALGEMEEN
   ───────────────────────────────────────────── */
img {
	max-width: 100%;
	height: auto;
}

* {
	box-sizing: border-box;
}

@media (max-width: 575px) {
	.container,
	.container-fluid {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	section,
	.section {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	h1, .__title {
		font-size: 2.4rem !important;
		line-height: 1.3 !important;
	}

	h2 {
		font-size: 2rem !important;
	}

	h3 {
		font-size: 1.7rem !important;
	}

	p {
		font-size: 1.4rem !important;
	}
}

/* ─────────────────────────────────────────────
   2. NAVBAR / HEADER
   Pill-stijl is alleen op desktop (header.css).
   Op mobiel gebruikt de navbar het originele
   framework-systeem (full-width, hamburger overlay).
   ───────────────────────────────────────────── */
@media (max-width: 991px) {
	/* Taalwisseling netjes in het mobiele menu */
	.top-bar__navigation .nav-lang {
		font-size: 1.1rem !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		gap: 4px !important;
	}

	.top-bar__navigation .li-btn {
		padding: 10px 0 !important;
	}

	.top-bar__navigation .li-btn a.custom-btn {
		display: block;
		text-align: center;
	}
}

/* ─────────────────────────────────────────────
   3. HERO / START SCREEN (index)
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
	.start-screen--style-1 {
		min-height: 480px !important;
	}

	.start-screen--style-1 .__title {
		font-size: 2.8rem !important;
	}

	.start-screen--style-1 .__text {
		font-size: 1.4rem !important;
	}

	.start-screen--style-1 .custom-btn {
		width: 100% !important;
		text-align: center !important;
		margin-bottom: 10px !important;
	}

	.start-screen--style-1 [class*="btn-wrp"] {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
}

@media (max-width: 575px) {
	.start-screen--style-1 {
		min-height: 360px !important;
	}

	.start-screen--style-1 .__title {
		font-size: 2.2rem !important;
	}
}

/* Hero contactpagina */
@media (max-width: 767px) {
	#hero {
		min-height: 260px !important;
		background-position: center center !important;
	}

	#hero .__title,
	#hero .col-12 h1 {
		font-size: 2.4rem !important;
	}

	#hero p {
		font-size: 1.4rem !important;
	}
}

@media (max-width: 575px) {
	#hero {
		min-height: 200px !important;
	}

	#hero .__title,
	#hero .col-12 h1 {
		font-size: 2rem !important;
	}
}

/* ─────────────────────────────────────────────
   4. FEATURE / DIENSTEN KAARTEN (waarom-qps, services)
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
	.feature--style-1 .row > [class*="col"] {
		margin-bottom: 20px;
	}

	.feature--style-1 .__item {
		padding: 20px 16px 24px !important;
	}

	.feature--style-1 .__ico {
		width: 52px !important;
		height: 52px !important;
	}

	.feature--style-1 .__title {
		font-size: 1.6rem !important;
	}
}

/* ─────────────────────────────────────────────
   5. COUNTER SECTIE
   ───────────────────────────────────────────── */
/* counter-section.css regelt al xs/sm/md grids,
   hier extra tweaks voor xs */
@media (max-width: 575px) {
	.qps-counter-item {
		padding: 16px 8px 12px !important;
	}

	.qps-counter-badge {
		font-size: 0.9rem !important;
		padding: 2px 5px 3px !important;
	}
}

/* ─────────────────────────────────────────────
   6. TEAM CARDS (contacts)
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
	.qps-our-teams {
		padding: 40px 0 56px !important;
	}

	.qps-our-teams .qps-teams-title {
		font-size: 2rem !important;
	}

	.qps-team-cards {
		gap: 20px !important;
	}

	.qps-team-card {
		padding: 28px 20px !important;
		max-width: 100% !important;
	}

	.qps-team-photo-wrap {
		width: 140px !important;
		height: 140px !important;
	}

	.qps-team-card .qps-team-name {
		font-size: 1.6rem !important;
	}

	.qps-team-card .qps-team-icons a {
		width: 48px !important;
		height: 48px !important;
		font-size: 1.6rem !important;
	}
}

@media (max-width: 575px) {
	.qps-team-card {
		padding: 20px 14px !important;
	}

	.qps-team-photo-wrap {
		width: 110px !important;
		height: 110px !important;
	}
}

/* ─────────────────────────────────────────────
   7. CONTACT FORMULIER + KAART
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
	.section--contacts .map-container {
		min-height: 280px !important;
	}

	.section--contacts .map-container iframe {
		min-height: 280px !important;
	}

	.section--contacts .col-12.col-md-6 {
		padding-top: 32px !important;
		padding-bottom: 32px !important;
	}

	.section--contacts .contact-form .custom-btn {
		width: 100% !important;
	}
}

/* ─────────────────────────────────────────────
   8. OVER ONS / ABOUT – TIMELINE
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
	.timeline .__item {
		padding-left: 40px !important;
	}

	.timeline .__year {
		font-size: 1.6rem !important;
	}

	.timeline .__title {
		font-size: 1.5rem !important;
	}
}

/* ─────────────────────────────────────────────
   9. SERVICES PAGINA – tekst + afbeeldingen
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
	.post--style-3 .__img {
		margin-bottom: 20px !important;
	}

	.post--style-3 .__title {
		font-size: 1.8rem !important;
	}

	/* Zorg dat afbeeldingen naast tekst op mobiel onder tekst komen */
	.post--style-3 .row.align-items-center {
		flex-direction: column !important;
	}

	.post--style-3 .row.align-items-center.flex-row-reverse {
		flex-direction: column !important;
	}
}

/* ─────────────────────────────────────────────
   10. FOOTER
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
	#footer .row > [class*="col"] {
		margin-bottom: 24px !important;
	}

	#footer .footer__logo img {
		height: 36px !important;
	}

	#footer .footer__navigation ul {
		padding-left: 0 !important;
	}

	#footer .footer__navigation li {
		display: block !important;
		margin-bottom: 8px !important;
	}
}

@media (max-width: 575px) {
	#footer {
		text-align: center !important;
	}

	#footer .footer__navigation li {
		text-align: center !important;
	}

	#footer .social-list {
		justify-content: center !important;
	}
}

/* ─────────────────────────────────────────────
   11. SECTION HEADINGS GLOBAAL
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
	.section-heading .__title {
		font-size: 2rem !important;
	}

	.section-heading .__subtitle {
		font-size: 1.3rem !important;
	}
}

/* ─────────────────────────────────────────────
   12. KNOPPEN – touch-friendly grootte
   ───────────────────────────────────────────── */
@media (max-width: 575px) {
	.custom-btn {
		min-height: 44px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		font-size: 1.3rem !important;
	}
}

/* ─────────────────────────────────────────────
   13. AFBEELDINGEN in rijen – stapelen op mobiel
   ───────────────────────────────────────────── */
@media (max-width: 575px) {
	[class*="col-lg"],
	[class*="col-md"] {
		/* Bootstrap doet dit al, maar zeker stellen */
		width: 100%;
	}
}

/* ─────────────────────────────────────────────
   14. JARALLAX / PARALLAX – uitschakelen op mobiel
   (performance verbetering)
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
	.jarallax {
		background-attachment: scroll !important;
		background-position: center center !important;
	}
}