/* sv-heritage.css - "Sinds 1981" (spec 6.4) with the self-drawing timeline and drifting seabirds (14 #10), plus the
   home-only layout of #prijzen (6.7) and #route (6.9), scoped .sv-page-home (they have no block file of their own).
   Prefix: sv-heritage; home-only rules: .sv-page-home .sv-home-... */

/* ---------- Sinds 1981 ---------- */
.sv-heritage{position:relative;overflow:hidden;background:var(--sv-sand-2);view-timeline-name:--sv-heritage}
.sv-heritage__birds{position:absolute;top:28px;right:-24px;width:min(520px,86%);height:auto;color:var(--sv-text);opacity:.06;pointer-events:none}
/* fix round 1: on phones the birds sat under the 13 px eyebrow (4.42 : 1 on the bird pixels); they now sit behind the
   large H2, which needs 3 : 1. Still 6 % ink as the spec asks. */
@media (max-width:599px){.sv-heritage__birds{top:96px}}
.sv-heritage__inner{position:relative}
.sv-heritage__head{gap:16px clamp(32px,5vw,64px)}
.sv-heritage__head .sv-eyebrow{margin-bottom:12px}
.sv-heritage__story{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem)}
@media (min-width:1024px){.sv-heritage__story{padding-top:34px}}

/* timeline: vertical on phones, horizontal from 1024 px; a 2 px lime-deep line + three dots
   (ol[class] resets padding, so these rules carry the section class too) */
.sv-heritage .sv-heritage__line{position:relative;display:grid;gap:28px;margin:48px 0;padding:0 0 0 36px;list-style:none}
.sv-heritage__line::before{content:"";position:absolute;left:7px;top:10px;bottom:-12px;width:2px;background:var(--sv-lime-deep);transform-origin:50% 0}
.sv-heritage__step{position:relative;display:grid;gap:4px}
.sv-heritage__step::before{content:"";position:absolute;left:-36px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--sv-lime-deep);box-shadow:0 0 0 4px var(--sv-sand-2)}
.sv-heritage__year{font:600 clamp(1.5rem,1.2rem + 1.2vw,2.125rem)/1.1 var(--sv-font-head);font-variation-settings:"opsz" 72;letter-spacing:-.01em;font-feature-settings:"lnum"}
.sv-heritage__what{color:var(--sv-muted)}
@media (min-width:1024px){
  .sv-heritage .sv-heritage__line{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:64px 0 56px;padding:40px 0 0}
  .sv-heritage__line::before{left:0;right:0;top:7px;bottom:auto;width:auto;height:2px;transform-origin:0 50%}
  .sv-heritage__step::before{left:0;top:-40px}
}
.sv-heritage__facts{margin-bottom:24px}
.sv-heritage__reviews{margin-left:-2px}

/* motion 14 #10: the line draws through the section, the dots pop in as it reaches them, the birds drift 40 px left.
   Only with scroll timelines + motion; otherwise (and with reduce motion) the full line and still birds. */
@supports (animation-timeline:view()){
  .sv-motion .sv-heritage__line::before{animation:sv-heritage-draw-y linear both;animation-timeline:--sv-heritage;animation-range:cover 22% cover 58%}
  .sv-motion .sv-heritage__step::before{animation:sv-heritage-pop linear both;animation-timeline:--sv-heritage;animation-range:cover 22% cover 27%}
  .sv-motion .sv-heritage__step:nth-child(2)::before{animation-range:cover 34% cover 39%}
  .sv-motion .sv-heritage__step:nth-child(3)::before{animation-range:cover 46% cover 51%}
  .sv-motion .sv-heritage__birds{animation:sv-heritage-drift linear both;animation-timeline:--sv-heritage;animation-range:cover 0% cover 100%}
  @media (min-width:1024px){
    .sv-motion .sv-heritage__line::before{animation-name:sv-heritage-draw-x}
    .sv-motion .sv-heritage__step:nth-child(2)::before{animation-range:cover 33% cover 38%}
    .sv-motion .sv-heritage__step:nth-child(3)::before{animation-range:cover 44% cover 49%}
  }
}
@keyframes sv-heritage-draw-y{from{transform:scaleY(0)}to{transform:none}}
@keyframes sv-heritage-draw-x{from{transform:scaleX(0)}to{transform:none}}
@keyframes sv-heritage-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes sv-heritage-drift{from{transform:translateX(0)}to{transform:translateX(-40px)}}

/* ---------- home only: Prijzen 2026 in één oogopslag (#prijzen) ---------- */
.sv-page-home .sv-home-prices .sv-section-head{margin-bottom:0}
.sv-page-home .sv-home-prices__table{min-width:0}
.sv-page-home .sv-home-prices__actions{margin-top:28px}

/* ---------- home only: Zo vind je ons (#route) ---------- */
.sv-page-home .sv-home-route .sv-section-head{margin-bottom:20px}
.sv-page-home .sv-home-route__address{display:grid;gap:16px;margin-bottom:clamp(32px,5vw,48px)}
.sv-page-home .sv-home-route__addr{display:flex;align-items:flex-start;gap:10px;font:500 clamp(1.125rem,1.02rem + .45vw,1.3125rem)/1.45 var(--sv-font-text)}
.sv-page-home .sv-home-route__addr .sv-icon{margin-top:2px;color:var(--sv-lime-deep)}
.sv-page-home .sv-home-route__facades{gap:var(--sv-gap) clamp(24px,3vw,32px)}
.sv-page-home .sv-home-route__map,.sv-page-home .sv-home-route__tour{min-width:0}
/* fix round 1: side by side, the map takes the tour's 3:2, so the link row and the 360 button line up */
@media (min-width:1024px){.sv-page-home .sv-home-route__map .sv-map-facade__frame{aspect-ratio:3/2}}