/* =========================================================
   JB IT SOLUTIONS — RESPONSIVE
   Algemene responsive correcties.
   Hero en afbeeldingsdeck staan bewust NIET in dit bestand.
   Die worden beheerd via 21-home-hero.css.
   ========================================================= */

/* =========================================================
   ALGEMENE LAYOUT
   ========================================================= */

@media (max-width: 1100px) {
	.jb-container {
		width: min(calc(100% - 2rem), var(--jb-container));
	}

	.jb-home-services__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.jb-services-section__header,
	.jb-final-cta__inner,
	.jb-home-contact__inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.jb-home-contact__actions,
	.jb-final-cta__inner .jb-button-group {
		width: 100%;
	}
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
	/* Algemene kolommen */
	.jb-two-column,
	.jb-page-two-column,
	.jb-contact-grid,
	.jb-home-heading,
	.jb-home-personal__grid,
	.jb-home-testimonial,
	.jb-home-assurance,
	.jb-services-hero__grid,
	.jb-services-overview__heading,
	.jb-single-service-hero__grid,
	.jb-single-service-content__grid,
	.jb-service-introduction__grid,
	.jb-service-faq__grid,
	.jb-why-section__grid,
	.jb-support-section__grid {
		grid-template-columns: 1fr;
	}

	/* Homepage */
	.jb-home-audiences__grid {
		grid-template-columns: 1fr;
	}

	.jb-home-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jb-home-personal__content {
		max-width: none;
	}

	.jb-home-contact__inner {
		align-items: flex-start;
		flex-direction: column;
	}

	/* Algemene kaarten */
	.jb-card-grid--three,
	.jb-value-grid,
	.jb-support-grid,
	.jb-topic-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Diensten */
	.jb-services-archive-grid {
		grid-template-columns: 1fr;
	}

	.jb-service-choice__grid {
		grid-template-columns: 1fr 1fr;
	}

	.jb-service-choice__intro {
		grid-column: 1 / -1;
		padding-right: 0;
	}

	.jb-service-sidebar {
		position: static;
	}

	.jb-service-next-step__inner,
	.jb-service-cta__inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.jb-service-work__grid,
	.jb-service-benefits__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jb-service-process__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Oude componenten die mogelijk nog elders worden gebruikt */
	.jb-audience-choice__grid,
	.jb-services-layout,
	.jb-service-small-grid,
	.jb-process-grid {
		grid-template-columns: 1fr;
	}

	.jb-academy-section__inner {
		grid-template-columns: auto 1fr;
	}

	.jb-academy-section__inner > .jb-button {
		grid-column: 1 / -1;
		width: fit-content;
	}
}

/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 700px) {
	.jb-container {
		width: min(calc(100% - 1.5rem), var(--jb-container));
	}

	/* Knoppen */
	.jb-button-group,
	.jb-home-contact__actions,
	.jb-home-hero__actions {
		width: 100%;
	}

	.jb-button-group .jb-button,
	.jb-home-contact__actions .jb-button,
	.jb-home-hero__actions .jb-button {
		width: 100%;
	}

	/* Homepage */
	.jb-home-services__grid {
		grid-template-columns: 1fr;
	}

	.jb-home-service-card {
		min-height: 270px;
	}

	.jb-home-audience-card {
		grid-template-columns: 1fr;
	}

	.jb-profile-placeholder__badge {
		right: 50%;
		bottom: 1rem;
		transform: translateX(50%);
		white-space: nowrap;
	}

	.jb-home-testimonial blockquote {
		padding: 2rem 1.5rem;
	}

	.jb-home-contact__inner {
		padding: 1.75rem;
	}

	/* Algemene pagina’s */
	.jb-card-grid--three,
	.jb-value-grid,
	.jb-support-grid,
	.jb-topic-grid {
		grid-template-columns: 1fr;
	}

	.jb-page-hero h1 {
		font-size: clamp(2.8rem, 13vw, 4.8rem);
	}

	/* Diensten */
	.jb-service-choice__grid,
	.jb-service-work__grid,
	.jb-service-benefits__grid,
	.jb-service-process__grid {
		grid-template-columns: 1fr;
	}

	.jb-service-choice__intro {
		grid-column: auto;
	}

	.jb-service-work-card {
		min-height: 170px;
	}

	.jb-service-section-heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.jb-service-archive-card,
	.jb-services-hero__panel,
	.jb-single-service-visual,
	.jb-service-sidebar,
	.jb-service-feature,
	.jb-service-small-card,
	.jb-process-card,
	.jb-support-option,
	.jb-route-card {
		padding: 1.4rem;
	}

	.jb-empty-state {
		padding: 2rem 1.5rem;
	}

	/* Oude componenten */
	.jb-route-card {
		grid-template-columns: auto 1fr;
		min-height: auto;
	}

	.jb-route-card__arrow {
		display: none;
	}

	.jb-service-feature {
		min-height: auto;
	}

	.jb-service-feature ul {
		flex-direction: column;
		align-items: flex-start;
	}

	.jb-academy-section__inner {
		grid-template-columns: 1fr;
		text-align: left;
	}

	.jb-academy-section__badge {
		width: 80px;
		height: 80px;
	}
}

/* =========================================================
   KLEINE MOBIELE SCHERMEN
   ========================================================= */

@media (max-width: 500px) {
	.jb-home-services,
	.jb-home-audiences,
	.jb-home-personal,
	.jb-home-trust,
	.jb-page-section,
	.jb-section {
		padding-block: 3rem;
	}

	.jb-home-contact {
		padding-block: 2rem;
	}

	.jb-profile-placeholder {
		width: min(100%, 310px);
	}

	.jb-home-assurance,
	.jb-contact-info,
	.jb-contact-form {
		padding: 1.4rem;
	}

	.jb-home-heading h2,
	.jb-home-personal__content h2,
	.jb-home-assurance h2,
	.jb-home-contact h2,
	.jb-page-two-column h2,
	.jb-page-section-heading h2 {
		font-size: clamp(2rem, 11vw, 3.4rem);
	}

	.jb-form-placeholder {
		min-height: 240px;
		padding: 1.25rem;
	}

	.jb-service-benefit-card,
	.jb-service-process__grid article {
		padding: 1.4rem;
	}
}