/* ==============================================
   seizoen-stijl.css
   Gedeelde stijlen voor zomer / winter / all-season
   Laad altijd samen met banden-stijl.css

   NIET meer in deze file (zitten nu in hero-*.css):
     .sz-hero-bg, .sz-overlay
     .wt-hero-bg, .wt-overlay
     .as-hero-bg, .as-overlay
   ============================================== */

/* -- KLEUR VARIABELEN -- */
:root {
  --zomer:     #e8552a;
  --zomer-d:   #c94220;
  --winter:    #2563eb;
  --winter-d:  #1d4ed8;
  --allseas:   #059669;
  --allseas-d: #047857;
}


/* ----------------------------------------------
   ZOMERBANDEN  (sz-)
---------------------------------------------- */
.sz-seizoen-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(232,85,42,.15); border: 1px solid rgba(232,85,42,.35);
  border-radius: 100px; padding: 6px 14px;
  color: #ff7a5a; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 18px;
}
.sz-em         { color: var(--zomer) !important; }
.sz-ic         { color: var(--zomer) !important; }
.sz-span       { color: var(--zomer); }
.sz-btn        { background: var(--zomer) !important; border-color: var(--zomer) !important; }
.sz-btn:hover  { background: var(--zomer-d) !important; border-color: var(--zomer-d) !important; }
.sz-zoek-btn   { background: var(--zomer) !important; }
.sz-zoek-btn:hover { background: var(--zomer-d) !important; }
.sz-badge      { background: var(--zomer) !important; }
.sz-oog        { color: var(--zomer) !important; }
.sz-lijn       { background: var(--zomer) !important; }
.sz-icoon      { background: rgba(232,85,42,.12) !important; }
.sz-icoon i    { color: var(--zomer) !important; }
.sz-card       { border-top: 3px solid var(--zomer) !important; }
.sz-eindcta    { background: linear-gradient(135deg, #180d06 0%, #2a1208 55%, #3d1a0c 100%) !important; }
.sz-oog-cta    { background: rgba(232,85,42,.14) !important; border-color: rgba(232,85,42,.28) !important; color: #ff7a5a !important; }
.sz-em-cta     { color: var(--zomer) !important; }


/* ----------------------------------------------
   WINTERBANDEN  (wt-)
---------------------------------------------- */
.wt-seizoen-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(37,99,235,.15); border: 1px solid rgba(37,99,235,.35);
  border-radius: 100px; padding: 6px 14px;
  color: #7aadff; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 18px;
}
.wt-em         { color: #60a5fa !important; }
.wt-ic         { color: #60a5fa !important; }
.wt-span       { color: var(--winter); }
.wt-btn        { background: var(--winter) !important; border-color: var(--winter) !important; }
.wt-btn:hover  { background: var(--winter-d) !important; border-color: var(--winter-d) !important; }
.wt-zoek-btn   { background: var(--winter) !important; }
.wt-zoek-btn:hover { background: var(--winter-d) !important; }
.wt-badge      { background: var(--winter) !important; }
.wt-dot        { background: var(--winter) !important; }
.wt-oog        { color: var(--winter) !important; }
.wt-lijn       { background: var(--winter) !important; }
.wt-icoon      { background: rgba(37,99,235,.12) !important; }
.wt-icoon i    { color: var(--winter) !important; }
.wt-card       { border-top: 3px solid var(--winter) !important; }
.wt-uitgelicht { border-color: var(--winter) !important; box-shadow: 0 8px 30px rgba(37,99,235,.18) !important; }
.wt-btn-koop   { background: var(--winter) !important; }
.wt-btn-koop:hover { background: var(--winter-d) !important; }
.wt-usp-balk   { background: var(--winter) !important; }
.wt-eindcta    { background: linear-gradient(135deg, #050d1a 0%, #0a1628 55%, #0f1f38 100%) !important; }
.wt-oog-cta    { background: rgba(37,99,235,.14) !important; border-color: rgba(37,99,235,.28) !important; color: #7aadff !important; }
.wt-em-cta     { color: #60a5fa !important; }


/* ----------------------------------------------
   ALL-SEASON  (as-)
---------------------------------------------- */
.as-seizoen-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(5,150,105,.15); border: 1px solid rgba(5,150,105,.35);
  border-radius: 100px; padding: 6px 14px;
  color: #4ade80; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 18px;
}
.as-em         { color: #34d399 !important; }
.as-ic         { color: #34d399 !important; }
.as-span       { color: var(--allseas); }
.as-btn        { background: var(--allseas) !important; border-color: var(--allseas) !important; }
.as-btn:hover  { background: var(--allseas-d) !important; border-color: var(--allseas-d) !important; }
.as-zoek-btn   { background: var(--allseas) !important; }
.as-zoek-btn:hover { background: var(--allseas-d) !important; }
.as-badge      { background: var(--allseas) !important; }
.as-dot        { background: var(--allseas) !important; }
.as-oog        { color: var(--allseas) !important; }
.as-lijn       { background: var(--allseas) !important; }
.as-icoon      { background: rgba(5,150,105,.12) !important; }
.as-icoon i    { color: var(--allseas) !important; }
.as-uitgelicht { border-color: var(--allseas) !important; box-shadow: 0 8px 30px rgba(5,150,105,.18) !important; }
.as-btn-koop   { background: var(--allseas) !important; }
.as-btn-koop:hover { background: var(--allseas-d) !important; }
.as-usp-balk   { background: var(--allseas) !important; }
.as-eindcta    { background: linear-gradient(135deg, #051409 0%, #0a2212 55%, #0f2e18 100%) !important; }
.as-oog-cta    { background: rgba(5,150,105,.14) !important; border-color: rgba(5,150,105,.28) !important; color: #4ade80 !important; }
.as-em-cta     { color: #34d399 !important; }


/* ----------------------------------------------
   SEIZOEN INFO CARDS (alle seizoenen)
---------------------------------------------- */
.seizoen-info-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.seizoen-info-card {
  background: #fff; border-radius: 12px; padding: 26px 22px;
  border: 2px solid #e2e8f0; border-top-width: 3px; transition: all .2s;
}
.seizoen-info-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.08); }
.seizoen-info-icoon {
  width: 52px; height: 52px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.seizoen-info-icoon i { font-size: 1.3rem; }
.seizoen-info-titel {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem;
  font-weight: 900; text-transform: uppercase; color: #1a2740; margin-bottom: 8px;
}
.seizoen-info-tekst { font-size: .84rem; color: #4a5568; line-height: 1.65; }

/* All-season: goed/let-op variant */
.as-card-goed { border-top-color: var(--allseas) !important; }
.as-card-goed .seizoen-info-icoon { background: rgba(5,150,105,.12); }
.as-card-goed .seizoen-info-icoon i { color: var(--allseas); }
.as-card-let  { border-top-color: #f59e0b !important; }
.as-icoon-let {
  width: 52px; height: 52px; border-radius: 10px;
  background: rgba(245,158,11,.12);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.as-icoon-let i { color: #f59e0b; font-size: 1.3rem; }


/* -- RESPONSIVE ------------------------------- */
@media (max-width: 900px) { .seizoen-info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .seizoen-info-grid { grid-template-columns: 1fr; } }