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

.ssla-section.ssla-g-columns {
  background-color: var(--ssla-bg-color, transparent);
  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: var(--paint-section-padding, 80px) 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));
  font-weight: var(--paint-heading-weight, 700); /* v3.52.04 — painted ProSet heading weight reaches g- heading; 700 no-paint default */
  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;
}
/* v3.44.52 — per-column flat SVG line icon (feature columns). Mirrors the
   g-cards card-icon treatment. The render seam emits EITHER the Hub icon
   (<svg class="ss-icon">) OR the local fallback (<svg class="ssla-icon">);
   the Hub svg carries no Launch size rule, so we MUST cap BOTH classes or it
   balloons to its container (cf. the g-cards 318px render bug fixed in
   v3.44.51). Size = the --g-columns-icon-size token set by the icon_size
   variant (Medium=44px default). Color defaults to the column EYEBROW color
   via the wrapper; icons use currentColor for stroke/fill. Hidden when the
   keyword is empty/unknown (:empty wrapper → no reserved space). */
/* v3.55.0 — optional per-column PHOTO (items.N.image). A column is a TEXT
   STACK, so the g-cards cover-background treatment (text over a scrim) would be
   illegible here; the photo instead renders full-bleed at the TOP of the cell,
   the same shape as g-cards image_position=top.

   ⭐ FLEET SAFETY — this rule is gated on the .ssla-g-columns-cell--has-image
   modifier, which the bridge stamps ONLY when items.N.image__url is non-empty.
   There is deliberately NO base rule for .ssla-g-columns-cell-media: an
   imageless column has no paint to inherit, and on the public front end the
   bridge removes the node from the markup entirely, so an imageless column
   emits and renders exactly what it did before this field existed. In the
   editor the node survives (it is the media/icon chooser anchor) and
   overlay.css collapses it to a zero-footprint 1px absolute box. */
