/* Smart Fit SMART-sectie. Mobile first.
   Mobiel: de hele foto op natuurlijke hoogte, zonder scroll-effect. De letters
   lichten een voor een op, grote letterknoppen en de uitleg staan eronder.
   Vanaf 768px: schermvullende sticky sectie die uitzoomt tijdens het scrollen. */
.sf-smart { position: relative; background: #044561; }
.sf-smart__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sf-smart__stick { position: static; }
.sf-smart__frame { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
.sf-smart__zoom { position: absolute; inset: 0; }
.sf-theme .sf-smart__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.sf-smart__zone {
  position: absolute; top: 16.8%; height: 9.8%; padding: 0; cursor: pointer;
  border: 2px solid rgba(255,255,255,.55); background: transparent; border-radius: 10px;
  transition: background .25s, border-color .25s;
}
/* Ruimer tikvlak dan het zichtbare kader */
.sf-smart__zone::after { content: ''; position: absolute; inset: -10px -4px; }
.sf-smart__zone:hover, .sf-smart__zone[aria-pressed="true"] { background: rgba(233,81,35,.28); border-color: #E95123; }

/* Letters lichten een voor een op tot er iets wordt aangetikt */
@keyframes sf-smart-pulse {
  0%, 24%, 100% { background: transparent; border-color: rgba(255,255,255,.55); box-shadow: none; }
  8%, 16% { background: rgba(233,81,35,.4); border-color: #E95123; box-shadow: 0 0 0 4px rgba(233,81,35,.25); }
}
@keyframes sf-smart-chip {
  0%, 24%, 100% { background: rgba(4,69,97,.85); border-color: rgba(255,255,255,.7); transform: none; }
  8%, 16% { background: #E95123; border-color: #E95123; transform: translateY(-3px); }
}
.sf-smart:not(.is-engaged) .sf-smart__zone,
.sf-smart:not(.is-engaged) .sf-smart__chips button { animation: sf-smart-pulse 5s ease-in-out infinite; }
.sf-smart:not(.is-engaged) .sf-smart__chips button { animation-name: sf-smart-chip; }
.sf-smart:not(.is-engaged) [data-sf-letter="M"] { animation-delay: 1s; }
.sf-smart:not(.is-engaged) [data-sf-letter="A"] { animation-delay: 2s; }
.sf-smart:not(.is-engaged) [data-sf-letter="R"] { animation-delay: 3s; }
.sf-smart:not(.is-engaged) [data-sf-letter="T"] { animation-delay: 4s; }

.sf-smart__chips { display: flex; justify-content: center; gap: 10px; padding: 20px 16px 4px; }
.sf-smart__chips button {
  width: 52px; height: 52px; border: 2px solid rgba(255,255,255,.7); border-radius: 14px;
  background: rgba(4,69,97,.85); color: #fff; font: 800 22px/1 'Poppins', sans-serif; cursor: pointer;
}
.sf-smart__chips button[aria-pressed="true"] { background: #E95123; border-color: #E95123; animation: none; }

.sf-smart__cards { padding: 16px 16px 28px; }
.sf-smart__cards:empty { display: none; }
.sf-smart__card {
  background: #fff; color: #1C1C1A; border-radius: 20px; padding: 24px 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 10px;
}
.sf-smart__card[hidden] { display: none; }
.sf-smart__card-head { display: flex; align-items: center; gap: 14px; }
.sf-smart__badge { width: 52px; height: 52px; flex: none; border-radius: 50%; background: #E95123; color: #fff; font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.sf-theme .sf-smart__card h3 { flex: 1; margin: 0; font-size: 20px; font-weight: 800; letter-spacing: .02em; color: #044561; }
.sf-theme .sf-smart__card p { margin: 0; font-size: 15px; line-height: 1.65; color: #1C1C1A; text-wrap: pretty; }
.sf-smart__close { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: #F4F6F7; color: #044561; font-size: 20px; cursor: pointer; }

/* Tablet en desktop: schermvullend, zoomt uit tijdens het scrollen */
@media (min-width: 768px) {
  .sf-smart { height: 280vh; }
  .sf-smart__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .sf-smart__frame { width: min(100vw, 150svh); overflow: visible; }
  .sf-smart__zoom { transform: scale(var(--sf-smart-scale, 1)); transform-origin: 57.8% 21.5%; will-change: transform; }
  .sf-smart:not(.is-engaged) .sf-smart__zone { animation: none; }
  .sf-smart__chips { display: none; }
  .sf-smart__cards { position: absolute; left: clamp(16px, 5vw, 64px); bottom: clamp(16px, 6vh, 64px); width: min(440px, calc(100vw - 32px)); padding: 0; z-index: 3; }
  .sf-smart__cards:empty { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-smart:not(.is-engaged) .sf-smart__zone, .sf-smart:not(.is-engaged) .sf-smart__chips button { animation: none; }
  .sf-smart { height: auto; }
  .sf-smart__stick { position: static; height: auto; display: block; overflow: visible; }
  .sf-smart__frame { width: 100%; overflow: hidden; }
  .sf-smart__zoom { transform: none; will-change: auto; }
  .sf-smart__zone { transition: none; }
}