/* Chinese Orgaanklok — tool-pagina in TTBB-huisstijl.
 * Transparante vlakken zodat de bergen/wolken-ambient doorschijnt (zoals de
 * Vijf Elementen-tool). Gebruikt de design-tokens uit _variables.css. */

.ck__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  margin: 0 0 var(--space-1);
}

/* ── Layout ────────────────────────────────────────────────────────── */
.ck__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-4);
}
@media (max-width: 860px) {
  .ck__grid { grid-template-columns: 1fr; }
}

.ck__wheel {
  position: sticky;
  top: calc(var(--header-height) + var(--space-3));
}
@media (max-width: 860px) {
  .ck__wheel { position: static; }
}

.ck__svg { width: 100%; height: auto; overflow: visible; }

/* ── Klok-segmenten ────────────────────────────────────────────────── */
.ck__seg { cursor: pointer; }
.ck__seg path {
  transition: filter var(--transition-fast), opacity var(--transition-fast);
}
.ck__seg:hover path { filter: brightness(1.07); }

/* Zodra er een segment gekozen is, dimmen de overige rustig weg. */
.ck--heeft-selectie .ck__seg:not(.ck__seg--actief) path { opacity: 0.42; }

.ck__seg--actief path {
  stroke-width: 3;
  filter: drop-shadow(0 4px 10px rgba(10, 36, 99, 0.30));
}

/* Het tijdvak van "nu": een zachte, opvallende gloed. */
.ck__seg--nu path {
  stroke: #fff;
  stroke-width: 3;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.9));
}

.ck__seg:focus { outline: none; }
.ck__seg:focus-visible path { stroke: var(--color-primary); stroke-width: 3; }

.ck__seg-tijd {
  fill: #fff;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-size: 0.72rem;
  dominant-baseline: middle;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ── Midden van de klok ────────────────────────────────────────────── */
.ck__center text { pointer-events: none; }
.ck__center-hint {
  fill: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.ck__center-naam {
  fill: var(--color-primary);
  font-family: var(--font-serif, "Roboto Slab", serif);
  font-weight: var(--font-weight-bold);
  font-size: 1.5rem;
}
.ck__center-tijd {
  fill: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.9rem;
}

/* ── Detailpaneel ──────────────────────────────────────────────────── */
.ck__detail {
  border: 1px solid rgba(10, 36, 99, 0.18);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: transparent;
  min-height: 320px;
}

.ck__detail-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.ck__dot {
  width: 20px; height: 20px; border-radius: 50%;
  flex: 0 0 auto;
}
.ck__detail-tijd {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-text);
  letter-spacing: 0.04em;
}
.ck__detail-naam {
  font-family: var(--font-serif, "Roboto Slab", serif);
  font-weight: var(--font-weight-bold);
  font-size: 1.5rem;
  color: var(--color-primary);
  line-height: 1.1;
}
.ck__detail-kop {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
}
.ck__detail-tekst { margin: 0 0 var(--space-3); }

.ck__tip {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  border: 1px solid rgba(10, 36, 99, 0.16);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.35);
  margin-bottom: var(--space-3);
}
.ck__tip-icoon { flex: 0 0 auto; font-size: 1.1rem; line-height: 1.4; }
.ck__tip-tekst { margin: 0; font-size: 0.95rem; }
.ck__tip-tekst strong { color: var(--color-primary); }

.ck__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.ck__meta-item { font-size: 0.9rem; }
.ck__meta-label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
}
.ck__meta-waarde { font-weight: var(--font-weight-medium); color: var(--color-text-strong); }

.ck__disclaimer {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 0.82rem;
  color: var(--color-text);
  font-style: italic;
}