/* dsc-categories.css
   ========================================================================== 
   Visuele laag voor <dsc-categories>:
   - Titel + responsive grid met categoriekaarten
   - Zelfde look & feel als de demo styles.css
   ========================================================================== */

.club-categories {
  padding: clamp(40px, 6vw, 80px) 20px;
  /* background: #fff; */
  position: relative;
  isolation: isolate; /* zorgt dat pseudo's achter de content blijven */
  overflow: hidden; /* randen netjes afsnijden */
  border-radius: 16px; /* afgeronde hoeken voor de hele sectie */
  --accent: #1a73e878; /* clubblauw */
  --decor-opacity: 0.075; /* subtielheid */
}

.club-categories .container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2; /* zorg dat content boven decor blijft */
}

.section-title {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  font-weight: 800;
  margin-bottom: clamp(18px, 3vw, 28px);
  margin-top: 0px;
  color: var(--ink, #0f172a);
  text-transform: none;
}

.category-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 20px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  border-color: rgba(26, 115, 232, 0.35);
}

.category-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.35), 0 6px 18px rgba(0, 0, 0, 0.12);
}

.category-card .icon {
  font-size: 2.2rem;
  color: var(--brand, #1a73e8);
}

/* Extra: image-variant voor media */
.category-card .thumb {
  width: 100%;
  aspect-ratio: 3 / 2;   /* mooie rechthoekige verhouding; pas desgewenst aan */
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.category-card h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: capitalize;
}

.category-card p {
  margin: 0;
  font-size: 0.95rem;
  color: #475569;
}

/* =========================================
   Decor achter de categories
   Kies met: .club-categories[data-decor="..."]
   ========================================= */

/* ===== Variant 1: Diagonaal schaakbord (board) ===== */
.club-categories[data-decor="board"]::before {
  content: "";
  position: absolute;
  inset: -20% -15% -20% -15%;
  z-index: 0;
  opacity: var(--decor-opacity);
  transform: rotate(-16deg) scale(1.25);
  background: repeating-conic-gradient(
      from 45deg,
      var(--accent) 0 25%,
      transparent 0 50%
    )
    0 0 / clamp(90px, 14vw, 160px) clamp(90px, 14vw, 160px);
  filter: saturate(1.05);
}

/* ===== Variant 2: Groot schaakstuk (piece) ===== */
.club-categories[data-decor="piece"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--decor-opacity);
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%231a73e8' stroke-width='2'>\
  <circle cx='12' cy='16' r='3'/>\
  <circle cx='24' cy='10' r='3'/>\
  <circle cx='32' cy='8'  r='3'/>\
  <circle cx='40' cy='10' r='3'/>\
  <circle cx='52' cy='16' r='3'/>\
  <path d='M12 19 L20 28'/>\
  <path d='M24 13 L24 28'/>\
  <path d='M32 11 L32 28'/>\
  <path d='M40 13 L40 28'/>\
  <path d='M52 19 L44 28'/>\
  <rect x='20' y='28' width='24' height='4' rx='2'/>\
  <path d='M22 32h20l-2 10H24l-2-10z'/>\
  <path d='M18 54h28c0-7-6-12-14-12s-14 5-14 12z'/>\
</svg>")
    no-repeat center/ min(60%, 680px);
}

/* ===== Variant 3: Combi – klein bord linksboven + stuk rechtsonder (duo) ===== */
.club-categories[data-decor="duo"]::before {
  content: "";
  position: absolute;
  top: -18%;
  left: -14%;
  width: 120vmin;
  height: 120vmin;
  z-index: 0;
  opacity: var(--decor-opacity);
  transform: rotate(-18deg);
  background: repeating-conic-gradient(
      from 45deg,
      var(--accent) 0 25%,
      transparent 0 50%
    )
    0 0 / clamp(80px, 12vw, 140px) clamp(80px, 12vw, 140px);
}
.club-categories[data-decor="duo"]::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -6%;
  width: min(48vw, 520px);
  height: min(48vw, 520px);
  z-index: 0;
  opacity: var(--decor-opacity);
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%231a73e8' stroke-width='2'>\
  <circle cx='12' cy='16' r='3'/>\
  <circle cx='24' cy='10' r='3'/>\
  <circle cx='32' cy='8'  r='3'/>\
  <circle cx='40' cy='10' r='3'/>\
  <circle cx='52' cy='16' r='3'/>\
  <path d='M12 19 L20 28'/>\
  <path d='M24 13 L24 28'/>\
  <path d='M32 11 L32 28'/>\
  <path d='M40 13 L40 28'/>\
  <path d='M52 19 L44 28'/>\
  <rect x='20' y='28' width='24' height='4' rx='2'/>\
  <path d='M22 32h20l-2 10H24l-2-10z'/>\
  <path d='M18 54h28c0-7-6-12-14-12s-14 5-14 12z'/>\
</svg>")
    no-repeat center/ contain;
}

/* ===== Responsiveness / toegankelijkheid ===== */
@media (max-width: 720px) {
  .club-categories[data-decor="board"]::before {
    transform: rotate(-14deg) scale(1.35);
  }
  .club-categories[data-decor="piece"]::before {
    background-size: min(78%, 640px);
  }
  .club-categories[data-decor="duo"]::before {
    width: 140vmin;
    height: 140vmin;
  }
  .club-categories[data-decor="duo"]::after {
    width: min(62vw, 460px);
    height: min(62vw, 460px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .club-categories::before,
  .club-categories::after {
    transition: none;
  }
}