/* HERO */
.hero{height:520px;position:relative;display:flex;align-items:center;justify-content:center;padding:0 var(--gutter);}
/* Dark overlay so the white h1/p stay readable regardless of how light the
   photo is. Content now spans most of the hero and is centered (not
   left-anchored), so this covers the full width evenly instead of fading
   left-to-right like a narrow left-aligned block would need. */
.hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.45);}
.hero-content{position:relative;z-index:1;max-width:75%;margin:0 auto;text-align:center;}
.hero h1{color:white;font-size:var(--fs-hero-home);line-height:1.1;}
.hero p{color:white;font-size:17px;margin-top:18px;opacity:.9;}

/* INTRO */
.intro{padding:80px var(--gutter) 48px var(--gutter);text-align:center;}
.intro h2{font-size:var(--fs-h2);}
.intro p{color:var(--ink-muted);font-size:18px;max-width:640px;margin:16px auto 0 auto;line-height:1.6;}

/* FEATURED PRODUCTS (homepage showcase) — named distinctly from producten.css's
   .product-grid (the overzicht/category listing grid) so the two never collide;
   both stylesheets load on every page, and same-name classes with equal
   specificity would otherwise let whichever loads last silently win. */
.featured-products{padding:0 var(--gutter) 96px var(--gutter);}
.featured-products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.product-card{overflow:hidden;border:1px solid var(--line);}
.product-photo{height:180px;position:relative;}
.product-photo .pill{position:absolute;top:14px;left:14px;background:white;color:var(--ink);}
.product-pill-label-circle{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;}
.product-body{padding:18px;}
.product-name{font-weight:700;font-size:15px;}
.product-desc{color:var(--ink-muted);font-size:13px;margin-top:4px;}

/* FEATURE BLOCKS (highlights) — padding lives on the outer -section wrapper;
   .feature-blocks itself (the grid) gets a plain .wrap in the template so it
   caps/centers to the same 1280px column as .site-nav. */
.feature-blocks-section{padding:0 var(--gutter) 96px var(--gutter);}
.feature-blocks{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;}
.feature-main{height:420px;border-radius:24px;position:relative;display:flex;align-items:flex-end;padding:36px;}
.feature-side{display:flex;flex-direction:column;gap:24px;}
.feature-small{height:198px;border-radius:24px;position:relative;display:flex;align-items:flex-end;padding:28px;}
/* Same bottom-up dark gradient as .ruimte-tile::after, for the same reason:
   white h3/p sit directly on a photo whose brightness varies per tile. */
.feature-main::after, .feature-small::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(0deg, rgba(0,0,0,.6), transparent 65%);}
.feature-main > div, .feature-small > div{position:relative;z-index:1;}
/* .btn-white defaults to petrol-colored text (site.css) — requested black
   text specifically for the buttons on these overlaid banner tiles. */
.feature-blocks .btn-white{color:var(--ink);}
.feature-blocks h3{color:white;}
.feature-main h3{font-size:26px;}
.feature-small h3{font-size:20px;}
.feature-blocks p{color:white;opacity:.9;margin-top:8px;}
.feature-small p{font-size:14px;margin-top:4px;}

/* VOORDELEN */
.voordelen{background:#f1efe9;padding:64px var(--gutter);}
.voordelen h2{font-size:var(--fs-h2);}
.voordelen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:36px;}
.voordeel{display:flex;gap:16px;}
.voordeel-icon{width:48px;height:48px;min-width:48px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--petrol);font-size:20px;}
.voordeel h3{font-size:17px;}
.voordeel p{color:var(--ink-muted);font-size:14px;line-height:1.6;margin-top:6px;}

