/* =============================================================================
   Basic Callout — block-wide spacing + non-full-bleed layout
   Per designer: section sits at 50px left/right padding on desktop, and
   adjacent head-elements (title, titleAlt, lead, content, CTA) are
   separated by exactly 100px of vertical breathing room. Because the
   layout uses flex `gap`, an unpopulated element produces zero space
   instead of a fixed-height empty band — collapsing automatically when
   any of (title, titleAlt, lead, content) is blank.

   Unlike most VIO sections (which are full-bleed), the Basic Callout sits
   as a centered box of its bg color within the page width — so the page
   bg (lotion by default) shows on either side. If the callout bg matches
   the page bg, the callout visually disappears into the page (no box).
   ============================================================================= */

/* Override the post-content full-bleed (which sets width: 100vw) so the
   callout sits 50px in from each viewport edge — exposing the page bg
   (lotion) on both sides regardless of how wide the viewport is.

   The base full-bleed rule in viomedspa-global.css uses
     body:not(.editor-styles-wrapper) .wp-block-post-content
     .vio-section:not(.wp-block-group) { width:100vw; margin-left:calc(50% - 50vw) }
   We match the same selector + an extra class so this wins on specificity,
   and reuse the `calc(50% - 50vw)` trick to escape post-content's own
   max-width — but then add +50px so the left edge lands 50px in from
   viewport-left, and constrain the width to viewport-minus-100px so the
   right edge lands 50px in from viewport-right. Result: 50px of page bg
   always visible on both sides, the callout box itself in between. */
/* Apply on any page regardless of post-content wrapper. The original
   override scoped to `.wp-block-post-content .vio-section.vio-basic-callout`
   matched only on Site 1 — on microsites the routing replaces the
   core/post-content block's output with raw pre-rendered HTML (no
   `.wp-block-post-content` wrapper class), so the scoped rule didn't
   apply and the section reverted to its parent's natural full width.

   The margin trick `calc(50% - 50vw + 50px)` plus `width: calc(100vw - 100px)`
   is parent-width-agnostic: regardless of whether the parent is a
   constrained post-content container (Site 1) or a full-viewport main
   element (microsite), the math always positions the section's left
   edge at viewport_x = 50px and its right edge at viewport_x = 100vw - 50px.
   !important guards against the global full-bleed rule winning the
   cascade in either context. */
.vio-section.vio-basic-callout {
  width: calc(100vw - 100px) !important;
  max-width: calc(100vw - 100px) !important;
  margin-left: calc(50% - 50vw + 50px) !important;
  margin-right: calc(50% - 50vw + 50px) !important;
}

/* ── Basic Callout Frame ──────────────────────────────────────────────
   Optional outer wrapper rendered around a basic-callout section.
   Provides 50px of vertical padding in the page bg color (lotion) so
   the colored callout box reads as a distinct card with lotion gutters
   on all four sides — even when the surrounding sections (above/below)
   share the same color as the callout.

   The inner .vio-basic-callout still applies its own 100vw-100px escape,
   which now resolves against the same viewport (the outer frame is
   already full-bleed), so the L/R 50px lotion gutters are preserved. */
