/* ═══════════════════════════════════════════════════════════════
   DARJA RIHLA · dr-post-philosophy.css
   Philosophy & Legacy + Doctrine category post overrides
   Palette: deep parchment · cardinal ink · old gold · bone ivory
   Loaded after dr-single-post.css — overrides only what differs
   ═══════════════════════════════════════════════════════════════ */

/* ── ROOT TOKEN OVERRIDES ── */
.dr-cluster-philosophy {
  --dr-bg:           #0e0a0b;
  --dr-bg-alt:       #130d0e;
  --dr-panel:        rgba(26, 14, 10, 0.88);
  --dr-panel-strong: rgba(18, 10, 8, 0.96);
  --dr-border:       rgba(196, 147, 63, 0.18);
  --dr-border-soft:  rgba(196, 147, 63, 0.11);
  --dr-gold:         #c4933f;
  --dr-gold-2:       #d4a85a;
  --dr-cyan:         #c4933f;       /* replaces cyan with gold on philosophy */
  --dr-cyan-2:       #d4a85a;
  --dr-accent:       #d9bb8a;
  --dr-accent-2:     #f4d7a1;
  --dr-heading:      #f0e8d8;
  --dr-text:         #e8ddd0;
  --dr-text-soft:    #c4b8a4;
  --dr-text-muted:   #9a8a78;
  --dr-shadow-sm:    0 8px 28px rgba(0, 0, 0, 0.32);
  --dr-shadow-md:    0 18px 52px rgba(0, 0, 0, 0.40);
  --dr-shadow-lg:    0 28px 80px rgba(0, 0, 0, 0.48);
  --dr-gold-07:      rgba(196, 147, 63, 0.07);
  --dr-gold-10:      rgba(196, 147, 63, 0.10);
  --dr-gold-16:      rgba(196, 147, 63, 0.16);
  --dr-gold-28:      rgba(196, 147, 63, 0.28);
}

/* ── PAGE BACKGROUND ── */
body.dr-cat-philosophy-legacy,
body.dr-cat-doctrine,
body.category-philosophy-legacy,
body.category-doctrine {
  background:
    radial-gradient(circle at 18% 8%,  rgba(139, 31, 46, 0.09), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(196, 147, 63, 0.07), transparent 22%),
    radial-gradient(circle at 50% 85%, rgba(92, 26, 34, 0.06),  transparent 32%),
    linear-gradient(180deg, #0e0a0b 0%, #130d0e 55%, #0a0708 100%);
}

/* Fine manuscript grid overlay */
body.dr-cat-philosophy-legacy::before,
body.dr-cat-doctrine::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(196, 147, 63, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 147, 63, 0.016) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: 0.5;
}

/* ── POST HEADER ── */
.dr-cluster-philosophy .dr-post-header {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(139, 31, 46, 0.14) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 20%, rgba(196, 147, 63, 0.10) 0%, transparent 38%),
    linear-gradient(180deg, rgba(26, 14, 10, 0.92), rgba(14, 10, 11, 0.82));
  border-color: rgba(196, 147, 63, 0.16);
}

/* Gold top accent line */
.dr-cluster-philosophy .dr-post-header::before {
  background: linear-gradient(90deg,
    transparent,
    rgba(196, 147, 63, 0.70) 30%,
    rgba(196, 147, 63, 0.90) 50%,
    rgba(196, 147, 63, 0.70) 70%,
    transparent
  );
}

/* ── KICKER / LABEL ── */
.dr-cluster-philosophy .dr-post-kicker,
.dr-cluster-philosophy .dr-section-label,
.dr-cluster-philosophy .dr-label {
  color: var(--dr-gold-2);
  letter-spacing: 0.20em;
}

/* ── LINKS ── */
.dr-cluster-philosophy .dr-post a {
  color: var(--dr-gold-2);
  border-bottom-color: rgba(196, 147, 63, 0.28);
}

