/*
 * free.css — /free/ wireframe-specific styles (issue #112)
 * Home V2 デザインシステム準拠。新規パターンのみ (prefix .wf-free__)。
 * 共通コンポーネント (.card/.badge/.btn-*/.section/.grid-*) は components.css/pages.css を再利用。
 */

/* =====================================================================
 * /free/ wireframe (#p-free) — page-scoped styles。
 * data-zone="free" が Home V2 ブルートークンを解決する前提。
 * 既存の zone-neutral primitives (.card/.btn-*/.badge--free/.filter-tab/
 * .grid-*) を再利用し、ここでは新規パターンのみ定義 (.wf-free__*)。
 * ===================================================================== */
.wf-free { background: var(--color-bg); color: var(--color-text-body); }
.wf-free__container { max-width: 1140px; margin: 0 auto; }
.wf-free__section { padding: clamp(48px, 5vw, 80px) var(--space-6); }
.wf-free__eyebrow {
  font-size: var(--text-tiny);
  letter-spacing: 2px;
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.wf-free__head { text-align: center; margin-bottom: var(--space-6); }
.wf-free__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: 1.4;
  margin: 0;
}
.wf-free__lead {
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
  line-height: 1.8;
}

/* --- 1. Hero --- */
.wf-free__hero {
  text-align: center;
  padding: clamp(48px, 6vw, 88px) var(--space-6);
  background:
    radial-gradient(120% 120% at 85% 0%, var(--color-secondary-bg) 0%, transparent 45%),
    var(--color-accent-bg);
}
.wf-free__hero-title {
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: 0 auto var(--space-4);
  max-width: 18em;
}
.wf-free__hero-title .hl {
  color: var(--color-accent);
  background: linear-gradient(transparent 62%, var(--color-secondary-bg) 62%);
  padding: 0 0.08em;
  border-radius: 4px;
}
.wf-free__hero-sub {
  font-size: clamp(14px, 1.7vw, 17px);
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin: 0 auto var(--space-6);
  max-width: 40em;
}
.wf-free__hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* --- 2. Content-switch tabs --- */
.wf-free__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

/* --- 3. Free course cards --- */
.wf-free__card-meta {
  font-size: var(--text-tiny);
  color: var(--color-text-secondary);
}
.wf-free__card-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-tiny);
  color: var(--color-text-secondary);
}

/* --- 4. Learning method flow --- */
.wf-free__method { background: var(--color-bg); }
.wf-free__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
}
.wf-free__step {
  flex: 1 1 200px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--zone-radius-card, 16px);
  box-shadow: var(--shadow-card);
}
.wf-free__step-n {
  font-size: var(--text-tiny);
  letter-spacing: 2px;
  font-weight: var(--weight-bold);
  color: var(--color-accent);
}
.wf-free__step-icon { font-size: 36px; line-height: 1; }
.wf-free__step-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}
.wf-free__step-desc {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  margin: 0;
}
.wf-free__arrow {
  display: flex;
  align-items: center;
  font-size: 24px;
  color: var(--color-text-muted);
  font-weight: var(--weight-bold);
}

/* --- 5. Next-step branch cards --- */
.wf-free__branch-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}
.wf-free__branch-card--primary {
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-card);
}
.wf-free__branch-title {
  font-size: 20px;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: 1.5;
  margin: 0;
}
.wf-free__branch-desc {
  font-size: var(--text-caption);
  color: var(--color-text-body);
  line-height: 1.8;
  margin: 0;
}
.wf-free__branch-cta { margin-top: auto; }

/* --- 6. Diagnosis bridge --- */
.wf-free__bridge { background: var(--color-surface); }
.wf-free__bridge-card {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-7);
  background: var(--color-accent-bg);
}
.wf-free__bridge-copy { flex: 1; min-width: 280px; }
.wf-free__bridge-title {
  font-size: 24px;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: 1.5;
  margin: var(--space-1) 0 0;
}
.wf-free__bridge-desc {
  font-size: var(--text-caption);
  color: var(--color-text-body);
  line-height: 1.8;
  margin-top: var(--space-2);
}

/* --- 7. CTA band --- */
.wf-free__cta-band {
  text-align: center;
  padding: clamp(48px, 6vw, 88px) var(--space-6);
  color: #fff;
  background-image: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}
.wf-free__cta-band-title {
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  color: #fff;
  margin: 0 0 var(--space-3);
}
.wf-free__cta-band-sub {
  font-size: clamp(14px, 1.7vw, 17px);
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 var(--space-6);
}
.wf-free__cta-yellow {
  display: inline-block;
  background: var(--color-secondary, #FACC15);
  color: #0F172A;
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: var(--weight-bold);
  text-decoration: none;
  padding: 16px 44px;
  border-radius: var(--zone-radius-button, 999px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.wf-free__cta-yellow:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.34);
  color: #0F172A;
}

@media (max-width: 767px) {
  .wf-free__arrow { transform: rotate(90deg); width: 100%; justify-content: center; }
  .wf-free__step { max-width: none; }
  .wf-free__bridge-card { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-free__cta-yellow { transition: none; }
  .wf-free__cta-yellow:hover { transform: none; }
}