/* ==========================================================================
   HUTT ROSSUM — Woningaanbod (grid) + woning-detail (bovenop home.css)
   ========================================================================== */

/* ---------- Woningaanbod grid ---------- */
.aanbod-show{ background:var(--bg); padding:clamp(40px,5vw,72px) 0 clamp(80px,9vw,128px); }
.as-head{ display:flex; flex-wrap:wrap; gap:20px 32px; align-items:flex-end; justify-content:space-between; margin-bottom:clamp(24px,3vw,36px); }
.as-head h2{ font-size:clamp(28px,3vw,44px); }
.as-count{ font-size:13px; letter-spacing:.04em; color:var(--muted); }
.as-count b{ color:var(--display); font-weight:600; }

.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(28px,3.2vw,44px); }
.filters button{ font-family:inherit; font-size:13px; font-weight:500; color:var(--ink-soft);
  background:transparent; border:1px solid var(--line-strong); border-radius:999px; padding:10px 18px; cursor:pointer;
  min-height:44px; /* touch-target */
  transition:background .35s var(--ease-out), color .35s, border-color .35s; }
.filters button:hover{ border-color:var(--accent); color:var(--accent); }
.filters button.active{ background:var(--brown-deep); color:var(--paper); border-color:var(--brown-deep); }

.show-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,26px); }
.show-card{ position:relative; display:block; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:transform .55s var(--ease-expo), box-shadow .55s var(--ease-expo), border-color .4s; }
.show-card:hover{ transform:translateY(-6px); box-shadow:0 36px 70px -46px rgba(37,25,21,.55); border-color:var(--line-strong); }
.show-card.is-hidden{ display:none; }
.card-img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--brown-deep); }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-expo); }
.show-card:hover .card-img img{ transform:scale(1.06); }
.card-img .status{ position:absolute; top:14px; left:14px; z-index:2; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; padding:7px 12px; border-radius:999px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--paper); }
.status.beschikbaar{ background:rgba(93,106,61,.92); }
.status.optie{ background:rgba(202,151,42,.95); }
.status.verkocht{ background:rgba(158,53,45,.92); }
.status.niet_beschikbaar,
.status.fase2{ background:rgba(120,82,53,.92); }
.card-body{ padding:22px 24px 24px; }
.card-body .num{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.card-body h3{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:28px; color:var(--display); margin:8px 0 0; line-height:1.05; }
.card-body .specs{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); font-size:13px; color:var(--fg-soft); }
.card-body .specs b{ color:var(--display); font-weight:600; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; }
.card-foot .price{ font-family:var(--font-display); font-style:italic; font-size:24px; color:var(--display); }
.card-foot .more{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.card-foot .more .arrow{ width:16px; height:9px; position:relative; }
.card-foot .more .arrow::before{ content:""; position:absolute; inset:0; background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'><path d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.5'/></svg>") no-repeat center/contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'><path d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.5'/></svg>") no-repeat center/contain;
  transition:transform .4s var(--ease-out); }
.show-card:hover .card-foot .more .arrow::before{ transform:translateX(4px); }
.show-empty{ text-align:center; color:var(--muted); padding:60px 0; font-size:15px; display:none; }
/* Lege-staat binnen het grid (woningtype-pagina): volle breedte, niet in kolom 1 */
.show-grid > .show-empty{ grid-column:1/-1; }
@media(max-width:980px){ .show-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){
  .show-grid{ grid-template-columns:1fr; }
  .as-head{ flex-direction:column; align-items:center; text-align:center; gap:8px; }
  .filters{ justify-content:center; }
  .card-body{ text-align:center; }
  .card-body .specs{ justify-content:center; }
  .card-foot{ justify-content:center; gap:18px; }
}

/* ==========================================================================
   WONING-DETAIL
   ========================================================================== */
.dhero{ position:relative; min-height:clamp(420px,62vh,640px); display:flex; align-items:flex-end; overflow:hidden; background:var(--brown-darker); color:var(--paper); }
.dhero .bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.dhero .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,13,9,.5) 0%, rgba(20,13,9,.16) 30%, rgba(20,13,9,.6) 66%, rgba(20,13,9,.96) 100%); }
.dhero .content{ position:relative; z-index:2; width:100%; padding-top:clamp(130px,18vh,200px); padding-bottom:clamp(40px,5vw,72px); text-align:center; display:flex; flex-direction:column; align-items:center; }
.dhero .dkavel{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--on-deep-soft); margin-bottom:16px; }

