/* ==========================================
   DARJA RIHLA — CLUSTER SHELL v1
   File: dr-clusters.css
   Role: Shared defaults for all cluster theme pages.
   Sits between dr-theme-page and per-cluster CSS in
   the enqueue waterfall.
   Provides ONLY: shared cluster page shell, layout
   primitives, and neutral accent token defaults.
   Does NOT force any individual cluster visual identity.
   Per-cluster colors/typography live in their own files:
   dr-theme-culture-identity.css, dr-cyber.css,
   dr-systems.css, dr-theme-philosophy.css,
   dr-health-performance.css, dr-page-lessen.css.
   Mobile-first throughout.
   ========================================== */

/* ==========================================
   1. CLUSTER ACCENT TOKEN DEFAULTS
   Neutral fallbacks — each cluster CSS file
   overrides these with its own identity.
   ========================================== */

:root {
  --dr-cluster-accent: var(--dr-cyan, #7ceaff);
  --dr-cluster-accent-2: var(--dr-gold, #c6a768);
  --dr-cluster-glow: rgba(124, 234, 255, 0.08);
  --dr-cluster-border: rgba(124, 234, 255, 0.12);
  --dr-cluster-surface: rgba(255, 255, 255, 0.04);
}

/* ==========================================
   2. CLUSTER PAGE SHELL
   WP block content resets for all cluster pages.
   Covers both old slug variants (e.g. culture-identity)
   and new slug variants (e.g. culture-and-identity)
   so the file works regardless of which live slug
   the WordPress database uses.
   ========================================== */

/* Culture & Identity — both slug variants */
body.dr-page-culture-identity .wp-block-post-content,
body.dr-page-culture-and-identity .wp-block-post-content,
/* Cybersecurity & Tech — both slug variants */
body.dr-page-cybersecurity-tech .wp-block-post-content,
body.dr-page-cybersecurity-and-tech .wp-block-post-content,
/* Systems & Strategy — all slug variants */
body.dr-page-systems-thinking-strategy .wp-block-post-content,
body.dr-page-systems-strategy .wp-block-post-content,
body.dr-page-systems-and-strategy .wp-block-post-content,
/* Philosophy & Legacy — both slug variants */
body.dr-page-philosophy-legacy .wp-block-post-content,
body.dr-page-philosophy-and-legacy .wp-block-post-content,
/* Health & Performance — both slug variants */
body.dr-page-health-performance .wp-block-post-content,
body.dr-page-health-and-performance .wp-block-post-content,
/* Education / Lessen hub */
body.dr-page-nederlandse-lessen .wp-block-post-content {
  width: 100%;
  max-width: 100%;
  padding-block: 0 4rem;
}

/* ==========================================
   3. CLUSTER SECTION FRAME
   Shared section wrapper used by all cluster pages.
   ========================================== */

.dr-cluster-section {
  position: relative;
  padding-block: clamp(2.5rem, 5.5vw, 5rem);
}

.dr-cluster-section--hero {
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2rem, 5vw, 4rem);
}

.dr-cluster-section--tight {
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
}

.dr-cluster-section + .dr-cluster-section {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ==========================================
   4. CLUSTER SHELL CONTAINER
   ========================================== */

.dr-cluster-shell {
  width: min(100% - 2rem, var(--dr-container-wide, 1360px));
  margin-inline: auto;
}

.dr-cluster-shell--narrow {
  width: min(100% - 2rem, 980px);
  margin-inline: auto;
}

/* ==========================================
   5. CLUSTER HEADER
   Shared header layout used across cluster pages.
   ========================================== */

.dr-cluster-header {
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.dr-cluster-header__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dr-cluster-accent);
  margin-bottom: var(--dr-space-4, 1rem);
}

.dr-cluster-header__kicker::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--dr-cluster-accent);
  box-shadow: 0 0 14px color-mix(in oklch, var(--dr-cluster-accent) 55%, transparent);
}

.dr-cluster-header__title {
  margin-bottom: var(--dr-space-4, 1rem);
  text-wrap: balance;
}

.dr-cluster-header__lead {
  max-width: 70ch;
  color: var(--dr-text-soft, #c9d7e3);
}

/* ==========================================
   6. CLUSTER CARD DEFAULTS
   Minimal shared card shell. Per-cluster files
   override colors and border treatments.
   ========================================== */

.dr-cluster-card {
  position: relative;
  padding: clamp(1rem, 2vw, 1.35rem);
  border-radius: var(--dr-radius-lg, 28px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--dr-cluster-border);
  box-shadow: var(--dr-shadow-sm, 0 10px 30px rgba(0, 0, 0, 0.18));
  transition:
    transform 280ms cubic-bezier(.22, .61, .36, 1),
    border-color 280ms cubic-bezier(.22, .61, .36, 1),
    box-shadow 280ms cubic-bezier(.22, .61, .36, 1);
}

.dr-cluster-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--dr-cluster-accent) 24%, rgba(255, 255, 255, 0.1));
  box-shadow: var(--dr-shadow-md, 0 18px 50px rgba(0, 0, 0, 0.24));
}

/* ==========================================
   7. CLUSTER GRID
   Shared grid layout. Per-cluster files may
   set column counts via custom properties.
   ========================================== */

.dr-cluster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.dr-cluster-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dr-cluster-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ==========================================
   8. CLUSTER POST-SIDE BODY CLASS DEFAULTS
   For single posts inside a cluster category.
   Body classes: dr-cluster-culture, dr-cluster-cyber,
   dr-cluster-systems, dr-cluster-philosophy.
   Only structural defaults here — color identity
   stays in dr-post-culture.css etc.
   ========================================== */

body.dr-cluster-culture,
body.dr-cluster-cyber,
body.dr-cluster-systems,
body.dr-cluster-philosophy {
  --dr-cluster-glow: rgba(124, 234, 255, 0.06);
}

/* ==========================================
   9. RESPONSIVE BREAKPOINTS
   ========================================== */

@media (min-width: 768px) {
  .dr-cluster-grid--2,
  .dr-cluster-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .dr-cluster-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}