/**
 * 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));
  font-weight: var(--paint-heading-weight, 700); /* v3.52.04 — painted ProSet heading weight reaches g- heading; 700 no-paint default */
  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;
}
/* v3.44.57 — collapse an empty intro so a heading-only (eyebrow + H2, no intro)
 * rich section matches the reference bar without an empty gap. Mirrors the
 * existing -subtitle:empty / -card-icon:empty collapse pattern; a non-empty
 * intro is untouched. */
.ssla-g-cards-intro:empty { display: none; }
.ssla-g-cards-grid {
  display: grid;
  gap: var(--g-cards-gap, 24px);
  /* v3.44.74 — responsive default grid. The card-count stepper (1–6) drives the
     card ITEM count; the grid flows to fit via auto-fit, so N cards yield up to
     N columns and wrap sensibly at any count. `min(100%, 240px)` keeps a single
     card from forcing horizontal overflow on a narrow container. The legacy
     .ssla-g-cards--count-{two|three|four} rules below override this with a fixed
     column count, so a STORED page that explicitly chose Columns is unchanged;
     the new default variant `auto` (.ssla-g-cards--count-auto) carries no such
     rule and therefore keeps this responsive flow. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.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);
}
/* v3.44.71 — per-card BACKGROUND image. Gated on the --has-image modifier the
   bridge stamps only when a card carries items.N.image__url, so a card WITHOUT
   an image is 100% untouched (no bg, no scrim, no ink override). The image is
   painted as a cover/center background on the card; a dark bottom-heavy gradient
   scrim (::before) sits between the image and the content for legibility, and
   the card text is forced to LIGHT ink regardless of section tone.
   isolation:isolate makes the card its own stacking context so the scrim
   (z-index:0) never bleeds past this card and the content (z-index:1) always
   stacks above it. overflow:hidden clips the scrim to the squared card edge. */
.ssla-g-cards-card--has-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: var(--ssla-card-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Light ink over the dark scrim — consumed by eyebrow/subtitle/body/cta/icon,
     which all read these tokens. The heading needs a direct color override
     (below) to beat the shared --tone-light h-pin. */
  --g-cards-eyebrow: rgba(255, 255, 255, 0.92);
  --g-cards-heading: #ffffff;
  --g-cards-body:    rgba(255, 255, 255, 0.92);
  --g-cards-list-divider: rgba(255, 255, 255, 0.24);
}
.ssla-g-cards-card--has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.48) 55%,
    rgba(0, 0, 0, 0.32) 100%);
}
.ssla-g-cards-card--has-image > * {
  position: relative;
  z-index: 1;
}
/* v3.44.74 — per-card VIDEO background. Reuses the --has-image scrim + light-ink
   treatment; the decorative <video>/YouTube layer sits at the BACK of the
   isolated card, the scrim ::before above it, the content on top. The video's
   own cover-sizing comes from the shared `video.ssla-bg-video` /
   `.ssla-bg-video-wrap` rules in 0-shared.css; here we only settle the internal
   stacking so the scrim keeps the card text legible. */
.ssla-g-cards-card--has-video > .ssla-g-cards-card-video { z-index: 0; }
.ssla-g-cards-card--has-video::before { z-index: 1; }
.ssla-g-cards-card--has-video > *:not(.ssla-g-cards-card-video) { z-index: 2; }
/* Heading override: specificity (0,4,0) — .ssla-section + .ssla-g-cards +
   --has-image + -card-heading — beats the shared launch-sections.css
   --tone-light heading pin
   `.ssla-section[class*="ssla-g-"][class*="--tone-light"] :where(h1..h6)`
   at (0,3,0) (the :where() adds 0), so an image-backed card keeps a legible
   light heading even in a light-tone section. */
.ssla-section.ssla-g-cards .ssla-g-cards-card--has-image .ssla-g-cards-card-heading {
  color: #ffffff;
}
/* The card-icon wrapper pins its color to --g-cards-eyebrow at (0,1,0); the
   token override above already lightens it, but restate at higher specificity
   so it wins over the base .ssla-g-cards-card-icon color rule regardless of
   source order. */
.ssla-section.ssla-g-cards .ssla-g-cards-card--has-image .ssla-g-cards-card-icon {
  color: rgba(255, 255, 255, 0.92);
}

/* v3.44.73 — Edit-only affordance. The .ssla-g-cards-card-bg slot exists ONLY
   in the overlay/editor DOM (the bridge strips it on the public FE). It is the
   media-chooser anchor for a card's optional BACKGROUND image (data-ssla-field
   -type="media"). Glenn 2026-07-18: the old dashed dropzone (this rule's former
   40px strip + the generic overlay 160px "Add an image or video" box) distorted
   an imageless card before any media was attached. It is now a ZERO-FOOTPRINT
   anchor for a compact corner MEDIA pill — an imageless card renders at its
   natural height, and the pill is the only visible edit affordance. ALL of its
   styling is overlay-only and lives in assets/overlay/overlay.css (search
   "g-cards per-card background"); nothing to paint here, and the element never
   reaches the public FE. */

