/* =============================================
   Inner Pages Shared Styles — 优品农源
   ============================================= */

/* ── Content section ── */
.content-section {
  padding-block: var(--space-5xl);
}

.content-section--alt {
  background: var(--color-surface);
}

.content-section--warm {
  background: var(--color-warm-bg);
}

/* ── Two-column layout ── */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
}

.content-grid__text h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin-block-end: var(--space-md);
}

.content-grid__text p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin-block-end: var(--space-lg);
}

.content-grid__visual {
  position: relative;
}

.content-grid__visual-placeholder {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, oklch(88% 0.04 115), oklch(82% 0.04 100));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  color: oklch(100% 0 0 / 0.4);
}

/* ── Feature list ── */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.feature-item {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  transition: background 0.2s var(--ease-out-quart), border-color 0.2s var(--ease-out-quart);
}

.feature-item:hover {
  background: var(--color-surface);
  border-color: var(--color-primary-lighter);
}

.feature-item__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-black);
  color: var(--color-primary-lighter);
  line-height: 1;
  flex-shrink: 0;
  width: 40px;
}

.feature-item__content h3 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  margin-block-end: var(--space-xs);
}

.feature-item__content p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  max-width: none;
}

/* ── Scoring table ── */
.score-table-wrapper {
  overflow-x: auto;
  margin-block-start: var(--space-2xl);
}

.score-table {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.score-table th,
.score-table td {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  font-size: var(--text-sm);
}

.score-table thead th {
  background: var(--color-primary-darker);
  color: var(--color-text-inverse);
  font-weight: var(--fw-semibold);
}

.score-table tbody tr:not(:last-child) {
  border-bottom: 1px solid var(--color-border-light);
}

.score-table tbody tr:hover {
  background: oklch(95% 0.02 148 / 0.15);
}

/* ── Process timeline ── */
.process-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  position: relative;
}

.process-timeline::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-primary-lighter);
}

.process-step {
  display: flex;
  gap: var(--space-xl);
  position: relative;
}

.process-step__circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.process-step__body {
  padding-block-start: var(--space-xs);
}

.process-step__body h3 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  margin-block-end: var(--space-xs);
}

.process-step__body p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* ── Partner type cards ── */
.partner-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.partner-type-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  padding: var(--space-2xl);
  transition: transform 0.3s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart);
}

.partner-type-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.partner-type-card__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-block-end: var(--space-lg);
}

.partner-type-card__icon--green  { background: var(--color-success-light); }
.partner-type-card__icon--amber  { background: oklch(92% 0.08 75); }

.partner-type-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  margin-block-end: var(--space-md);
}

.partner-type-card__desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin-block-end: var(--space-lg);
}

.partner-type-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-end: var(--space-xl);
}

/* ── Earning breakdown ── */
.earning-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.earning-card {
  text-align: center;
  padding: var(--space-xl);
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

.earning-card__icon {
  font-size: 2rem;
  margin-block-end: var(--space-md);
}

.earning-card__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  margin-block-end: var(--space-xs);
}

.earning-card__amount {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-black);
  color: var(--color-primary-dark);
}

.earning-card__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-block-start: var(--space-xs);
}

/* ── FAQ ── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 760px;
  margin-inline: auto;
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s var(--ease-out-quart);
}

.faq-item:hover {
  border-color: var(--color-primary-lighter);
}

.faq-item__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) var(--space-xl);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  gap: var(--space-md);
}

.faq-item__question span:first-child {
  flex: 1;
}

.faq-item__answer {
  padding: 0 var(--space-xl) var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  display: none;
}

.faq-item--open .faq-item__answer {
  display: block;
}

.faq-item--open .faq-item__question {
  color: var(--color-primary-dark);
}

/* ── CTA banner (inline) ── */
.cta-banner {
  background:
    radial-gradient(ellipse 50% 60% at 30% 50%, oklch(60% 0.10 148 / 0.2), transparent),
    var(--color-primary-dark);
  border-radius: var(--radius-2xl);
  padding: var(--space-4xl) var(--space-3xl);
  text-align: center;
  color: #fff;
}

.cta-banner__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: #fff;
  margin-block-end: var(--space-md);
}

.cta-banner__desc {
  font-size: var(--text-base);
  color: oklch(88% 0.02 95);
  margin-inline: auto;
  margin-block-end: var(--space-xl);
}

/* ── Responsive ── */
@media (max-width: 968px) {
  .content-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }

  .content-grid__visual {
    order: -1;
  }

  .partner-types {
    grid-template-columns: 1fr;
  }

  .earning-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .process-timeline::before {
    left: 18px;
  }

  .process-step__circle {
    width: 38px;
    height: 38px;
    font-size: var(--text-sm);
  }
}