/* Layout options added in 1.10.0, for BOTH blocks: the group's heading gap and
   see-all alignment, the showcase's heading gap, controls alignment and see-all
   placement; since 1.15.0 the heading space steps that replace the gaps.

   A separate file on purpose. The two block stylesheets sit close to
   wp_maybe_inline_styles()'s 40000-byte combined budget (core inlines
   path-tagged styles smallest first until it is spent), and growing either one
   flipped other pages' stylesheets from inline <style> to <link> - a delivery
   change on pages that use none of this. This file is enqueued from
   render.php (bstr_enqueue_layout_options) only for a block that sets an
   option, so every other page's markup stays byte for byte as it was, and in
   the editor by the same function so the canvas draws them. It has no `path`
   data, so core never inlines it. It loads AFTER the block stylesheets and
   relies on that: its rules win ties by order. */

/* ---- bodysoul/treatments ------------------------------------------------ */

/* seeAllAlign (1.10.0). Auto margins on a flex item place it whatever the
   container is: in a block-level group the link must first stop being inline
   (an inline-level box ignores auto margins), and inside a showcase panel (a
   flex column) auto margins also outrank the rail's align-self: flex-start, so
   no rule here needs to beat that selector. Unset adds no class, and the link
   stays the left-hand inline-flex it always was. */
.bs-seeall--left,
.bs-seeall--center,
.bs-seeall--right {
  display: flex;
  width: fit-content;
}

.bs-seeall--left {
  margin-right: auto;
}

.bs-seeall--center {
  margin-left: auto;
  margin-right: auto;
}

.bs-seeall--right {
  margin-left: auto;
}

/* headingAlignTablet / headingAlignPhone (1.14.0): the heading's alignment
   below the theme's tablet/desktop (1080px) and phone/tablet (720px) screen
   tokens (the theme's settings/_breakpoints.scss "desktop" / "tablet" - keep
   in step). Viewport queries, not container: an editor choosing "on phones"
   means the device, and a panel narrow inside a two-up showcase on a laptop
   is not a phone. Two classes so the heading's desktop class stays core's
   has-text-align-<side>; the phone block comes later so it wins where both
   match. Above 1080px neither matches and the desktop alignment stands. */
@media (max-width: 1079.98px) {
  .treatment-header .bs-h-align-md-left {
    text-align: left;
  }
  .treatment-header .bs-h-align-md-center {
    text-align: center;
  }
  .treatment-header .bs-h-align-md-right {
    text-align: right;
  }
}

@media (max-width: 719.98px) {
  .treatment-header .bs-h-align-sm-left {
    text-align: left;
  }
  .treatment-header .bs-h-align-sm-center {
    text-align: center;
  }
  .treatment-header .bs-h-align-sm-right {
    text-align: right;
  }
}

/* headingSpace (1.15.0), BOTH blocks: the space under the heading as one of
   the theme's spacing steps (generic/_root.scss --bodysoul-space-*, rem - so
   it grows with the visitor's text size; the fallbacks are the theme's values
   at the time, and 2xl, which the theme does not define, is the plugin's).
   A step is the TOTAL space, not an addition, so it can also make the gap
   smaller than the stylesheet's own. bstr_heading_space() decides which step
   (or the legacy px gap below) applies; the step class only names the size,
   the flag class (has-heading-space / has-space) applies it. */
.bs-space-none {
  --bs-heading-space: 0px;
}

.bs-space-xs {
  --bs-heading-space: var(--bodysoul-space-xs, 0.4rem);
}

.bs-space-sm {
  --bs-heading-space: var(--bodysoul-space-sm, 0.8rem);
}

.bs-space-md {
  --bs-heading-space: var(--bodysoul-space-md, 1.6rem);
}

.bs-space-lg {
  --bs-heading-space: var(--bodysoul-space-lg, 2.4rem);
}

.bs-space-xl {
  --bs-heading-space: var(--bodysoul-space-xl, 4.8rem);
}

.bs-space-2xl {
  --bs-heading-space: var(--bodysoul-space-2xl, 7.2rem);
}

