/* ================= custom.css ================= */

.split-grid { display: grid; gap: var(--sp-lg); grid-template-columns: 1fr; }
@media (min-width: 768px) { .split-grid { grid-template-columns: 1fr 1fr; } }

.problem-col, .solution-col { border-radius: var(--r-lg); padding: var(--sp-xl) var(--sp-lg); }
.problem-col { background: var(--bg-alt); border: 1px solid var(--border); }
/* FIXED: solution-col now uses dark-section vars, solid text colors */
.solution-col { background: var(--dark-section-bg); border: 1px solid var(--dark-card-border); }

.problem-col h3, .solution-col h3 { font-family: var(--font-body); font-size: 1rem; margin-bottom: var(--sp-md); }
.problem-col h3 { color: var(--text); }
.solution-col h3 { color: var(--dark-section-text); }

.split-list { display: flex; flex-direction: column; gap: var(--sp-sm); }
.split-list-item { display: flex; align-items: flex-start; gap: 9px; font-size: 0.9rem; line-height: 1.5; }
.problem-col .split-list-item { color: var(--text-soft); }
.solution-col .split-list-item { color: var(--dark-section-muted); }
.icon-x { color: #ef4444; font-size: 0.82rem; margin-top: 2px; flex-shrink: 0; }
.icon-check { color: #4ade80; font-size: 0.82rem; margin-top: 2px; flex-shrink: 0; }

.custom-options-grid { display: grid; gap: var(--sp-md); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .custom-options-grid { grid-template-columns: repeat(4, 1fr); } }
.custom-option {
  text-align: center; padding: var(--sp-lg);
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.custom-option:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.custom-option img { width: 36px; height: 36px; margin: 0 auto var(--sp-sm); object-fit: contain; }
.custom-option h4 { font-size: 0.9rem; margin-bottom: 4px; color: var(--text); }
.custom-option p { font-size: 0.8rem; color: var(--text-muted); margin: 0; line-height: 1.5; }

.about-story { display: grid; gap: var(--sp-2xl); align-items: start; }
@media (min-width: 768px) { .about-story { grid-template-columns: 1fr 1fr; } }
.about-story-text h2 { margin-bottom: var(--sp-md); }

.workshop-cards { display: grid; gap: var(--sp-md); grid-template-columns: 1fr; }
@media (min-width: 480px) { .workshop-cards { grid-template-columns: repeat(3, 1fr); } }

/* FIXED v2: stronger border + shadow so each workshop reads as a separate card,
   not a list divided by faint lines (previous shadow was too weak against cream bg) */
.workshop-card {
  text-align: center; padding: var(--sp-lg) var(--sp-md);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px rgba(59,35,20,0.07);
}
.workshop-card .city { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--brown-mid); margin-bottom: 4px; }
.workshop-card .capacity { font-size: 0.82rem; color: var(--text-muted); }

.values-grid { display: grid; gap: var(--sp-md); grid-template-columns: 1fr; }
@media (min-width: 640px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
.value-card { padding: var(--sp-lg); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.value-card h4 { font-size: 0.92rem; margin-bottom: var(--sp-sm); color: var(--text); }
.value-card p { font-size: 0.86rem; color: var(--text-muted); line-height: 1.6; }

/* ================= SOLUTION COL & CTA — LIGHT MODE ================= */
:root:not([data-theme="dark"]) .solution-col {
  background: var(--cta-bg-light);
  border-color: transparent;
}
:root:not([data-theme="dark"]) .solution-col h3 { color: var(--cta-text-light); }
:root:not([data-theme="dark"]) .solution-col .split-list-item { color: var(--cta-muted-light); }

:root:not([data-theme="dark"]) .cta-section {
  background: var(--cta-bg-light);
  border-color: transparent;
}
:root:not([data-theme="dark"]) .cta-section .eyebrow { color: var(--cta-eyebrow-light); }
:root:not([data-theme="dark"]) .cta-section h2 { color: var(--cta-text-light); }
:root:not([data-theme="dark"]) .cta-section p  { color: var(--cta-muted-light); }

/* ================= CTA IMPROVEMENTS (PROFESSIONAL, AIRY LAYOUT) ================= */
.cta-section {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-xl);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: 0 8px 28px rgba(27,23,19,0.06);
  max-width: 960px;
  margin: 0 auto;
  gap: var(--sp-md);
}
.cta-section .eyebrow { display:block; font-weight:700; letter-spacing:0.02em; color:var(--text-muted); }
.cta-section h2 { margin: 0.25rem 0 var(--sp-sm); font-size:1.4rem; color:var(--text); }
.cta-section p { margin: 0 auto 0.8rem; max-width:58ch; color:var(--text-muted); line-height:1.5; }
.cta-section .cta-note { display:block; font-size:0.82rem; color:var(--text-muted); margin-top:0.4rem; }
.btn-wa.btn--lg { padding: 0.8rem 1.2rem; font-size:1rem; border-radius:999px; display:inline-flex; align-items:center; gap:0.6rem; box-shadow: 0 6px 18px rgba(27,23,19,0.06); }

@media (min-width: 768px) {
  .cta-section { padding: var(--sp-2xl); }
  .cta-section h2 { font-size:1.6rem; }
}