/* Blog — redesign 2026-10. blog.php laadt dit bestand zelf, na style.css (die zet .blog_container a op blauw !important).
   Palet: zwart/wit/grijs, Playfair Display koppen, Open Sans tekst (fonts.css).
   De wrapper heeft ook de oude klasse blog_page: style.css geeft die de afstand onder de winkelkop.
   .blog_page.bl-page (twee klassen) wint daarom van de oude breedte en padding. */

.blog_page.bl-page { max-width: 1160px; margin-left: auto; margin-right: auto; padding: 24px 24px 96px; display: flex; flex-direction: column; gap: 44px; color: #1a1a1a; }
.bl-page a { color: inherit; }
.bl-page a:hover { opacity: .92; }
.bl-page img { max-width: 100%; }

.bl-head { display: flex; flex-direction: column; gap: 20px; }
.bl-h1 { margin: 0; font: 700 44px/1.1 'Playfair Display', Georgia, serif; }
.bl-h2 { margin: 0; font: 700 30px/1.25 'Playfair Display', Georgia, serif; }

/* Chips */
.bl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: #f1f1f1; color: #1a1a1a !important; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none !important; }
.bl-chip:hover { background: #e2e2e2; opacity: 1 !important; }
.bl-chip.is-active { background: #111; color: #fff !important; }

/* Gedeelde kaartonderdelen */
.bl-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; background: #f6f6f6; }
.bl-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; color: #5c5c5c; }
.bl-meta { margin: 0; font-size: 14px; line-height: 1.4; color: #5c5c5c; }

/* Uitgelicht */
.bl-featured > a { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 48px; text-decoration: none; }
.bl-featured .bl-img { flex: 7 1 520px; min-width: 0; }
.bl-featured-text { flex: 5 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bl-featured-title { margin: 0; font: 700 36px/1.15 'Playfair Display', Georgia, serif; text-wrap: pretty; }
.bl-excerpt { margin: 0; font-size: 17px; line-height: 1.65; }
.bl-more { font-size: 15px; font-weight: 700; color: #5c5c5c; text-decoration: underline; text-underline-offset: 4px; }

.bl-rule { margin: 0; border: 0; border-top: 1px solid #e2e2e2; }

/* Raster */
.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 48px 32px; }
.bl-card > a { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.bl-card-title { margin: 0; font: 700 22px/1.25 'Playfair Display', Georgia, serif; text-wrap: pretty; }
.bl-card > a:hover .bl-card-title { text-decoration: underline; text-underline-offset: 3px; }

/* Los bericht */
.blog_page.bl-page:has(.bl-article) { gap: 56px; padding-top: 8px; }
.bl-article { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.bl-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; line-height: 1.4; color: #5c5c5c; }
.bl-crumbs a { color: #5c5c5c; }
.bl-article-head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.bl-article-title { margin: 0; font: 700 46px/1.12 'Playfair Display', Georgia, serif; text-wrap: pretty; }
.bl-tags { padding-top: 16px; margin-top: 8px; border-top: 1px solid #e2e2e2; }
.bl-related { display: flex; flex-direction: column; gap: 24px; padding-top: 48px; border-top: 1px solid #e2e2e2; }
.bl-related .bl-grid { gap: 40px 32px; }

/* Berichttekst (HTML uit de database) — overschrijft de oude .blog_container-regels */
.bl-body { color: #1a1a1a; font-size: 18px; line-height: 1.75; }
.bl-body > p:first-child { font-size: 21px; line-height: 1.6; }
.bl-body p { margin: 0 0 22px; }
.bl-body h2 { margin: 46px 0 22px; font: 700 30px/1.25 'Playfair Display', Georgia, serif; color: #1a1a1a; }
.bl-body h3 { margin: 30px 0 22px; font: 700 24px/1.3 'Playfair Display', Georgia, serif; color: #1a1a1a; }
.bl-body h4, .bl-body h5 { margin: 30px 0 12px; font-size: 18px; font-weight: 700; }
.bl-body a, .blog_container.bl-body a { color: #1a1a1a !important; text-decoration: underline; text-underline-offset: 3px; }
.bl-body img { border-radius: 2px; margin: 12px 0; height: auto; }
.bl-body figure { margin: 12px 0 34px; }
.bl-body figcaption { font-size: 14px; color: #5c5c5c; padding-top: 10px; }
.bl-body blockquote { margin: 8px 0 30px; padding: 4px 0 4px 24px; border-left: 3px solid #1a1a1a; font: 400 24px/1.45 'Playfair Display', Georgia, serif; }
.bl-body blockquote p { margin: 0; }
.bl-body ul, .bl-body ol { margin: 0 0 22px; padding-left: 20px; }

/* Optioneel in berichttekst: productblok en receptkader (zie README) */
.bl-body .bp-product { display: flex; flex-direction: column; margin: 8px 0 30px; border: 1px solid #e2e2e2; border-radius: 2px; overflow: hidden; text-decoration: none !important; }
.bl-body .bp-product-img { display: flex; justify-content: center; padding: 28px 24px; background: #f6f6f6; }
.bl-body .bp-product-img img { margin: 0; width: auto; max-width: min(100%, 620px); height: auto; } /* niet oprekken: kleine productfoto's blijven scherp */
.bl-body .bp-product-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 20px; line-height: 1.4; }
.bl-body .bp-product-name { display: block; font-size: 17px; font-weight: 700; }
.bl-body .bp-product-sub { display: block; font-size: 15px; color: #5c5c5c; }
.bl-body .bp-product-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; background: #111; color: #fff; font-size: 15px; font-weight: 700; border-radius: 2px; }
.bl-body .bp-recipe { margin: 16px 0 30px; background: #f6f6f6; border-radius: 2px; overflow: hidden; }
.bl-body .bp-recipe > img { margin: 0; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.bl-body .bp-recipe-body { padding: 32px; }
.bl-body .bp-recipe-body > :first-child { margin-top: 0; }
.bl-body .bp-recipe-body > :last-child { margin-bottom: 0; }
.bl-body .bp-recipe-body h3 { margin-top: 22px; }
.bl-body .bp-recipe ul { columns: 2 240px; font-size: 16px; line-height: 1.9; }

@media (max-width: 728px) {
    .blog_page.bl-page { padding: 8px 16px 72px; gap: 32px; }
    .bl-h1 { font-size: 34px; }
    .bl-featured-title { font-size: 28px; }
    .bl-article-title { font-size: 32px; }
    .bl-body { font-size: 17px; }
    .bl-body > p:first-child { font-size: 19px; }
    .bl-body h2, .bl-h2 { font-size: 25px; }
    .bl-body .bp-recipe-body { padding: 22px; }
}