/* ══════════════════════════════════════════════════════════
   Sportcafé Corlaer – Over Ons CSS v1.0
   ══════════════════════════════════════════════════════════ */
.co-page {
  --or:      #FD5904;
  --or-d:    #d44a03;
  --or-bg:   rgba(253,89,4,0.08);
  --or-rand: rgba(253,89,4,0.2);
  --zw:      #0a0a0a;
  --dn:      #111111;
  --dn2:     #191919;
  --dn3:     #222222;
  --wit:     #ffffff;
  --grijs:   #cccccc;
  --lgrijs:  #888888;
  --rand:    rgba(255,255,255,0.08);
  --r:       8px;
  --max:     1100px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--wit);
  background: var(--zw);
  line-height: 1.6;
}
.co-page *, .co-page *::before, .co-page *::after { box-sizing: border-box; }
.co-page a { color: inherit; text-decoration: none; }
.co-or { color: var(--or); }

.co-container { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1rem,4vw,2.5rem); }

/* ── Knoppen ── */
.co-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--or); color: #fff; border: none;
  border-radius: 6px; padding: .65rem 1.4rem;
  font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: background .18s, transform .15s;
  white-space: nowrap; text-decoration: none; margin-top: .75rem;
}
.co-btn:hover { background: var(--or-d); transform: translateY(-1px); color: #fff; }
.co-btn-ghost {
  background: transparent; color: var(--wit);
  border: 1.5px solid rgba(255,255,255,0.2);
}
.co-btn-ghost:hover { border-color: var(--or); color: var(--or); }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.co-hero {
  position: relative; background: var(--zw); overflow: hidden;
}
.co-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 65% 15%, rgba(253,89,4,0.13) 0%, transparent 65%),
    radial-gradient(ellipse 50% 35% at 15% 75%, rgba(253,89,4,0.07) 0%, transparent 60%);
}
.co-hero-inner {
  position: relative; z-index: 1; max-width: var(--max); margin: 0 auto;
  padding: clamp(3.5rem,8vw,6rem) clamp(1rem,4vw,2.5rem) clamp(2.5rem,5vw,4rem);
}
.co-hero-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50px; padding: .35rem .9rem;
  font-size: .75rem; letter-spacing: .08em; color: var(--grijs); margin-bottom: 1.5rem;
}
.co-h1 {
  font-size: clamp(2.6rem,7vw,5.5rem); font-weight: 900;
  line-height: 1; letter-spacing: -.02em; margin-bottom: 1.1rem;
  color: var(--wit); text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.co-hero-sub {
  font-size: clamp(.92rem,1.4vw,1.05rem); color: var(--lgrijs);
  max-width: 560px; line-height: 1.7;
}
.co-stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); margin-top: .5rem;
}
.co-stat { padding: 1.4rem clamp(.75rem,2vw,1.5rem); text-align: center; border-right: 1px solid var(--rand); }
.co-stat:last-child { border-right: none; }
.co-stat strong { display: block; font-size: clamp(1.6rem,3.5vw,2.4rem); font-weight: 900; color: var(--or); line-height: 1; margin-bottom: .25rem; }
.co-stat span   { font-size: .72rem; color: var(--lgrijs); letter-spacing: .06em; text-transform: uppercase; }

/* ══════════════════════════════════════
   SECTIES
══════════════════════════════════════ */
.co-sectie { padding: clamp(3rem,6vw,5rem) 0; border-top: 1px solid var(--rand); }
.co-sectie-donker { background: var(--dn2); }
.co-sectie-kop { text-align: center; margin-bottom: 2.5rem; }
.co-label {
  display: inline-block; background: var(--or-bg); border: 1px solid var(--or-rand);
  color: var(--or); font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: .28rem .85rem; border-radius: 50px; margin-bottom: .85rem;
}
.co-sectie-kop h2 { font-size: clamp(1.6rem,3.5vw,2.6rem); font-weight: 900; margin-bottom: .6rem; line-height: 1.15; color: var(--wit); text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.co-sectie-kop p  { font-size: .95rem; color: var(--lgrijs); max-width: 580px; margin: 0 auto; line-height: 1.7; }

/* ══════════════════════════════════════
   TEKST BLOK
══════════════════════════════════════ */
.co-tekst-blok {
  max-width: 760px; margin: 0 auto;
  background: var(--dn2); border: 1px solid var(--rand);
  border-radius: var(--r); padding: 2rem 2.25rem;
}
.co-tekst-blok p { color: var(--grijs); font-size: .97rem; line-height: 1.8; margin-bottom: 1rem; }
.co-tekst-blok p:last-child { margin-bottom: 0; }
.co-tekst-blok strong { color: var(--wit); }

/* ══════════════════════════════════════
   KERNWAARDEN
══════════════════════════════════════ */
.co-waarden-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 1.25rem;
}
.co-waarde {
  background: var(--dn3); border: 1px solid var(--rand);
  border-radius: var(--r); padding: 1.5rem;
  transition: border-color .2s, transform .2s;
}
.co-waarde:hover { border-color: var(--or-rand); transform: translateY(-3px); }
.co-waarde-icon { font-size: 2rem; margin-bottom: .75rem; }
.co-waarde h3 { font-size: 1rem; font-weight: 800; margin-bottom: .5rem; color: var(--wit); letter-spacing: .02em; }
.co-waarde p  { font-size: .85rem; color: var(--lgrijs); line-height: 1.6; margin: 0; }

