/* ===========================================================================
   Werkwijze-sectie op de home (#skills), spoor 3 feedback Dauji 12-10-2026.
   Eigen bestand, alleen geladen door index.html. Alles hangt onder #skills.ww
   zodat niets buiten deze sectie verandert.

   Wat Dauji vroeg: "de sectie max 100vh, want zo kan je niet eens alles zien",
   "die doorklik lekkerder maken", "geef dat een nieuwe video".
   Gemeten voor (staging 12-10): sectie 950 px op 1440x900, 847 op 1280x720,
   890 op 375x812; de gele kaart liep op 1440 uit haar paneel van 360 px en de
   tabs liepen op 375 links en rechts het scherm uit.

   Opbouw: de sectie is precies 100svh hoog. Bovenin ruimte voor de vaste nav
   (die blijft onaangeraakt), dan label, kop en tabs, en het podium met video
   en kaart neemt de rest. Panelen liggen gestapeld in het podium en wisselen
   met een crossfade, dus de hoogte verspringt nooit tussen stappen.
   Terugdraaien: link naar dit bestand en js/werkwijze.js uit index.html halen
   en de oude sectie terugzetten (backup in de deploymap, voor/).
   =========================================================================== */

#skills.ww {
  --ww-nav: 64px;          /* vaste nav eindigt op 46 px (gemeten), plus lucht */
  --ww-pad-b: 24px;
  --ww-gap: 20px;
  --ww-fade: 520ms;
  --ww-ease: cubic-bezier(.22, .61, .36, 1);
  box-sizing: border-box;
  height: 100vh;
  height: 100svh;
  padding-top: var(--ww-nav);
  padding-bottom: var(--ww-pad-b);
  scroll-margin-top: 0;    /* sectie vult zelf het scherm, nav valt in de eigen marge */
  display: flex;
}

#skills.ww > .main-container {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

/* Kop: label, een regel serif, tabs. Compacter dan de oude 218 px hoge kop. */
#skills.ww .headline-skills {
  margin-bottom: 0;
  gap: 8px;
  flex: none;
}
#skills.ww .headline-skills > .label { margin-bottom: 0; }
#skills.ww .heading-skills { max-width: none; }
#skills.ww .heading-large {
  font-size: clamp(30px, min(3.6vw, 6.2vh), 60px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

#skills.ww .services {
  flex: 1 1 auto;
  min-height: 0;
  gap: var(--ww-gap);
  margin-top: var(--ww-gap);
}

/* Tabs: echte knoppen, highlight schuift met een transform in plaats van Flip. */
#skills.ww .tabs-wrap {
  position: relative;
  flex: none;
  isolation: isolate;
}
#skills.ww .tab-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  z-index: 1;
  overflow: hidden;
  transition: opacity 200ms ease-out;
}
#skills.ww .tab-btn:not(.is-active) { opacity: .72; }
#skills.ww .tab-btn:hover { opacity: 1; }
#skills.ww .tab-btn:focus-visible {
  outline: 2px solid var(--_colors---color--dark);
  outline-offset: 2px;
}
#skills.ww .tab-highlight {
  position: absolute;
  inset: auto;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 0;
  transition: transform 420ms var(--ww-ease), width 420ms var(--ww-ease), height 420ms var(--ww-ease);
  pointer-events: none;
}
/* Voortgang: een dunne lijn onderin de actieve tab die vol loopt tot de volgende stap. */
#skills.ww .ww-progress {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: rgba(42, 33, 25, .14);
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms ease-out;
}
#skills.ww .tab-btn.is-active .ww-progress { opacity: 1; }
#skills.ww .ww-progress > i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--_colors---color--dark);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
#skills.ww.is-paused .ww-progress > i { background: rgba(42, 33, 25, .45); }

