/* tegel-detail.css — klikalne kafelki met brede beschrijving (Affido.bv, 2026).
   Eigenaar: frontend (tegel.* i18n-namespace). Gebruikt bestaande design-tokens
   uit affido-2026.css / bald.css (--ink-2, --line, --amber, --mute, --bone).
   Geen !important, geen inline styles nodig in de pagina's zelf.
   Mobiel (<700px): sheet die van onderen opschuift. Desktop: gecentreerd paneel.
   prefers-reduced-motion: geen schuif/schaal-animatie, enkel fade. */

/* ---------- affordance op de tegel zelf ---------- */
.tegel-tile{
  position:relative;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tegel-tile:hover,
.tegel-tile:focus-visible{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--amber) 55%, var(--line));
}
.tegel-tile:active{ transform:translateY(-1px) }
.tegel-tile:focus-visible{ outline:3px solid var(--amber); outline-offset:3px }
@media (hover:none){
  .tegel-tile:active{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--amber) 55%, var(--line)) }
}
@media (prefers-reduced-motion: reduce){
  .tegel-tile{ transition:border-color .12s linear }
  .tegel-tile:hover, .tegel-tile:focus-visible, .tegel-tile:active{ transform:none }
}

/* pijltje rechtsonder: zelfde taal als de rest van de site, laat zien dat
   de tegel meer inhoud verbergt zonder de bestaande kaart-vormgeving te breken. */
.tegel-tile__hint{
  position:absolute; right:14px; bottom:14px; width:26px; height:26px;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line-soft, var(--line)); color:var(--mute);
  background:color-mix(in srgb, var(--ink-2) 70%, transparent);
  opacity:0; transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease, border-color .18s ease, color .18s ease;
  pointer-events:none;
}
.tegel-tile__hint svg{ width:14px; height:14px }
.tegel-tile:hover .tegel-tile__hint,
.tegel-tile:focus-visible .tegel-tile__hint{
  opacity:1; transform:translateY(0); border-color:var(--amber); color:var(--amber);
}
@media (hover:none){
  .tegel-tile__hint{ opacity:.85; transform:none }
}
@media (prefers-reduced-motion: reduce){
  .tegel-tile__hint{ transition:opacity .12s linear, border-color .12s linear, color .12s linear }
}

/* Tegels die zelf al een link zijn (bv. galerij-kafels): alleen het hintje,
   geen dialoog-gedrag, geen extra cursor-verandering nodig want <a> heeft het al. */
.tegel-linked{ position:relative }
.tegel-linked .tegel-tile__hint{ opacity:.85 }

/* ---------- dialoog ---------- */
.tegel-dialog{
  position:fixed; inset:0; z-index:230;
  display:flex; align-items:center; justify-content:center;
}
.tegel-dialog[hidden]{ display:none }
.tegel-dialog__backdrop{
  position:absolute; inset:0; background:rgba(6,8,11,.78);
  opacity:0; transition:opacity .2s ease;
}
.tegel-dialog--in .tegel-dialog__backdrop{ opacity:1 }

.tegel-dialog__sheet{
  position:relative; width:min(640px, 92vw); max-height:86vh; overflow-y:auto;
  background:var(--ink-2); border:1px solid var(--line); border-radius:18px;
  padding:clamp(24px,3vw,34px);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  opacity:0; transform:translateY(18px) scale(.98);
  transition:opacity .22s ease, transform .22s ease;
}
.tegel-dialog--in .tegel-dialog__sheet{ opacity:1; transform:translateY(0) scale(1) }

.tegel-dialog__close{
  position:absolute; top:12px; right:12px; width:36px; height:36px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); border-radius:9px; color:var(--mute); cursor:pointer;
}
.tegel-dialog__close:hover{ color:var(--amber); border-color:var(--amber) }
.tegel-dialog__close svg{ width:18px; height:18px }

.tegel-dialog__eyebrow{
  margin:0 44px 6px 0; font:700 11px/1 var(--font); letter-spacing:.16em; text-transform:uppercase; color:var(--amber);
}
.tegel-dialog__title{ margin:0 44px 14px 0; font-size:clamp(20px,2.4vw,28px); line-height:1.18; max-width:30ch }
.tegel-dialog__body p{ margin:0 0 14px; font-size:16px; line-height:1.7; color:var(--bone) }
.tegel-dialog__body ul{ margin:0 0 14px; padding-left:0; list-style:none; display:grid; gap:9px }
.tegel-dialog__body li{
  position:relative; padding-left:22px; font-size:15.5px; line-height:1.55; color:var(--bone);
}
.tegel-dialog__body li::before{
  content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%;
  background:var(--amber);
}
.tegel-dialog__cta{ margin-top:6px; display:flex; flex-wrap:wrap; gap:10px }
.tegel-dialog__cta[hidden]{ display:none }

html.tegel-lock{ overflow:hidden }

/* ---------- mobiel: bottom sheet ---------- */
@media (max-width:700px){
  .tegel-dialog{ align-items:flex-end }
  .tegel-dialog__sheet{
    width:100%; max-width:none; max-height:88vh;
    border-radius:20px 20px 0 0;
    padding:22px 20px calc(22px + env(safe-area-inset-bottom));
    transform:translateY(100%);
  }
  .tegel-dialog--in .tegel-dialog__sheet{ transform:translateY(0) }
  .tegel-dialog__sheet::before{
    content:""; display:block; width:40px; height:4px; border-radius:3px;
    background:var(--line); margin:0 auto 16px;
  }
}

@media (prefers-reduced-motion: reduce){
  .tegel-dialog__backdrop,
  .tegel-dialog__sheet{ transition:opacity .12s linear; transform:none !important }
}