/**
 * Gutenberg Block Compatibility — Grid placement for Webflow CSS
 * Replaces w-node-* ID-based grid placement with class-based placement
 * so native Gutenberg blocks render identically to the Webflow reference.
 */

/* ============================================================
   HERO — .div-block (2-column grid for buttons)
   ============================================================ */

/* Unwrap .wp-block-buttons so individual buttons are grid items */
.div-block > .wp-block-buttons {
  display: contents;
}

/* First button: left-aligned in its cell */
.div-block > .wp-block-buttons > .wp-block-button:first-child {
  justify-self: start;
}

/* Second button: centered vertically, left-aligned horizontally */
.div-block > .wp-block-buttons > .wp-block-button:last-child {
  place-self: center start;
}

/* Fallback for non-buttons markup (paragraphs with links) */
.div-block > .wp-block-button:first-child,
.div-block > p:first-child {
  justify-self: start;
}

.div-block > .wp-block-button:last-child,
.div-block > p:last-child {
  place-self: center start;
}

/* ============================================================
   NET POSITIVE — .div-block-2 grid placement
   ============================================================ */

.div-block-3 {
  justify-self: end;
}

.div-block-4 {
  grid-area: Area;
}

/* ============================================================
   THREE PRINCIPLES — .div-block-5 grid placement
   ============================================================ */

/* Center all principle cards inside the 3-column grid */
.div-block-5 > .wp-block-group.div-block-6,
.div-block-5 > .div-block-6 {
  justify-self: center;
}

/* ============================================================
   BLOG PROMO — .div-block-7 grid placement
   ============================================================ */

.div-block-8 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

/* ============================================================
   SUBSCRIBE — .div-block-9 grid placement
   ============================================================ */

.div-block-10 {
  place-self: center;
}

.blovkk {
  place-self: center end;
}