/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://www.sanitairexpert.nl
 Description:  De mobiele showroom voor tegels & sanitair.
 Author:       Noorderinzicht
 Author URI:   https://noorderinzicht.nl
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================================================
   Design tokens — Sanitairexpert aan huis
   Single source of truth voor kleuren + typografie.
   Pas waarden hier aan; alles in Bricks erft via var(--...).
   ========================================================================== */
:root {
  /* ---- Kleuren ---- */
  --clr-primary: #9d761d;
  --clr-secondary: #315f6e;
  --clr-black: #000000;
  --clr-dark: #202020;
  --clr-primary-dark: #926b14;
  --clr-accent: #d9af63;
  --clr-white: #ffffff;
  --clr-gray: #f5f4f4;

  /* ---- Gradient (Figma: Gradient - 1) ---- */
  --gradient-primary: linear-gradient(86.59deg,
      var(--clr-primary-dark) -0.01%,
      var(--clr-accent) 30%,
      var(--clr-primary) 100%);

  /* ---- Lettertypen ---- */
  /* Belda komt van Adobe Fonts; Playfair Display is de fallback (zie functions.php). */
  --font-heading: "belda", "Playfair Display", serif;
  --font-body: "Montserrat", sans-serif;

  /* ---- Fluid type scale in px (viewport 360px -> 1280px)        ---- */
  /* Bricks gebruikt --base-font: 10 (= 10px html base), dus geen rem. */
  --fs-h1: clamp(36px, calc(27.4px + 2.39vw), 58px);
  /* 36 -> 58 px */
  --fs-h2: clamp(28px, calc(24.9px + 0.87vw), 36px);
  /* 28 -> 36 px */
  --fs-h3: clamp(18px, calc(17.2px + 0.22vw), 20px);
  /* 18 -> 20 px */
  --fs-quote: clamp(22px, calc(19.7px + 0.65vw), 28px);
  /* 22 -> 28 px */
  --fs-body: 16px;
  /* 16 px vast  */

  /* ---- Line-heights ---- */
  --lh-heading: 1.2;
  --lh-quote: 1.4;
  --lh-body: 1.6;
  /* 160% zoals in Figma */

  /* ---- Grid ---- */
  --grid-gutter: 24px;
  --grid-max-width: 1520px;

  /* ---- Fluid spacing-schaal (viewport 360px -> 1280px) ----
     Zelfde clamp()-aanpak als de type-scale.
     --space-m = 24px op desktop (je referentiewaarde), schaalt terug op mobiel.
     Gebruik voor padding én margin: var(--space-m), enz. */
  --space-xs: clamp(6px, calc(5.22px + 0.22vw), 8px);
  /*  6 ->  8 px */
  --space-s: clamp(12px, calc(10.43px + 0.43vw), 16px);
  /* 12 -> 16 px */
  --space-m: clamp(16px, calc(12.87px + 0.87vw), 24px);
  /* 16 -> 24 px */
  --space-l: clamp(24px, calc(17.74px + 1.74vw), 40px);
  /* 24 -> 40 px */
  --space-xl: clamp(32px, calc(19.48px + 3.48vw), 64px);
  /* 32 -> 64 px */
  --space-2xl: clamp(48px, calc(29.22px + 5.22vw), 96px);
  /* 48 -> 96 px */
}

/* ==========================================================================
   Grid — 12 kolommen (Figma: 1920px artboard, 200px margin, 24px gutter)
   Gebruik: <div class="grid"> <div class="col-3">…</div> </div>
   ========================================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
  max-width: var(--grid-max-width);
  margin-inline: auto;
}

.col-3 {
  grid-column: span 3;
}

/* 362px  — kwart breedte */
.col-4 {
  grid-column: span 4;
}

/* 496px  — derde breedte */
.col-6 {
  grid-column: span 6;
}

/* 760px  — halve breedte */
.col-8 {
  grid-column: span 8;
}

/* 1024px — tweederde    */
.col-12 {
  grid-column: span 12;
}

/* 1520px — vol          */

@media (max-width: 1024px) {

  .col-3,
  .col-4 {
    grid-column: span 6;
  }
}

@media (max-width: 640px) {

  .col-3,
  .col-4,
  .col-6,
  .col-8 {
    grid-column: span 12;
  }

  .brxe-block .horizontaal-stappen {
    flex-direction: column !important;
    gap: var(--space-m) !important;
    text-align: center;
  }

  .brxe-block .horizontaal-stappen .icon {
    width: 100% !important;
    max-width: 100% !important;
  }
}

figure.wp-block-gallery figure.wp-block-image img {
  border-radius: 16px;
}

