/* Offer card — linked offering cards on the who-we-help, products and
 * services pages.
 * ---------------------------------------------------------------------- */

@layer modules {
  .offer-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-l);
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-xl);
    text-decoration: none;
    transition: transform 180ms, box-shadow 180ms, border-color 180ms;
  }

  .offer-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: 0 24px 50px -22px oklch(var(--lch-ink-darkest) / 0.22);
    transform: translateY(-3px);
  }

  .offer-card__top {
    align-items: center;
    display: flex;
    gap: var(--space-s);
    justify-content: space-between;
  }

  .offer-card__shape {
    align-items: center;
    background-color: var(--shape-color, var(--color-accent));
    border-radius: var(--border-radius-m);
    display: flex;
    height: 3.25rem;
    justify-content: center;
    width: 3.25rem;
  }

  .offer-card__shape::after {
    background-color: color-mix(in oklab, #fff 70%, transparent);
    border-radius: 50%;
    content: "";
    height: 1.25rem;
    width: 1.25rem;
  }

  /* Icon variant — a circle carrying an inline SVG instead of the plain dot. */
  .offer-card__shape--icon {
    border-radius: 50%;
  }

  .offer-card__shape--icon::after {
    content: none;
  }

  .offer-card__shape-icon {
    block-size: 1.5rem;
    /* Fixed white rather than a themed token: the circle behind it is always a
     * saturated colour, in both light and dark mode. */
    color: color-mix(in oklab, #fff 88%, transparent);
    inline-size: 1.5rem;
  }

  .offer-card__eyebrow {
    color: var(--color-ink-medium);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .offer-card__title {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: var(--font-display-tracking);
    margin: 0;
  }

  .offer-card__body {
    color: var(--color-ink-dark);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
  }

  .offer-card__cta {
    font-size: 0.875rem;
    font-weight: 600;
    margin-block-start: auto;
    padding-block-start: var(--space-s);
  }

  .offer-card__cta::after {
    content: " →";
    display: inline-block;
    transition: transform 180ms;
  }

  .offer-card:hover .offer-card__cta::after {
    transform: translateX(0.25rem);
  }
}