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

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

/* --------------------------------------
   ZOMERBANDEN  (sz-)
-------------------------------------- */
.sz-hero-bg {
  background: linear-gradient(135deg, #180d06 0%, #2a1208 40%, #3d1a0c 100%) !important;
}
.sz-overlay {
  background: radial-gradient(ellipse at 65% 50%, rgba(232,85,42,.18) 0%, transparent 65%) !important;
}
.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-hero-bg {
  background: linear-gradient(135deg, #050d1a 0%, #0a1628 40%, #0f1f38 100%) !important;
}
.wt-overlay {
  background: radial-gradient(ellipse at 65% 50%, rgba(37,99,235,.2) 0%, transparent 65%) !important;
}
.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-hero-bg {
  background: linear-gradient(135deg, #051409 0%, #0a2212 40%, #0f2e18 100%) !important;
}
.as-overlay {
  background: radial-gradient(ellipse at 65% 50%, rgba(5,150,105,.18) 0%, transparent 65%) !important;
}
.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
-------------------------------------- */
.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; }

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