/* Korean Learning Club reusable detail-page components
   Brand palette: purple, pink and yellow only. */
.detail-page {
  --detail-purple: var(--color-primary);
  --detail-purple-soft: #eadcff;
  --detail-pink: var(--color-pink-500);
  --detail-pink-soft: #ffdff2;
  --detail-yellow: #f0b429;
  --detail-yellow-soft: #fff0ae;
  --detail-panel-radius: 56px;
  --detail-section-space: 120px;
}

.detail-theme-purple-pink-yellow {
  --detail-gradient-main: linear-gradient(135deg, var(--detail-purple-soft), var(--detail-pink-soft) 54%, var(--detail-yellow-soft));
  --detail-gradient-strong: linear-gradient(145deg, var(--detail-purple), var(--detail-pink));
}

.detail-split-section { padding-block: var(--detail-section-space); }
.detail-split-grid { display: grid; grid-template-columns: minmax(0,.88fr) minmax(520px,1.12fr); gap: clamp(64px,8vw,120px); align-items: center; }
.detail-split-reverse .detail-split-grid { grid-template-columns: minmax(520px,1.12fr) minmax(0,.88fr); }
.detail-page section h2 { font-size: clamp(1.625rem, 2.5vw, 2.5rem); line-height: 1.15; font-weight: 600; letter-spacing: -.015em; }
.detail-copy h2 { font-size: clamp(1.625rem, 2.5vw, 2.5rem); line-height: 1.15; font-weight: 600; letter-spacing: -.015em; }
.detail-copy > p { color: var(--color-text-secondary); font-size: 17px; line-height: 1.7; }
.detail-visual-panel { min-height: 610px; border-radius: var(--detail-panel-radius); box-shadow: 0 30px 70px rgba(68,43,86,.13); }
.detail-gradient-section { padding-block: var(--detail-section-space); background: var(--detail-gradient-main); }
.detail-feature-panel, .detail-cta-banner { border-radius: var(--detail-panel-radius); background: var(--detail-gradient-main); }
.detail-testimonials { padding-block: var(--detail-section-space); background: #f7f1ff; }

@media (max-width: 1000px) {
  .detail-split-grid, .detail-split-reverse .detail-split-grid { grid-template-columns: 1fr; }
  .detail-split-reverse .detail-copy { grid-row: 1; }
}

@media (max-width: 680px) {
  .detail-page { --detail-panel-radius: 32px; --detail-section-space: 72px; }
  .detail-visual-panel { min-height: 430px; }
}