/* ==========================================================================
   Headings
   Standaard: primary-kleur op witte achtergrond.
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  /* Belda / Playfair Display regular */
  line-height: var(--lh-heading);
  letter-spacing: 0;
  color: var(--clr-accent);
}

/* Fluid ruimte onder de koppen: 14px op mobiel -> 20px op desktop */
h1,
h2,
h3 {
  margin-block: 0 clamp(14px, calc(11.65px + 0.65vw), 20px);
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

/* ==========================================================================
   Body tekst
   Montserrat regular; .text-semibold voor 600.
   ========================================================================== */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  color: var(--clr-black);
  background:var(--clr-black);
  overflow-x:hidden;
}

p {
  margin-block: 0 1em;
  line-height: var(--lh-body);
}

.text-semibold,
strong,
b {
  font-weight: 600;
}

#brxe-yztipn .bricks-nav-menu {
  align-items: center;
}

/* ==========================================================================
   Quote
   ========================================================================== */
.quote,
blockquote {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  color: var(--clr-primary);
}

/* ==========================================================================
   Donkere secties
   Geef een Section/Container in Bricks de class .section--dark of .section--black.
   Koppen worden dan accent, lopende tekst wit.
   ========================================================================== */
.section--dark {
  background-color: var(--clr-dark);
}

