/* ============================================================
   Split section — the content stack beside one image. Ported from the mockup's
   .prodsplit + .lhead (styles/product.css, styles/lithography.css): the product
   "overview" section, and the shape every product page repeats.

   The container owns the grid, the gap and the type scale its atoms wear.

   Child selectors throughout: 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-split__grid {
  display: grid;
  /* the copy column is the wider one — the mockup's 1.05 / 0.95 */
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5cqi, 64px);
  align-items: center;
}
.vt-split--media-left .vt-split__grid { grid-template-columns: 0.95fr 1.05fr; }
/* The body is always FIRST in the DOM (see render.php); the side is done with
   `order`, so the reading order never depends on the visual arrangement. */
.vt-split--media-left .vt-split__media { order: -1; }
.vt-split--no-media .vt-split__grid { grid-template-columns: minmax(0, 1fr); }

/* The hug — the mockup's .flagship--light grid ("product column hugs the
   render so the copy sits close", Petter 2026-06-16): the media track is
   `auto`, sized by the image itself (its width follows from the max-height
   clamp below), and the copy takes everything else. The gap is the mockup's
   own fixed 48px, not the default clamp — with the image column no longer half
   the band, a 5cqi gap would push the copy right back where it came from.
   These sit ABOVE the @container fold on purpose: the fold's one-column rule
   ties on specificity and must keep winning by order. */
.vt-split--media-hug .vt-split__grid {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
}
.vt-split--media-hug.vt-split--media-left .vt-split__grid {
  grid-template-columns: auto minmax(0, 1fr);
}

/* ---- the content stack ---- */
.vt-split__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. The
     mockup made exactly this fix elsewhere and left the section kicker behind. */
  --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);
  /* Tighter than the hero's 28px, because this stack is the mockup's 14/16px
     rhythm rather than a hero's. The group break below does the rest. */
  gap: 16px;
}

/* An eyebrow part-way down the stack is STARTING A NEW GROUP — "Recommended
   use" under the lead, in the mockup's own markup a 64px jump. Expressing it as
   "extra room before a non-first eyebrow" keeps the rule in the container,
   where spacing belongs, instead of putting a margin back on the atom. A cards
   row gets the same break for the same reason (the Why Visitech pillars under
   the section head — the mockup's .lhead spends 64px there too): 16 gap + 48. */
.vt-split__body > .wp-block-visitech-eyebrow:not(:first-child),
.vt-split__body > .wp-block-visitech-cards:not(:first-child) { margin-top: 48px; }

/* ---- the media column ---- */
.vt-split__media {
  margin: 0;
  text-align: center;
}
.vt-split__img {
  display: inline-block;
  width: auto;
  max-width: 100%;
  max-height: clamp(380px, 46cqi, 520px);
  height: auto;
}
/* The deep-etched product renders are cut out on transparency, so the shadow
   has to follow the silhouette — drop-shadow(), not box-shadow. Off for
   anything rectangular: a photo with a floating shadow reads as a mistake.
   No token carries an opacity, so the alpha is mixed here from --color-ink. */
.vt-split__img--shadow {
  filter: drop-shadow(0 32px 28px color-mix(in srgb, var(--color-ink) 26%, transparent));
}

/* ---- the framed-photo treatment ----
   The mockup's .why-media / .inprod__media: a PHOTOGRAPH cover-cropped to 4:3,
   rounded, with a hairline border — where the default treatment above is a
   cut-out render's (intrinsic shape, silhouette shadow). One frame serves both
   mockup variants; with `mediaShadow` on it wears .inprod__media's soft photo
   shadow, on the FIGURE, since anything on the img is clipped by the frame. */
.vt-split__media--frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.vt-split__media--frame .vt-split__img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
.vt-split__media--shadow {
  box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--color-ink) 50%, transparent);
}
/* The caption over the photo's lower edge. White on a bottom-up ink gradient —
   the gradient is what makes 13px white text readable over an unknown
   photograph, so the pair never separates. */
.vt-split__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(0deg, color-mix(in srgb, var(--color-ink) 78%, transparent), transparent);
}

/* Phones: one column, and the image goes on top whichever side it was on —
   the mockup's own call (.prodsplit__media { order: -1 }). */
@container vt-section (max-width: 860px) {
  /* the hug pair is named because .vt-split--media-hug.vt-split--media-left is
     (0,3,0) — order alone would not fold it */
  .vt-split .vt-split__grid,
  .vt-split--media-left .vt-split__grid,
  .vt-split--media-hug .vt-split__grid,
  .vt-split--media-hug.vt-split--media-left .vt-split__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .vt-split .vt-split__media { order: -1; }
  .vt-split > .vt-split__inner > .vt-split__grid > .vt-split__body > .wp-block-visitech-eyebrow:not(:first-child),
  .vt-split > .vt-split__inner > .vt-split__grid > .vt-split__body > .wp-block-visitech-cards:not(:first-child) {
    margin-top: 32px;
  }
  /* the mockup's own phone call on .inprod__media: 4:3 full-bleed is too tall
     in a one-column stack */
  .vt-split .vt-split__media--frame { aspect-ratio: 16 / 10; }
}