/* ==========================================================================
   Eigenhuis Schilderplan — hotspot-projectfoto

   Een foto van opgeleverd werk met aanklikbare punten. De punten staan op een
   percentage van breedte en hoogte, zodat ze meeschalen met het beeld.

   De toelichting verschijnt onder de foto en niet erbovenop: op een telefoon
   leest dat prettiger, en het beeld blijft zichtbaar terwijl je leest.
   ========================================================================== */

.eh-hotspot{
  --hs-ox:#A91E2C;
  --hs-ox-diep:#7F1621;
  --hs-oranje:#F08223;
  --hs-oranje-zacht:#FBEFE2;
  --hs-inkt:#221B17;
  --hs-inkt-zacht:#5C534C;

  max-width:1000px;
  margin:34px auto 0;
}

/* ---- het beeld ---- */
.eh-hotspot-beeld{
  position:relative;display:block;
  border-radius:16px;overflow:hidden;line-height:0;
  box-shadow:0 14px 38px -18px rgba(35,12,15,.5);
}
.eh-hotspot-beeld img{display:block;width:100%;height:auto;max-width:100%}

/* ---- de punten ---- */
.eh-hotspot-punt{
  position:absolute;transform:translate(-50%,-50%);z-index:2;
  display:grid;place-items:center;
  width:36px;height:36px;padding:0;
  border:2px solid #fff;border-radius:50%;
  background:var(--hs-ox);color:#fff;
  font-family:inherit;font-size:14px;font-weight:700;line-height:1;
  cursor:pointer;
  box-shadow:0 3px 12px -2px rgba(35,12,15,.6);
  transition:transform .22s cubic-bezier(.22,.61,.21,1),background-color .22s ease;
}
.eh-hotspot-punt:hover,
.eh-hotspot-punt[aria-expanded="true"]{
  background:var(--hs-oranje);
  transform:translate(-50%,-50%) scale(1.12);
}
.eh-hotspot-punt:focus-visible{
  outline:3px solid var(--hs-oranje);outline-offset:3px;
}

/* de pulserende ring is decoratief en zit los van de knop */
.eh-hotspot-punt::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--hs-oranje);opacity:.8;
  animation:eh-hotspot-puls 2.4s ease-out infinite;
  pointer-events:none;
}
.eh-hotspot-punt[aria-expanded="true"]::before{animation:none;opacity:0}

@keyframes eh-hotspot-puls{
  0%{transform:scale(.72);opacity:.8}
  70%{transform:scale(1.35);opacity:0}
  100%{transform:scale(1.35);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .eh-hotspot-punt::before{animation:none;opacity:.55}
  .eh-hotspot-punt{transition:none}
}

.eh-hotspot-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---- de toelichting ---- */
.eh-hotspot-kaarten{margin-top:18px}
.eh-hotspot-kaart{
  position:relative;
  display:flex;align-items:flex-start;gap:16px;
  padding:22px 54px 22px 22px;
  background:#fff;
  border:1px solid rgba(34,27,23,.12);
  border-left:4px solid var(--hs-oranje);
  border-radius:12px;
  box-shadow:0 8px 24px -18px rgba(35,12,15,.4);
}
.eh-hotspot-kaart[hidden]{display:none}

.eh-hotspot-kaart-nr{
  flex:0 0 32px;width:32px;height:32px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--hs-ox);color:#fff;
  font-size:14px;font-weight:700;line-height:1;
}
.eh-hotspot-kaart-tekst{flex:1 1 auto;min-width:0}
.eh-hotspot-kaart-tekst h3{
  margin:0 0 6px;
  font-family:var(--display,Georgia,serif);font-weight:400;
  font-size:20px;line-height:1.2;color:var(--hs-ox-diep);
}
.eh-hotspot-kaart-tekst p{
  margin:0 0 .7em;font-size:15.5px;line-height:1.6;color:var(--hs-inkt-zacht);
}
.eh-hotspot-kaart-tekst p:last-child{margin-bottom:0}

.eh-hotspot-sluit{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;padding:0;
  display:grid;place-items:center;
  border:1px solid rgba(34,27,23,.14);border-radius:50%;
  background:#fff;color:var(--hs-inkt-zacht);cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.eh-hotspot-sluit svg{width:16px;height:16px}
.eh-hotspot-sluit:hover{background:var(--hs-oranje);color:#fff;border-color:var(--hs-oranje)}
.eh-hotspot-sluit:focus-visible{outline:3px solid var(--hs-oranje);outline-offset:2px}

@media (max-width:560px){
  .eh-hotspot-punt{width:30px;height:30px;font-size:12.5px}
  .eh-hotspot-kaart{padding:18px 48px 18px 18px;gap:12px}
  .eh-hotspot-kaart-tekst h3{font-size:18px}
}