/* v3.44.41 — per-card flat SVG line icon. The wrapper holds one inline SVG
   from the render seam. Hidden when the keyword is empty/unknown (no glyph →
   :empty wrapper → no reserved space).
   v3.44.51 — the seam emits EITHER the Hub icon (<svg class="ss-icon"> from
   SSH_Icons::svg(), the preferred path) OR the local fallback (<svg
   class="ssla-icon"> from SSLA_Icons::svg()). The Hub svg carries no Launch
   size rule, so WITHOUT a cap here it balloons to its container (measured
   318px live on meeks). Cap BOTH classes. Size = the --g-cards-icon-size
   token set by the icon_size variant (Medium=44px default). Color defaults to
   the card EYEBROW color via the wrapper; icons use currentColor for
   stroke/fill so a per-card accent or explicit color still wins where set. */
.ssla-g-cards-card-icon:empty { display: none; }
.ssla-g-cards-card-icon {
  color: var(--g-cards-eyebrow);
}
.ssla-g-cards-card-icon .ssla-icon,
.ssla-g-cards-card-icon .ss-icon {
  width: var(--g-cards-icon-size, 44px);
  height: var(--g-cards-icon-size, 44px);
  margin-bottom: 12px;
  display: block;
}
.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);
  --g-cards-icon-size:          44px;
  /* v3.44.57 — rotating top-accent colors for the bordered card_style. Match
   * the meeks-home reference .card:nth-child rotation (primary → primary-dark →
   * secondary). Token-driven only (brand/shell tokens), never hardcoded brand
   * hex; currentColor is the last-resort neutral fallback. */
  --g-cards-accent-1:           var(--brand-accent, var(--shell-accent, currentColor));
  --g-cards-accent-2:           var(--shell-bg-dark, var(--brand-fg, currentColor));
  --g-cards-accent-3:           var(--shell-accent-2, var(--brand-accent, currentColor));
}

/* Icon size — v3.44.51. Section-level affordance (icon_size variant): the
 * author picks Small/Medium/Large; each sets the --g-cards-icon-size token
 * consumed by the card-icon svg cap above (both .ss-icon and .ssla-icon).
 * Medium mirrors the skeleton default (44px). */
.ssla-g-cards--icon-size-small  { --g-cards-icon-size: 32px; }
.ssla-g-cards--icon-size-medium { --g-cards-icon-size: 44px; }
.ssla-g-cards--icon-size-large  { --g-cards-icon-size: 64px; }

/* 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: var(--brand-line, var(--shell-line, rgba(0,0,0,0.12))); --g-cards-card-padding: 34px 30px; }
.ssla-g-cards--card-style-filled   { --g-cards-card-bg: rgba(0,0,0,0.06);   --g-cards-card-border: transparent; }

/* v3.44.57 — reference-quality BORDERED card. Matches the meeks-home reference
 * .card: a 1px hairline box + a 4px colored TOP accent that ROTATES per card
 * (primary → primary-dark → secondary, via --g-cards-accent-{1,2,3}), plus a
 * subtle lift on hover (shadow + translateY). Squared — NO border-radius (Suite
 * is squared). Accent is token-driven, never hardcoded brand hex. The rotating
 * accent is gated on data-accent="" so an EXPLICIT per-card accent (the
 * data-accent rule near the top of this file) still wins. Scoped away from
 * layout-list so the list variant keeps its own row dividers, no top-accent. */
.ssla-g-cards--card-style-bordered:not(.ssla-g-cards--layout-list) .ssla-g-cards-card {
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.ssla-g-cards--card-style-bordered:not(.ssla-g-cards--layout-list) .ssla-g-cards-card:hover {
  box-shadow: 0 18px 40px -22px rgba(13, 27, 42, 0.4);
  transform: translateY(-3px);
}
.ssla-g-cards--card-style-bordered:not(.ssla-g-cards--layout-list) .ssla-g-cards-card[data-accent=""] {
  border-top: 4px solid var(--g-cards-accent-1);
}
.ssla-g-cards--card-style-bordered:not(.ssla-g-cards--layout-list) .ssla-g-cards-card[data-accent=""]:nth-child(3n+2) {
  border-top-color: var(--g-cards-accent-2);
}
.ssla-g-cards--card-style-bordered:not(.ssla-g-cards--layout-list) .ssla-g-cards-card[data-accent=""]:nth-child(3n+3) {
  border-top-color: var(--g-cards-accent-3);
}

/* 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); }
}