/* Blog: overview cards, post header (byline + "kort antwoord"), price rows, author box. Loaded after read.css. */

/* category tag */
.bl-tag { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .9rem; padding: .3rem .8rem; border-radius: 999px; background: #e4f3dc; color: #1d4f22; font: 700 .8125rem/1 var(--head); letter-spacing: .02em; text-transform: uppercase; }
.bl-tag--asbest, .bl-card--asbest .bl-tag { background: #fde9dc; color: #8a3a10; }
.bl-tag--elek, .bl-card--elek .bl-tag { background: #fff3c4; color: #6b5200; }
.bl-tag--verkoop, .bl-card--verkoop .bl-tag { background: #e3eefc; color: #1d3f75; }

/* post header */
.bl-hero h1 { max-width: 20ch; }
.bl-hero .rd-hero__grid { align-items: start; }
.bl-by { display: flex; align-items: center; gap: .8rem; margin-top: 1.5rem; font-size: .9375rem; line-height: 1.45; color: var(--ink-3); }
.bl-by b { color: var(--ink); }
.bl-av { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--green-deep); color: #d9ff9e; font: 700 1.125rem/1 var(--head); }

.bl-short { align-self: start; padding: 1.6rem 1.6rem 1.2rem; border-radius: 28px; background-color: #eef8e8; background-image: linear-gradient(rgba(60, 154, 46, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 154, 46, .07) 1px, transparent 1px); background-size: 36px 36px; box-shadow: 0 0 0 1px #d6ebcb; }
.bl-short h2 { margin: 0 0 .6rem; font: 700 .8125rem/1 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--green-deep); }
.bl-short ul { margin: 0; padding: 0; list-style: none; }
.bl-short li { display: flex; align-items: center; gap: .85rem; padding: .8rem 0; border-bottom: 1px dashed #c7dfbb; font: 500 1.0625rem/1.35 var(--head); color: var(--ink); }
.bl-short li:last-child { border-bottom: 0; }
.bl-short b { font-weight: 700; color: #1d4f22; }
.bl-short .ic-card__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--green); box-shadow: 0 6px 16px -10px rgba(19, 32, 26, .4); }
.bl-short .ic-card__ic svg { width: 20px; height: 20px; }

/* price rows (no table): one row per housing type */
.rd-qa .bl-price { margin: 1.5rem 0 .75rem; padding: .25rem 1.5rem; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 2px #dde3da; list-style: none; }
.rd-qa .bl-price li { display: flex; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px dashed #dde3da; }
.rd-qa .bl-price li:last-child { border-bottom: 0; }
.rd-qa .bl-price .house { flex: none; width: 46px; height: 33px; color: var(--green); }
.bl-price__name { flex: 1; font: 600 1.0625rem/1.3 var(--head); color: var(--ink); }
.bl-price__val { font: 800 1.375rem/1 var(--head); color: var(--green-deep); font-variant-numeric: tabular-nums; }

.rd-qa .prose ol { padding-left: 1.25rem; }
.rd-qa .prose ol li { margin: .6rem 0; padding-left: .25rem; }

/* author box */
.bl-author { display: flex; gap: 1rem; align-items: flex-start; margin-top: 3.5rem; padding: 1.4rem 1.5rem; border-radius: 24px; background: var(--bg-soft, #f6f8f4); box-shadow: 0 0 0 1px var(--line); }
.bl-author b { font: 700 1.0625rem/1.3 var(--head); color: var(--ink); }
.bl-author p { margin: .3rem 0 0; color: var(--ink-2); }
.bl-author a { color: var(--green-deep); font-weight: 600; }

/* cards (overview + "lees ook") */
.bl-list, .bl-more { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(3rem, 2rem + 3vw, 5rem); }
.bl-more { background: var(--bg-soft, #f6f8f4); }
.bl-more h2 { margin: 0 0 1.5rem; }
.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.bl-card a { display: flex; flex-direction: column; height: 100%; padding: 1.6rem 1.5rem 1.4rem; border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 2px #dde3da, 0 18px 30px -26px rgba(19, 32, 26, .45); color: inherit; text-decoration: none; transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s; }
.bl-card a:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 2px #54b435, 0 26px 40px -26px rgba(19, 32, 26, .5); }
.bl-card .bl-tag { align-self: flex-start; }
.bl-card h3 { margin: 0 0 .6rem; font: 700 1.25rem/1.3 var(--head); color: var(--ink); text-wrap: balance; }
.bl-card p { flex: 1; margin: 0 0 1.2rem; color: var(--ink-2); font-size: .975rem; line-height: 1.6; }
.bl-card__meta { display: flex; align-items: center; gap: .4rem; font: 600 .875rem/1 var(--head); color: var(--ink-3); }
.bl-card__meta svg { width: 18px; height: 18px; margin-left: auto; color: var(--green); transition: transform .3s; }
.bl-card a:hover .bl-card__meta svg { transform: translateX(4px); }

.bl-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.bl-filter button { padding: .55rem 1.1rem; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-strong, #cfd8cb); color: var(--ink); font: 600 .9375rem/1 var(--head); cursor: pointer; }
.bl-filter button[aria-pressed="true"] { background: var(--green-deep); box-shadow: none; color: #fff; }
.bl-filter button:focus-visible { outline: 3px solid #9fdc82; outline-offset: 2px; }
.bl-hero--index h1 { max-width: 18ch; }
.bl-hero--index .lead { max-width: 60ch; }

@media (max-width: 1000px) {
  .bl-grid { grid-template-columns: 1fr 1fr; }
  .bl-short { margin-top: 1.5rem; }
}
@media (max-width: 640px) {
  .bl-grid { grid-template-columns: 1fr; }
  .rd-qa .bl-price { padding: .25rem 1rem; }
  .bl-price__val { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-card a, .bl-card__meta svg { transition: none; }
}

.rd-qa .bl-price li::before, .rd-qa .bl-price li::after { content: none !important; display: none !important; }
.rd-qa .bl-price li { margin: 0 !important; padding-left: 0 !important; }
.page-blog .rd-qa h2#faq { margin-top: 4rem; }