.dr-cluster-philosophy .dr-post a:hover {
  color: var(--dr-heading);
  border-bottom-color: rgba(196, 147, 63, 0.60);
}

/* ── SECTIONS ── */
.dr-cluster-philosophy .dr-post-section {
  background:
    linear-gradient(180deg, rgba(26, 14, 10, 0.82), rgba(14, 10, 11, 0.72));
  border-color: rgba(196, 147, 63, 0.14);
  border-left: 1px solid rgba(196, 147, 63, 0.14);
}

.dr-cluster-philosophy .dr-post-section::before {
  background: linear-gradient(180deg, var(--dr-gold), rgba(196, 147, 63, 0.20));
}

/* ── CONTENT BLOCKS ── */
.dr-cluster-philosophy .dr-takeaway {
  border-left: 4px solid var(--dr-gold);
  background:
    radial-gradient(circle at 0% 0%, rgba(196, 147, 63, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(26, 14, 10, 0.90), rgba(14, 10, 11, 0.82));
}

.dr-cluster-philosophy .dr-definition {
  border-left: 4px solid rgba(196, 147, 63, 0.55);
  background:
    linear-gradient(180deg, rgba(196, 147, 63, 0.05), rgba(14, 10, 11, 0.72));
}

.dr-cluster-philosophy .dr-why-matters {
  border-left: 4px solid var(--dr-accent-2);
  background:
    linear-gradient(180deg, rgba(212, 168, 90, 0.07), rgba(14, 10, 11, 0.80));
}

.dr-cluster-philosophy .dr-warning {
  border-left: 4px solid rgba(139, 31, 46, 0.70);
  background:
    linear-gradient(180deg, rgba(139, 31, 46, 0.10), rgba(14, 10, 11, 0.80));
  border-color: rgba(139, 31, 46, 0.22);
}

.dr-cluster-philosophy .dr-quote {
  border-left: 4px solid var(--dr-gold);
  background:
    linear-gradient(135deg, rgba(26, 12, 8, 0.94), rgba(44, 28, 14, 0.78));
  border-color: rgba(196, 147, 63, 0.20);
}

.dr-cluster-philosophy .dr-sources,
.dr-cluster-philosophy .dr-post-cta,
.dr-cluster-philosophy .dr-related-reading {
  background:
    linear-gradient(180deg, rgba(26, 14, 10, 0.88), rgba(14, 10, 11, 0.76));
  border-color: rgba(196, 147, 63, 0.14);
}

/* ── CTA BUTTON ── */
.dr-cluster-philosophy .dr-post-cta-btn,
.dr-cluster-philosophy .dr-btn {
  border-color: rgba(196, 147, 63, 0.30);
  background: rgba(196, 147, 63, 0.10);
  color: var(--dr-heading);
}

.dr-cluster-philosophy .dr-post-cta-btn:hover,
.dr-cluster-philosophy .dr-btn:hover {
  border-color: rgba(196, 147, 63, 0.60);
  background: rgba(196, 147, 63, 0.18);
  box-shadow: 0 8px 24px rgba(196, 147, 63, 0.14);
}

/* ── FLIP CARDS — FULL PHILOSOPHY OVERRIDE ── */

/* Timeline: responsive grid */
.dr-cluster-philosophy .dr-timeline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-top: 28px;
}

@media (max-width: 640px) {
  .dr-cluster-philosophy .dr-timeline {
    grid-template-columns: 1fr;
  }
}

/* Card base */
.dr-cluster-philosophy .dr-flip-card {
  display: block;
  min-height: 420px;
  height: auto;
  perspective: 1200px;
  overflow: visible;
  cursor: pointer;
}

/* Remove the cyan shimmer, replace with gold */
.dr-cluster-philosophy .dr-flip-card::before {
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(196, 147, 63, 0.12) 50%,
    transparent 70%
  );
}