.vio-section.vio-basic-callout-frame {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
  /* Reset any inherited horizontal padding so the inner section's escape
     trick keeps working without competing with frame padding. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Zero out the inner callout's own vertical margins (browsers can give
   block sections collapsing margins) so the frame's 50px padding is the
   sole source of vertical separation. */
.vio-section.vio-basic-callout-frame > .vio-section.vio-basic-callout {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (min-width: 1280px) {
  .vio-section.vio-basic-callout,
  section.vio-section.vio-basic-callout {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* Flex column with gap on the head/intro — every direct child gets 100px
   of space above/below it (gap only applies BETWEEN actual children, so
   missing siblings collapse the space automatically). */
.vio-basic-callout .vio-section__intro {
  display: flex;
  flex-direction: column;
  gap: 100px;
}
.vio-basic-callout .vio-section__head {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin: 0;
}
/* Element-level margin reset — the gap above handles all vertical
   spacing, so we don't want default heading/p margins adding to it. */
.vio-basic-callout .vio-section__head > * {
  margin: 0;
}
.vio-basic-callout .vio-section__lead,
.vio-basic-callout .vio-section__content-copy {
  margin: 0;
}
.vio-basic-callout .vio-section__lead > :last-child,
.vio-basic-callout .vio-section__content-copy > :last-child {
  margin-bottom: 0;
}

@media (max-width: 1279px) {
  /* Tablet/mobile — proportionally smaller gap so the block isn't a giant
     wall of whitespace on a phone. */
  .vio-basic-callout .vio-section__intro,
  .vio-basic-callout .vio-section__head {
    gap: 48px;
  }
}

/* =============================================================================
   Basic Callout — Boxed variant
   The outer section is transparent so only the cream inner box is visible.
   Negative margins on the outer section pull it up/down so the cream box
   appears to float as a notch at the boundary between adjacent sections.
   Desktop only — on mobile the block renders as a normal section.
   ============================================================================= */

@media (min-width: 1080px) {
  .vio-basic-callout--boxed {
    /* Outer background — gradient from CSS custom properties set via inline style.
       Defaults fall through to transparent on BOTH halves so the section above
       (when negative-margin-top creates an overlap) shows through the left/right
       strips around the inset card. Editors who explicitly pick a non-transparent
       top/bottom in the inspector still get the gradient — they're choosing a
       deliberate fill colour. */
    background: linear-gradient(
      to bottom,
      var(--vio-boxed-bg-top, transparent) 50%,
      var(--vio-boxed-bg-bottom, transparent) 50%
    ) !important;
    overflow: visible;

    /* Zero vertical padding — the inner box controls all vertical space. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    /* position:relative activates z-index so this section paints on top of
       the adjacent 50/50 sections (which are position:static). */
    position: relative;
    z-index: 2;
  }

  /* Negative outer-section margins pull the section's edges up/down into the
     adjacent sections, so the cream inner box floats at the boundary.
     WordPress injects: `:root :where(.is-layout-flow) > .vio-section`
       { margin-block-start: 0 !important }  <- specificity (0,2,0)
     Three classes = (0,3,0) beats it. */
  .vio-section.vio-basic-callout.vio-basic-callout--boxed {
    margin-block-start: var(--vio-boxed-overlap-top, -6.8vw) !important;
    margin-block-end:   var(--vio-boxed-overlap-bottom, -4.2vw) !important;
  }

  .vio-basic-callout--boxed .vio-section__inner {
    position: relative;
    z-index: 2;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--wp--preset--color--vio-lotion, #f9f5f1) !important;
    padding: 36px var(--wp--preset--spacing--500, 20px);
  }
}

/* =============================================================================
   Basic Callout — FAQ 50/50 mode
   When includeFaqs is on, the block becomes a two-column grid: content + FAQs.
   ============================================================================= */

.vio-basic-callout__col,
.vio-basic-callout__col--content,
.vio-basic-callout__col--faqs {
  min-width: 0;
}

/* When in FAQ mode, tighten the intro gap from the normal 100px to something
   more appropriate for a side-by-side layout. */
.vio-basic-callout--has-faqs .vio-section__intro {
  gap: 24px;
}
.vio-basic-callout--has-faqs .vio-section__head {
  gap: 24px;
}

@media (min-width: 768px) {
  .vio-basic-callout--has-faqs .vio-basic-callout__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 100px gap between the two columns — the ONLY horizontal breathing
       room between content + FAQs. No outer padding, so each column's
       content can stretch edge-to-edge of its 50% slot. */
    gap: 100px;
    align-items: center;
  }

  /* Vertical centering only — content + FAQs flex-stack and center
     vertically when the column is taller than its content. Outer edges
     (left of content column, right of FAQs column) get no padding so
     text can stretch the full width of its column. The grid gap above
     handles the inner spacing. */
  .vio-basic-callout.vio-basic-callout--has-faqs .vio-basic-callout__col--content,
  .vio-basic-callout.vio-basic-callout--has-faqs .vio-basic-callout__col--faqs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .vio-basic-callout.vio-basic-callout--has-faqs .vio-basic-callout__col--content {
    max-width: 700px;
    width: 100%;
    justify-self: center;
  }

  /* Legacy hook — same effect as the default now (centered). */
  .vio-basic-callout--content-valign-center .vio-basic-callout__col--content {
    align-self: center;
  }

  /* FAQs on the left: swap column order */
  .vio-basic-callout--faqs-left .vio-basic-callout__col--content {
    order: 2;
  }
  .vio-basic-callout--faqs-left .vio-basic-callout__col--faqs {
    order: 1;
  }

  /* Sticky FAQ column */
  .vio-basic-callout--sticky-faqs .vio-basic-callout__col--faqs {
    position: sticky;
    top: calc(var(--vio-fixed-top, 96px) + 24px);
    align-self: start;
  }
}

/* Mobile: stack vertically, content first */
@media (max-width: 767px) {
  .vio-basic-callout--has-faqs .vio-basic-callout__grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .vio-basic-callout__col--content {
    order: 1;
  }
  .vio-basic-callout__col--faqs {
    order: 2;
  }
}

/* =============================================================================
   Basic Callout — Surround
   Outer wrapper that creates an inset card look. The outer div is full-bleed
   with the surround colour; the inner section keeps its own bg, producing a
   visible border of surround colour on all sides.
   ============================================================================= */

.vio-basic-callout-surround {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(24px, 4vw, 50px);
}

/* The inner section should NOT do its own inset when wrapped */
.vio-basic-callout-surround .vio-section.vio-basic-callout {
  width: auto !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =============================================================================
   Basic Callout — Outer Background
   Full-bleed wrapper that colours the gutter strips on either side of the
   inset section. Unlike Surround (which adds padding to create a card frame),
   Outer Background has zero padding — the section keeps its normal 50px inset
   and the wrapper colour simply fills behind it.
   ============================================================================= */

.vio-basic-callout-outer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}