/* ══════════════════════════════════════
   TEAM
══════════════════════════════════════ */
.co-team-grid-2 {
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
}
.co-team-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.co-team-kaart {
  display: flex; gap: 1.25rem; align-items: flex-start;
  background: var(--dn2); border: 1px solid var(--rand);
  border-radius: var(--r); padding: 1.5rem;
  transition: border-color .2s;
}
.co-team-kaart:hover { border-color: var(--or-rand); }

.co-team-avatar {
  width: 52px; height: 52px; flex-shrink: 0;
  background: var(--or-bg); border: 2px solid var(--or-rand);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 800; color: var(--or); letter-spacing: .05em;
}
.co-team-body { flex: 1; }
.co-team-naam { font-size: 1.05rem; font-weight: 800; color: var(--wit); margin-bottom: .2rem; letter-spacing: .01em; }
.co-team-rol  { font-size: .75rem; font-weight: 600; color: var(--or); letter-spacing: .05em; text-transform: uppercase; margin-bottom: .75rem; }
.co-team-body p { font-size: .85rem; color: var(--grijs); line-height: 1.65; margin-bottom: .75rem; }
.co-team-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.co-team-tags span {
  background: var(--or-bg); border: 1px solid var(--or-rand);
  color: var(--or); font-size: .68rem; font-weight: 700;
  padding: .18rem .6rem; border-radius: 50px; letter-spacing: .06em;
}

/* ══════════════════════════════════════
   AANBOD
══════════════════════════════════════ */
.co-aanbod-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 1rem;
}
.co-aanbod-item {
  background: var(--dn3); border: 1px solid var(--rand);
  border-radius: var(--r); padding: 1.25rem;
  transition: border-color .2s, transform .2s;
}
.co-aanbod-item:hover { border-color: var(--or-rand); transform: translateY(-2px); }
.co-aanbod-icon { font-size: 1.75rem; display: block; margin-bottom: .65rem; }
.co-aanbod-item h4 { font-size: .88rem; font-weight: 800; color: var(--wit); margin-bottom: .4rem; letter-spacing: .04em; text-transform: uppercase; }
.co-aanbod-item p  { font-size: .82rem; color: var(--lgrijs); line-height: 1.6; margin: 0; }

/* ══════════════════════════════════════
   LOCATIE
══════════════════════════════════════ */
.co-locatie-grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 4rem; align-items: center;
}
.co-locatie-links .co-label { margin-bottom: 1rem; }
.co-locatie-links h2 { font-size: clamp(1.8rem,3vw,2.6rem); font-weight: 900; line-height: 1.1; margin-bottom: 1rem; color: var(--wit); text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.co-locatie-links > p { font-size: .92rem; color: var(--lgrijs); margin-bottom: 1.75rem; }
.co-locatie-items { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }
.co-locatie-item {
  display: flex; align-items: flex-start; gap: .9rem;
  background: var(--dn2); border: 1px solid var(--rand);
  border-radius: var(--r); padding: .85rem 1rem;
  transition: border-color .18s;
}
.co-locatie-item:hover { border-color: var(--or-rand); }
.co-loc-icon {
  font-size: 1rem; width: 36px; height: 36px; flex-shrink: 0;
  background: var(--or-bg); border: 1px solid var(--or-rand);
  border-radius: 7px; display: flex; align-items: center; justify-content: center;
}
.co-locatie-item div { display: flex; flex-direction: column; gap: .15rem; }
.co-locatie-item strong { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--or); }
.co-locatie-item span, .co-locatie-item a { font-size: .88rem; color: var(--grijs); }
.co-locatie-item a:hover { color: var(--or); }

.co-cta-kaart {
  background: var(--dn2); border: 1px solid var(--or-rand);
  border-radius: var(--r); padding: 2.5rem 2rem; text-align: center;
  position: relative; overflow: hidden;
}
.co-cta-kaart::before {
  content: '';
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(253,89,4,.1) 0%, transparent 70%);
  pointer-events: none;
}
.co-cta-icon { font-size: 2.5rem; display: block; margin-bottom: 1rem; }
.co-cta-kaart h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: .75rem; color: var(--wit); }
.co-cta-kaart p  { font-size: .88rem; color: var(--lgrijs); line-height: 1.7; margin-bottom: .5rem; }
.co-cta-kaart .co-btn { width: 100%; justify-content: center; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

/* Tablet */
@media (max-width: 900px) {
  .co-team-grid,
  .co-team-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
  .co-locatie-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Mobiel */
@media (max-width: 600px) {
  /* Hero stats */
  .co-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .co-stat { border-bottom: 1px solid var(--rand); }

  /* Team kaarten: 1 kolom, verticaal gestapeld */
  .co-team-grid,
  .co-team-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .co-team-kaart {
    flex-direction: column;
  }

  /* Kernwaarden: 1 kolom */
  .co-waarden-grid { grid-template-columns: 1fr; }

  /* Aanbod: 1 kolom */
  .co-aanbod-grid  { grid-template-columns: 1fr; }

  /* Tekst blok */
  .co-tekst-blok { padding: 1.25rem 1rem; }

  /* Contact knoppen */
  .co-contact-inner { flex-direction: column; text-align: center; }
  .co-contact-btns  { justify-content: center; }
}