/* ==========================================================================
   affiliate.css — /affiliate/ only. Loaded after style.css + responsive.css.
   Colours, the page head, the card face, picture frame, headings and buttons come from style.css
   (section 16 "Shared page components"); this file only holds the layout.
   Reused from style.css: .breadcrumb, .article*, .faq*, .cta, .chip*, .btn, .register-cta.

   1. Article frame    2. Steps    3. Image + notes    4. Responsive
   ========================================================================== */

/* 1. Article frame ---------------------------------------------------------------------- */
.affiliate-article { max-width: none; margin: 0; padding-top: 0; border-top: 0; }
.affiliate-article .article__section > p, .affiliate-article .faq, .affiliate-article .cta { max-width: 820px; }
.affiliate-article > .article__section:first-child { margin-top: var(--space-lg); }

/* 2. Steps: three small cards (card face: .step in style.css) ----------------------------- */
.step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 4px; }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px 16px; }
.step__number {
    grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px;
    border: 1px solid var(--border-hover); border-radius: 50%;
    color: var(--accent-hover); font-size: 15px; font-weight: 500; line-height: 1;
}
.step__title { color: var(--text-primary); font-size: 16px; font-weight: 500; line-height: 1.5; }
.step__text { color: var(--text-secondary); font-size: 14px; line-height: 1.7; }

/* 3. Image + notes --------------------------------------------------------------------- */
.affiliate-figure { margin: var(--space-md) 0 0; }
.affiliate-figure img { display: block; width: 100%; height: auto; }
.affiliate-figure figcaption { max-width: 820px; margin-top: 8px; color: var(--text-muted); font-size: 13px; line-height: 1.65; }
.affiliate-note { max-width: 820px; margin-top: 14px; padding: 10px 14px; border-left: 2px solid var(--accent-muted); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--bg-card); color: var(--text-secondary); font-size: 14px; line-height: 1.7; }
.affiliate-article .chip-list { margin: 4px 0 14px; }
.affiliate-article .chip { cursor: default; }
.affiliate-article .chip:hover { border-color: var(--border-strong); color: var(--text-nav); }

/* 4. Responsive --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .step-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}