/**
 * Content with form — text column that pairs with a sibling webform.
 *
 * This component only ever renders the text side (see content-with-form.twig
 * for why). The two-column, text-left/form-right row is built with CSS one
 * level above this component's own `.mk3-sdc` root — on the two paragraph
 * wrappers in field_blocks:
 *   .paragraph--field-type--content-with-form  → this block
 *   .paragraph--type--embedded-element         → the webform, always the
 *                                                 very next paragraph
 *
 * Each paragraph in field_blocks is rendered inside its OWN `.field__item`
 * wrapper (Drupal's default field template), so the two `.paragraph` divs
 * are cousins, not siblings — `A + B` can never match across them. The real
 * siblings are the `.field__item` wrappers one level up, so `:has()` is used
 * to select those by which paragraph type they contain, then the float pair
 * is built on the `.field__item`s themselves. `.node__content` already
 * carries Drupal's own `.clearfix` class, so the floats don't need their own
 * trailing clear — that class already contains them.
 *
 * Below 768px both floated boxes are set to 100% width, which makes floats
 * wrap to a new line on their own — i.e. the stacked mobile layout falls out
 * of the same rules with no extra media query needed for the stacking itself.
 */
/* Both floats need the SAME margin-top/bottom — floats don't share margins
 * with each other, so giving it only to the left column (an earlier bug,
 * caught by live screenshot) left the right/webform column starting ~80px
 * higher than the left one, overlapping its top-right corner instead of
 * sitting level with it. */
.field__item:has(> .paragraph--field-type--content-with-form),
.field__item:has(> .paragraph--field-type--content-with-form)
+ .field__item:has(> .paragraph--type--embedded-element) {
  float: left;
  width: 100%;
  box-sizing: border-box;
  margin-top: clamp(2.5rem, 5vw, 5rem);
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

/* .field__items is full-bleed (matches every other full-bleed section's own
 * background), so the pair needs to center itself to the page's usual
 * 1280px content width the same way every other SDC's .mk3-*__inner does —
 * but as two floats, not one block, so it's done with calc() instead of a
 * shared margin:0 auto wrapper: the left column's margin-left pushes the
 * whole pair's left edge to the center minus half of 1280px, sized to 55%
 * of 1280px; the right column (45% of 1280px) simply follows it in normal
 * float flow, landing with its right edge at the mirrored position.
 *
 * A fixed `calc(50% - 40rem)` margin only equals 0 at exactly 1280px — for
 * any narrower viewport (the whole 769–1279px band) it goes NEGATIVE and
 * physically pushes the column off-screen to the left (a real bug caught by
 * live measurement, not just a cosmetic mismatch). `max(0px, …)` clamps that
 * margin so it can never go negative; percentage widths (capped by
 * max-width) take over the fluid sizing below 1280px instead of the fixed
 * rem widths, so the pair still fits the viewport at every size in between. */
@media (min-width: 768.02px) {
  .field__item:has(> .paragraph--field-type--content-with-form) {
    width: 55%;
    max-width: 44rem; /* 55% of 80rem (1280px) */
    margin-left: max(0px, calc(50% - 40rem));
  }

  .field__item:has(> .paragraph--field-type--content-with-form)
  + .field__item:has(> .paragraph--type--embedded-element) {
    width: 45%;
    max-width: 36rem; /* 45% of 80rem (1280px) */
  }
}

/* html/Home.html wraps both columns in ONE rounded #0F0F12 card
 * (border-radius:24px; padding:56px). The two Drupal paragraphs are
 * separate elements, each already carrying background-color:#0F0F12 +
 * color:#fff as an inline style (content model: field_background_color on
 * both, see home.yml) — this rounds the outer corners only (left column:
 * left corners, right/form column: right corners) and matches the mockup's
 * padding so the pair still reads as one card. The real webform rendered
 * inside the right column gets its own nested white rounded box, matching
 * the mockup's placeholder form styling (background:#fff; border-radius:16px;
 * padding:28px; color:#0F0F12).
 *
 * Neither box gets `height:100%` here — with a floated, auto-height parent
 * that's a no-op (percentage heights need an explicit parent height, which
 * `.field__item` never has). Matching the two cards' heights is instead
 * handled in JS (Drupal.behaviors.moka3abCtaEqualHeight in custom.js),
 * which measures both and sets an explicit inline height on each.
 */
.field__item:has(> .paragraph--field-type--content-with-form) > .paragraph {
  border-radius: 1.5rem 0 0 1.5rem;
  padding: 3.5rem 1.75rem 3.5rem 3.5rem;
  box-sizing: border-box;
}

.field__item:has(> .paragraph--field-type--content-with-form)
+ .field__item:has(> .paragraph--type--embedded-element) > .paragraph {
  border-radius: 0 1.5rem 1.5rem 0;
  padding: 1.75rem 3.5rem 1.75rem 1.75rem;
  box-sizing: border-box;
}

.field__item:has(> .paragraph--field-type--content-with-form)
+ .field__item:has(> .paragraph--type--embedded-element) > .paragraph > * {
  background: #fff;
  color: #0F0F12;
  border-radius: 1rem;
  padding: 1.75rem;
}

@media (max-width: 768px) {
  .field__item:has(> .paragraph--field-type--content-with-form) > .paragraph {
    border-radius: 1.5rem 1.5rem 0 0;
    padding: 2rem 1.5rem 1rem;
  }

  .field__item:has(> .paragraph--field-type--content-with-form)
  + .field__item:has(> .paragraph--type--embedded-element) > .paragraph {
    border-radius: 0 0 1.5rem 1.5rem;
    padding: 1rem 1.5rem 2rem;
  }
}

/* --- The component's own (visible-to-Twig) markup --- */

.mk3-sdc--content-with-form .mk3-sdc__inner {
  max-width: 40rem;
}