/* ══ Sections & layout helpers — Group/Cover style variations ═════════════
   Colors for the section styles come from style_data (inc/block-styles.php);
   only what style_data can't express lives here.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Card / Card (outline) — Group or Column → Styles ─────────────────────
   Padding here is the default; a padding set in the block's Dimensions panel
   is inline and wins. */
:is(.wp-block-group, .wp-block-column).is-style-card {
  border-radius : var(--wp--custom--radius--card);
  padding       : var(--wp--preset--spacing--lg);
}
:is(.wp-block-group, .wp-block-column).is-style-card-outline {
  border        : 2px solid currentColor;
  border-radius : var(--wp--custom--radius--card);
  padding       : var(--wp--preset--spacing--md);
}

/* ── Row widths — the Divi row system (80% rows, 10% gutters, max 1920px) ──
   theme.json sets a 10vw root padding (vw, not %: full-width blocks pull out
   with a negative margin, and a % margin resolves against the narrower
   content box) and a 1920px content size. WordPress
   pads only the outermost constrained block, so every section lines up.
   Gaps in core this fills: */

/* 1. A full-width Cover inside page content pads itself with 1em, not the root
      gutter. (At the top level — the closing CTA part — its inner container
      already takes the gutter, so there the Cover's own 1em is removed.) */
.has-global-padding > .wp-block-cover.alignfull {
  padding-left  : var(--wp--style--root--padding-left);
  padding-right : var(--wp--style--root--padding-right);
}
.wp-block-template-part > .wp-block-cover.alignfull { padding-left: 0; padding-right: 0; }

/* 2. A Cover set to a left/right content position keeps a narrow card on that
      side (its constrained layout would otherwise center it). */
.wp-block-cover[class*="-left"] > .wp-block-cover__inner-container > *  { margin-left: 0 !important; }
.wp-block-cover[class*="-right"] > .wp-block-cover__inner-container > * { margin-right: 0 !important; }

/* 3. Narrower rows (a section's "Content width" like 75%) go full row width on
      phones, as Divi rows do. */
@media (max-width: 781px) {
  .is-layout-constrained > :where(:not(.alignleft, .alignright, .alignfull)) {
    max-width: var(--wp--style--global--content-size) !important;
  }
}

/* ── Pill — a rounded label box (interior hero titles, service tags) ───── */
.wp-block-group.is-style-pill {
  border-radius : var(--wp--custom--radius--pill);
  width         : fit-content;
}

/* ── Interior hero: the dark card spreads its heading and buttons top-to-bottom ── */
.bt-hero-interior > .wp-block-column:first-child {
  display         : flex;
  flex-direction  : column;
  justify-content : space-between;
  gap             : var(--wp--preset--spacing--xl);
}

/* ── Cover → Card: rounded photo panel ─────────────────────────────────── */
.wp-block-cover.is-style-card,
.wp-block-cover.is-style-card .wp-block-cover__background,
.wp-block-cover.is-style-card .wp-block-cover__image-background { border-radius: var(--wp--custom--radius--card); }
.wp-block-cover.is-style-card { overflow: hidden; }

/* ── Image → Square corners (theme.json rounds every image by default) ── */
.wp-block-image.is-style-square img { border-radius: 0; }

/* ── Columns: keep images filling their column height when asked ───────── */
.wp-block-image.is-resized img,
.wp-block-image img { height: auto; }
.wp-block-image[style*="aspect-ratio"] img { height: 100%; object-fit: cover; }

/* ── Scroller — Group → Styles → Scroller (horizontal) ─────────────────────
   Children sit in one row and scroll sideways with snap points; js/scroller.js
   adds prev/next arrows after the group. Set the cards' width with the
   Group's "Grid/Row" child minimum width or each card's Width setting.
   Desktop: the row bleeds off the right edge of the screen. */
.wp-block-group.is-style-scroller {
  display               : flex;
  flex-wrap             : nowrap !important;   /* the Row layout's own wrap setting must not apply here */
  gap                   : var(--wp--preset--spacing--md);
  overflow-x            : auto;
  overscroll-behavior-x : contain;
  scroll-snap-type      : x mandatory;
  scroll-behavior       : smooth;
  scrollbar-width       : none;
  padding-bottom        : 0;
}
.wp-block-group.is-style-scroller::-webkit-scrollbar { display: none; }
.wp-block-group.is-style-scroller > * {
  flex              : 0 0 min(21.75rem, 85vw);
  margin            : 0 !important;
  scroll-snap-align : start;
}
/* In a constrained parent: start at the content edge, run off the right side. */
.is-layout-constrained > .wp-block-group.is-style-scroller {
  max-width   : none !important;
  margin-left : max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
  margin-right: 0 !important;
}
@media (min-width: 782px) {
  .wp-block-group.is-style-scroller { margin-right: calc(50% - 50vw) !important; padding-right: 2rem; }
  .wp-block-group:has(> .wp-block-group.is-style-scroller) { overflow-x: clip; }
}
.bt-scroller-nav { display: flex; justify-content: space-between; align-items: center; }
.bt-scroller-nav button {
  width: clamp(3.3125rem, 2.2911rem + 4.1905vw, 6.0625rem); height: clamp(3.3125rem, 2.2911rem + 4.1905vw, 6.0625rem); padding: 0; border: 0; border-radius: 50%;
  background: none; color: inherit; cursor: pointer; transition: transform 0.2s ease;
}
.bt-scroller-nav svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bt-scroller-nav svg * { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bt-scroller-nav button:first-child svg { transform: scaleX(-1); }
.bt-scroller-nav button:hover circle { fill: currentColor; fill-opacity: 0.14; }
.bt-scroller-nav button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ── Accessibility — visible focus everywhere, in the text's own color ─── */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }