/* Blog (/blog/) en rekentools (/tools/). Laadt na btw.css en gebruikt de variabelen daaruit. */

/* ---------- Blog: kaartjes en overzicht ---------- */
.btw-blogcats { margin-top: 22px; }
.btw-blogtop { margin-bottom: 8px; }
.btw-blogcat { padding: 56px 0; border-top: 1px solid var(--lijn); }
.btw-blogcat .btw-sectiekop p { max-width: 64ch; margin: 8px 0 0; color: var(--stil); }
.btw-artikelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px var(--gap); }
.btw-artikelgrid--vier { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } /* homepage: 4 op een rij */
.btw-artikelgrid--vier .btw-artikelkaart__txt b { font-size: 21px; }
.btw-artikelkaart { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; }
.btw-artikelkaart__foto { display: block; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; background: var(--zacht); }
.btw-artikelkaart__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.btw-artikelkaart:hover img { transform: scale(1.04); }
.btw-artikelkaart__txt { display: flex; flex-direction: column; gap: 6px; }
.btw-artikelkaart__txt small { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--goud); }
.btw-artikelkaart__txt b { font: 400 23px/1.25 var(--serif); color: var(--inkt); }
.btw-artikelkaart:hover b { color: var(--goud); }
.btw-artikelkaart__txt > span { font-size: 15.5px; color: var(--stil); }
.btw-artikelkaart--groot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.btw-artikelkaart--groot .btw-artikelkaart__foto { aspect-ratio: 16 / 10; }
.btw-artikelkaart--groot .btw-artikelkaart__txt b { font-size: clamp(28px, 3vw, 40px); font-weight: 300; }
.btw-artikelkaart--groot .btw-artikelkaart__txt > span { font-size: 17px; }

/* ---------- Artikel ---------- */
.btw-artikel__meta { font-size: 14px; color: var(--stil); margin: -4px 0 18px; }
.btw-artikel .btw-blok a:not(.btw-link):not(.btw-btn) { color: var(--inkt); text-decoration: underline; text-decoration-color: var(--goud); text-underline-offset: 3px; }
.btw-artikel .btw-blok a:not(.btw-link):not(.btw-btn):hover { color: var(--goud); }
.btw-artikelserie { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: start; }
.btw-artikelserie__foto { display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; background: var(--zacht); }
.btw-artikelserie__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.btw-artikelserie__foto:hover img { transform: scale(1.03); }
.btw-artikelserie--tekst { grid-template-columns: minmax(0, 1fr); }
.btw-artikelserie__txt h2 { margin-top: 0; }
.btw-artikelserie .btw-chips { margin: 4px 0 18px; }
.btw-citaat { margin: 0; }
.btw-citaat p { font: italic 300 clamp(23px, 2.4vw, 29px)/1.4 var(--serif); color: var(--inkt); max-width: 34ch; padding-left: 22px; border-left: 3px solid var(--goud); margin: 0; }
.btw-toolblok { margin: 8px 0 34px; padding: 22px 24px; background: var(--zacht); border-radius: var(--r); display: grid; gap: 6px; justify-items: start; }
.btw-toolblok b { font: 400 22px/1.3 var(--serif); color: var(--inkt); }
.btw-toolblok p:not(.btw-kicker) { margin: 0 0 10px; font-size: 15.5px; }
.btw-toolblok .btw-kicker { margin-bottom: 2px !important; }

/* ---------- Rekentools: overzicht ---------- */
.btw-toolgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--gap); margin-bottom: 24px; }
.btw-toolkaart { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); text-decoration: none; color: inherit; transition: border-color .2s; }
.btw-toolkaart:hover { border-color: var(--goud); }
.btw-toolkaart b { font: 400 23px/1.25 var(--serif); color: var(--inkt); }
.btw-toolkaart > span:not(.btw-link) { font-size: 15px; color: var(--stil); flex: 1; }
.btw-toolkaart .btw-link { align-self: flex-start; margin-top: 6px; }
.btw-toolicoon { color: var(--goud); margin-bottom: 4px; }

