/* Blog listing + post detail — new templates (blog.php / blog-item.php),
   no live-site CSS to match pixel-for-pixel, so this follows the project's
   existing tokens/conventions (--card/--line/--ink-muted, .card, .btn,
   the .product-card shape) rather than inventing a new visual language. */

/* Team-member (blog author) page — medewerker.php. */
.medewerker-header{padding:64px var(--gutter) 40px;}
.medewerker-header-inner{display:flex;align-items:center;gap:24px;}
.medewerker-header-inner h1{font-size:var(--fs-h1);margin:0;}

.blog-grid-section{padding:56px var(--gutter) 80px;}
.blog-grid-section h2{font-size:var(--fs-h2);font-family:"Overpass",system-ui,sans-serif;margin-bottom:32px;max-width:700px;}
.blog-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:28px;}

.blog-card{display:block;overflow:hidden;border:1px solid var(--line);text-decoration:none;color:inherit;transition:box-shadow .15s ease;}
/* The card itself is one big <a>, so the site-wide a:hover{text-decoration:
   underline} rule (site.css) would otherwise underline the whole card's
   text on hover — only the "Lees verder" link should look clickable. */
.blog-card:hover{box-shadow:0 12px 28px rgba(0,0,0,.08);text-decoration:none;}
.blog-card-photo{height:200px;position:relative;}
.blog-card-body{padding:20px;}
.blog-card-meta{font-size:13px;color:var(--ink-muted);}
.blog-card-title{font-family:"Overpass",system-ui,sans-serif;font-weight:700;font-size:18px;margin-top:8px;line-height:1.3;}
.blog-card-excerpt{font-size:14px;color:var(--ink-muted);margin-top:10px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.blog-card-excerpt p{margin:0;}
.blog-card-link{font-size:14px;font-weight:700;color:var(--petrol);margin-top:14px;}
.blog-card:hover .blog-card-link{text-decoration:underline;}

/* Header photo with the title/meta/intro card overlapping its lower
   portion, matching the live site (requested 2026-09-20) — the photo sits
   in normal flow at full width/fixed height, the card is pulled up over
   it with a negative margin, and (since the card is narrower than the
   photo, not full-bleed) the image stays visible around it. */
.blog-post-header{position:relative;}
.blog-post-header-photo{width:100%;height:520px;background-size:cover;background-position:center;}
/* Card + sidebar as one grid so both start at the card's overlap point;
   the sidebar itself doesn't overlap the photo (nothing in the reference
   showed that), it just lines up with the card's top. */
.blog-post-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start;}
.blog-post-card{position:relative;margin-top:-220px;background:var(--card);border-radius:20px 20px 0 0;padding:40px 40px 48px 40px;box-shadow:0 24px 48px rgba(0,0,0,.08);}
/* Breadcrumb moved inside the card, directly above the H1 (requested
   2026-09-20) — the shared .breadcrumb class (producten.css) is built for
   full-bleed use against the plain page background (padding: 20px
   var(--gutter), meant to pair with an outer .wrap it doesn't have here),
   so it's overridden to sit flush with the card's own padding instead. */
.blog-post-card .breadcrumb{padding:0 0 16px 0;font-size:13px;}
.blog-post-card h1{font-size:var(--fs-h1);font-family:"Overpass",system-ui,sans-serif;margin:0;}
.blog-post-meta{display:flex;align-items:center;gap:12px;margin-top:20px;padding-bottom:20px;border-bottom:1px solid var(--line);}
.blog-author-naam{font-weight:700;font-size:14px;}
.blog-post-meta-sub{font-size:13px;color:var(--ink-muted);}
.blog-post-samenvatting{color:var(--ink-muted);font-size:16px;line-height:1.7;margin-top:20px;}
.blog-post-samenvatting p{margin:0;}