.ssla-g-columns-cell--has-image .ssla-g-columns-cell-media {
  display: block;
  width: 100%;
  margin: 0 0 4px;
  aspect-ratio: 3 / 2;
  background-image: var(--ssla-cell-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ssla-g-columns-cell-icon:empty { display: none; }
.ssla-g-columns-cell-icon {
  color: var(--g-columns-eyebrow);
}
.ssla-g-columns-cell-icon .ssla-icon,
.ssla-g-columns-cell-icon .ss-icon {
  width: var(--g-columns-icon-size, 44px);
  height: var(--g-columns-icon-size, 44px);
  margin-bottom: 8px;
  display: block;
}
/* v3.40.03 — per-column eyebrow (absorbs columns-3 c{n}l labels). Renders only
   when non-empty; the injected FE placeholder is suppressed via :empty. */
.ssla-g-columns-cell-eyebrow {
  display: block;
  font: 700 11px/1.2 var(--g-columns-body-family, var(--shell-bf, system-ui));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-columns-eyebrow, var(--brand-accent));
  margin: 0 0 4px;
}
.ssla-g-columns-cell-eyebrow:empty { display: none; }
.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 — ONE token, ONE ladder (v3.55.0) ════════════════════════
 * Identical abstraction to g-cards (see the long note in g-cards.css): the
 * count variant sets ONE custom property, --g-columns-cols, a single rule
 * paints it, and responsiveness is expressed by stepping that ONE token down at
 * the SAME shared breakpoints — 1400 (cap 8), 1100 (cap 4), 900 (cap 3) and 768
 * (the authored `mobile` count, default one).
 *
 * v3.55.01 — the axis reaches TWELVE. Six new token lines and one new rung; no
 * new grid rule, which is the whole point of the token. Unlike g-cards, `count`
 * here ALSO drives rendered item rows, so twelve columns means twelve items.
 *
 * ⭐ THE FLOOR IS AUTHORED, NOT ASSUMED (v3.55.01). The ≤768 floor used to be
 * `grid-template-columns: 1fr !important` at the foot of this file. The flag was
 * load-bearing — the paint rule is (0,2,0) and a bare grid selector is (0,1,0),
 * so the floor loses without it — which is why deleting it required turning the
 * floor into a rung of this ladder first. And one across is not universally
 * right: an icon-and-label column reads fine 2-up on a phone, a prose column
 * does not. So the rung is driven by a `mobile` variant the author picks
 * (Columns on mobile — One / Two), NOT by per-site Custom CSS, which is the
 * hack v3.55.0 retired for the desktop count. Default `one` +
 * variant_defaults() ⇒ every stored instance renders as it did under the flag.
 * Full reasoning in the g-cards.css note.
 *
 * two/three/four sit at or below every cap, so they never step and every stored
 * instance is byte-identical. Only five and six move, and no instance can be
 * carrying those — the options allow-list did not admit them until this build. */
.ssla-g-columns--count-two    { --g-columns-cols: 2; }
.ssla-g-columns--count-three  { --g-columns-cols: 3; }
.ssla-g-columns--count-four   { --g-columns-cols: 4; }
.ssla-g-columns--count-five   { --g-columns-cols: 5; }
.ssla-g-columns--count-six    { --g-columns-cols: 6; }
.ssla-g-columns--count-seven  { --g-columns-cols: 7; }
.ssla-g-columns--count-eight  { --g-columns-cols: 8; }
.ssla-g-columns--count-nine   { --g-columns-cols: 9; }
.ssla-g-columns--count-ten    { --g-columns-cols: 10; }
.ssla-g-columns--count-eleven { --g-columns-cols: 11; }
.ssla-g-columns--count-twelve { --g-columns-cols: 12; }

:is(.ssla-g-columns--count-two,
    .ssla-g-columns--count-three,
    .ssla-g-columns--count-four,
    .ssla-g-columns--count-five,
    .ssla-g-columns--count-six,
    .ssla-g-columns--count-seven,
    .ssla-g-columns--count-eight,
    .ssla-g-columns--count-nine,
    .ssla-g-columns--count-ten,
    .ssla-g-columns--count-eleven,
    .ssla-g-columns--count-twelve) .ssla-g-columns-grid {
  grid-template-columns: repeat(var(--g-columns-cols), 1fr);
}

/* v3.55.01 — the wide rung, added when the axis reached twelve. */
@media (max-width: 1400px) {
  .ssla-g-columns--count-nine,
  .ssla-g-columns--count-ten,
  .ssla-g-columns--count-eleven,
  .ssla-g-columns--count-twelve { --g-columns-cols: 8; }
}
@media (max-width: 1100px) {
  .ssla-g-columns--count-five,
  .ssla-g-columns--count-six,
  .ssla-g-columns--count-seven,
  .ssla-g-columns--count-eight,
  .ssla-g-columns--count-nine,
  .ssla-g-columns--count-ten,
  .ssla-g-columns--count-eleven,
  .ssla-g-columns--count-twelve { --g-columns-cols: 4; }
}
@media (max-width: 900px) {
  .ssla-g-columns--count-five,
  .ssla-g-columns--count-six,
  .ssla-g-columns--count-seven,
  .ssla-g-columns--count-eight,
  .ssla-g-columns--count-nine,
  .ssla-g-columns--count-ten,
  .ssla-g-columns--count-eleven,
  .ssla-g-columns--count-twelve { --g-columns-cols: 3; }
}
/* v3.55.01 — the mobile rung: the ladder's last step, and the only one the
 * author picks rather than inherits. Replaces the `!important` floor. */
@media (max-width: 768px) {
  .ssla-g-columns--mobile-one { --g-columns-cols: 1; }
  .ssla-g-columns--mobile-two { --g-columns-cols: 2; }
  :is(.ssla-g-columns--mobile-one,
      .ssla-g-columns--mobile-two) .ssla-g-columns-grid {
    grid-template-columns: repeat(var(--g-columns-cols), 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-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;
  --g-columns-icon-size:          44px;
}

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

/* Tone */
.ssla-g-columns--tone-light {
  --g-columns-fg:              #1a1a1a;
  --g-columns-heading:         #1a1a1a;
  --g-columns-column-heading:  #1a1a1a;
  --g-columns-body:            #4a4a4a;
}
.ssla-g-columns--tone-dark {
  --g-columns-fg:              #f5f5f5;
  --g-columns-heading:         #ffffff;
  --g-columns-column-heading:  #ffffff;
  --g-columns-body:            #d0d0d0;
}
.ssla-g-columns--tone-accent {
  --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; }
  /* v3.55.01 — safety net for an instance carrying NO mobile class at all; the
   * mobile rung above owns the normal case. Lowest possible specificity (0,1,0)
   * and no `!important`, so the rung and any site rule both outrank it. */
  .ssla-g-columns-grid { grid-template-columns: 1fr; gap: 24px; }
  .ssla-g-columns-heading { font-size: clamp(22px, 5vw, 28px); }
}