/* ---------- Rekentools: formulier en uitkomst ---------- */
.btw-toolkop { padding-bottom: 28px; }
.btw-reken { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px; align-items: start; margin-bottom: 48px; }
.btw-reken__form { display: grid; gap: 18px; padding: 26px; background: var(--zacht); border-radius: var(--r); }
.btw-reken__groep { display: grid; gap: 14px; }
.btw-reken__groep[hidden], .btw-reken [hidden] { display: none; }
.btw-reken__sub { margin: 4px 0 -6px; font: 400 20px/1.3 var(--serif); color: var(--inkt); }
.btw-reken__sub small { font: 400 14px var(--sans); color: var(--stil); }
.btw-reken__hint { margin: -8px 0 0; font-size: 13.5px; color: var(--stil); }
.btw-veld { display: grid; gap: 6px; }
.btw-veld > label, .btw-veld__label, .btw-keuze legend { font-size: 14px; font-weight: 600; color: var(--inkt); }
.btw-veld small { font-size: 13.5px; color: var(--stil); }
.btw-veld__in { display: flex; align-items: stretch; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; }
.btw-veld__in:focus-within { border-color: var(--goud); box-shadow: 0 0 0 3px rgba(184, 137, 58, .18); }
.btw-veld__in input { flex: 1; min-width: 0; border: 0; padding: 12px 14px; font: 500 17px var(--sans); color: var(--inkt); background: transparent; outline: none; }
.btw-veld__in i { font-style: normal; display: flex; align-items: center; padding: 0 14px; font-size: 14px; color: var(--stil); background: var(--zacht); border-left: 1px solid var(--lijn); }
.btw-veld select { width: 100%; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--wit); font: 500 16px var(--sans); color: var(--inkt); }
.btw-veld select:focus { outline: none; border-color: var(--goud); box-shadow: 0 0 0 3px rgba(184, 137, 58, .18); }
.btw-veld--duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.btw-veld--duo > .btw-veld__label { grid-column: 1 / -1; margin-bottom: -6px; }
.btw-keuze { border: 0; margin: 0; padding: 0; min-width: 0; }
.btw-keuze legend { padding: 0; margin-bottom: 6px; }
.btw-keuze > div { display: flex; flex-wrap: wrap; gap: 6px; }
.btw-keuze label { position: relative; }
.btw-keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.btw-keuze span { display: inline-block; padding: 9px 15px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 99px; font-size: 14.5px; font-weight: 500; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.btw-keuze label:hover span { border-color: var(--goud); }
.btw-keuze input:checked + span { background: var(--inkt); border-color: var(--inkt); color: var(--wit); }
.btw-keuze input:focus-visible + span { box-shadow: 0 0 0 3px rgba(184, 137, 58, .35); }
.btw-vink { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--inkt); }
.btw-vink input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--inkt); flex: none; }
.btw-vink small { display: block; font-weight: 400; font-size: 13.5px; color: var(--stil); }
.btw-reken__snel { display: flex; flex-wrap: wrap; gap: 6px; margin: -10px 0 0; }
.btw-reken__snel button { padding: 6px 12px; border: 1px dashed var(--lijn); border-radius: 99px; background: var(--wit); font: 500 13.5px var(--sans); color: var(--inkt); cursor: pointer; }
.btw-reken__snel button:hover { border-color: var(--goud); color: var(--goud); }

.btw-reken__uitkomst { position: sticky; top: 108px; background: var(--wit); border: 1px solid var(--lijn); border-top: 3px solid var(--goud); border-radius: var(--r); padding: 24px; display: grid; gap: 18px; }
.btw-reken__leeg { margin: 0; color: var(--stil); }
.btw-reken__totaal small { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--goud); }
.btw-reken__totaal b { display: block; font: 300 clamp(34px, 3.6vw, 46px)/1.1 var(--serif); color: var(--inkt); margin: 4px 0; }
.btw-reken__totaal span { font-size: 15px; color: var(--stil); }
.btw-reken__tabel { width: 100%; border-collapse: collapse; font-size: 15px; }
.btw-reken__tabel th, .btw-reken__tabel td { padding: 10px 0; border-top: 1px solid var(--lijn); vertical-align: top; text-align: left; }
.btw-reken__tabel th { font-weight: 600; color: var(--inkt); padding-right: 12px; }
.btw-reken__tabel th small { display: block; font-weight: 400; font-size: 13px; color: var(--stil); }
.btw-reken__tabel td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.btw-reken__tabel td small { display: block; font-size: 13px; color: var(--stil); }
.btw-reken__tabel .is-som th, .btw-reken__tabel .is-som td { border-top: 2px solid var(--inkt); font-weight: 700; color: var(--inkt); }
.btw-reken__letop { margin: 0; padding: 14px 16px 14px 36px; background: #fbf6ec; border-radius: var(--r); font-size: 14.5px; }
.btw-reken__letop li + li { margin-top: 6px; }
.btw-reken__noot { margin: 0; font-size: 13.5px; color: var(--stil); }
.btw-reken__verder { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding-top: 4px; }
.btw-legplan { margin: 0; }
.btw-legplan svg { display: block; width: 100%; height: auto; max-height: 360px; border-radius: 3px; }
.btw-legplan figcaption { font-size: 13px; color: var(--stil); margin-top: 6px; }

@media (max-width: 1020px) {
	.btw-reken { grid-template-columns: minmax(0, 1fr); }
	.btw-reken__uitkomst { position: static; }
}
@media (max-width: 860px) {
	.btw-artikelkaart--groot { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.btw-artikelserie { grid-template-columns: minmax(0, 1fr); }
	.btw-artikelserie__foto { aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
	.btw-reken__form, .btw-reken__uitkomst { padding: 18px; }
	.btw-veld--duo { grid-template-columns: minmax(0, 1fr); }
	.btw-reken__tabel td { white-space: normal; }
}