/* ============================================================
   Product Page — FAQ Section
   ============================================================ */

.claudify-product-faq {
  background: var(--bera-color-soft-neutral);
  padding: 128px 96px 0;
}

.claudify-product-faq__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

/* Left: "FAQ" heading */
.claudify-product-faq__left {
  flex: 0 0 auto;
  width: 200px;
}

.claudify-product-faq__heading {
  font-family: var(--sp-heading-font, 'Cormorant Garamond', Georgia, serif);
  font-weight: var(--sp-heading-weight, 500);
  font-size: var(--sp-heading-size, 64px);
  line-height: 110%;
  letter-spacing: 0;
  color: #1A1C18;
  margin: 0;
}

/* Right: accordion items */
.claudify-product-faq__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Accordion item */
.claudify-product-faq__item {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

.claudify-product-faq__item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  cursor: pointer;
  font-family: var(--sp-question-font, 'Jost', sans-serif);
  font-size: var(--sp-question-size, 18px);
  font-weight: var(--sp-question-weight, 400);
  letter-spacing: 0;
  color: #1A1C18;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}

.claudify-product-faq__item summary::-webkit-details-marker { display: none; }

.claudify-product-faq__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
}

.claudify-product-faq__icon::before,
.claudify-product-faq__icon::after {
  content: '';
  position: absolute;
  background: #1A1C18;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Horizontal line */
.claudify-product-faq__icon::after {
  width: 14px;
  height: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Vertical line */
.claudify-product-faq__icon::before {
  width: 1px;
  height: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* When open — hide vertical line (cross → minus) */
.claudify-product-faq__item[open] .claudify-product-faq__icon::before {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.claudify-product-faq__answer {
  padding: 0 32px 28px;
  font-family: var(--sp-answer-font, 'Jost', sans-serif);
  font-size: var(--sp-answer-size, 15px);
  line-height: 1.65;
  color: rgba(26, 28, 24, 0.7);
  overflow-wrap: break-word;            /* long tokens (URLs/emails) wrap instead of being clipped */
}

/* ── Responsive ── */
@media (max-width: 989px) {
  .claudify-product-faq {
    padding: 96px 48px 0;
  }
}

@media (max-width: 749px) {
  .claudify-product-faq {
    padding: 64px 20px 0;
  }

  .claudify-product-faq__inner {
    flex-direction: column;
    gap: 32px;
  }

  .claudify-product-faq__left {
    width: 100%;
  }

  /* Stacked (column) layout: the inner's desktop `align-items: flex-start` would let
     this column shrink to its content, so cards sized to the question width and grew
     ("expanded right") when a longer answer opened. Lock it to full width so every
     card is the same length and only expands DOWN. */
  .claudify-product-faq__right {
    width: 100%;
  }

  .claudify-product-faq__heading {
    letter-spacing: 0;
  }

  .claudify-product-faq__item summary {
    padding: 20px 24px;
  }

  .claudify-product-faq__answer {
    padding: 0 24px 20px;
  }
}