/* webfront/css/pages/club.css — /diy-auto-club/ only (EX-CLUB-02).
 * Adds the page-specific blocks on top of components/sections.css (.wf-*): the benefit split,
 * the check list, the FAQ heading inside <summary> and the closing CTA box.
 * Colours come from the theme-aware --wf-* palette only.
 */
.club { overflow-x: clip; }

/* ---------------- copy helpers ---------------- */
.ss-native .club-lead { max-width: 72ch; margin: 0 0 14px; color: var(--wf-muted); font-size: 16px; line-height: 1.85; }
.ss-native .club-lead:last-child { margin-bottom: 0; }
.club h4 { margin: 0 0 10px; color: var(--wf-fg); font-size: 19px; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; }

/* ---------------- benefits: two panels + checks ---------------- */
.club-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.club-panel { padding: 28px 30px; border: 1px solid var(--wf-border); border-radius: 12px; background: var(--wf-panel); }
.club-panel p { margin: 0; color: var(--wf-muted); font-size: 15px; line-height: 1.9; }
.club-panel--accent { background: radial-gradient(ellipse at 100% 0%, var(--wf-glow), transparent 70%), var(--wf-panel); }
.club-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; margin: 22px 0 0; padding: 0; list-style: none; }
.club-checks li { position: relative; padding-left: 28px; color: var(--wf-muted); font-size: 14.5px; line-height: 1.7; }
.club-checks li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 8px;
    border-left: 2px solid var(--wf-red-bright); border-bottom: 2px solid var(--wf-red-bright); transform: rotate(-45deg); }

/* ---------------- join: actions ---------------- */
.club-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ---------------- how it works: four steps, heading inside the step ---------------- */
.club-how .wf-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
.club-how .wf-step h4 { margin: 0 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: var(--wf-fg); }
.club-how .wf-step p { max-width: 34ch; }

/* ---------------- FAQ: the question is a protected h3 inside <summary> ---------------- */
.club-faq .wf-faq__item summary { gap: 18px; padding: 22px 0; }
.club-faq .club-faq__q { margin: 0; color: inherit; font-size: 16px; font-weight: 700; line-height: 1.5;
    letter-spacing: -.01em; text-transform: none; }
.club-faq .wf-faq__item summary:hover .club-faq__q { color: var(--wf-red-bright); }
.club-faq .wf-faq__answer ul { max-width: 70ch; }

/* ---------------- closing CTA ---------------- */
.club-cta__box { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 32px 36px;
    border: 1px solid var(--wf-border); border-radius: 14px;
    background: radial-gradient(ellipse at 0% 50%, var(--wf-glow), transparent 60%), var(--wf-panel); }
.club-cta__box h4 { margin: 0 0 8px; font-size: 24px; }
.club-cta__box p { margin: 0; color: var(--wf-muted); font-size: 14.5px; line-height: 1.8; }
.club-cta__box .wf-btn { flex: 0 0 auto; }

@media (max-width: 1100px) {
    .club-how .wf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 34px; }
}
@media (min-width: 601px) and (max-width: 1100px) {
    /* two columns on tablets: a single connector line would only join the top row */
    .club-how .wf-steps::before { display: none; }
}
@media (max-width: 900px) {
    .club-split { grid-template-columns: 1fr; }
    .club-cta__box { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
    .ss-native .club-lead { font-size: 15px; }
    .club-panel { padding: 22px; }
    .club-checks { grid-template-columns: 1fr; }
    .club-how .wf-step p { max-width: none; }
    .club-faq .club-faq__q { font-size: 15px; }
    .club-cta__box { padding: 24px 22px; }
    .club-cta__box h4 { font-size: 20px; }
}