/* bi_reassurance - row of reassurance blocks under the hero banner or above the footer */

/*
 * Every visual aspect is driven by public `--bi-reassurance-*` custom
 * properties so the strip can be re-skinned from the theme's own CSS: declare
 * the ones you need on `.bi-reassurance`. This file never declares a public
 * token itself, it only reads them with a fallback where they are used, so a
 * theme wins even from inside a CSS cascade layer.
 */
.bi-reassurance {
  padding-inline: var(--bi-reassurance-inset, 0);
  border-bottom: 1px solid var(--bi-reassurance-border, #e6e6e6);
  background-color: var(--bi-reassurance-bg, #fff);
}

/*
 * Every block draws its own left and top separator; the list clips its first
 * pixel row and column so the ones on the outer edges never show. That way the
 * separators stay right whatever the number of blocks and however they wrap.
 */
/*
 * Right after the hero banner the strip reads as its footer, so it cancels the
 * gap the page puts between homepage blocks. Themes that expose no
 * --page-home-gap get no offset at all.
 */
.bi-hero + .bi-reassurance,
.bi-hero-carousel + .bi-reassurance {
  margin-top: calc(-1 * var(--page-home-gap, 0px));
}

/*
 * Above the footer the strip closes the page content: the separator goes on
 * top, the footer itself marks the bottom edge.
 */
.bi-reassurance--footer {
  border-top: 1px solid var(--bi-reassurance-border, #e6e6e6);
  border-bottom: 0;
}

.bi-reassurance__list {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--bi-reassurance-gap, 0px);
  row-gap: var(--bi-reassurance-row-gap, var(--bi-reassurance-gap, 0px));
  max-width: var(--bi-reassurance-max-width, none);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  clip-path: inset(1px 0 0 1px);
}

/* Two per row on small screens; an odd last block takes the whole row. */
.bi-reassurance__item {
  display: flex;
  flex: 1 1 calc((100% - var(--bi-reassurance-gap, 0px)) / 2);
  min-width: 0;
  border-top: 1px solid var(--bi-reassurance-separator, var(--bi-reassurance-border, #e6e6e6));
  border-left: 1px solid var(--bi-reassurance-separator, var(--bi-reassurance-border, #e6e6e6));
}

.bi-reassurance__body {
  flex: 1 1 auto;
  min-width: 0;
  padding:
    var(--bi-reassurance-padding-block, clamp(1rem, 2vw, 1.5rem))
    var(--bi-reassurance-padding-inline, clamp(1rem, 2.5vw, 2.5rem));
  color: inherit;
  text-decoration: none;
}

.bi-reassurance__body--link {
  transition: background-color 0.2s ease;
}

.bi-reassurance__body--link:hover,
.bi-reassurance__body--link:focus-visible {
  background-color: var(--bi-reassurance-hover-bg, #f7f7f7);
  color: inherit;
  text-decoration: none;
}

.bi-reassurance__body--link:focus-visible {
  outline: 2px solid var(--bi-reassurance-title-color, #101010);
  outline-offset: -2px;
}

.bi-reassurance__title {
  margin: 0;
  color: var(--bi-reassurance-title-color, #101010);
  font-size: var(--bi-reassurance-title-size, 0.9375rem);
  font-weight: var(--bi-reassurance-title-weight, 700);
  line-height: 1.35;
  letter-spacing: var(--bi-reassurance-title-letter-spacing, normal);
  text-transform: var(--bi-reassurance-title-transform, none);
}

.bi-reassurance__text {
  margin: var(--bi-reassurance-text-gap, 0.25rem) 0 0;
  color: var(--bi-reassurance-text-color, #6b6b6b);
  font-size: var(--bi-reassurance-text-size, 0.875rem);
  line-height: 1.4;
}

/* Wide enough: every block on a single row, sharing the width equally. */
@media (min-width: 992px) {
  .bi-reassurance__item {
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bi-reassurance__body--link {
    transition: none;
  }
}