.section--black {
  background-color: var(--clr-black);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6,
.section--dark .quote,
.section--dark blockquote,
.section--black h1,
.section--black h2,
.section--black h3,
.section--black h4,
.section--black h5,
.section--black h6,
.section--black .quote,
.section--black blockquote {
  color: var(--clr-accent);
}

.section--dark p,
.section--dark li,
.section--black p,
.section--black li {
  color: var(--clr-white);
}

/* ==========================================================================
   Primary CTA-knop — Figma gradient + hover-animatie
   Werkt op de Bricks-knop met class .bricks-background-primary.
   ========================================================================== */
.bricks-button.bricks-background-primary {
  background: var(--gradient-primary);
  background-size: 200% auto;
  /* extra breedte zodat de gradient kan schuiven */
  background-position: 0% center;
  border-radius: 10px;
  font-weight:600;
  color: var(--clr-black);
  border: none;
  transition:
    background-position 0.5s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Pijltje-icoon meekleuren met de tekst */
.bricks-button.bricks-background-primary svg path {
  stroke: var(--clr-black);
  transition: stroke 0.25s ease;
}

/* Hover/focus: gradient schuift, knop tilt licht op, zachte schaduw */
.bricks-button.bricks-background-primary:hover,
.bricks-button.bricks-background-primary:focus-visible {
  background-position: 100% center;
  color: var(--clr-black);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(157, 118, 29, 0.35);
}

.bricks-button.bricks-background-primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(157, 118, 29, 0.3);
}

/* Respecteer "reduce motion": geen lift/animatie voor wie dat wil */
@media (prefers-reduced-motion: reduce) {
  .bricks-button.bricks-background-primary {
    transition: box-shadow 0.25s ease;
  }

  .bricks-button.bricks-background-primary:hover,
  .bricks-button.bricks-background-primary:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   Horizontale stappen — foto fadet in achter de kaart, icoon fadet uit
   Bricks genereert per stap: .brxe-block > .horizontaal-stappen (.icon + .content).
   Elke .horizontaal-stappen is het enige kind van zijn wrapper, daarom telt
   nth-child NIET op de icon-box maar op de wrapper-blokken hieronder.
   Hover-zone = de hele blok-wrapper.
   ========================================================================== */

.horizontaal-stappen .icon {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(to right, #faf8f6 0%, #f0ece5 100%);
  height: 130px !important;
  max-width: 140px !important;
  min-width: 140px !important;
}


/* SVG-icoon fadet uit bij hover van het blok */
.horizontaal-stappen .icon svg {
  position: relative;
  z-index: 1;
  transition: opacity 0.4s ease;
}

/* Foto-laag als cover BINNEN de icon-box; standaard onzichtbaar, zacht ingezoomd */
.horizontaal-stappen .icon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-size: cover;
  background-position: center;
  border-radius: inherit;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.5s ease, transform 0.7s ease;
  pointer-events: none;
}

/* Hover op het hele blok: foto fadet in + zoomt zacht naar 1, icoon fadet uit */
.brxe-block:has(> .horizontaal-stappen):hover .icon::after {
  opacity: 1;
  transform: scale(1);
}
.brxe-block:has(> .horizontaal-stappen):hover .icon svg {
  opacity: 0;
}

/* Per stap de juiste cover-foto */
.brxe-block:has(> .horizontaal-stappen):nth-child(1) .icon::after {
  background-image: url("https://www.sanitairexpertaanhuis.nl/wp-content/uploads/2026/06/project-voorbeeld-2-1024x629.jpg");
}
.brxe-block:has(> .horizontaal-stappen):nth-child(2) .icon::after {
  background-image: url("https://www.sanitairexpertaanhuis.nl/wp-content/uploads/2026/07/met-de-showroom.jpg");
}
.brxe-block:has(> .horizontaal-stappen):nth-child(3) .icon::after {
  background-image: url("https://www.sanitairexpertaanhuis.nl/wp-content/uploads/2026/06/project-voorbeeld-1-1024x607.jpg");
}
.brxe-block:has(> .horizontaal-stappen):nth-child(4) .icon::after {
  background-image: url("https://www.sanitairexpertaanhuis.nl/wp-content/uploads/2026/06/project-voorbeeld-2-1024x629.jpg");
}






/* ==========================================================================
   Secondary CTA — tekstlink met gradient-lijn eronder (= tekstbreedte)
   Werkt op de Bricks-tekstlink met class .brxe-text-link.
   ========================================================================== */
#brxe-foolzz.brxe-text-link, .cta-secundary {
  display: inline-flex;
  /* breedte = tekst, dus lijn loopt net zo ver */
  align-items: center;
  color: var(--clr-primary);
  text-decoration: none;
  padding-bottom: 4px;
  /* ruimte tussen tekst en lijntje */
  background-image: var(--gradient-primary);
  background-repeat: no-repeat;
  background-size: 200% 2px;
  /* 2px hoge lijn, extra breed om te schuiven */
  background-position: 0% 100%;
  /* lijn onderaan */
  transition:
    background-position 0.5s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

/* Hover/focus: gradient schuift mee (zoals de primary) + lichte lift */
#brxe-foolzz.brxe-text-link:hover,
.cta-secundary:hover,
#brxe-foolzz.brxe-text-link:focus-visible,
.cta-secundary:focus-visible {
  background-position: 100% 100%;
  color: var(--clr-primary-dark);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  #brxe-foolzz.brxe-text-link,
  .cta-secundary {
    transition: color 0.25s ease;
  }

  #brxe-foolzz.brxe-text-link:hover,
  .cta-secundary:hover,
  #brxe-foolzz.brxe-text-link:focus-visible,
  .cta-secundary:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   Nav-menu links — actieve pagina + hover
   Alle items behalve de CTA. Actieve pagina krijgt accent-kleur en een
   24px breed, 1px hoog gradient-lijntje, gecentreerd onder de tekst.
   ========================================================================== */
.bricks-nav-menu li:not(.cta)>a {
  position: relative;
  transition: color 0.25s ease;
}

/* Het gradient-lijntje (24px, gecentreerd) — standaard verborgen */
.bricks-nav-menu li:not(.cta)>a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 24px;
  height: 1px;
  background-image: var(--gradient-primary);
  transform: translateX(-50%);
  transform-origin: left center;
  /* groeit van links naar rechts */
  scale: 0 1;
  transition: scale 0.3s ease;
}

/* Actieve pagina: accent-kleur + zichtbaar lijntje */
.bricks-nav-menu li.current-menu-item>a,
.bricks-nav-menu li.current_page_item>a {
  color: var(--clr-accent);
}

/* Lijntje tonen bij actieve pagina én bij hover/focus */
.bricks-nav-menu li.current-menu-item>a::after,
.bricks-nav-menu li.current_page_item>a::after,
.bricks-nav-menu li:not(.cta)>a:hover::after,
.bricks-nav-menu li:not(.cta)>a:focus-visible::after {
  scale: 1 1;
}

/* Hover-kleur voor de overige items */
.bricks-nav-menu li:not(.cta)>a:hover,
.bricks-nav-menu li:not(.cta)>a:focus-visible {
  color: var(--clr-accent);
}

@media (prefers-reduced-motion: reduce) {
  .bricks-nav-menu li:not(.cta)>a::after {
    transition: none;
  }
}

/* ==========================================================================
   Nav-CTA — "Boek de showroom" (laatste menu-item: li.cta)
   Zwarte vulling, 2px gradient-rand, witte tekst + play-icoon ervoor.
   ========================================================================== */
.bricks-nav-menu li.cta>a,
.brxe-button.cta-secundary.bricks-button.bricks-background-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 2px solid transparent;
  font-weight:600;
  border-radius: 10px;
  color: var(--clr-white);
  text-decoration: none;
  /* Dubbele achtergrond: zwart binnenin (padding-box) + gradient op de rand (border-box).
     De gradient-laag is 200% breed zodat hij bij hover kan schuiven. */
  background:
    linear-gradient(var(--clr-black), var(--clr-black)) padding-box,
    var(--gradient-primary) border-box;
  background-repeat: no-repeat;
  background-size:
    100% 100%,
    200% 100%;
  background-position:
    center,
    0% center;
  transition:
    background-position 0.5s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.brxe-button.cta-secundary.bricks-button.bricks-background-primary svg path {
  stroke: var(--clr-gray);
  transition: stroke 0.25s ease;
  opacity: 0.8;
}

/* Play-icoon ervoor — 16x16, witte stroke (SVG als data-URI) */
.bricks-nav-menu li.cta>a::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 10.93'%3E%3Cpath d='M8.625 4.38403C9.45833 4.86516 9.45833 6.06892 8.625 6.55005L2.625 10.0139C1.79168 10.4949 0.749999 9.89312 0.749999 8.93091L0.75 2.00317C0.75 1.04096 1.79168 0.439151 2.625 0.920166L8.625 4.38403Z' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.25s ease;
}

.fade-after {
  position: relative;
  z-index: 1;
}
.fade-after::after {
  position: absolute;
  content: "";
  width: 250px;
  height: 150px;
  top: 100px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  box-shadow: 0 -50px 250px 100px color-mix(in srgb, var(--clr-primary-dark) 50%, transparent);
}



/* Hover/focus: gradient-rand schuift, knop tilt op met warme glow, icoon nudge */
.bricks-nav-menu li.cta>a:hover,
.bricks-nav-menu li.cta>a:focus-visible {
  background-position:
    center,
    100% center;
  color: var(--clr-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(157, 118, 29, 0.35);
}

.bricks-nav-menu li.cta>a:hover::before,
.bricks-nav-menu li.cta>a:focus-visible::before {
  transform: translateX(3px);
}

.bricks-nav-menu li.cta>a:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(157, 118, 29, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .bricks-nav-menu li.cta>a {
    transition: box-shadow 0.25s ease;
  }

  .bricks-nav-menu li.cta>a:hover,
  .bricks-nav-menu li.cta>a:focus-visible {
    transform: none;
  }

  .bricks-nav-menu li.cta>a:hover::before,
  .bricks-nav-menu li.cta>a:focus-visible::before {
    transform: none;
  }
}

/* ==========================================================================
   Review-card — .review
   Basis: 1px primary rand. Hover: zwarte vulling + glow, en een gradient-rand
   die vanuit de card 30px naar onder-rechts wegschuift (gelaagd effect).
   ========================================================================== */
.review {
  position: relative;
  z-index: 0;
  /* eigen stacking context voor de lagen hieronder */
  border: 1px solid var(--clr-primary);
  border-radius: 12px;
  padding: var(--space-xl);
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    color 0.35s ease;
}

.review h4 {
  margin-bottom: var(--space-m);
}

.review p {
  margin: 0;
}

/* Zwarte vulling als laag — boven de gradient-rand, maar onder de tekst */
.review::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background-color: transparent;
  z-index: -1;
  transition: background-color 0.35s ease;
}

/* Gradient-rand (alleen de rand, via mask) — ligt áchter de card (z-index -2)
   en schuift bij hover naar onder-rechts, zodat alleen dat stuk uitsteekt */
.review::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  /* dikte van de gradient-rand */
  background: var(--gradient-primary);
  /* toont alleen de rand: vulling weggemaskerd */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  z-index: -2;
  opacity: 0;
  transform: translate(0, 0);
  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
  pointer-events: none;
}