/* Flip inner container */
.dr-cluster-philosophy .dr-flip-inner {
  position: relative;
  width: 100%;
  min-height: 420px;
  transform-style: preserve-3d;
  transition: transform 0.55s ease;
}

/* Front and back faces */
.dr-flip-front,
.dr-flip-back {
  position: absolute;
  inset: 0;
  min-height: 420px;
  backface-visibility: hidden;
  border-radius: 18px;
  overflow: hidden;
}

/* Front face */
.dr-cluster-philosophy .dr-flip-front {
  background:
    radial-gradient(ellipse at top left, rgba(196, 147, 63, 0.10) 0%, transparent 55%),
    linear-gradient(160deg, rgba(36, 20, 12, 0.97) 0%, rgba(18, 10, 8, 0.97) 100%);
  border-color: rgba(196, 147, 63, 0.20);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 20px;
}

/* Front face image */
.dr-cluster-philosophy .dr-flip-front img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  margin-bottom: 14px;
}

/* Remove the cyan overlay on front/back */
.dr-cluster-philosophy .dr-flip-front::after,
.dr-cluster-philosophy .dr-flip-back::after {
  background: linear-gradient(
    135deg,
    rgba(196, 147, 63, 0.06) 0%,
    transparent 50%,
    rgba(139, 31, 46, 0.04) 100%
  );
}

/* Back face */
.dr-cluster-philosophy .dr-flip-back {
  background:
    radial-gradient(ellipse at bottom right, rgba(139, 31, 46, 0.10) 0%, transparent 55%),
    linear-gradient(160deg, rgba(26, 12, 8, 0.97) 0%, rgba(14, 8, 6, 0.97) 100%);
  border-color: rgba(196, 147, 63, 0.18);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.dr-cluster-philosophy .dr-flip-back p {
  color: var(--dr-text-soft);
  font-size: 0.93rem;
  line-height: 1.75;
  margin: 0;
}
}

/* Phase label and title styling */
.dr-cluster-philosophy .dr-flip-front .dr-label {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--dr-gold);
  opacity: 0.80;
  margin-bottom: 2px;
}

.dr-cluster-philosophy .dr-flip-front > strong:not(.dr-label) {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.05rem, 1.8vw, 1.30rem);
  font-weight: 700;
  color: var(--dr-heading);
  line-height: 1.20;
  margin: 4px 0 6px;
}

.dr-cluster-philosophy .dr-flip-front > p {
  color: var(--dr-text-muted);
  font-size: 0.84rem;
  line-height: 1.55;
  margin: 0;
}

/* Hover lift */
.dr-cluster-philosophy .dr-flip-card:hover,
.dr-cluster-philosophy .dr-flip-card:focus-within {
  transform: translateY(-3px);
}

/* Flipped state — support both class names */
.dr-cluster-philosophy .dr-flip-card.flipped .dr-flip-inner,
.dr-cluster-philosophy .dr-flip-card.dr-flipped .dr-flip-inner {
  transform: rotateY(180deg);
}

/* Keyboard focus flip */
.dr-cluster-philosophy .dr-flip-card:focus .dr-flip-inner {
  transform: rotateY(180deg);
}

/* ── QUIZ ── */
.dr-cluster-philosophy .dr-quiz {
  background:
    linear-gradient(180deg, rgba(26, 14, 10, 0.90), rgba(14, 10, 11, 0.82));
  border-color: rgba(196, 147, 63, 0.14);
}

.dr-cluster-philosophy .dr-quiz-option {
  border-color: rgba(196, 147, 63, 0.18);
  background: rgba(196, 147, 63, 0.04);
  color: var(--dr-text);
  border-radius: 10px;
  text-align: left;
  padding: 12px 16px;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  font-size: 0.95rem;
  line-height: 1.55;
}

.dr-cluster-philosophy .dr-quiz-option:hover {
  background: rgba(196, 147, 63, 0.10);
  border-color: rgba(196, 147, 63, 0.40);
  transform: translateX(3px);
}

