/* Persistent CTA card — green, white text, three elements (headline, button,
   reassurance). Two placement modes:
 *   'sidebar' (default, inside .cta-layout): a real column that reserves its
 *     own space, so it never overlaps content. Used by blog posts.
 *   'pinned' (.cta-card--pinned): fixed to the right edge of the viewport, in
 *     the gutter beside full-width (wide table) content — never over it. Used
 *     by /fund-performance/ and similar data pages.
 * Below the relevant breakpoint the card is hidden and the sticky top-bar /
 * page-bottom CTAs take over. */

.cta-card {
  display: none;
}

/* Shared card look + inner elements (applies to both modes once shown) */
@media (min-width: 1200px) {
  .cta-card {
    box-sizing: border-box;
    width: 300px;
    padding: 24px 22px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 10px;
    box-shadow: var(--shadow-light);
  }

  /* 1) Headline */
  .cta-card__headline {
    margin: 0 0 16px;
    font-size: 1.35em;
    line-height: 1.25;
    color: #fff;
  }

  /* 2) Link-button: white on the green card for high contrast */
  .cta-card__button {
    box-sizing: border-box;
    display: block;
    width: 100%;
    text-align: center;
    background: #fff;
    color: var(--color-primary);
    padding: 12px 16px;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
  }

  .cta-card__button:hover,
  .cta-card__button:focus {
    background: var(--color-bg-light);
    color: var(--color-primary-hover);
    text-decoration: none;
  }

  /* 3) Reassurance items */
  .cta-card__reassurance {
    list-style: none;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .cta-card__reassurance li {
    font-size: 0.85em;
    line-height: 1.4;
  }

  .cta-card__reassurance li::before {
    content: '\2713';   /* check mark */
    display: inline-block;
    margin-right: 8px;
    font-weight: 700;
  }
}

/* Mode: sidebar — two-zone grid inside .cta-layout (blog posts, /blog listing).
   Zone 1 (flexible) holds a centred reading column (--measure); zone 2 (fixed
   track) centres the card within itself. Each zone centres its own content, so
   both the main column and the card sit with balanced, symmetric gutters. */
@media (min-width: 1200px) {
  .cta-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;  /* main zone | fixed sidebar track */
    gap: 40px;
    max-width: 1200px;      /* same envelope as .container */
    margin: 0 auto;
    padding: 0 20px;        /* same as .container */
    align-items: start;     /* card top-anchored so position: sticky works */
  }

  .cta-layout__main {
    min-width: 0;                 /* wide tables shrink & scroll, don't break the column */
    max-width: var(--measure);    /* capped reading column, not the full zone width */
    margin-inline: auto;          /* centre the column within the flexible zone */
  }

  .cta-layout .cta-card {
    display: block;
    position: sticky;
    top: 180px;
    justify-self: center;         /* centre the 300px card within its 340px track */
  }
}

/* Mode: pinned — fixed to the right edge of the viewport for wide data pages,
   shown on screens >=1600px. The main content is left-of-centre (its
   .cta-content-region right margin clears the card), so the card can never
   float over the main content area. */
@media (min-width: 1600px) {
  .cta-card--pinned {
    display: block;
    position: fixed;
    top: 180px;
    right: 24px;
    width: 300px;
  }

  /* Reserve the right-hand strip of the viewport for the fixed card and shift
     the (otherwise centred) content left-of-centre to make room. */
  .cta-content-region {
    margin-right: 360px;   /* card (300) + right offset (24) + buffer (incl. scrollbar) */
  }
}