.dhero h1{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(40px,6vw,96px); line-height:.96; letter-spacing:-.022em; color:var(--paper); margin:0; max-width:16ch; text-shadow:0 30px 80px rgba(10,6,4,.4); }
.dhero .lede{ margin:clamp(16px,2vw,24px) 0 0; max-width:48ch; color:#efe1c9; font-size:clamp(16px,1.2vw,18px); line-height:1.62; }

.dhero-strip{ background:var(--brown-deep); color:var(--paper); }
/* Kolommen = aantal cellen (3 zonder perceel, 4 met): nooit een lege kolom */
.dhero-strip .wrap{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
.dhero-strip .cell{ padding:24px clamp(14px,1.6vw,28px); border-right:1px solid rgba(236,225,204,.14); }
.dhero-strip .cell:last-child{ border-right:0; }
.dhero-strip .l{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#b09a78; font-weight:700; margin-bottom:10px; }
.dhero-strip .v{ font-family:var(--font-display); font-style:italic; font-size:clamp(24px,2.4vw,34px); color:var(--paper); line-height:1; }
@media(min-width:641px) and (max-width:820px){
  .dhero-strip .wrap{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); }
  .dhero-strip .cell:nth-child(3n){ border-right:0; }
  /* alleen bij 4 cellen (2 rijen) een scheidingslijn onder de eerste rij */
  .dhero-strip .wrap:has(.cell:nth-child(4)) .cell:nth-child(-n+3){ border-bottom:1px solid rgba(236,225,204,.14); }
}

.kdetail-info{ background:var(--bg); }
.kdetail-info .ed-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,110px); align-items:center; padding:var(--space-section) 0; }
.kdetail-info .ed-col-text h2{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(30px,3.4vw,48px); color:var(--display); margin:0 0 22px; }
.kdetail-info .body{ display:grid; gap:1em; }
.kdetail-info .body p{ color:var(--fg-soft); font-size:16.5px; line-height:1.66; max-width:48ch; margin:0; }
@media(max-width:900px){ .kdetail-info .ed-row{ grid-template-columns:1fr; gap:34px; padding:var(--space-block) 0; } }

.dsec{ background:var(--bg-warm); padding:var(--space-section) 0; }
.dsec h2{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(30px,3.4vw,52px); color:var(--display); margin:0 0 clamp(24px,3vw,40px); }
.kcollage{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; grid-auto-flow:dense; gap:clamp(12px,1.4vw,18px); }
.kcollage .kc{ border-radius:var(--r-lg); overflow:hidden; background:var(--brown-deep); }
.kcollage .kc .pic{ width:100%; height:100%; background-size:cover; background-position:center; transition:transform 1.2s var(--ease-expo); }
.kcollage .kc:hover .pic{ transform:scale(1.05); }
.kcollage .kc-wide{ grid-column:span 2; }
.kcollage .kc-tall{ grid-row:span 2; }
@media(max-width:760px){ .kcollage{ grid-template-columns:1fr 1fr; grid-auto-rows:160px; } .kcollage .kc-tall{ grid-row:span 1; } }

/* ==========================================================================
   WONING-DETAIL — kenmerken, prijskaart, plattegrond (ontbrekende stijlen)
   ========================================================================== */
.kdetail-info .ed-row{ grid-template-columns:1.5fr 1fr; align-items:start; gap:clamp(36px,5vw,80px); }
.kcard{ position:sticky; top:96px; background:var(--bg-soft); border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:30px 30px 28px; display:flex; flex-direction:column; box-shadow:0 40px 80px -56px rgba(37,25,21,.5); }
.kc-status{ display:inline-flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--green); }
.kc-status .ds{ width:9px; height:9px; border-radius:50%; background:currentColor; }
/* Statuskleur volgt de echte status (zelfde tinten als de grid-badges) */
.kc-status.st-optie{ color:#ca972a; }
.kc-status.st-verkocht{ color:#9e352d; }
.kc-status.st-niet_beschikbaar, .kc-status.st-fase2{ color:var(--accent); }
.kc-price{ font-family:var(--font-display); font-weight:700; font-size:clamp(34px,4vw,52px); color:var(--display); line-height:1; margin:14px 0 4px; }
.kc-vanaf{ font-size:13px; color:var(--muted); }
.kc-list{ list-style:none; margin:22px 0 24px; padding:22px 0 0; border-top:1px solid var(--line); display:grid; gap:12px; }
.kc-list li{ display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:14px; color:var(--fg-soft); }
.kc-list li b{ color:var(--display); font-weight:600; }
.kcard .btn{ width:100%; justify-content:center; }
.kc-note{ margin-top:14px; font-size:12px; color:var(--muted); text-align:center; }
@media(max-width:900px){ .kdetail-info .ed-row{ grid-template-columns:1fr; } .kcard{ position:static; } }

.kfeatures{ background:var(--bg-warm); padding:var(--space-section) 0; }
.kfeatures h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.2vw,46px); color:var(--display); margin:0 0 clamp(32px,4vw,52px); }
.kfeat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,28px); }
.kfeat .ic{ width:52px; height:52px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; color:var(--accent); margin-bottom:20px; }
.kfeat .ic svg{ width:24px; height:24px; }
.kfeat h3{ font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--display); margin:0 0 10px; }
.kfeat p{ font-size:14.5px; color:var(--fg-soft); line-height:1.6; margin:0; }
@media(max-width:860px){ .kfeat-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .kfeat-grid{ grid-template-columns:1fr; } }

