/**
 * Greenfield canonical: Cards
 * v3.18.48
 */

.ssla-section.ssla-g-cards {
  background-color: var(--ssla-bg-color, transparent);
  color: var(--g-cards-fg);
  padding: var(--g-cards-section-padding);
}
.ssla-g-cards-inner {
  max-width: var(--g-cards-content-max-width);
  margin: 0 auto;
  padding: var(--paint-section-padding, 80px) 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.ssla-g-cards-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}
.ssla-g-cards-eyebrow {
  font: 600 12px/1.2 var(--shell-bf, system-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-cards-eyebrow);
}
.ssla-g-cards-heading {
  font: 700 var(--g-cards-heading-size, clamp(26px, 3.5vw, 40px))/1.2 var(--g-cards-heading-family, var(--shell-hf, system-ui));
  color: var(--g-cards-heading);
  margin: 0;
}
.ssla-g-cards-intro {
  font: 400 var(--g-cards-body-size, 18px)/1.55 var(--g-cards-body-family, var(--shell-bf, system-ui));
  color: var(--g-cards-body);
  margin: 0;
}
.ssla-g-cards-grid {
  display: grid;
  gap: var(--g-cards-gap, 24px);
}
.ssla-g-cards-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--g-cards-card-padding, 24px);
  background: var(--g-cards-card-bg, transparent);
  border: 1px solid var(--g-cards-card-border, transparent);
}
/* v3.24.47 — per-card accent color. Gated on a non-empty data-accent so a
   card without a color set is untouched (the empty --ssla-card-accent is
   never read). Drives a top-border accent + heading tint, mirroring legacy
   per-domain card colors carried through the convert. */
.ssla-g-cards-card[data-accent]:not([data-accent=""]) {
  border-top: 3px solid var(--ssla-card-accent);
}
.ssla-g-cards-card[data-accent]:not([data-accent=""]) .ssla-g-cards-card-heading {
  color: var(--ssla-card-accent);
}
.ssla-g-cards-card-eyebrow {
  font: 600 11px/1.2 var(--shell-bf, system-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-cards-eyebrow);
}
.ssla-g-cards-card-heading {
  font: 600 20px/1.3 var(--g-cards-heading-family, var(--shell-hf, system-ui));
  color: var(--g-cards-heading);
  margin: 0;
}
.ssla-g-cards-card-subtitle {
  font: 600 13px/1.4 var(--g-cards-body-family, var(--shell-bf, system-ui));
  color: var(--g-cards-eyebrow, var(--g-cards-body));
  margin: -2px 0 2px;
  opacity: 0.85;
}
.ssla-g-cards-card-subtitle:empty { display: none; }
.ssla-g-cards-card-body {
  font: 400 15px/1.55 var(--g-cards-body-family, var(--shell-bf, system-ui));
  color: var(--g-cards-body);
  margin: 0;
}
.ssla-g-cards-card-cta {
  margin-top: auto;
  padding-top: 8px;
  font: 600 14px/1 var(--shell-bf, system-ui);
  color: var(--g-cards-heading);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
}

/* Count */
.ssla-g-cards--count-two .ssla-g-cards-grid   { grid-template-columns: repeat(2, 1fr); }
.ssla-g-cards--count-three .ssla-g-cards-grid { grid-template-columns: repeat(3, 1fr); }
.ssla-g-cards--count-four .ssla-g-cards-grid  { grid-template-columns: repeat(4, 1fr); }

/* Layout — list (v3.23.54): single-column feature rows with hairline dividers.
 * Overrides the count-* grid to one column and re-flows each card as a row
 * (leading eyebrow/number, then stacked heading + body + cta). The divider
 * is layout-owned (--g-cards-list-divider) so it shows in the default plain
 * card_style; card_style fills/borders still cascade if the author picks them.
 * grid layout carries no rule — existing instances are unaffected. */
