/**
 * SKSculpts Premium — FAQ Section
 * HTML uses: .sks-faq-section, .sk-container, .sks-faq-layout,
 *            .sks-faq-intro, .sks-link-button, .sks-faq-list,
 *            .sks-faq-item, .sks-faq-trigger, .sks-faq-icon, .sks-faq-answer
 * Depends on: tokens.css
 */

/* ============================================================
   FAQ SECTION
   ============================================================ */
.sks-faq-section {
  padding: clamp(22px, 3.4vw, 42px) 0 70px;
}

/* ============================================================
   FAQ LAYOUT — two-column card
   ============================================================ */
.sks-faq-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(32px, 6vw, 90px);
  align-items: start;
  background: linear-gradient(135deg, rgba(201, 164, 92, 0.10), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--sk-border);
  border-radius: 0;
  padding: clamp(28px, 5vw, 70px);
}

/* ============================================================
   FAQ INTRO (left column)
   ============================================================ */
.sks-faq-intro h2 {
  font-family: var(--sk-font-display);
  font-size: clamp(2.6rem, 4vw, 4rem) !important;
  line-height: 0.88;
  margin: 8px 0 14px;
  color: var(--sk-text);
}
.sks-faq-intro p { color: var(--sk-muted); line-height: 1.7; }

.sks-link-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  margin-top: 18px;
  border: 1px solid var(--sk-gold);
  border-radius: 999px;
  color: var(--sk-text);
  font-family: var(--sk-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}
.sks-link-button:hover {
  background: var(--sk-gold);
  color: #101010;
}

/* ============================================================
   FAQ ACCORDION LIST (right column)
   ============================================================ */
.sks-faq-list { display: grid; gap: 12px; }
.sks-faq-item {
  border: 1px solid var(--sk-border);
  border-radius: 0;
  overflow: hidden;
  background: var(--sk-card);
}
.sks-faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 22px 18px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font-family: var(--sk-font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.sks-faq-icon { font-size: 1.2rem; color: var(--sk-gold2); }
.sks-faq-answer {
  padding: 0 18px 20px;
  color: var(--sk-muted);
}
.sks-faq-answer p { line-height: 1.7; margin: 0; }
.sks-faq-item.is-open .sks-faq-answer { display: block; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .sks-faq-layout { grid-template-columns: 1fr; }
}