/*
 * Witgoed-Gids 3.2.9 — professionele mobiele normalisatie
 *
 * Doel:
 * - dezelfde visuele dichtheid op iPhone, Samsung/Android en andere telefoons;
 * - geen toestel-specifieke hacks;
 * - voorkom dat vw-gebaseerde koppen op bredere Android-telefoons onnodig groot worden;
 * - behoud desktop volledig ongewijzigd;
 * - behoud formulieren op >=16px om mobiele focuszoom te voorkomen.
 */

html,
body {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@media (max-width: 780px) {
	:root {
		/* Compacte, begrensde mobiele schaal. */
		--wg-font-size-hero: clamp(30px, 7.8vw, 32px);
		--wg-font-size-section: clamp(23px, 6.2vw, 25px);
		--wg-font-size-card-title: 19px;
		--wg-font-size-intro: 15.5px;
		--wg-line-height-body: 1.66;

		/* Centrale redactionele schaal uit 04-design-system.css. */
		--wg-type-page-title-size: clamp(30px, 7.8vw, 32px);
		--wg-type-page-title-line-height: 1.12;
		--wg-type-intro-size: 15.5px;
		--wg-type-intro-line-height: 1.64;
		--wg-type-section-title-size: clamp(23px, 6.1vw, 25px);
		--wg-type-subtitle-size: 19px;
		--wg-type-copy-size: 15px;
		--wg-type-copy-line-height: 1.68;
		--wg-type-paragraph-gap: 17px;
		--wg-type-section-title-gap: 12px;

		/* Geen groter raster op een 412/430px telefoon alleen omdat hij breder is. */
		--wg-page-gutter-mobile: 16px;
		--wg-section-space: 52px;
	}

	body:not(.wg-choice-standalone) {
		font-size: 15.5px;
		line-height: 1.66;
	}

	/*
	 * iOS, Samsung Internet en Chrome kunnen inputs anders behandelen.
	 * 16px houdt de bediening stabiel en voorkomt focuszoom waar de browser dat toepast.
	 */
	body:not(.wg-choice-standalone) input,
	body:not(.wg-choice-standalone) textarea,
	body:not(.wg-choice-standalone) select {
		font-size: 16px;
	}

	/* Lange titels mogen wrappen zonder een hele mobiele layout breder te trekken. */
	body:not(.wg-choice-standalone) h1,
	body:not(.wg-choice-standalone) h2,
	body:not(.wg-choice-standalone) h3,
	body:not(.wg-choice-standalone) .wg-apparaat-title {
		overflow-wrap: break-word;
		word-break: normal;
	}

	/* =============================================================
	 * Hoofdtitels — één consistente mobiele schaal.
	 * De oude 9–11vw-regels konden op 412–430px telefoons 36–48px worden.
	 * ============================================================= */
	.wg-page__title,
	.wg-hub-hero h1,
	.wg-guides-hub .wg-hub-hero h1,
	.wg-apparaten-hero h1,
	.wg-apparaten-page .wg-apparaten-hero h1,
	body.post-type-archive-apparaat .wg-hub-hero h1,
	body.tax-apparaat_type .wg-hub-hero h1,
	body.tax-apparaat_merk .wg-apparaten-hero h1,
	.wg-knowledge-hub .wg-knowledge-hub__hero h1,
	.wg-problem-page__title,
	.wg-problem-brand-hub__hero h1,
	body.single-kennis .wg-knowledge-hero h1,
	body.single-kennis .wg-knowledge-title,
	body.single-probleem .wg-problem__title,
	body.single-probleem .wg-problem-hero h1,
	body.single-koopgids .wg-koopgids-page .wg-hub-hero h1,
	body.single-apparaat .wg-apparaat-title {
		font-size: clamp(30px, 7.8vw, 32px) !important;
		line-height: 1.12 !important;
		letter-spacing: -0.032em;
	}

	/* Homepage mag iets meer landing-pagegevoel houden, maar niet 40–50px op mobiel. */
	.wg-home-hero__title {
		font-size: clamp(32px, 8.4vw, 35px) !important;
		line-height: 1.1;
		letter-spacing: -0.035em;
	}

	/* =============================================================
	 * Sectiekoppen — rustiger op kleine schermen.
	 * ============================================================= */
	.wg-section-heading__title,
	.wg-guides-hub__section-heading h2,
	.wg-guides-hub__structure h2,
	.wg-apparaten-section-header h2,
	.wg-knowledge-hub .wg-knowledge-hub__section > header h2,
	body.single-kennis .wg-knowledge-text-block > h2,
	body.single-kennis .wg-knowledge-content h2,
	body.single-kennis .wg-knowledge-faq h2,
	body.single-kennis .wg-knowledge-related header h2,
	body.single-kennis .wg-knowledge-choice-help h2,
	body.single-probleem .wg-problem-block__heading h2,
	body.single-probleem .wg-problem-steps__heading h2,
	body.single-probleem .wg-problem-parts__heading h2,
	body.single-probleem .wg-problem-faq__heading h2,
	body.single-probleem .wg-problem-choice-help h2,
	body.single-apparaat .wg-apparaat-section h2 {
		font-size: clamp(23px, 6.1vw, 25px) !important;
		line-height: 1.18 !important;
		letter-spacing: -0.025em;
	}

	/* =============================================================
	 * Hero's / hubs — dezelfde hoeveelheid witruimte op 360–430px.
	 * ============================================================= */
	.wg-home-hero {
		padding-top: 48px !important;
		padding-bottom: 58px !important;
	}

	.wg-knowledge-hub .wg-knowledge-hub__hero,
	.wg-problem-page__hero,
	.wg-guides-hub .wg-hub-hero,
	body.post-type-archive-apparaat .wg-hub-hero,
	.wg-apparaten-page .wg-apparaten-hero {
		min-height: 0 !important;
	}

	.wg-knowledge-hub .wg-knowledge-hub__hero {
		padding: 22px 0 28px !important;
	}

	.wg-problem-page__hero {
		padding: 22px 0 34px !important;
	}

	.wg-guides-hub .wg-hub-hero,
	body.post-type-archive-apparaat .wg-hub-hero,
	.wg-apparaten-page .wg-apparaten-hero {
		padding-bottom: 34px !important;
	}

	/* Hero-intro's blijven leesbaar maar voelen niet als desktoptekst op telefoon. */
	.wg-home-hero__text,
	.wg-knowledge-hub .wg-knowledge-hub__hero p,
	.wg-problem-page__intro,
	.wg-guides-hub .wg-hub-hero__content > p,
	.wg-apparaten-intro,
	body.single-kennis .wg-knowledge-hero__intro,
	body.single-probleem .wg-problem__intro,
	body.single-apparaat .wg-apparaat-intro {
		font-size: 15.5px !important;
		line-height: 1.64 !important;
	}

	/* =============================================================
	 * Overzichtskaarten — iets minder 'tabletachtig' op telefoons.
	 * Geen inhoud wordt verborgen; alleen dichtheid wordt genormaliseerd.
	 * ============================================================= */
	.wg-apparaat-type-card__link,
	.wg-brand-card__link {
		padding: 18px !important;
	}

	.wg-knowledge-hub .wg-knowledge-hub-card {
		padding: 16px 16px 14px !important;
	}

	.wg-knowledge-hub .wg-knowledge-hub-card h3 {
		font-size: 17px !important;
		line-height: 1.28;
	}

	.wg-problem-card__content {
		padding: 18px !important;
	}

	.wg-problem-card__title {
		font-size: 18px !important;
		line-height: 1.28;
	}

	.wg-guides-device-card__link {
		padding: 18px !important;
	}

	.wg-guides-device-card h2 {
		font-size: 19px !important;
		line-height: 1.25;
	}

	/* =============================================================
	 * Verticale sectieruimte — professioneel mobiel ritme.
	 * ============================================================= */
	.wg-problem-overview,
	.wg-problem-process,
	.wg-problem-next,
	.wg-problem-list {
		padding-block: 48px !important;
	}

	.wg-problem-featured {
		padding-top: 46px !important;
	}

	.wg-apparaten-page .wg-apparaten-section {
		padding-top: 46px !important;
		padding-bottom: 58px !important;
	}

	.wg-knowledge-hub .wg-knowledge-hub__body {
		padding-top: 26px !important;
		padding-bottom: 54px !important;
	}
}

/* Extra smalle telefoons krijgen alleen iets minder horizontale ruimte.
 * Geen andere typografie: zo blijft 360px en 390px visueel hetzelfde systeem. */
@media (max-width: 370px) {
	:root {
		--wg-page-gutter-mobile: 15px;
	}

	.wg-home-hero__title {
		font-size: 32px !important;
	}

	.wg-page__title,
	.wg-hub-hero h1,
	.wg-apparaten-hero h1,
	.wg-knowledge-hub .wg-knowledge-hub__hero h1,
	.wg-problem-page__title,
	body.single-kennis .wg-knowledge-hero h1,
	body.single-probleem .wg-problem__title,
	body.single-koopgids .wg-koopgids-page .wg-hub-hero h1,
	body.single-apparaat .wg-apparaat-title {
		font-size: 29px !important;
	}
}

/* =============================================================
 * 3.2.10 — compacte mobiele koopgids-productlijst
 *
 * Alleen het korte selectieoverzicht bovenaan koopgidsen.
 * Minder verticale hoogte zonder informatie te verwijderen:
 * - productkop compacter;
 * - badge rustiger;
 * - specs dichter bij elkaar;
 * - prijs iets prominenter;
 * - CTA blijft minimaal 44px als goed touch-target.
 * ============================================================= */
@media (max-width: 780px) {
	body.single-koopgids .wg-koopgids__overview {
		margin-bottom: 22px;
		border-radius: 10px;
		box-shadow: none;
	}

	body.single-koopgids .wg-koopgids__overview-item.is-featured {
		background: #fffdf6;
	}

	body.single-koopgids .wg-koopgids__overview-item.is-featured::before {
		width: 2px;
		background: #e8b91e;
	}

	body.single-koopgids .wg-koopgids__overview--specs-0 .wg-koopgids__overview-row,
	body.single-koopgids .wg-koopgids__overview--specs-1 .wg-koopgids__overview-row,
	body.single-koopgids .wg-koopgids__overview--specs-2 .wg-koopgids__overview-row,
	body.single-koopgids .wg-koopgids__overview--specs-3 .wg-koopgids__overview-row {
		padding: 9px 11px 11px;
	}

	body.single-koopgids .wg-koopgids__overview-product {
		grid-template-columns: 58px minmax(0, 1fr);
		gap: 9px;
		padding: 0 0 9px;
	}

	body.single-koopgids .wg-koopgids__overview-image {
		width: 58px;
		height: 68px;
		flex-basis: 58px;
	}

	body.single-koopgids .wg-koopgids__overview-product-image,
	body.single-koopgids .wg-koopgids__overview-image img {
		width: 58px !important;
		max-width: 58px !important;
		height: 68px !important;
		max-height: 68px !important;
		object-fit: contain !important;
	}

	body.single-koopgids .wg-koopgids__overview-content {
		gap: 4px;
	}

	body.single-koopgids .wg-koopgids__overview-label {
		min-height: 20px;
		padding: 4px 7px;
		border-radius: 4px;
		font-size: 8px;
		line-height: 1.1;
		letter-spacing: .015em;
	}

	body.single-koopgids .wg-koopgids__overview-name {
		font-size: 12.75px;
		font-weight: 750;
		line-height: 1.28;
	}

	body.single-koopgids .wg-koopgids__overview-spec,
	body.single-koopgids .wg-koopgids__overview-price {
		gap: 3px;
		padding: 7px 4px 2px;
		font-size: 12.5px;
		line-height: 1.3;
	}

	body.single-koopgids .wg-koopgids__overview-spec::before,
	body.single-koopgids .wg-koopgids__overview-price::before {
		font-size: 8px;
		line-height: 1.1;
		letter-spacing: .03em;
	}

	body.single-koopgids .wg-koopgids__overview-price {
		color: #081f38;
		font-size: 13.5px;
		font-weight: 850;
	}

	body.single-koopgids .wg-koopgids__overview-spec--energy {
		padding-top: 6px;
	}

	body.single-koopgids .wg-energy-cell__label {
		min-width: 58px;
		min-height: 26px;
		padding: 4px 9px;
		font-size: 12px;
	}

	body.single-koopgids .wg-koopgids__overview-offer {
		min-height: 44px;
		margin-top: 6px;
		padding: 9px 14px;
		border-radius: 6px;
		box-shadow: none;
		font-size: 13px;
	}
}

@media (max-width: 370px) {
	body.single-koopgids .wg-koopgids__overview-product {
		grid-template-columns: 54px minmax(0, 1fr);
		gap: 8px;
	}

	body.single-koopgids .wg-koopgids__overview-image {
		width: 54px;
		height: 64px;
		flex-basis: 54px;
	}

	body.single-koopgids .wg-koopgids__overview-product-image,
	body.single-koopgids .wg-koopgids__overview-image img {
		width: 54px !important;
		max-width: 54px !important;
		height: 64px !important;
		max-height: 64px !important;
	}
}