/* ============================================================
   Simple section — one stack, the width of the band. Ported from the mockup's
   .lsec + .lhead (styles/lithography.css, styles/product.css).

   The container owns the layout, the gap and the type scale its atoms wear; the
   atoms carry no margins. The head scale is the same .lhead as the split's, so
   a heading is the same size whichever body section it sits in.

   Child selectors where anything meets the skeleton: WordPress inlines a
   block's style.css BEFORE the theme's sheets, so a block rule that only ties
   with .vt-section__inner on specificity LOSES. See BLOCKS.md trap 2.
   ============================================================ */
.vt-simple__body {
  /* the type scale this section imposes on its atoms — the mockup's .lhead */
  --vt-eyebrow-size: 13px;
  --vt-eyebrow-tracking: 0.16em;
  /* dark purple, not the mockup's light purple: at 13px uppercase that measures
     4.11:1 on the mist band and fails AA, where dark purple is 7.4:1. Same fix
     the split section makes, for the same reason. */
  --vt-eyebrow-color: var(--color-dark-purple);
  --vt-eyebrow-dot: var(--color-light-purple);
  --vt-eyebrow-dot-ring: 3px;

  --vt-title-size: clamp(31px, 4cqi, 48px);
  --vt-title-weight: 200;
  --vt-title-leading: 1.08;
  --vt-title-tracking: -0.02em;

  --vt-text-size: 18px;
  --vt-text-leading: 1.6;
  --vt-text-measure: 660px;

  display: flex;
  flex-direction: column;
  align-items: var(--vt-align);
  /* the mockup's tight 14/16px head rhythm; the group break below does the rest */
  gap: 16px;
}

/* The head is capped, the rows are not. In the mockup this is .lhead's own
   max-width: 780px; here it is a rule about the stack, because there is no head
   wrapper to hang it on (render.php says why). The copy caps tighter still, via
   --vt-text-measure above — the mockup's .lhead__lead at 660px. */
.vt-simple__body > .wp-block-visitech-title,
.vt-simple__body > .wp-block-visitech-eyebrow {
  max-width: 780px;
}

/* A full-width row after the head is a NEW GROUP — the mockup states it as
   .lhead { margin-bottom: 64px }, and 16px of gap plus 48px here is that 64px
   exactly. Expressed as "extra room before a row that is not the first thing in
   the stack" so the rule stays in the container, where spacing belongs, instead
   of becoming a margin on the atom. Same shape as the split's mid-stack
   eyebrow, and the same for an eyebrow here: it is starting a group too. */
.vt-simple__body > .wp-block-visitech-cards:not(:first-child),
.vt-simple__body > .wp-block-visitech-mosaic:not(:first-child),
.vt-simple__body > .wp-block-visitech-metrics:not(:first-child),
.vt-simple__body > .wp-block-visitech-product-specs:not(:first-child),
.vt-simple__body > .wp-block-visitech-product-lenses:not(:first-child),
.vt-simple__body > .wp-block-visitech-buttons:not(:first-child),
.vt-simple__body > .wp-block-columns:not(:first-child),
.vt-simple__body > .wp-block-visitech-list:not(:first-child),
.vt-simple__body > .wp-block-visitech-form:not(:first-child),
.vt-simple__body > .wp-block-visitech-event-rows:not(:first-child),
.vt-simple__body > .wp-block-visitech-eyebrow:not(:first-child) {
  margin-top: 48px;
}

/* ---- a core Columns row in the stack (allowed 2026-08-22, for the mockup's
   .why-grid: a photo beside stacked pillars UNDER a full-width head) ----
   The container still owns the row's layout: the span (trap 9 — the stack's
   align-items would shrink-to-fit the flex row to nothing), the gap (the
   split's own clamp, where core falls back to a flat 2em), and the FOLD.
   Core stacks columns with a 781px VIEWPORT query; every fold on this stack is
   a container query at 860, so the same rule is stated here at the same fold —
   core's own `flex-basis: 100% !important`, because a column's width is an
   inline style. Between 781 and 860 core has already stacked it anyway. */
.vt-simple__body > .wp-block-columns {
  width: 100%;
  gap: clamp(28px, 5cqi, 64px);
}

/* A SMALL note belongs to whatever sits above it — the mockup's .specnote under
   the lens table, 26px below it. So it opts out of the 16px stack gap upward and
   takes the mockup's spacing instead, and it never takes the group break: a note
   is the tail of a group, not the head of one. */
.vt-simple__body > .wp-block-visitech-text.vt-text--small { margin-top: 10px; }

/* And a note ABSORBS the group break for whatever follows it: a note plus the
   CTA under it are the tail of one group, not two groups. 16px of gap plus 16
   is the mockup's 32px from .specnote to .spec-cta, where the generic break
   would have put 64 there. */
.vt-simple__body > .wp-block-visitech-text.vt-text--small + * { margin-top: 16px; }

/* Phones: the group break closes up with the air the skeleton also collapses.
   The long selector is the parent-scoped form the rules above need to beat on
   specificity — a container query does not raise it by itself. */
@container vt-section (max-width: 860px) {
  .vt-simple > .vt-simple__inner > .vt-simple__body > .wp-block-visitech-cards:not(:first-child),
  .vt-simple > .vt-simple__inner > .vt-simple__body > .wp-block-visitech-mosaic:not(:first-child),
  .vt-simple > .vt-simple__inner > .vt-simple__body > .wp-block-visitech-metrics:not(:first-child),
  .vt-simple > .vt-simple__inner > .vt-simple__body > .wp-block-visitech-product-specs:not(:first-child),
  .vt-simple > .vt-simple__inner > .vt-simple__body > .wp-block-visitech-product-lenses:not(:first-child),
  .vt-simple > .vt-simple__inner > .vt-simple__body > .wp-block-visitech-list:not(:first-child),
  .vt-simple > .vt-simple__inner > .vt-simple__body > .wp-block-visitech-form:not(:first-child),
  .vt-simple > .vt-simple__inner > .vt-simple__body > .wp-block-visitech-event-rows:not(:first-child),
  .vt-simple > .vt-simple__inner > .vt-simple__body > .wp-block-visitech-buttons:not(:first-child),
  .vt-simple > .vt-simple__inner > .vt-simple__body > .wp-block-columns:not(:first-child),
  .vt-simple > .vt-simple__inner > .vt-simple__body > .wp-block-visitech-eyebrow:not(:first-child) {
    margin-top: 32px;
  }
  /* the container-query twin of core's 781px viewport stacking — see above */
  .vt-simple__body > .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap;
    gap: 32px;
  }
  .vt-simple__body > .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
  }
}