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

.ssla-section.ssla-g-columns {
  background: var(--g-columns-bg);
  color: var(--g-columns-fg);
  padding: var(--g-columns-section-padding);
}
.ssla-g-columns-inner {
  max-width: var(--g-columns-content-max-width);
  margin: 0 auto;
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.ssla-g-columns-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}
.ssla-g-columns-eyebrow {
  font: 600 12px/1.2 var(--shell-bf, system-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-columns-eyebrow);
}
.ssla-g-columns-heading {
  font: 700 var(--g-columns-heading-size, clamp(24px, 3.5vw, 36px))/1.2 var(--g-columns-heading-family, var(--shell-hf, system-ui));
  color: var(--g-columns-heading);
  margin: 0;
}
.ssla-g-columns-intro {
  font: 400 var(--g-columns-body-size, 18px)/1.55 var(--g-columns-body-family, var(--shell-bf, system-ui));
  color: var(--g-columns-body);
  margin: 0;
}
.ssla-g-columns-grid {
  display: grid;
  gap: var(--g-columns-gap, 32px);
}
.ssla-g-columns-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ssla-g-columns-cell-heading {
  font: 600 18px/1.3 var(--g-columns-heading-family, var(--shell-hf, system-ui));
  color: var(--g-columns-column-heading);
  margin: 0;
}
.ssla-g-columns-cell-body {
  font: 400 16px/1.55 var(--g-columns-body-family, var(--shell-bf, system-ui));
  color: var(--g-columns-body);
  margin: 0;
}

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

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

/* Skeleton */
.ssla-g-columns {
  --g-columns-bg:                 transparent;
  --g-columns-fg:                 var(--brand-fg);
  --g-columns-eyebrow:            var(--brand-accent);
  --g-columns-heading:            var(--brand-fg);
  --g-columns-body:               var(--brand-fg);
  --g-columns-column-heading:     var(--brand-fg);
  --g-columns-heading-family:     var(--shell-hf, system-ui);
  --g-columns-heading-size:       clamp(24px, 3.5vw, 36px);
  --g-columns-body-family:        var(--shell-bf, system-ui);
  --g-columns-body-size:          18px;
  --g-columns-section-padding:    0;
  --g-columns-content-max-width:  1200px;
  --g-columns-gap:                32px;
}

/* Tone */
.ssla-g-columns--tone-light {
  --g-columns-bg:              #ffffff;
  --g-columns-fg:              #1a1a1a;
  --g-columns-heading:         #1a1a1a;
  --g-columns-column-heading:  #1a1a1a;
  --g-columns-body:            #4a4a4a;
}
.ssla-g-columns--tone-dark {
  --g-columns-bg:              #1a1a1a;
  --g-columns-fg:              #f5f5f5;
  --g-columns-heading:         #ffffff;
  --g-columns-column-heading:  #ffffff;
  --g-columns-body:            #d0d0d0;
}
.ssla-g-columns--tone-accent {
  --g-columns-bg:              var(--preset-accent-bg, #f5f3ef);
  --g-columns-fg:              var(--preset-accent-fg, #1a1a1a);
  --g-columns-heading:         var(--preset-accent-fg, #1a1a1a);
  --g-columns-column-heading:  var(--preset-accent-fg, #1a1a1a);
  --g-columns-body:            var(--preset-accent-fg, #1a1a1a);
}

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