/* ========================================
   STRIPPENKAART — [strippenkaart]
   Pakketten met windvaan-icoon. Per weercode wappert
   de vaan harder (groen = licht, rood = storm).
   Data: ACF Options-pagina "Strippenkaart".
   ======================================== */

.scr-strip {
  /* Alles direct uit Elementor Global Colors — één bron van waarheid voor brand-kleuren. */
  --scr-strip-card-bg:   var(--e-global-color-secondary);   /* outer cards   = #F9FAFB */
  --scr-strip-card-feat: var(--e-global-color-accent);      /* featured card = #FFFFFF */
  --scr-strip-ink:       var(--e-global-color-text);        /* body tekst    = #1A1714 */
  --scr-strip-muted:     var(--e-global-color-4202eaa);     /* muted tekst   = #6B7280 */
  --scr-strip-line:      oklch(0.88 0.008 30);              /* neutrale lijn-kleur (geen brand) */
  --scr-strip-accent:    var(--e-global-color-primary);     /* brand-rood    = #EB0023 */
  --scr-strip-soft:      var(--e-global-color-bd26511);     /* soft pink     = #FEF2F4 */
  --scr-strip-radius:    20px;

  /* Code-kleuren — Elementor globals voor groen/oranje, brand-rood voor Rood */
  --scr-code-groen:  var(--e-global-color-823dd4d);         /* #2ECC71 */
  --scr-code-geel:   var(--e-global-color-823dd4d);         /* fallback naar groen */
  --scr-code-oranje: var(--e-global-color-24670f6);         /* #E67E22 */
  --scr-code-rood:   var(--scr-strip-accent);               /* = primary brand-rood */

  position: relative;
  width: 100%;
  color: var(--scr-strip-ink);
  /* Outer wrapper heeft géén eigen achtergrond — de Elementor-sectie eromheen verzorgt dat */
}

/* Elementor flex-container fix */
.elementor-widget-shortcode:has(.scr-strip),
.elementor-widget-shortcode:has(.scr-strip) .elementor-widget-container,
.elementor-widget-shortcode:has(.scr-strip) .elementor-shortcode {
  width: 100%;
}

/* ── Head ───────────────────────────────────────────── */
.scr-strip__head {
  text-align: center;
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  max-width: 56ch;
}

.scr-strip__title {
  font-family: var(--e-global-typography-primary-font-family, 'Lexend'), sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  color: var(--scr-strip-ink);
}

.scr-strip__intro {
  font-family: var(--e-global-typography-text-font-family, 'Work Sans'), sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  color: var(--scr-strip-muted);
  margin: 0;
}

/* ── Grid ───────────────────────────────────────────── */
.scr-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  align-items: stretch;
}

/* ── Card ───────────────────────────────────────────── */
.scr-strip__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--scr-strip-card-bg);
  border-radius: var(--scr-strip-radius);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.4s ease;
  overflow: visible;
  isolation: isolate;
}

.scr-strip__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -20px color-mix(in oklab, var(--scr-strip-ink) 20%, transparent);
}

/* Featured — uitgelicht pakket */
.scr-strip__card--featured {
  background: var(--scr-strip-card-feat);
  box-shadow: 0 18px 40px -18px color-mix(in oklab, var(--scr-strip-ink) 18%, transparent);
  transform: translateY(-8px);
  padding-top: clamp(2rem, 3.2vw, 2.5rem);
}

.scr-strip__card--featured:hover {
  transform: translateY(-12px);
  box-shadow: 0 26px 56px -20px color-mix(in oklab, var(--scr-strip-accent) 22%, transparent);
}

/* Badge — "Meest gekozen" met ster */
.scr-strip__badge {
  position: absolute;
  top: -14px;
  left: 1.25rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--e-global-typography-text-font-family, 'Work Sans'), sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0px 10px 0 10px;
  background: var(--scr-strip-accent);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 14px -6px color-mix(in oklab, var(--scr-strip-accent) 50%, transparent);
}

.scr-strip__badge-star {
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  color: #fff;
}