.blog-sidebar-col{position:sticky;top:24px;margin-top:32px;padding-bottom:32px;display:flex;flex-direction:column;gap:24px;}
.blog-sidebar{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;}
.blog-sidebar-title{font-weight:700;font-size:15px;margin-bottom:16px;}
.blog-sidebar-list{display:flex;flex-direction:column;gap:16px;}
.blog-sidebar-item{display:flex;gap:12px;text-decoration:none;color:inherit;}
.blog-sidebar-item:hover{text-decoration:none;}
.blog-sidebar-item:hover .blog-sidebar-item-title{text-decoration:underline;}
.blog-sidebar-item-photo{width:60px;height:60px;border-radius:10px;flex-shrink:0;position:relative;}
.blog-sidebar-item-title{font-size:14px;font-weight:700;line-height:1.3;}
.blog-sidebar-item-meta{font-size:12px;color:var(--ink-muted);margin-top:4px;}

/* Second sidebar widget, matching the live site's own "row-contact-
   specialist" widget below the related-posts tabs (requested 2026-09-20):
   full-bleed photo card with a dark overlay for text legibility, same
   treatment as .landing-hero elsewhere on the site. */
.blog-sidebar-cta{position:relative;display:block;border-radius:16px;overflow:hidden;background-size:cover;background-position:center;text-decoration:none;min-height:320px;}
.blog-sidebar-cta::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.55);}
.blog-sidebar-cta-inner{position:relative;padding:28px 24px;display:flex;flex-direction:column;height:100%;justify-content:flex-end;gap:14px;}
.blog-sidebar-cta h3{color:#fff;font-size:22px;font-family:"Overpass",system-ui,sans-serif;margin:0;line-height:1.25;}
.blog-sidebar-cta p{color:rgba(255,255,255,.9);font-size:14px;line-height:1.6;margin:0;}
/* Default .btn padding (16px 32px, site.css) wraps "Gratis geluidsmeting
   aanvragen" onto two lines in this narrower 320px sidebar column —
   tighter horizontal padding here only, not a global .btn change. */
.blog-sidebar-cta .btn-white{align-self:flex-start;padding-left:18px;padding-right:18px;white-space:nowrap;}

.blog-block{padding:24px 0;font-size:16px;line-height:1.75;color:var(--ink);}
.blog-block p{margin:0 0 16px;}
.blog-block p:last-child{margin-bottom:0;}
.blog-block a:not(.btn){color:var(--petrol);}
.blog-block h2{font-size:var(--fs-h3);font-family:"Overpass",system-ui,sans-serif;margin-bottom:16px;}
.blog-block-photo{width:100%;height:320px;border-radius:20px;}

.blog-block-lijst{display:flex;flex-direction:column;gap:20px;margin-top:20px;}
.blog-block-lijst-item{padding:20px;border:1px solid var(--line);border-radius:16px;}
.blog-block-lijst-label{font-weight:700;color:var(--petrol);margin-bottom:6px;}
.blog-block-lijst-item p{margin:0;}

/* Strong petrol treatment (flagged 2026-09-20 — the old subtle grey box
   blended into the white card and "viel helemaal weg"). btn-white (not
   btn-primary, which is petrol-on-transparent) so the button is visible
   against this same petrol background. */
.blog-block--cta{background:var(--petrol);color:#fefaf3;border-radius:20px;padding:32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.blog-cta-tekst{flex:1;min-width:220px;}
.blog-cta-tekst p{margin:0;}
.blog-cta-tekst strong{color:#fefaf3;}

@media (max-width: 900px){
  .blog-grid{grid-template-columns:repeat(2, 1fr);}
  .blog-post-header-photo{height:320px;}
  .blog-post-layout{grid-template-columns:1fr;}
  .blog-post-card{margin-top:-140px;padding:28px 24px 32px 24px;}
  .blog-sidebar-col{margin-top:0;position:static;}
}
@media (max-width: 600px){
  .blog-grid{grid-template-columns:1fr;}
  .blog-block-photo{height:220px;border-radius:12px;}
  .blog-post-header-photo{height:240px;}
  .blog-post-card{margin-top:-90px;border-radius:16px 16px 0 0;padding:22px 18px 28px 18px;}
  .blog-block--cta{flex-direction:column;align-items:flex-start;}
}