/* =========================================================
   OEFENING-KAART — COMPONENT (sitewide)
   Werkt met markup:
   .oefening-kaart
     .kaart-flip-inner
       .kaart-flip-front
         .kaart-top (optional)
         .kaart-bottom (.kaart-title--front, .kaart-desc--front)
       .kaart-flip-back
         .kaart-top (.kaart-title--back, .kaart-desc--back)
         .kaart-bottom (.action-row)
   ========================================================= */

:root{
  --ok-radius: 16px;
  --ok-shadow: var(--shadow-main, 0 2px 12px rgba(75, 189, 255, 0.10));
  --ok-border: none;

  /* voorbeeldkaart blauw + featured pill */
  --ok-example-blue: #1f6fe5;
  --ok-example-feature-bg: #eef4ff;
  --ok-example-feature-text: #1f6fe5;

  /* Maten */
  --ok-min-h: var(--card-h, 190px);

  /* Interne spacing */
  --ok-pad: var(--card-pad, 16px);
  --ok-front-top: 45%;

  /* Typografie */
  --ok-font: "Baloo 2", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Typografie: consistent op elke pagina */
.oefening-kaart,
.oefening-kaart *{
  font-family: var(--ok-font);
}

/* Basiskaart */
.oefening-kaart{
  border-radius: var(--ok-radius);
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  height: var(--card-h);
  perspective: 800px;
  margin: 0 18px 0 0;
  border: 50px;
  background: transparent;
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: none;
  overflow: visible;
}

/* Flip-inner */
.oefening-kaart .kaart-flip-inner{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: var(--ok-min-h);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(.4,2,.3,1);
}

.oefening-kaart:hover .kaart-flip-inner{
  transform: rotateY(180deg);
}

/* Jouw JS togglet .is-flipped op .oefening-kaart */
.oefening-kaart.is-flipped .kaart-flip-inner{
  transform: rotateY(180deg);
}

/* Front/Back basis */
.oefening-kaart .kaart-flip-front,
.oefening-kaart .kaart-flip-back{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: var(--ok-radius);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--ok-pad);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.oefening-kaart .kaart-flip-front{
  z-index: 2;
  background-color: var(--ok-front-bg-color, transparent);
  background-image: var(--ok-front-bg-gradient, none);
  display: grid;
  grid-template-rows: var(--ok-front-top, 58%) 1fr;
  align-items: stretch;
  align-content: stretch;
  justify-content: stretch;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d5e3f0
}

.oefening-kaart .kaart-flip-back{
  z-index: 3;
  transform: rotateY(180deg);
    border: 1px solid #d5e3f0
}

.oefening-kaart .kaart-top,
.oefening-kaart .kaart-bottom{
  width: 100%;
  min-height: 0;
}

.oefening-kaart .kaart-flip-back .kaart-top{
  margin-bottom: auto;
}

.oefening-kaart .kaart-flip-front .kaart-top{
  grid-row: 1;
  margin-top: 10px;
  padding: var(--ok-pad);
  border-radius: var(--ok-radius) var(--ok-radius) 0 0;
  background-color: var(--ok-front-bg-color, transparent);
  background-image: var(--ok-front-bg-image, none);
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.oefening-kaart .kaart-flip-front .kaart-bottom{
  grid-row: 2;
  background: #ffffff;
  padding: var(--ok-pad);
  border-top: 1px solid rgba(20, 33, 61, 0.08);
  border-radius: 0 ;
  color: var(--color-card-dark, #1f2d3d);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 5px 18px;
}

.oefening-kaart .kaart-flip-front--0,
.oefening-kaart .kaart-flip-back--0,
.oefening-kaart .kaart-title--0,
.oefening-kaart .kaart-desc--0 { background-color: var(--color-card-0); color: var(--color-card-dark); }
.oefening-kaart .kaart-flip-front--1,
.oefening-kaart .kaart-flip-back--1,
.oefening-kaart .kaart-title--1,
.oefening-kaart .kaart-desc--1 { background-color: var(--color-card-1); color: var(--color-card-dark); }
.oefening-kaart .kaart-flip-front--2,
.oefening-kaart .kaart-flip-back--2,
.oefening-kaart .kaart-title--2,
.oefening-kaart .kaart-desc--2 { background-color: var(--color-card-2); color: #fff; }
.oefening-kaart .kaart-flip-front--3,
.oefening-kaart .kaart-flip-back--3,
.oefening-kaart .kaart-title--3,
.oefening-kaart .kaart-desc--3 { background-color: var(--color-card-3); color: var(--color-card-dark); }

.oefening-kaart .kaart-title{
  font-size: 1.2rem;
  font-weight: 600;
  display: block;
  letter-spacing: 0.01em;
}

.oefening-kaart .kaart-desc{
  display: block;
  font-size: var(--card-desc-size);
  margin-bottom: 2px;
  line-height: 1.35;
  color: #5b7084;
  letter-spacing: 0.01em;
}

.oefening-kaart .kaart-desc--front{
  flex: 1 1 auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.oefening-kaart .exercise-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  /*border-top: 1px solid rgba(20, 33, 61, 0.08);*/
  flex-shrink: 0;
  padding-bottom:10px;
}

.oefening-kaart .exercise-tags span,
.oefening-kaart .exercise-tag{
  display: inline-flex;
  align-items: center;
  padding: 4px 0 0;
  border-radius: 999px;
  color: #5b7084;
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.oefening-kaart .exercise-tags .tag-icon,
.oefening-kaart .exercise-tag .tag-icon{
  width: 1.3em;
  height: 1.3em;
  display: inline-block;
  object-fit: contain;
  margin-right: 6px;
  flex-shrink: 0;
}

.oefening-kaart .kaart-desc--back{
  text-align: left;
}

.oefening-kaart .action-row{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
}

.oefening-kaart .play-btn,
.oefening-kaart .fav-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  border: none;
  box-shadow: 0 2px 8px rgba(75,189,255,0.12);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}

.oefening-kaart .play-btn__circle{ fill: #fff; }
.oefening-kaart .play-btn__poly{ fill: var(--color-primary); }
.oefening-kaart .play-btn:hover{ background: var(--color-primary-dark); }

.oefening-kaart .fav-btn__star{
  stroke: #fff;
  stroke-width: 2;
  fill: none;
  transition: fill 0.2s;
  transform: scale(0.8);
  transform-origin: center;
}
.oefening-kaart .fav-btn.filled .fav-btn__star{ fill: #fff; }
.oefening-kaart .fav-btn:hover{ background: var(--color-primary-dark); }
.oefening-kaart .fav-btn{
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.splatter-piece{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.6);
  pointer-events: none;
  width: 12px;
  height: 12px;
  animation: favSplatter 5s cubic-bezier(.2,.8,.2,1) forwards;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.14));
  opacity: 0.95;
  z-index: 1;
}
.splatter-round{ background: var(--splatter-color, #1da5ff); border-radius: 999px; }
.splatter-square{ background: var(--splatter-color, #0c6bc2); }
.splatter-ring{
  background: transparent;
  border: 3px solid var(--splatter-color, #0099e6);
  border-radius: 50%;
}
.splatter-star{
  background: var(--splatter-color, #006dd0);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
@keyframes favSplatter{
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.6); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) rotate(var(--rot, 0deg)) scale(0); filter: blur(1px); }
}

@media (max-width: 700px){
  .oefening-kaart{ margin-right: 12px; }
  .oefening-kaart .kaart-title{ margin-bottom: 4px; line-height: 1.2; }
  .oefening-kaart .kaart-desc{ line-height: 1.2; }
  .oefening-kaart .kaart-flip-front .kaart-desc{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .oefening-kaart .kaart-flip-back .kaart-desc,
  .oefening-kaart .kaart-flip-back .kaart-desc--back{
    display: block;
    -webkit-line-clamp: initial;
    line-clamp: initial;
    -webkit-box-orient: initial;
    overflow: visible;
  }
  .oefening-kaart .kaart-flip-back{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .oefening-kaart .exercise-tags{
    gap: 8px;
    margin-top: 6px;
    padding-top: 6px;
  }
  .oefening-kaart .exercise-tags span,
  .oefening-kaart .exercise-tag{
    font-size: 0.65rem;
  }
  .oefening-kaart .exercise-tags .tag-icon,
  .oefening-kaart .exercise-tag .tag-icon{
    width: 1.3em;
    height: 1.3em;
    margin-right: 4px;
  }
  .oefening-kaart .action-row{ gap: 12px; margin-top: 8px; }
  .oefening-kaart .play-btn,
  .oefening-kaart .fav-btn{ width: 38px; height: 38px; }
}

@media (hover: none) and (pointer: coarse){
  .oefening-kaart:hover .kaart-flip-inner{ transform: none; }
  .oefening-kaart.is-flipped .kaart-flip-inner{ transform: rotateY(180deg); }
}

/* Layout contexts for card containers */
.fullcat-grid .oefening-kaart{
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  height: var(--card-h);
  margin: 0 auto;
  box-shadow: var(--ok-shadow);
}
.fullcat-grid .kaart-flip-front{ padding: 0; }
.fullcat-grid .kaart-flip-back{ padding: var(--ok-pad); }

.oefeningen-kaarten > .oefening-kaart:last-child{ margin-right: 0; }

/* Oefeningoverzicht: keep card sizing consistent in #tab-meer */
#tab-meer .oefening-kaart{
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  height: var(--card-h);
  max-width: var(--card-w);
  min-width: var(--card-w);
  margin: 0;
}
@media (max-width: 700px){
  #tab-meer .oefening-kaart{ margin-right: 0; }
}
@media (max-width: 640px){
  #tab-meer .oefening-kaart{ margin-right: 0; }
}
/* =========================================================
   VARIANT: “voorbeeldkaart” look
   Zet op container: .oefeningen-kaarten--example
   of op kaart: .oefening-kaart--example
   ========================================================= */

/* Maak front een 2-rijen grid: header + featured strip */
.oefeningen-kaarten--example .oefening-kaart .kaart-flip-front,
.oefening-kaart.oefening-kaart--example .kaart-flip-front{
  display: grid;
  grid-template-rows: 1fr auto;


  /* Let op: je startpagina zet op front vaak een background-image inline.
     In deze variant “override” je dat bewust, omdat je het voorbeeld wil.
     Wil je sommige kaarten tóch met afbeelding behouden? Dan kun je dit
     weglaten of conditioneel maken met een extra modifier. */
  background-image: none !important;
}

.oefeningen-kaarten--example .oefening-kaart .kaart-flip-front .kaart-bottom,
.oefening-kaart.oefening-kaart--example .kaart-flip-front .kaart-bottom{
  background: transparent;
  margin: 0;
  padding: 0;
  border-radius: 0;
  grid-row: 1;
}

/* Blauwe header (bovenste deel) */
.oefeningen-kaarten--example .oefening-kaart .kaart-flip-front::before,
.oefening-kaart.oefening-kaart--example .kaart-flip-front::before{
  content:"";
  grid-row: 1;
  background: var(--ok-example-blue);
  box-shadow: inset 0 -4px 15px rgba(0,0,0,0.08);
}

/* Content-laag in header: positioneer tekst bovenop ::before */
.oefeningen-kaarten--example .oefening-kaart .kaart-title--front,
.oefeningen-kaarten--example .oefening-kaart .kaart-desc--front,
.oefening-kaart.oefening-kaart--example .kaart-title--front,
.oefening-kaart.oefening-kaart--example .kaart-desc--front{
  position: relative;
  z-index: 1;
  padding-left: var(--ok-pad);
  padding-right: var(--ok-pad);
  color: #ffffff;
}

/* Titel/subtitel spacing binnen header */
.oefeningen-kaarten--example .oefening-kaart .kaart-title--front,
.oefening-kaart.oefening-kaart--example .kaart-title--front{
  margin-top: 62px; /* ruimte voor “icoon + pill” */
  padding-top: 0;
  font-size: 1.35rem;
}

.oefeningen-kaarten--example .oefening-kaart .kaart-desc--front,
.oefening-kaart.oefening-kaart--example .kaart-desc--front{
  margin-top: 8px;
  font-size: 0.98rem;
  padding-bottom: 14px;
}

/* Icoon linksboven (cirkel) via pseudo-element */
.oefeningen-kaarten--example .oefening-kaart .kaart-flip-front::after,
.oefening-kaart.oefening-kaart--example .kaart-flip-front::after{
  content:"";
  position: absolute;
  top: 16px;
  left: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  z-index: 2;
}

/* “10+ tools” pill rechtsboven via extra pseudo-element op title */
.oefeningen-kaarten--example .oefening-kaart .kaart-title--front::after,
.oefening-kaart.oefening-kaart--example .kaart-title--front::after{
  content: attr(data-pill);
  position: absolute;
  top: -46px;      /* relatief t.o.v. title: komt bovenaan in header */
  right: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  white-space: nowrap;
}

/* Als er geen data-pill is gezet, toon niets */
.oefeningen-kaarten--example .oefening-kaart .kaart-title--front:not([data-pill])::after,
.oefening-kaart.oefening-kaart--example .kaart-title--front:not([data-pill])::after{
  content: "";
  display: none;
}

/* Bottom “featured tool” strip:
   we gebruiken de BACKGROUND van de front (grid-row 2) en zetten
   de front-description als featured pill? Nee: we maken een eigen “featured”
   blok via een element als je die hebt. Als je die nog niet hebt:
   - optie A: voeg één span toe in front met class .kaart-featured
   - optie B: zet featured tekst in data-featured op .oefening-kaart
   Hieronder support ik optie B (zonder markup wijziging). */

.oefeningen-kaarten--example .oefening-kaart .kaart-flip-front{
  position: relative;
}

/* featured container onderin */
.oefeningen-kaarten--example .oefening-kaart .kaart-flip-front .kaart-featured,
.oefening-kaart.oefening-kaart--example .kaart-flip-front .kaart-featured{
  display: none; /* alleen relevant als je later markup toevoegt */
}

.oefeningen-kaarten--example .oefening-kaart::before,
.oefening-kaart.oefening-kaart--example::before{
  /* we misbruiken geen ::before hier: dat is al header.
     Daarom doen we featured via een pseudo-element op .kaart-flip-front,
     maar ::after is al icoon. Dus: featured via ::marker? nee.
     Oplossing: featured via een extra pseudo-element op .kaart-desc--front. */
  content: none;
}

/* Featured pill via pseudo-element op front (op basis van data-featured op kaart) */
.oefeningen-kaarten--example .oefening-kaart[data-featured] .kaart-flip-front{
  padding-bottom: 60px; /* ruimte voor featured */
}

.oefeningen-kaarten--example .oefening-kaart[data-featured] .kaart-flip-front .kaart-desc--front::after,
.oefening-kaart.oefening-kaart--example[data-featured] .kaart-flip-front .kaart-desc--front::after{
  content: "Featured Tool : " attr(data-featured);
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: var(--ok-example-feature-bg);
  border-radius: 14px;
  padding: 10px 12px;
  color: rgba(30, 41, 51, 0.70);
  font-weight: 700;
  text-align: center;
}

/* Maak de “value” blauw: simpele truc door laatste deel te kleuren kan niet puur in CSS zonder markup.
   Als je dit wilt zoals het voorbeeld (label grijs, value blauw), voeg dan wél een klein featured element toe.
   Anders is dit een nette 1-regel variant zonder markup-wijziging. */

/* Mobiel compacter */
@media (max-width: 640px){
  .oefeningen-kaarten--example .oefening-kaart .kaart-title--front,
  .oefening-kaart.oefening-kaart--example .kaart-title--front{
    font-size: 1.1rem;
    margin-top: 58px;
  }
  .oefeningen-kaarten--example .oefening-kaart .kaart-desc--front,
  .oefening-kaart.oefening-kaart--example .kaart-desc--front{
    font-size: 0.85rem;
  }
  .oefeningen-kaarten--example .oefening-kaart .kaart-title--front::after,
  .oefening-kaart.oefening-kaart--example .kaart-title--front::after{
    font-size: 0.75rem;
    padding: 7px 10px;
  }
}

/* Pijltjes/chevrons in de kaart expliciet uit (als die ooit bestaan) */
.oefening-kaart .kaart-front-arrow,
.oefening-kaart .arrow,
.oefening-kaart .pijl,
.oefening-kaart .chevron,
.oefening-kaart .icon-arrow{
  display: none !important;
}