.ssla-g-cards--layout-list .ssla-g-cards-grid {
  grid-template-columns: 1fr;
  gap: 0;
}
.ssla-g-cards--layout-list .ssla-g-cards-card {
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--g-cards-list-divider, rgba(0, 0, 0, 0.12));
}
.ssla-g-cards--layout-list .ssla-g-cards-card:last-child { border-bottom: 0; }
.ssla-g-cards--layout-list .ssla-g-cards-card-eyebrow {
  flex: 0 0 auto;
  min-width: 52px;
  padding-top: 3px;
}
.ssla-g-cards--layout-list .ssla-g-cards-card-cta { margin-top: 6px; }

/* Density */
.ssla-g-cards--density-minimal .ssla-g-cards-head { display: none; }
.ssla-g-cards--density-standard .ssla-g-cards-eyebrow,
.ssla-g-cards--density-standard .ssla-g-cards-intro { display: none; }
/* density-rich: all visible */

/* Skeleton */
.ssla-g-cards {
  --g-cards-fg:                 var(--brand-fg);
  --g-cards-eyebrow:            var(--brand-accent);
  --g-cards-heading:            var(--brand-fg);
  --g-cards-body:               var(--brand-fg);
  --g-cards-card-bg:            transparent;
  --g-cards-card-border:        transparent;
  --g-cards-heading-family:     var(--shell-hf, system-ui);
  --g-cards-heading-size:       clamp(26px, 3.5vw, 40px);
  --g-cards-body-family:        var(--shell-bf, system-ui);
  --g-cards-body-size:          18px;
  --g-cards-section-padding:    0;
  --g-cards-content-max-width:  1200px;
  --g-cards-gap:                24px;
  --g-cards-card-padding:       24px;
  --g-cards-list-divider:       rgba(0, 0, 0, 0.12);
}

/* Card style — v3.24.04: MOVED below the skeleton. Previously these sat ABOVE
 * the skeleton, so the skeleton's `--g-cards-card-bg/border: transparent`
 * defaults (same 0,1,0 specificity, later in source) overrode them and the
 * plain/bordered/filled control did nothing — EXCEPT in dark mode, which was
 * rescued by the higher-specificity .tone-dark.card-style-* compounds below.
 * Light/default/accent tones had no such rescue → the control was dead in light
 * mode (Glenn 2026-06-23). Ordering them after the skeleton lets the modifiers
 * win for every tone; dark's base border + the .tone-dark.card-style-* compounds
 * still come later/higher-specificity, so dark behaviour is unchanged. */
.ssla-g-cards--card-style-plain    { --g-cards-card-bg: transparent;        --g-cards-card-border: transparent; }
.ssla-g-cards--card-style-bordered { --g-cards-card-bg: transparent;        --g-cards-card-border: rgba(0,0,0,0.20); }
.ssla-g-cards--card-style-filled   { --g-cards-card-bg: rgba(0,0,0,0.06);   --g-cards-card-border: transparent; }

/* Tone */
.ssla-g-cards--tone-light {
  --g-cards-fg:      #1a1a1a;
  --g-cards-heading: #1a1a1a;
  --g-cards-body:    #4a4a4a;
}
.ssla-g-cards--tone-dark {
  --g-cards-fg:            #f5f5f5;
  --g-cards-heading:       #ffffff;
  --g-cards-body:          #d0d0d0;
  --g-cards-card-border:   rgba(255,255,255,0.12);
  --g-cards-list-divider:  rgba(255,255,255,0.16);
}
.ssla-g-cards--tone-dark.ssla-g-cards--card-style-bordered { --g-cards-card-border: rgba(255,255,255,0.28); }
.ssla-g-cards--tone-dark.ssla-g-cards--card-style-filled   { --g-cards-card-bg: rgba(255,255,255,0.10); }
.ssla-g-cards--tone-accent {
  --g-cards-fg:      var(--preset-accent-fg, #1a1a1a);
  --g-cards-heading: var(--preset-accent-fg, #1a1a1a);
  --g-cards-body:    var(--preset-accent-fg, #1a1a1a);
}

@media (max-width: 768px) {
  .ssla-g-cards-inner { padding: 40px 16px; gap: 28px; }
  .ssla-g-cards-grid { grid-template-columns: 1fr !important; }
  .ssla-g-cards-heading { font-size: clamp(22px, 5vw, 30px); }
}