/* ── Windvaan + mast (rechts in de mid-zone, gespiegeld) ─── */
.scr-strip__sock-wrap {
  /* Vaan-grootte (SVG-breedte).
     clamp(min, vw-preferred, max) — vw-waarde scoort tussen min en max op normale viewports:
       320px viewport → 3vw = 9.6 → clamp naar min 32px
       1100px viewport → 3vw = 33px (in range)
       1280px viewport → 3vw = 38.4 → clamp naar max 38px */
  --vaan-w: clamp(32px, 3vw, 38px);
  /* Vaan-hoogte volgt SVG-aspect (42:102.4 ≈ 1:2.44) */
  --vaan-h: calc(var(--vaan-w) * 2.44);
  /* Mast-dikte */
  --mast-w: 2px;
  /* Verschuiving van de SVG zodat cone-body niet links uit de doos valt op 0° */
  --left-pad: calc(var(--vaan-w) / 2 - var(--mast-w) / 2);

  position: relative;
  z-index: 1;
  flex-shrink: 0;
  /* Vaste afmetingen — net groot genoeg voor horizontale vaan op -80° */
  width: calc(var(--left-pad) + var(--vaan-h) + 4px);
  height: var(--vaan-h);
  /* Mast + vaan altijd brand-rood, ook bij Code Groen/Oranje cards */
  color: var(--scr-strip-accent);
  overflow: visible;
  /* Spiegelen — mast komt nu aan de rechterkant, cone wijst naar de prijs (links) */
  transform: scaleX(-1);
}

/* De mast — verticale lijn waar de vaan aan hangt (volgt wrapper-hoogte) */
.scr-strip__sock-wrap::before {
  content: '';
  position: absolute;
  left: var(--left-pad);
  top: 0;
  width: var(--mast-w);
  height: 100%;
  background: currentColor;
  border-radius: var(--mast-w);
}

/* Kleine knop bovenop de mast */
.scr-strip__sock-wrap::after {
  content: '';
  position: absolute;
  left: calc(var(--left-pad) - 2px);
  top: -3px;
  width: calc(var(--mast-w) + 4px);
  height: calc(var(--mast-w) + 4px);
  background: currentColor;
  border-radius: 50%;
}

.scr-strip__svg {
  position: absolute;
  /* SVG positioneren zodat de cone-tip (SVG-coord 21,0.5) exact op de mast-top valt */
  left: calc(var(--left-pad) + var(--mast-w) / 2 - var(--vaan-w) / 2);
  top: 0;
  width: var(--vaan-w);
  height: var(--vaan-h);
  display: block;
  overflow: visible;
  z-index: 2;
}

/* Vaan group — draait om de cone-tip (21, 0.5 in viewBox) */
.scr-strip__vaan {
  transform-box: view-box;
  transform-origin: 21px 0.5px;
  will-change: transform;
}

/* Tier 1 — Groen (licht briesje). Hangt vrijwel stil */
.scr-strip__card--tier-1 .scr-strip__vaan {
  animation: scr-vaan-light 5s ease-in-out infinite;
}

/* Tier 2 — Oranje/Geel (stevige wind). Halverwege gekanteld */
.scr-strip__card--tier-2 .scr-strip__vaan {
  animation: scr-vaan-medium 3.6s ease-in-out infinite;
}

/* Tier 3 — Rood (storm). Bijna horizontaal */
.scr-strip__card--tier-3 .scr-strip__vaan {
  animation: scr-vaan-strong 2.4s ease-in-out infinite;
}

/* Hoeken matchen de live site: -10°, -45°, -80°
   Negatieve rotatie t.o.v. mast = wind van links blaast vaan naar links/rechts */
@keyframes scr-vaan-light {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(-14deg); }
}

@keyframes scr-vaan-medium {
  0%, 100% { transform: rotate(-40deg); }
  50%      { transform: rotate(-52deg); }
}

@keyframes scr-vaan-strong {
  0%, 100% { transform: rotate(-72deg); }
  35%      { transform: rotate(-86deg); }
  70%      { transform: rotate(-78deg); }
}

/* ── Header (top zone) ──────────────────────────────── */
.scr-strip__header {
  position: relative;
  z-index: 1;
}

/* ── Mid (prijs links, vaan rechts) ─────────────────── */
.scr-strip__mid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0;
  padding: clamp(0.5rem, 1vw, 1rem) 0 clamp(1rem, 2vw, 1.5rem);
  margin-top: auto;
}

/* Code-naam — klein, kleurig, subtiel.
   Compound selector + !important nodig om Elementor's default h3-styling te overrulen. */
.scr-strip .scr-strip__card .scr-strip__naam,
.scr-strip .scr-strip__card h3.scr-strip__naam {
  font-family: var(--e-global-typography-text-font-family, 'Work Sans'), sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(0.72rem, 0.85vw, 0.8rem) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin: 0 0 0.35rem !important;
  line-height: 1.2 !important;
  color: var(--card-accent) !important;
}

/* Card-accent: kleur volgt de weercode. Wordt gebruikt voor naam, vaan, mast en CTA.
   BELANGRIJK — default eerst, dan de code-specifieke overrides. Bij gelijke specificiteit
   wint de laatst gedeclareerde regel, dus default moet bovenaan staan. */
