/* Mobiele opmaak (tot 640px).
   Laadt als laatste stylesheet via webcontrols/shared/_MobielCss.cshtml; de bestaande css blijft ongewijzigd.
   Sommige views zetten hun eigen <link> nog in de body (na deze), daarom begint elke regel met "html":
   net iets zwaarder, zodat deze regels ook dan winnen. Uitzetten voor één pagina: ?mobiel=uit. */

@media (max-width: 640px) {

	/* 1. Lange samenstellingen (arbeidsongeschiktheidsverzekering) liepen van het scherm af: lang="nl-nl"
	      staat op de html, dus de browser kan Nederlands afbreken. Alleen woorden vanaf 12 tekens. */
	html :is(h1, h2, h3, h4, h5, p, li, dd, dt, td, th, legend, label, blockquote, figcaption, summary) {
		overflow-wrap: break-word;
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 12 5 5;
	}

	/* 1b. Koppen: op een telefoon was de H1 van de producthomepages 48px (3em, regelhoogte 40pt) en de
	       subkop 30px; kennisbank en over-ons hadden H2's van 29px, artikelkoppen regelhoogte 1,6. */
	html section.top header h1 {
		font-size: clamp(1.75rem, 8.5vw, 2.25rem);
		line-height: 1.15;
	}

	html section.top header h2 {
		font-size: 1.25rem;
		line-height: 1.3;
	}

	html main article :is(h1, h2, h3) {
		line-height: 1.25;
	}

	html section.kennisbank h1 {
		font-size: 1.75rem;
	}

	html section.kennisbank h2,
	html .mission-content h2 {
		font-size: 1.4rem;
		line-height: 1.25;
	}

	html section.kennisbank p {
		font-size: 1.1rem;
		line-height: 1.6;
	}

	/* 1c. Footer: logo, "Bel ons" en "Volg ons" stonden als drie smalle kolommen (elk 33%) naast elkaar. */
	html section.contactsocialblok .contactblok {
		flex-direction: column;
		gap: 1rem;
	}

		html section.contactsocialblok .contactblok .blok {
			flex: 0 0 auto;
			width: 100%;
		}

			html section.contactsocialblok .contactblok .logo-blok img {
				max-width: 180px;
			}

		html section.contactsocialblok div.socialWrap span {
			display: block;
			margin: 0;
		}

	/* 2. Kruimelpad: de laatste kruimel (volledige artikeltitel) stond op één regel en duwde de pagina breed.
	      Nu op een eigen regel, afgekapt met puntjes. */
	html nav.kruimelpad ol li:last-child {
		min-width: 0;
		max-width: 100%;
	}

		html nav.kruimelpad ol li:last-child > span {
			display: block;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

	/* 3. Tabellen in artikel- en landingstekst: horizontaal scrollen binnen de tabel, niet de hele pagina. */
	html :is(.lp-tekst__kolom, article) table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* 4. Aanvraagstraten: vier geneste marges (section.form, .container, .formWrap, .qWrap) lieten de tekst
	      maar ruim de helft van het scherm. Nu één smalle marge per laag. */
	html section.form {
		padding: 0.5rem 0;
	}

		html section.form > .container {
			padding-left: 0.5rem;
			padding-right: 0.5rem;
		}

	html .formWrap {
		padding: 1rem 0.75rem;
	}

		html .formWrap > .qWrap:not(header) {
			padding-left: 0;
			padding-right: 0;
		}

	html header.qWrap {
		padding: 0.75rem;
		margin-bottom: 1.25rem;
	}

		html header.qWrap p {
			font-size: 1.0625rem;
			line-height: 1.55;
		}

	html div.form-row {
		width: 100%;
	}

		/* Rijen met 3 of 4 velden (voorletters/tussenvoegsel/achternaam, postcode/huisnummer/toevoeging)
		   waren kolommen van 68px; labels liepen over elkaar. Nu twee per regel, brede velden op een eigen regel.
		   Een fieldset krimpt standaard niet onder zijn label (min-inline-size: min-content), vandaar min-width. */
		html div.form-row:is(.cols-3, .cols-4) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		html div.form-row > fieldset {
			min-width: 0;
			padding-left: 0;
			padding-right: 0;
		}

		html div.form-row > .col-span-2,
		html div.form-row > .col-span-3 {
			grid-column: 1 / -1;
		}

		/* Een rij met een keuzelijst (bedrag + herkomst bij de kapitalen): de select heeft globaal
		   min-width 250px en stak in een halve kolom buiten de kaart; het lange label naast een kort
		   label zette de velden scheef. Op een telefoon krijgt elk veld dan de volle breedte. */
		/* Zwaarder dan de cols-3/cols-4-regel hierboven: met meerdere kapitalen maakt het script er een
		   cols-3-rij van (extra kolom voor de prullenbak), en dan moet deze regel nog steeds winnen. */
		html div.form-row.form-row:has(select) {
			grid-template-columns: minmax(0, 1fr) auto;
			column-gap: 0.5rem;
		}

			html div.form-row.form-row:has(select) > * {
				grid-column: 1 / -1;
			}

		/* Kapitaal met prullenbak: bedrag over de volle breedte, daaronder herkomst met de prullenbak ernaast. */
		html div.form-row.form-row:has(.kapitaal-delete) > fieldset:has(select) {
			grid-column: 1;
		}

		html div.form-row.form-row:has(select) > .kapitaal-delete {
			grid-column: 2;
			grid-row: 2;
			align-self: end;
			justify-content: center;
			height: 45px;
			margin-top: 0;
			margin-bottom: 0.5rem;
		}

		html div.form-row:has(.kapitaal-delete) + div.form-row:has(.kapitaal-delete) {
			border-top: 1px solid var(--gray-medium, #dde3ea);
			padding-top: 0.75rem;
		}

			html div.form-row:has(select) select {
				width: 100%;
			}

	html .formWrap select {
		min-width: 0;
		max-width: 100%;
	}

	/* "+ Kapitaal toevoegen" was 84px breed en brak over twee regels. */
	html .formWrap .btn-add {
		width: auto;
		white-space: nowrap;
	}

	html .formWrap h2.subTitle {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

	/* Terug en Verder naast elkaar binnen de kaart; Verder vult de rest van de regel. */
	html .buttonWrap:not(.product):not(.offerte) {
		gap: 0.75rem;
		align-items: center;
	}

		html .buttonWrap:not(.product):not(.offerte) .prevButton {
			padding: 0.7rem 0.75rem 0.7rem 2.5rem;
			flex: 0 0 auto;
		}

		html .buttonWrap:not(.product):not(.offerte) .nextButton {
			width: auto;
			flex: 1 1 auto;
			padding: 0.75rem 1rem;
		}

	/* 5. Vergelijking: onder 800px stapelde de pagina al, maar de resultaten hielden width: 70%, en de
	      productkaart bleef drie kolommen (logo, uitleg, bedrag) waardoor het bedrag werd afgeknipt. */
	html section.vergelijking {
		padding: 0.5rem 0;
	}

		html section.vergelijking > .container {
			padding-left: 0.5rem;
			padding-right: 0.5rem;
		}

	/* Resultaten eerst: het invoerblok komt onder de producten, de terugknop blijft bovenaan.
	   display: contents maakt terugknop en invoerblok losse flexitems van de container. */
	html section.vergelijking div.inputData {
		display: contents;
	}

		html section.vergelijking div.inputData a.back {
			order: 0;
		}

	html section.vergelijking div.resultBody {
		order: 1;
		width: 100%;
	}

	html section.vergelijking div.inputData div.data {
		order: 2;
	}

	html div.resultBody div.resultHeader {
		height: auto;
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
		margin-bottom: 0.75rem;
	}

		html div.resultBody div.resultHeader h5 {
			font-size: 1.5rem;
		}

		html div.resultBody div.resultHeader span.bttnSave {
			width: auto;
			font-size: 1rem;
		}

	/* Productkaart: logo en uitleg naast elkaar, bedrag en knop over de volle breedte eronder. */
	html div.resultBody div.resultRow .body {
		grid-template-columns: 72px minmax(0, 1fr);
		grid-template-areas:
			"logo center"
			"cta cta";
		gap: 0.75rem;
	}

		html div.resultBody div.resultRow .body .section.logo {
			grid-area: logo;
		}

			html div.resultBody div.resultRow .body .section.logo img {
				width: 100%;
			}

		html div.resultBody div.resultRow .body .section.center {
			grid-area: center;
			min-width: 0;
		}

		html div.resultBody div.resultRow .body .section.cta {
			grid-area: cta;
			border-top: 1px solid var(--gray-medium);
			padding-top: 0.75rem;
		}

			html div.resultBody div.resultRow .body .section.cta .prodbttn {
				width: 100%;
			}

	/* Tabs onder "meer informatie": elk tabje erfde width: 200px, vijf naast elkaar liepen van het scherm.
	   Nu zo breed als de tekst en doorlopend op een tweede regel. */
	html div.resultBody div.resultRow div.detailsWrap .tabsWrap {
		flex-wrap: wrap;
		height: auto;
		padding: 0;
		border-bottom: 0;
	}

		html div.resultBody div.resultRow div.detailsWrap .tabsWrap span {
			width: auto;
			height: auto;
			padding: 0.4rem 0.75rem;
			border-bottom: 1px solid #CCC;
			border-radius: 5px;
		}

	html div.resultBody div.resultRow div.detailsWrap table {
		font-size: 1rem;
	}

	/* 6. Product-, offerte- en afsluitstappen */

	/* <data> staat globaal op nowrap (bedragen), maar in de productgegevens staan ook hele zinnen
	   ("Bij overlijden van de 1e verzekerde ..."): die maakten de pagina 442px breed. */
	html :is(.product, .scenario-list) dd data {
		white-space: normal;
	}

	/* Het stappenoverzicht (3 of 4 stappen) bleef ook op een telefoon 3 of 4 kolommen van 78px. */
	html :is(.gw-3steps, .gw-4steps) {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Knoppen onder het product: blok was 60% breed en rechts uitgelijnd; nu volle breedte, offertelink eronder. */
	html .buttonWrap.product {
		width: 100%;
		align-items: stretch;
		gap: 0.75rem;
	}

		html .buttonWrap.product .nextButton {
			width: 100%;
		}

	html .bttnOfferte {
		flex-direction: column;
		justify-content: center;
		gap: 0.5rem;
	}

	/* 6b. Generieke resultaatpagina (jaarruimte, hypotheek oversluiten, ...): MwCore.css zet de kaart op
	       65% en het vervolgblok op 35% naast elkaar. Op een telefoon werd de kaart 203px, het bedrag
	       (56px) brak in stukken ("€ / 39.70 / 5") en de knop "Direct pensioen opbouwen" werd 41px breed. */
	html .resultWrap {
		flex-direction: column;
		gap: 1rem;
	}

		html .resultWrap :is(.resultaat, .nextstep) {
			width: 100%;
		}

		html .resultWrap .resultaat {
			padding: 1.25rem;
		}

			html .resultWrap .resultaat h1 {
				font-size: clamp(2.25rem, 11vw, 3rem);
				line-height: 1.1;
			}

				html .resultWrap .resultaat h1 em {
					font-size: 1.5rem;
				}

			html .resultWrap .resultaat .buttonWrap {
				align-items: stretch;
			}

				html .resultWrap .resultaat .buttonWrap a {
					width: 100%;
					text-align: center;
				}

	/* Tabellen op de resultaatpagina's (energielabels bij de maximale hypotheek e.a.): de MwCore-regel die
	   onder 600px elke tabel in losse blokken hakt, werkt alleen met data-label op de cellen. Zonder die
	   labels verloor je de kolomkoppen en stonden vier losse bedragen onder elkaar. Hier weer een tabel;
	   .tabelWrap scrolt al horizontaal als hij toch te breed is. */
	html :is(.result, #resultaat-uitleg) table:not(:has([data-label])) {
		display: table;
		width: 100%;
	}

		html :is(.result, #resultaat-uitleg) table:not(:has([data-label])) thead {
			display: table-header-group;
		}

		html :is(.result, #resultaat-uitleg) table:not(:has([data-label])) tbody {
			display: table-row-group;
		}

		html :is(.result, #resultaat-uitleg) table:not(:has([data-label])) tr {
			display: table-row;
			margin: 0;
		}

		html :is(.result, #resultaat-uitleg) table:not(:has([data-label])) :is(td, th) {
			display: table-cell;
			width: auto;
			font-size: 13px;
			padding: 8px 4px;
		}

		/* Bedragen niet laten breken ("€" los boven "362.758,-"); de eerste kolom (label) mag wel. */
		html :is(.result, #resultaat-uitleg) table:not(:has([data-label])) td:not(:first-child) {
			white-space: nowrap;
		}

			html :is(.result, #resultaat-uitleg) table:not(:has([data-label])) td::before {
				content: none;
			}

	/* Topbalk: Terug links, opslaan/mailen rechts (stond onder elkaar, Terug als brede knop met de tekst in het midden) */
	html .result .buttonWrap.topBar {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

		html .result .buttonWrap.topBar .prevButton {
			width: auto;
			padding: 0.7rem 0.75rem 0.7rem 2.5rem;
		}

	/* 7. Resultaatpagina's beleggen (OAKK): MwCore.css maakt onder 600px van élke tabel losse blokken
	      (bedoeld voor zijn eigen tabellen). Hier valt daardoor de scenariotabel uit elkaar en verliest de
	      rendemententabel zijn kolomkoppen. Binnen .oakkResultaat weer gewone tabellen. */
	html .oakkResultaat table {
		display: table;
		width: 100%;
	}

	html .oakkResultaat thead {
		display: table-header-group;
	}

	html .oakkResultaat tbody {
		display: table-row-group;
	}

	html .oakkResultaat tr {
		display: table-row;
		margin: 0;
	}

	html .oakkResultaat :is(td, th) {
		display: table-cell;
		width: auto;
	}

		html .oakkResultaat td::before {
			content: none;
		}

	/* "Wat OAKK heeft behaald": zes kolommen (jaar + vijf profielen) duwden de kolom naar 401px.
	   De kolom mag krimpen; de tabel scrollt zo nodig binnen zijn eigen blok. */
	html .oakkResultaat .okTweeDerde {
		grid-template-columns: minmax(0, 1fr);
	}

		html .oakkResultaat .okTweeDerde > * {
			min-width: 0;
		}

	html .oakkResultaat .okBehaald {
		overflow-x: auto;
	}

		html .oakkResultaat .okBehaald :is(td, th) {
			font-size: 13px;
			padding: 8px 3px;
		}

	/* Scenario's (goed, verwacht, slecht weer): drie kolommen passen niet op een telefoon.
	   Elke rij wordt een kaart: naam links, bedrag per maand rechts met het jaarbedrag eronder. */
	html .oakkResultaat .okScenarioTabel,
	html .oakkResultaat .okScenarioTabel tbody {
		display: block;
		margin: 0;
	}

	html .oakkResultaat .okScenarioTabel tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"naam bedrag"
			"naam jaar";
		align-items: center;
		column-gap: 12px;
		padding: 12px 16px;
		margin-bottom: 10px;
		border-radius: 12px;
		border: 2px solid transparent;
		background: #f3f6f9;
	}

		html .oakkResultaat .okScenarioTabel tr:first-child {
			background: #f3f9f0;
		}

		html .oakkResultaat .okScenarioTabel tr:nth-child(2) {
			background: var(--ok-achter);
			border-color: var(--ok-blauw);
		}

		html .oakkResultaat .okScenarioTabel tr td,
		html .oakkResultaat .okScenarioTabel tr:nth-child(n) td:nth-child(n) {
			display: block;
			padding: 0;
			border: 0;
			border-radius: 0;
			background: none;
			width: auto;
			min-width: 0;
		}

		html .oakkResultaat .okScenarioTabel tr td:first-child {
			grid-area: naam;
			white-space: normal;
		}

		html .oakkResultaat .okScenarioTabel tr td:nth-child(2) {
			grid-area: bedrag;
			text-align: right;
		}

		html .oakkResultaat .okScenarioTabel tr td:last-child {
			grid-area: jaar;
			text-align: right;
			white-space: nowrap;
		}

	/* Offertepagina: .formWrap.offerte (32px), section.card (24px) en de knoppen (16px) stapelden weer
	   hun eigen marges; de documenten stonden in een kolom van 230px. */
	html .formWrap.offerte {
		padding: 1rem 0.75rem;
	}

		html .formWrap.offerte section.card {
			padding: 1rem 0.75rem;
		}

		html .formWrap.offerte .buttonWrap.offerte {
			padding-left: 0;
			padding-right: 0;
		}
}