/**
 * sinopak/faq-accordion block styles
 *
 * React prototype (src/styles.css):
 *   --centered  → .service-faq-section: centered head, boxed white list
 *                 (bordered card, 13px questions, chevron rotate).
 *   --machine   → .faq-section (machine detail): module number + left head,
 *                 open hairline list, 16px questions.
 *   --with-form → machine list left + sticky gradient form card right
 *                 (BFM page FAQ zone), gradient = brand --gradient.
 */
@layer spk-block {
  .spk-x-section.spk-x-faq {
    padding: clamp(58px, 7vw, 96px) 0;
    background: #fff;
    border-bottom: 1px solid #dce4e9;
  }

  /* React 内页 shell:FAQ 只出现在内页,统一压过 .spk-x-wrap 的 1250 公式 */
  .spk-x-faq__grid {
    width: min(85vw, 1240px);
    max-width: 1240px;
  }

  /* Shared head type (React section-label / service-section-head). */
  .spk-x-faq .spk-x-eyebrow {
    margin: 0 0 12px;
    color: #f28a2e;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .spk-x-faq .spk-x-section-title {
    margin: 0 0 12px;
    color: #062b5c;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.12;
    letter-spacing: 0;
    text-wrap: balance;
  }
  .spk-x-faq .spk-x-section-lead,
  .spk-x-faq .spk-x-section-lead p {
    margin: 0;
    max-width: none;
    color: #51616e;
    font-size: 15px;
    line-height: 1.66;
  }

  .spk-x-faq__head {
    max-width: 820px;
    margin: 0 0 34px;
  }

  .spk-x-faq__module {
    display: inline-block;
    margin: 0 14px 4px 0;
    color: #064a7d;
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 950;
    line-height: 1;
  }

  /* ── centered mode (Service FAQ) ── */
  .spk-x-faq--centered .spk-x-faq__head {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
  .spk-x-faq--centered .spk-x-faq__list {
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #dce4e9;
    border-radius: 12px;
    background: #fff;
  }
  .spk-x-faq--centered .spk-x-faq__item + .spk-x-faq__item {
    border-top: 1px solid #dce4e9;
  }
  .spk-x-faq--centered .spk-x-faq__question {
    min-height: 50px;
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 900;
  }
  .spk-x-faq--centered .spk-x-faq__panel {
    padding: 0;
  }
  .spk-x-faq--centered .spk-x-faq__answer {
    padding: 0 18px 18px;
    font-size: 13px;
    line-height: 1.62;
  }

  /* ── machine / with-form list (machine detail FAQ) ── */
  .spk-x-faq--machine .spk-x-faq__head {
    max-width: 920px;
    margin-bottom: 30px;
  }
  .spk-x-faq--machine .spk-x-faq__list,
  .spk-x-faq--with-form .spk-x-faq__list {
    border-top: 1px solid #dce4e9;
  }
  .spk-x-faq--machine .spk-x-faq__item,
  .spk-x-faq--with-form .spk-x-faq__item {
    border-bottom: 1px solid #dce4e9;
    background: #fff;
  }
  .spk-x-faq--machine .spk-x-faq__question,
  .spk-x-faq--with-form .spk-x-faq__question {
    padding: 20px 0;
    font-size: 16px;
    font-weight: 880;
  }
  .spk-x-faq--machine .spk-x-faq__panel,
  .spk-x-faq--with-form .spk-x-faq__panel {
    padding: 0;
  }
  .spk-x-faq--machine .spk-x-faq__answer,
  .spk-x-faq--with-form .spk-x-faq__answer {
    max-width: 920px;
    margin-top: -4px;
    padding-bottom: 22px;
    font-size: 15px;
    line-height: 1.65;
  }

  /* Shared question button + chevron. */
  .spk-x-faq__question {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 0;
    background: transparent;
    color: #062b5c;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
  }
  .spk-x-faq__question:hover {
    color: #087eae;
  }
  .spk-x-faq__icon {
    flex: none;
    display: inline-flex;
    color: currentColor;
    transition: transform 0.18s ease;
  }
  .spk-x-faq__item.spk-x-open .spk-x-faq__icon {
    transform: rotate(180deg);
  }

  .spk-x-faq__answer {
    margin: 0;
    color: #51616e;
    transition: padding 0.28s ease;
  }

  /* JS 渐进增强:有 JS 时平滑折叠(无 JS 全部可见,降级) */
  .spk-x-faq__panel {
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    transition: grid-template-rows 0.28s ease;
  }
  .spk-x-faq__panel > * {
    min-height: 0;
  }
  body.spk-x-js .spk-x-faq__panel {
    grid-template-rows: 0fr;
  }
  body.spk-x-js .spk-x-faq__item.spk-x-open .spk-x-faq__panel {
    grid-template-rows: 1fr;
  }
  /* A 0fr track floors at the grid item's min-content, and min-height:0 does
     NOT clip an element's own padding — so a closed answer's vertical padding
     (18–22px per variant) leaks a sliver of the first line. Zero it while
     collapsed; it eases back on open (no-JS keeps every answer open + padded). */
  body.spk-x-js .spk-x-faq__item:not(.spk-x-open) .spk-x-faq__answer {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* ── with-form: juice prototype .faq-form (FAQ card left, sticky gradient
     inquiry-form card right). Overrides the React look for the solution page;
     literal juice colours (navy #062f66, line #d7e4ef, orange #ff861f). ── */
  .spk-x-faq--with-form {
    background: linear-gradient(180deg, #f6fbff 0%, #fff 100%);
    border-bottom: 0;
    padding: 92px 0;
  }
  /* Solution FAQ uses the site shell width (min 1250), not the React 1240. */
  .spk-x-faq--with-form .spk-x-faq__grid {
    display: grid;
    grid-template-columns: 0.98fr 1.02fr;
    gap: 52px;
    align-items: start;
    width: min(100% - clamp(64px, 12vw, 260px), 1250px);
    max-width: none;
  }
  /* Left column is a bordered white card (.faq-panel). */
  .spk-x-faq--with-form .spk-x-faq__detail {
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.07);
    padding: 30px;
  }
  .spk-x-faq--with-form .spk-x-faq__head {
    max-width: none;
    margin: 0 0 8px;
  }
  .spk-x-faq--with-form .spk-x-eyebrow {
    color: #ff861f;
    letter-spacing: 0.22em;
  }
  .spk-x-faq--with-form .spk-x-section-title {
    color: #062f66;
    font-size: 42px;
    line-height: 1.05;
  }
  .spk-x-faq--with-form .spk-x-faq__list {
    margin-top: 8px;
    border-top: 0;
  }
  .spk-x-faq--with-form .spk-x-faq__item {
    border-bottom: 1px solid #d7e4ef;
    background: transparent;
  }
  .spk-x-faq--with-form .spk-x-faq__item:last-child {
    border-bottom: 0;
  }
  .spk-x-faq--with-form .spk-x-faq__question {
    min-height: 62px;
    padding: 0;
    color: #062f66;
    font-size: 16px;
    font-weight: 900;
  }
  .spk-x-faq--with-form .spk-x-faq__question:hover {
    color: #062f66;
  }
  .spk-x-faq--with-form .spk-x-faq__icon {
    width: 18px;
    height: 18px;
    color: #ff861f;
  }
  /* Plus rotates 45° into an × on open (not the chevron's 180°). */
  .spk-x-faq--with-form .spk-x-faq__item.spk-x-open .spk-x-faq__icon {
    transform: rotate(45deg);
  }
  .spk-x-faq--with-form .spk-x-faq__panel {
    padding: 0;
  }
  .spk-x-faq--with-form .spk-x-faq__answer {
    max-width: none;
    margin: 0;
    padding: 0 38px 22px 0;
    color: #607184;
    font-size: 15px;
    line-height: 1.6;
  }

  /* Sticky gradient inquiry-form card (prototype .faq-form-card, --gradient). */
  .spk-x-faq--with-form .spk-x-faq__form-card {
    position: sticky;
    top: 96px;
    align-self: start;
    overflow: hidden;
    border-radius: 18px;
    padding: 30px;
    background: linear-gradient(135deg, #0a5f93 0%, #073a76 42%, #062452 100%);
    color: #fff;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14);
  }
  .spk-x-faq--with-form .spk-x-faq__form-heading {
    margin: 0 0 10px;
    color: #fff;
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: -0.01em;
  }
  .spk-x-faq--with-form .spk-x-faq__form-text,
  .spk-x-faq--with-form .spk-x-faq__form-text p {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    line-height: 1.55;
  }
  .spk-x-faq--with-form .spk-x-faq__form-card .spk-x-lead-form {
    margin-top: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .spk-x-faq--with-form .spk-x-faq__form-card .spk-x-lead-form textarea {
    min-height: 122px;
  }
  /* Optional form-card eyebrow ("Email SinoPAK" on the machine aggregation
     pages). Sits on the navy gradient, so it takes the orange that reads on
     dark — never the grey the light sections use for eyebrows. */
  .spk-x-faq--with-form .spk-x-faq__form-label {
    margin: 0 0 8px;
    color: #f5a45c;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  /* Optional CTA closing the question list ("Send Project Inquiry →"). Reuses
     machine-hero's primary-button language so the aggregation pages share one
     button style; opens the inquiry modal when no explicit URL is set. */
  .spk-x-faq__cta-row {
    margin-top: 28px;
  }
  .spk-x-faq__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 8px;
    padding: 16px 24px;
    background: #f28a2e;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease;
  }
  .spk-x-faq__cta:hover,
  .spk-x-faq__cta:focus-visible {
    transform: translateY(-2px);
    background: #ff8d2c;
  }
}

@layer spk-responsive {
  @media (max-width: 1180px) {
    .spk-x-faq__grid {
      width: calc(100% - 72px);
    }
    .spk-x-faq--with-form .spk-x-faq__grid {
      grid-template-columns: 1fr;
    }
    .spk-x-faq__form-card {
      position: static;
    }
  }
  @media (max-width: 820px) {
    .spk-x-faq__grid {
      width: calc(100% - 34px);
    }
    .spk-x-faq--machine .spk-x-faq__question,
    .spk-x-faq--with-form .spk-x-faq__question {
      padding: 18px 0;
      font-size: 15px;
    }
  }
}