/* Podium: vaste hoogte (rest van het scherm), panelen gestapeld. */
#skills.ww .ww-stage {
  position: relative;
  width: 100%;
  max-width: 1080px;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--_spacing---radius--radius-3);
  overflow: hidden;
  background: #2a2119;
  touch-action: pan-y;
}
#skills.ww .ww-panel {
  position: absolute;
  inset: 0;
  padding: 8px;
  display: flex;
  align-items: stretch;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ww-fade) var(--ww-ease), visibility 0s linear var(--ww-fade);
}
#skills.ww .ww-panel.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--ww-fade) var(--ww-ease), visibility 0s;
  z-index: 1;
}
#skills.ww .ww-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1600ms var(--ww-ease);
}
#skills.ww .ww-panel.is-active .ww-video { transform: scale(1); }

/* De gele kaart: zelfde vorm als voorheen, maar past altijd in het podium. */
#skills.ww .ww-card {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(320px, 34%);
  max-height: 100%;
  padding: clamp(20px, 3.2vh, 32px);
  border-radius: var(--_spacing---radius--radius-3);
  background-color: var(--_colors---color--yellow);
  color: var(--_colors---color--dark);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
}
#skills.ww .ww-card > * {
  transform: translateY(14px);
  opacity: 0;
  transition: transform 560ms var(--ww-ease), opacity 560ms var(--ww-ease);
}
#skills.ww .ww-panel.is-active .ww-card > * { transform: none; opacity: 1; transition-delay: 120ms; }
#skills.ww .ww-panel.is-active .ww-card > * + * { transition-delay: 200ms; }
#skills.ww .ww-card .text-scroll-right {
  text-align: left;
  font-size: clamp(24px, min(2.5vw, 4.4vh), 40px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: none;
  text-wrap: balance;
}
#skills.ww .ww-card .label {
  text-transform: none;
  font-size: clamp(13px, 1.9vh, 16px);
  line-height: 1.45;
  letter-spacing: .01em;
}

/* Stapteller rechtsonder in het beeld. */
#skills.ww .ww-count {
  position: absolute;
  right: 20px;
  bottom: 16px;
  z-index: 3;
  color: #ebe6dc;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
  pointer-events: none;
}

/* ---- Tablet en kleiner -------------------------------------------------- */
@media screen and (max-width: 991px) {
  #skills.ww .ww-card { width: min(320px, 46%); }
}

/* ---- Mobiel ------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  #skills.ww {
    --ww-nav: 80px;        /* mobiele nav is twee rijen en eindigt op 66 px */
    --ww-pad-b: 16px;
    --ww-gap: 14px;
  }
  #skills.ww .heading-large { font-size: clamp(28px, 8.4vw, 36px); }
  #skills.ww .tabs-wrap {
    padding: 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
  }
  #skills.ww .tab-btn {
    flex: 1 1 auto;
    padding: 10px 8px 12px;
  }
  #skills.ww .tab-btn .icon-tab { display: none; }
  #skills.ww .tab-btn .label { font-size: 12px; letter-spacing: .06em; }
  #skills.ww .ww-progress { left: 12px; right: 12px; bottom: 5px; }
  #skills.ww .ww-panel { align-items: flex-end; }
  #skills.ww .ww-card {
    width: 100%;
    max-height: 62%;
    gap: 12px;
    padding: 18px 18px 20px;
  }
  #skills.ww .ww-card .text-scroll-right { font-size: clamp(22px, 6.6vw, 28px); }
  #skills.ww .ww-card .label { font-size: 14px; }
  #skills.ww .ww-count { top: 14px; bottom: auto; right: 16px; }
}

/* Lage schermen (liggende telefoon, kleine laptops): kop iets kleiner. */
@media screen and (max-height: 600px) and (min-width: 768px) {
  #skills.ww { --ww-nav: 58px; --ww-gap: 12px; --ww-pad-b: 16px; }
  #skills.ww .headline-skills > .label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #skills.ww .ww-panel,
  #skills.ww .ww-panel.is-active,
  #skills.ww .ww-video,
  #skills.ww .ww-card > *,
  #skills.ww .tab-highlight { transition: none; }
  #skills.ww .ww-video { transform: none; }
}