/* LABELS — same outer-padding/inner-wrap split as feature-blocks above. */
.labels-section-outer{padding:96px var(--gutter);}
.labels-section{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.labels-photo{height:400px;border-radius:20px;position:relative;}
.labels-badges{position:absolute;top:24px;left:24px;display:flex;flex-direction:column;gap:10px;}
.label-letter{width:20px;height:20px;min-width:20px;border-radius:50%;color:white;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;}
.criteria-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.criteria-item{display:flex;align-items:center;gap:10px;}
.criteria-nr{width:26px;height:26px;min-width:26px;border-radius:50%;background:#6f8f7a;color:white;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
.criteria-item span:last-child{font-size:14px;font-weight:500;}

/* VOICES — same outer-padding/inner-wrap split as feature-blocks above. */
.voices-outer{padding:0 var(--gutter) 96px var(--gutter);}
.voices{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;}
.voices-photo{height:440px;border-radius:20px;}
.voices h2{font-size:var(--fs-h2);}
.voices h3{font-size:18px;margin-top:28px;}
.waarom-lijst{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
.waarom-item{display:flex;align-items:center;gap:10px;}
.waarom-item span{font-size:14px;font-weight:500;}

/* REVIEWS — a horizontal drag/swipe-scrollable row (native scroll-snap,
   no slider library — this project doesn't use jQuery/Slick like the live
   site does) with two arrow buttons that scroll by one card. Cards keep a
   fixed width and never wrap, so the row can overflow/scroll regardless of
   how many reviews exist. */
.reviews{background:#f1efe9;padding:80px var(--gutter);}
.reviews h2{font-size:var(--fs-h2);text-align:center;}
.reviews-slider{position:relative;margin-top:44px;}
.reviews-grid{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:4px;scrollbar-width:none;}
.reviews-grid::-webkit-scrollbar{display:none;}
.review-card{flex:0 0 340px;scroll-snap-align:start;padding:28px;border:1px solid var(--line);}
.reviews-arrow{position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:16px;color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,.08);}
.reviews-arrow:hover{color:var(--petrol);}
.reviews-arrow--prev{left:-20px;}
.reviews-arrow--next{right:-20px;}
.review-name{font-weight:700;font-size:16px;}
.stars{display:flex;gap:3px;margin-top:8px;}
.review-text{font-size:14px;line-height:1.6;margin-top:14px;color:var(--ink);}
.review-product{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line);}
.review-product-foto{background-color:var(--bg);background-size:cover;background-position:center;}
.review-product span{font-weight:700;font-size:14px;}

/* RUIMTES */
.ruimtes{padding:96px var(--gutter);}
.ruimtes h2{font-size:var(--fs-h2);text-align:center;margin-bottom:40px;}
.ruimtes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.ruimte-tile{height:260px;border-radius:16px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:22px;text-decoration:none;color:inherit;}
.ruimte-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,.55), transparent 60%);}
.ruimte-tile-bg{border-radius:16px;}
.ruimte-tile > div{position:relative;z-index:1;}
.ruimte-tile .kicker{color:white;opacity:.85;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
.ruimte-tile h3{color:white;font-size:19px;margin-top:4px;}

/* MERKEN — had no top padding at all, which happened to look fine after
   whatever the homepage's own preceding section's bottom padding gave it,
   but broke down on over-ons where a different section (different bottom
   padding) precedes this same shared partial (flagged 2026-09-20). Real,
   symmetric padding here instead, matching .ruimtes's own rhythm, so this
   looks right regardless of what comes before it on any page. */
.merken{padding:96px var(--gutter);}
.merken h2{font-size:22px;text-align:center;color:var(--ink-muted);margin-bottom:32px;font-weight:700;}

@media (max-width: 900px){
  .featured-products-grid{grid-template-columns:repeat(2,1fr);}
  .feature-blocks{grid-template-columns:1fr;}
  .voordelen-grid{grid-template-columns:1fr;}
  .labels-section{grid-template-columns:1fr;}
  .labels-section-outer{padding:56px var(--gutter);}
  .voices{grid-template-columns:1fr;}
  .review-card{flex:0 0 82vw;}
  .reviews-arrow{display:none;}
  .ruimtes-grid{grid-template-columns:repeat(2,1fr);}
}