/* PartnerCta (scripts/lib/components/partner-cta.mjs): the affiliate action right under the
   TL;DR on the RestedXP, Zygor and leveling pages. TJ cut it to the action on 2026-09-30: the
   loot-orange button (styles.css, .wfg-btn--loot) and one line under it, no frame or headline.
   The button and its line sit side by side once the block is 30rem wide (a container query,
   so it also works in a narrow grid column) and stack below that, the button full width. */

.wfg-cta { container-type: inline-size; min-width: 0; }
.wfg-cta-offer { display: grid; gap: 6px; min-width: 0; }
.wfg-cta-btn { width: 100%; }
.wfg-cta-note { margin: 0; font: 400 .84rem/1.35 var(--font-ui); color: var(--ink-2); text-align: center; }

@container (min-width: 30rem) {
  .wfg-cta-offer { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 14px; }
  .wfg-cta-btn { width: auto; }
  .wfg-cta-note { text-align: left; }
}

/* Two offers (a comparison): side by side when there is room, the RestedXP one first. */
.wfg-cta--pair { display: grid; gap: 12px; }
@container (min-width: 46rem) {
  .wfg-cta--pair .wfg-cta-offer { grid-template-columns: auto minmax(0, 1fr); }
}

/* The partner's name in an intro or dek: an ordinary text link, underlined like the body's. */
.wfg-partner-link { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wfg-partner-link:hover { color: var(--ink); }