/* ==========================================================================
   CARDS — the one surface component
   ==========================================================================
   A card is a TEXT element: `card` + a surface variant + (optionally) a notch
   corner (notch.css) + a column class from the Theme Toolbox. Its rich text —
   an icon paragraph, <h3>, copy, a link — is styled BY TAG, because the editor
   strips classes off inner tags. Every card-like thing on a site is one of
   these; don't add a parallel `.panel` / `.feature` / `.tile`.

     surfaces  card--soft · card--accent · card--prime · card--prime-deep
               (white by default). A site adds its own surfaces the same way:
               `.card--x { --surface: … }` — a colour or a gradient.
     sizes     card--sm (tiles, steps) · card--lg (feature cards)
     copy      card--text-sm for dense catalogue grids
     layout    card--row (icon beside the copy) · card-stack (a column of
               cards sharing the row's height) · card--photo (the element's
               image fills the card behind a fade)
     hairline  add `outline` (notch.css)

   Markup (text element, class `card card--soft notch-tr`, toolbox `col-1-3`):
     <p><i class="fa-light fa-gears card__icon"></i></p>
     <h3>Title</h3><p>Copy.</p>
     <p><a class="link-arrow" href="…">Explore →</a></p>
   ========================================================================== */

.card {
  --surface: var(--white);
  --icon-size: 44px;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 36px);
  color: var(--text-body);

  /* .outline paints its own background (it needs --surface for the diagonal) */
  &:not(.outline) { background: var(--surface); }

  > .rte {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* flex doesn't collapse margins: the last paragraph's 1em would sit on
       top of the card's bottom padding */
    > :last-child { margin-bottom: 0; }
  }

  h3 { margin-bottom: 0.5em; color: var(--heading); }
  :is(h3, p) { text-wrap: balance; }   /* card copy breaks evenly, as designers draw it */
  h4 { margin-bottom: 0.4em; color: var(--heading); font-size: 1.125rem; }
  p { margin-bottom: 1em; }

  a { color: var(--prime); font-weight: 600; }
  a:hover { color: var(--second); }
  /* a closing "Explore … →" link (a.link-arrow) sits at the foot of the card */
  .rte > p:last-child:has(> a.link-arrow) { margin-top: auto; margin-bottom: 0; }
}

/* Icon row: a paragraph holding the Font Awesome <i class="card__icon">.
   Also used outside cards (features), so it isn't nested under .card. */
.rte > p:has(> .card__icon) {
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  line-height: 0;
}
.card__icon {
  display: inline-block;
  width: var(--icon-size, 44px);
  font-size: var(--icon-size, 44px);
  line-height: 1;
  color: var(--prime);
}
/* Once the Font Awesome kit swaps the <i> for an <svg>, the icon is
   --icon-size TALL and as wide as its glyph (designers size icons by height):
   a fixed width shrinks wide icons and blows up narrow ones. */
svg.card__icon { width: auto; height: var(--icon-size, 44px); }
/* An icon Font Awesome doesn't have (images/icons/<name>.svg): painted as a
   mask in the text colour, so it sits and recolours like the FA icons.
   <span class="card__icon icon-mask" style="--icon:url(…)"></span>, or a
   named class per icon: .icon-lily { --icon: url("../../images/icons/lily.svg"); } */
.icon-mask {
  height: var(--icon-size, 44px);
  background: currentColor;
  mask: var(--icon) center / contain no-repeat;
}

/* ---- Sizes --------------------------------------------------------------- */
.card--sm {
  --icon-size: 32px;
  padding: clamp(18px, 1.8vw, 26px);
  h3 { font-size: 1.125rem; }
}
.card--text-sm { font-size: 0.90625rem; }
.card--lg h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.2; }

/* ---- Surfaces ------------------------------------------------------------- */
.card--soft       { --surface: var(--surface-soft); }
.card--accent     { --surface: var(--accent); }
.card--prime      { --surface: var(--prime); }
.card--prime-deep { --surface: var(--prime-deep); }

/* Dark cards */
:is(.card--prime, .card--prime-deep) {
  color: var(--text-on-dark-dim);

  :is(h3, h4) { color: var(--text-on-dark); }
  a { color: var(--text-on-dark); }
  a:hover { color: var(--accent); }
  .card__icon { color: var(--text-on-dark-dim); }
}

/* ---- Layout helpers ------------------------------------------------------ */
/* Icon beside the copy (feature rows): the icon paragraph + a <div> */
.card--row > .rte {
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(16px, 1.6vw, 24px);

  > p:has(> .card__icon) { flex: none; margin: 0; }
  > div { flex: 1; }
  > div > :last-child, > p:last-child { margin-bottom: 0; }
}
/* A row card narrower than 380px (a phone, or two up on a tablet) puts its
   icon above the copy: beside it, the copy drops to ~200px (TPA Stack mobile
   pass). Must come after the rule above — same specificity. */
.card--row { container-type: inline-size; }
@container (max-width: 379px) {
  .card--row > .rte { flex-direction: column; gap: 12px; }
}

/* A column holding stacked cards that share the row's height */
.card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gutter-24);
  > .card { flex: 1; }
}

/* Photo card: the element's image fills the card behind a dark fade and the
   copy sits at the foot (a text element with an image). */
.card.card--photo {
  display: flex;
  position: relative;
  justify-content: flex-end;
  min-height: clamp(360px, 34vw, 490px);
  color: var(--text-on-dark-dim);
  isolation: isolate;

  :is(h3, h4, a) { color: var(--text-on-dark); }
  > figure {
    position: absolute;
    inset: 0;
    z-index: -2;
    margin: 0;
    img { width: 100%; height: 100%; object-fit: cover; }
  }
  &::before {
    content: "";
    position: absolute;
    inset: 38% 0 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--prime-deep) 92%, transparent) 55%);
  }
  > .rte { flex: 0 0 auto; }
}

/* Outline pills: <p class="pills"><span>One</span><span>Two</span></p> */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-24);

  span {
    padding: 9px 18px;
    border: 1.5px solid currentColor;
    font-size: 0.8125rem;
    font-weight: 600;
  }
}

/* Plain bold points with a bullet separator — the understated alternative to
   .pills: <p class="card-points"><strong>One</strong> &bull; <strong>Two</strong></p> */
.card-points { margin-top: var(--space-24); }
.card-points strong { font-weight: 700; }

/* Card headline + icon as links (engine/tpastack-builders/cardlinks.php wraps
   them): they keep the card's own colour and drop the underline. The visible
   CTA link stays; the icon link is decorative (aria-hidden). */
.card a.card-title-link,
.card a.card-icon-link { color: inherit; text-decoration: none; border-bottom: 0; }
.card a.card-title-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* A card that is itself a band's direct child: `.band > *` gives children the
   gutter as padding, which the card's own padding replaces — so hold it to
   the content column with a max-width instead. */
.band > .card { max-width: calc(min(100vw, var(--container-max)) - 2 * var(--page-gutter)); }