.kplan{ background:var(--bg); padding:var(--space-section) 0; }
.kplan-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.kplan-text h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.4vw,48px); color:var(--display); margin:0 0 18px; }
.kplan-text p{ color:var(--fg-soft); font-size:16px; line-height:1.66; max-width:42ch; margin:0 0 22px; }
.kplan-frame{ position:relative; aspect-ratio:4/3; background:var(--bg-soft); border:1px solid var(--line); display:grid; place-items:center; }
/* Op telefoons de interactieve plattegrond meer hoogte geven */
@media(max-width:640px){ .kplan-frame:has(.kplan-embed){ aspect-ratio:3/4; } }
.kplan-frame .ph{ display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--muted); }
.kplan-frame .ph svg{ width:46px; height:46px; }
.kplan-frame .ph span{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
@media(max-width:780px){ .kplan-grid{ grid-template-columns:1fr; gap:28px; } .kplan-frame{ order:-1; } }

/* ==========================================================================
   WONING-DETAIL — telefoon: alles gecentreerd
   ========================================================================== */
@media(max-width:640px){
  .dhero-strip .wrap{ grid-auto-flow:row; grid-template-columns:1fr 1fr; }
  .dhero-strip .cell{ text-align:center; border-right:0; border-bottom:0; }
  .dhero-strip .cell:nth-child(odd):not(:last-child){ border-right:1px solid rgba(236,225,204,.14); }
  /* scheidingslijn onder de eerste rij zodra er een tweede rij is */
  .dhero-strip .wrap:has(.cell:nth-child(3)) .cell:nth-child(-n+2){ border-bottom:1px solid rgba(236,225,204,.14); }
  /* laatste oneven cel over de volle breedte: geen half-lege rij */
  .dhero-strip .cell:last-child:nth-child(odd){ grid-column:1/-1; }
  .kdetail-info .ed-col-text{ text-align:center; }
  .kdetail-info .body p{ margin-left:auto; margin-right:auto; }
  .kcard{ align-items:center; text-align:center; }
  .kc-list li{ justify-content:center; gap:10px; }
  .dsec h2, .kfeatures h2, .kplan-text h2{ text-align:center; }
  .kfeat{ text-align:center; }
  .kfeat .ic{ margin-left:auto; margin-right:auto; }
  .kplan-text{ text-align:center; }
  .kplan-text p{ margin-left:auto; margin-right:auto; }
}

/* Interactieve plattegrond (Floorplanner-embed): vult het frame exact */
.kplan-embed{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }


/* ===== Woningdetail: leesbaarheid en lightbox (juli 2026) ===== */
/* Eerste alinea als intro-lede; prijskaart loopt mee bij lange teksten. */
.kdetail-info .ed-row{ align-items:start; }
.kdetail-info .kcard{ position:sticky; top:130px; }
.kdetail-info .body p.lead{ font-size:clamp(18px,1.4vw,21px); line-height:1.6; color:var(--display); }

/* Over Hutt-sectie op de detailpagina */
.khutt{ background:var(--bg-soft); }
.khutt .wover-text .btn{ margin-top:10px; }

/* Galerij: klikbaar met vergroot-cursor */
#hrGalerij a.kc{ display:block; cursor:zoom-in; }

/* Lightbox */
.hr-lightbox{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; background:rgba(20,13,9,.92); }
.hr-lightbox.open{ display:flex; }
.hr-lightbox .lb-img{ max-width:min(92vw,1400px); max-height:86vh; max-height:86svh; object-fit:contain; border-radius:10px; box-shadow:0 40px 120px rgba(0,0,0,.5); }
.hr-lightbox button{ position:absolute; background:rgba(243,234,216,.12); color:#f3ead8; border:1px solid rgba(243,234,216,.35); border-radius:999px; width:52px; height:52px; font-size:22px; line-height:1; cursor:pointer; transition:background .3s; display:flex; align-items:center; justify-content:center; }
.hr-lightbox button:hover{ background:rgba(243,234,216,.28); }
.hr-lightbox .lb-close{ top:calc(22px + env(safe-area-inset-top,0px)); right:calc(22px + env(safe-area-inset-right,0px)); font-size:30px; }
.hr-lightbox .lb-prev{ left:calc(22px + env(safe-area-inset-left,0px)); top:50%; transform:translateY(-50%); }
.hr-lightbox .lb-next{ right:calc(22px + env(safe-area-inset-right,0px)); top:50%; transform:translateY(-50%); }
@media(max-width:760px){
  .kdetail-info .kcard{ position:static; }
  .hr-lightbox .lb-prev{ left:calc(10px + env(safe-area-inset-left,0px)); } .hr-lightbox .lb-next{ right:calc(10px + env(safe-area-inset-right,0px)); }
  .hr-lightbox .lb-img{ max-width:96vw; }
}

/* ===== Bewegingsreductie ===== */
@media (prefers-reduced-motion: reduce){
  .show-card, .card-img img, .kcollage .kc .pic, .card-foot .more .arrow::before{ transition:none; }
  .show-card:hover{ transform:none; }
  .show-card:hover .card-img img{ transform:none; }
  .kcollage .kc:hover .pic{ transform:none; }
}