.dr-cluster-philosophy .dr-quiz-option.dr-correct {
  border-color: rgba(160, 210, 140, 0.60);
  background: rgba(160, 210, 140, 0.08);
}

.dr-cluster-philosophy .dr-quiz-option.dr-incorrect {
  border-color: rgba(200, 80, 80, 0.50);
  background: rgba(200, 80, 80, 0.07);
}

.dr-cluster-philosophy .dr-quiz-retry {
  border-color: rgba(196, 147, 63, 0.28);
  background: rgba(196, 147, 63, 0.08);
  color: var(--dr-heading);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 0.85rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 14px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.dr-cluster-philosophy .dr-quiz-retry:hover {
  background: rgba(196, 147, 63, 0.16);
  border-color: rgba(196, 147, 63, 0.55);
}

.dr-cluster-philosophy .dr-quiz-result {
  margin-top: 24px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid rgba(196, 147, 63, 0.18);
  background: rgba(196, 147, 63, 0.06);
}

/* ── POST NAV ── */
.dr-cluster-philosophy .dr-single-post-nav a,
.dr-cluster-philosophy .dr-post-nav a {
  border-color: rgba(196, 147, 63, 0.14);
  background: rgba(26, 14, 10, 0.70);
  color: var(--dr-text-soft);
}

.dr-cluster-philosophy .dr-single-post-nav a:hover,
.dr-cluster-philosophy .dr-post-nav a:hover {
  border-color: rgba(196, 147, 63, 0.38);
  background: rgba(196, 147, 63, 0.08);
  color: var(--dr-heading);
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .dr-cluster-philosophy .dr-flip-card,
  .dr-cluster-philosophy .dr-flip-inner {
    transition: none;
  }
}

/* ── ACCORDION — FAQ COMPONENT ── */
/* The JS toggles .open on .dr-accordion on click of .dr-acc-trigger */

.dr-cluster-philosophy .dr-accordion {
  display: block; /* override the global display:none */
  border: 1px solid rgba(196, 147, 63, 0.16);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(26, 14, 10, 0.82), rgba(14, 10, 11, 0.72));
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.dr-cluster-philosophy .dr-accordion:hover {
  border-color: rgba(196, 147, 63, 0.28);
}

.dr-cluster-philosophy .dr-accordion.open {
  border-color: rgba(196, 147, 63, 0.38);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

/* Trigger button: the question row */
.dr-cluster-philosophy .dr-acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 22px;
  background: transparent;
  border: none;
  color: var(--dr-heading);
  font-family: "DM Mono", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}

.dr-cluster-philosophy .dr-acc-trigger:hover {
  color: var(--dr-gold-2);
}

/* Chevron indicator */
.dr-cluster-philosophy .dr-acc-trigger::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--dr-gold);
  line-height: 1;
  transition: transform 0.3s ease, color 0.2s ease;
}

.dr-cluster-philosophy .dr-accordion.open .dr-acc-trigger::after {
  transform: rotate(45deg);
  color: var(--dr-gold-2);
}

.dr-cluster-philosophy .dr-accordion.open .dr-acc-trigger {
  color: var(--dr-gold-2);
  border-bottom: 1px solid rgba(196, 147, 63, 0.14);
}

/* Content panel */
.dr-cluster-philosophy .dr-acc-body {
  display: none;
  padding: 18px 22px 20px;
}

.dr-cluster-philosophy .dr-accordion.open .dr-acc-body {
  display: block;
}

.dr-cluster-philosophy .dr-acc-body p {
  margin: 0;
  color: var(--dr-text-soft);
  font-size: 0.97rem;
  line-height: 1.82;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dr-cluster-philosophy .dr-accordion,
  .dr-cluster-philosophy .dr-acc-trigger::after {
    transition: none;
  }
}