.scr-strip__card { --card-accent: var(--scr-strip-accent); }

.scr-strip__card--code-groen  { --card-accent: var(--scr-code-groen); }
.scr-strip__card--code-geel   { --card-accent: var(--scr-code-geel); }
.scr-strip__card--code-oranje { --card-accent: var(--scr-code-oranje); }
.scr-strip__card--code-rood   { --card-accent: var(--scr-code-rood); }

.scr-strip__uren {
  font-family: var(--e-global-typography-primary-font-family, 'Lexend'), sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 4.5vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--scr-strip-ink);
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
}

.scr-strip__uren span {
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--scr-strip-ink);
  opacity: 0.85;
}

.scr-strip__label {
  font-family: var(--e-global-typography-text-font-family, 'Work Sans'), sans-serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--scr-strip-muted);
  margin: 0.5rem 0 1rem;
  line-height: 1.4;
}

/* ── Prijs (in mid-zone, naast vaan) ────────────────── */
.scr-strip__prijs {
  flex: 1;
  min-width: 0;
}

.scr-strip__prijs-totaal {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.scr-strip__prijs-was {
  font-family: var(--e-global-typography-text-font-family, 'Work Sans'), sans-serif;
  font-size: 0.9rem;
  color: var(--scr-strip-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in oklab, var(--scr-strip-accent) 70%, transparent);
}

.scr-strip__prijs-nu {
  font-family: var(--e-global-typography-primary-font-family, 'Lexend'), sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  letter-spacing: -0.02em;
  color: var(--scr-strip-ink);
  line-height: 1;
}

.scr-strip__prijs-uur {
  font-family: var(--e-global-typography-text-font-family, 'Work Sans'), sans-serif;
  font-size: 0.85rem;
  color: var(--scr-strip-muted);
  margin-top: 0.35rem;
}

.scr-strip__beschrijving {
  font-family: var(--e-global-typography-text-font-family, 'Work Sans'), sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--scr-strip-muted);
  margin-top: 0.75rem;
}

.scr-strip__beschrijving p { margin: 0 0 0.5rem; }
.scr-strip__beschrijving p:last-child { margin: 0; }

/* ── CTA (full-width onderaan) ──────────────────────── */
.scr-strip__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--e-global-typography-text-font-family, 'Work Sans'), sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--card-accent);
  text-decoration: none;
  background: transparent;
  border: 1.5px solid var(--card-accent);
  border-radius: 999px;
  transition: background 0.25s ease,
              color 0.25s ease,
              transform 0.25s ease;
  text-align: center;
}

.scr-strip__cta::after {
  content: '\2192';
  display: inline-block;
  transition: transform 0.25s ease;
}

.scr-strip__cta:hover {
  background: var(--card-accent);
  color: #fff;
}

.scr-strip__cta:hover::after {
  transform: translateX(3px);
}

.scr-strip__cta:focus-visible {
  outline: 2px solid var(--card-accent);
  outline-offset: 3px;
}

/* Featured CTA — solid filled */
.scr-strip__card--featured .scr-strip__cta {
  background: var(--card-accent);
  color: #fff;
}

.scr-strip__card--featured .scr-strip__cta:hover {
  background: oklch(from var(--card-accent) calc(l - 0.06) c h);
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 720px) {
  .scr-strip__card--featured {
    transform: none;
  }
  .scr-strip__card--featured:hover {
    transform: translateY(-3px);
  }
}

/* ── Footer — trust-items onder de cards ────────────── */
.scr-strip__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--scr-strip-line);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.scr-strip__footer-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--e-global-typography-text-font-family, 'Work Sans'), sans-serif;
  font-size: 0.9rem;
  color: var(--scr-strip-ink);
}

.scr-strip__footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--scr-strip-accent);
  opacity: 0.85;
}

.scr-strip__footer-icon svg {
  width: 100%;
  height: 100%;
}

/* Smalle viewports — mid-zone heeft te weinig ruimte voor vaan + prijs naast elkaar */
@media (max-width: 440px) {
  .scr-strip__mid {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .scr-strip__card--tier-1 .scr-strip__vaan,
  .scr-strip__card--tier-2 .scr-strip__vaan,
  .scr-strip__card--tier-3 .scr-strip__vaan {
    animation: none;
  }
  .scr-strip__card--tier-1 .scr-strip__vaan { transform: rotate(-10deg); }
  .scr-strip__card--tier-2 .scr-strip__vaan { transform: rotate(-45deg); }
  .scr-strip__card--tier-3 .scr-strip__vaan { transform: rotate(-80deg); }

  .scr-strip__card,
  .scr-strip__card--featured,
  .scr-strip__cta {
    transition: none;
  }
}