/* Hover: warme glow, eigen rand verdwijnt */
.review:hover {
  border-color: transparent !important;
  box-shadow: 0 0 100px rgba(146, 107, 20, 0.5);
}

/* Vulling wordt zwart, gradient-rand schuift áchter de card weg */
.review:hover::before {
  background-color: var(--clr-black);
}

.review:hover::after {
  opacity: 1;
  transform: translate(30px, 30px);
}

/* Tekst leesbaar houden op de zwarte achtergrond */
.review:hover .brxe-text-basic,
.review:hover p {
  color: var(--clr-white);
}

@media (prefers-reduced-motion: reduce) {
  .review::after {
    transition: opacity 0.35s ease;
  }

  .review:hover::after {
    transform: none;
    /* geen schuif-animatie */
  }
}

/* post-type-archive-project */

.post-type-archive-project .brxe-posts ul.bricks-layout-wrapper li .bricks-layout-inner {
  border-radius: 16px;
  max-height: 300px;
  justify-content: end;
}

.post-type-archive-project .brxe-posts ul.bricks-layout-wrapper li .bricks-layout-inner .content-wrapper {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  padding: 25px;
  border-radius: 10px;
  margin: 15px;
  justify-content: end;
  height: auto;
  top: auto;
  width: fit-content; /* balk zo breed als de tekst i.p.v. volledige breedte */
}

