/* === g-content-tracks — greenfield survivor conform (last survivor) === */
/* Surface = core --ssla-bg-color on root (§7.1). Tone surface from the shared  */
/* [data-ssla-variant-tone] rule (§7.3); the tone classes below set FOREGROUND  */
/* + track chrome ONLY — never the section bg. Legacy .ssla-tone-light dead     */
/* branch is gone.                                                              */

.ssla-section.ssla-g-content-tracks {
  background-color: var(--ssla-bg-color, transparent);
  color: var(--g-content-tracks-fg, #1a1a1a);
}

/* Skeleton — token defaults (preset/shell vars; tone rules below flip per tone).
   v3.23.03 conform: previously the section had no skeleton/tone rules and a
   single light --g-content-tracks-fg default (#e6e8eb), so on the default
   (light) surface text was light-on-light. Mirrors g-content-text's tone model;
   FOREGROUND + track chrome only — never the section bg (§7.3). */
.ssla-g-content-tracks {
  --g-content-tracks-fg:      var(--brand-fg, #1a1a1a);
  --g-content-tracks-heading: var(--brand-fg, #1a1a1a);
  --g-content-tracks-body:    var(--brand-fg, #333333);
  --g-content-tracks-eyebrow: var(--brand-accent, #1a1a1a);
}
.ssla-g-content-tracks--tone-light {
  --g-content-tracks-fg:           #1a1a1a;
  --g-content-tracks-heading:      #1a1a1a;
  --g-content-tracks-body:         #333333;
  --g-content-tracks-eyebrow:      var(--brand-accent, #1a1a1a);
  --g-content-tracks-track-bg:     rgba(0,0,0,0.04);
  --g-content-tracks-track-border: rgba(0,0,0,0.12);
}
.ssla-g-content-tracks--tone-dark {
  --g-content-tracks-fg:           #f5f5f5;
  --g-content-tracks-heading:      #ffffff;
  --g-content-tracks-body:         #d0d0d0;
  --g-content-tracks-eyebrow:      var(--brand-accent, #e6e8eb);
  --g-content-tracks-track-bg:     rgba(255,255,255,0.04);
  --g-content-tracks-track-border: rgba(255,255,255,0.18);
}
.ssla-g-content-tracks--tone-accent {
  --g-content-tracks-fg:      var(--preset-accent-fg, #1a1a1a);
  --g-content-tracks-heading: var(--preset-accent-fg, #1a1a1a);
  --g-content-tracks-body:    var(--preset-accent-fg, #1a1a1a);
  --g-content-tracks-eyebrow: var(--preset-accent-fg, #1a1a1a);
}

.ssla-g-content-tracks-inner {
  max-width: var(--g-content-tracks-content-max-width, 1120px);
  margin: 0 auto;
  padding: var(--g-content-tracks-section-padding, 80px) 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--g-content-tracks-column-gap, 56px);
  align-items: start;
}
.alignfull .ssla-g-content-tracks-inner { max-width: 100%; padding-left: 48px; padding-right: 48px; }

/* Text zone */
.ssla-g-content-tracks-eyebrow {
  display: block;
  font: 600 12px/1.2 var(--shell-bf, system-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-content-tracks-eyebrow, inherit);
  margin: 0 0 14px;
}
.ssla-g-content-tracks-heading {
  font: 700 var(--g-content-tracks-heading-size, clamp(26px, 3.4vw, 38px))/1.15 var(--g-content-tracks-heading-family, var(--shell-hf, system-ui));
  color: var(--g-content-tracks-heading, inherit);
  margin: 0 0 16px;
}
.ssla-g-content-tracks-body {
  font: 400 var(--g-content-tracks-body-size, 17px)/1.6 var(--g-content-tracks-body-family, var(--shell-bf, system-ui));
  color: var(--g-content-tracks-body, inherit);
  margin: 0;
}

/* Tracks zone (vertical stack of cards) */
.ssla-g-content-tracks-tracks {
  display: flex;
  flex-direction: column;
  gap: var(--g-content-tracks-track-gap, 16px);
}
.ssla-g-content-tracks-track {
  padding: var(--g-content-tracks-track-padding, 24px);
  background: var(--g-content-tracks-track-bg, rgba(127,127,127,0.06));
  border: 1px solid var(--g-content-tracks-track-border, rgba(127,127,127,0.18));
  transition: background .2s, border-color .2s;
}
.ssla-g-content-tracks-track-label {
  display: block;
  font: 600 11px/1.2 var(--shell-bf, system-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-content-tracks-eyebrow, inherit);
  margin: 0 0 6px;
}
.ssla-g-content-tracks-track-heading {
  font: 600 19px/1.3 var(--g-content-tracks-heading-family, var(--shell-hf, system-ui));
  color: var(--g-content-tracks-heading, inherit);
  margin: 0 0 8px;
}
.ssla-g-content-tracks-track-body {
  font: 400 15px/1.55 var(--g-content-tracks-body-family, var(--shell-bf, system-ui));
  color: var(--g-content-tracks-body, inherit);
  margin: 0;
}

/* Density: hide leading text-zone fields */
.ssla-g-content-tracks--density-minimal .ssla-g-content-tracks-eyebrow,
.ssla-g-content-tracks--density-minimal .ssla-g-content-tracks-heading,
.ssla-g-content-tracks--density-minimal .ssla-g-content-tracks-body,
.ssla-g-content-tracks--density-standard .ssla-g-content-tracks-eyebrow,
.ssla-g-content-tracks--density-standard .ssla-g-content-tracks-body { display: none; }

@media (max-width: 860px) {
  .ssla-g-content-tracks-inner { grid-template-columns: 1fr; gap: 36px; }
}