.treatment-header.has-heading-space {
  margin-bottom: var(--bs-heading-space);
}

/* headingGap (1.10.0, the legacy px slider; still rendered for blocks that
   set it and chose no step): extra space under the header, added to the
   stylesheet's own spacing rather than replacing it, so 0 (no class) is
   exactly today. */
.treatment-header.has-heading-gap {
  margin-bottom: var(--bs-heading-gap);
}

/* ---- bodysoul/treatments-showcase --------------------------------------- */

/* headingSpace (1.15.0): the step classes above, replacing the 1.6rem that
   .bs-showcase__heading gets in the showcase's style.css. */
.bs-showcase__heading.has-space {
  margin-bottom: var(--bs-heading-space);
}

/* headingGap (legacy px slider): extra space under the section heading, ADDED
   to the 1.6rem that .bs-showcase__heading gets in the showcase's style.css
   (keep the two literals in step), so no class = today. */
.bs-showcase__heading.has-gap {
  margin-bottom: calc(1.6rem + var(--bs-sc-head-gap));
}

/* The controls/link engine. Everything below is keyed on `bs-showcase--ctl`,
   which render.php (bstr_showcase_controls_model) emits ONLY when controlsAlign,
   seeAllPlacement or seeAllAlign is set - a block that sets none of them never
   matches a rule here and keeps the original layout above, side-gutter lanes
   included. The model has already decided the cases, so these rules do no
   deciding of their own:
     bs-showcase--ca-<side>    where the dots (and arrows beside them) sit
     bs-showcase--link-own     the link has a line to itself; link-beside = it
                               shares the controls' line, on the side they are not
     bs-showcase--sa-<side>    the link's side when alone on a line (also what a
                               beside link falls back to once is-single-page
                               hides the controls)
   Placement is auto margins on a wrapping flex row, so no width is assumed and
   a row too narrow for both simply wraps. Later than, and as specific as, the
   side-gutter foot grid above: where it ties, order decides. */
.bs-showcase--ctl .bs-showcase__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.bs-showcase--ctl .bs-showcase__cta {
  margin-left: 0;
  margin-right: 0;
}

/* Own line. The nav takes the whole row (its children are separate buttons, so
   a wide box costs no hit area - the link must NOT be the full-width one) and
   pushes the link to the next line. */
.bs-showcase--link-own .bs-showcase__nav {
  flex: 0 0 100%;
}

.bs-showcase--link-own.bs-showcase--ca-left .bs-showcase__nav {
  justify-content: flex-start;
}

.bs-showcase--link-own.bs-showcase--ca-center .bs-showcase__nav {
  justify-content: center;
}

.bs-showcase--link-own.bs-showcase--ca-right .bs-showcase__nav {
  justify-content: flex-end;
}

.bs-showcase--link-own .bs-showcase__nav + .bs-showcase__cta {
  margin-top: 0;
}

/* Beside: the second item in DOM order takes the free space before it. For
   dots on the right render.php puts the link first in the DOM. */
.bs-showcase--link-beside.bs-showcase--ca-left .bs-showcase__cta,
.bs-showcase--link-beside.bs-showcase--ca-right .bs-showcase__nav {
  margin-left: auto;
}

/* The link alone on a line: on its own line by choice, or beside controls that
   is-single-page has just hidden (no empty row is left: the nav is display:none). */
.bs-showcase--link-own.bs-showcase--sa-left .bs-showcase__cta,
.bs-showcase--ctl.is-single-page.bs-showcase--sa-left .bs-showcase__cta {
  margin-left: 0;
  margin-right: auto;
}

.bs-showcase--link-own.bs-showcase--sa-center .bs-showcase__cta,
.bs-showcase--ctl.is-single-page.bs-showcase--sa-center .bs-showcase__cta {
  margin-left: auto;
  margin-right: auto;
}

.bs-showcase--link-own.bs-showcase--sa-right .bs-showcase__cta,
.bs-showcase--ctl.is-single-page.bs-showcase--sa-right .bs-showcase__cta {
  margin-left: auto;
  margin-right: 0;
}