.post-type-archive-project .brxe-posts ul.bricks-layout-wrapper li .bricks-layout-inner .content-wrapper h2 {
  margin:0 !important;
}



/* ==========================================================================
   Sticky header met scroll-animatie
   - position: sticky houdt de header in de normale flow en laat hem aan de
     bovenkant kleven (geen body-padding nodig, geen overlap met content).
   - Scroll je omhoog → header zichtbaar. Scroll je omlaag → header schuift
     naar boven uit beeld. De klasse .header-hidden wordt door app.js gezet.
   - Deze regels staan buiten @layer bricks en winnen daardoor van Bricks'
     eigen `#brx-header { position: relative }` binnen de bricks-layer.
   ========================================================================== */
#brx-header {
  position: sticky;
  top: 0;
  z-index: 999;
  transform: translateY(0);
  transition: transform 0.35s ease, box-shadow 0.4s ease;
  will-change: transform;
}

/* Header verborgen: schuift volledig naar boven uit beeld */
#brx-header.header-hidden {
  transform: translateY(-100%);
}

/* Subtiele schaduw zodra de pagina niet meer helemaal bovenaan staat */
#brx-header.header--scrolled {
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Spacing utilities — fluid padding & margin
   Gebruik de class direct op een element, of pak var(--space-*) in Bricks.
   Schaalt automatisch mee: perfect op desktop, comfortabel op tablet/mobiel.
   ========================================================================== */

/* Padding alle zijden */
.p-xs {
  padding: var(--space-xs);
}

.p-s {
  padding: var(--space-s);
}

.p-m {
  padding: var(--space-m);
}

.p-l {
  padding: var(--space-l);
}

.p-xl {
  padding: var(--space-xl);
}

.p-2xl {
  padding: var(--space-2xl);
}

/* Padding verticaal (boven + onder) — handig voor secties */
.py-s {
  padding-block: var(--space-s);
}

.py-m {
  padding-block: var(--space-m);
}

.py-l {
  padding-block: var(--space-l);
}

.py-xl {
  padding-block: var(--space-xl);
}

.py-2xl {
  padding-block: var(--space-2xl);
}

/* Padding horizontaal (links + rechts) */
.px-s {
  padding-inline: var(--space-s);
}

.px-m {
  padding-inline: var(--space-m);
}

.px-l {
  padding-inline: var(--space-l);
}

.px-xl {
  padding-inline: var(--space-xl);
}

.px-2xl {
  padding-inline: var(--space-2xl);
}

/* Margin verticaal (boven + onder) — voor ruimte tussen blokken */
.my-s {
  margin-block: var(--space-s);
}

.my-m {
  margin-block: var(--space-m);
}

.my-l {
  margin-block: var(--space-l);
}

.my-xl {
  margin-block: var(--space-xl);
}

.my-2xl {
  margin-block: var(--space-2xl);
}

/* ==========================================================================
   Dynamische project-carousel (homepage) — #brxe-kbbocl
   ========================================================================== */
#brxe-kbbocl {
	position: relative;
	overflow: hidden;
}

.sah-swiper {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.sah-slide {
	height: clamp(250px, calc(138px + 31vw), 535px);
}

.sah-slide-bg {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	text-decoration: none;
  border-radius: 16px;
}

.sah-slide-info {
	background-color: rgba(0, 0, 0, 0.8);
	position: absolute;
	bottom: 14px;
	left: 18px;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	row-gap: 12px;
	padding: 18px 24px 18px 24px;
}

.sah-slide-title {
	color: var(--clr-accent) !important;
	font-size: var(--fs-h3) !important;
	margin: 0 0 4px !important;
}

.sah-slide-props {
	color: var(--clr-white) !important;
	font-size: 14px !important;
	margin: 0 !important;
}

/* Pijltjes — rechtsonder, naast elkaar */
.sah-slide-controls {
	position: absolute;
	bottom: var(--space-l);
	right: var(--space-l);
	display: flex;
	gap: 8px;
	z-index: 10;
}

.sah-nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 36px;
	/* border: 1px solid var(--clr-accent); */
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.8);
	/* color: var(--clr-accent); */
  color:var(--clr-white);
	cursor: pointer;
	transition:
		background 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

.sah-nav-btn:hover {
	background: var(--clr-accent);
	color: var(--clr-black);
	transform: scale(1.05);
}