/*
 * Reusable classes for what block attributes cannot express: a breakpoint other than North's 768px,
 * or a layout rule shared by several blocks. Typed in a block's "Additional CSS class(es)".
 */

/* The old navigation switched layout at 1280px, not at North's desktop breakpoint. */
@media (width >= 1280px) {
  .below-xl {
    display: none !important;
  }
}

@media (width < 1280px) {
  .from-xl {
    display: none !important;
  }
}

/* A list laid out on one wrapping row, without markers. */
.list-inline {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--list-inline-gap, 16px);
  row-gap: var(--list-inline-row-gap, 8px);
  list-style: none;
  padding: 0;
}

@media (width >= 768px) {
  .list-inline {
    column-gap: var(--list-inline-gap-dk, 24px);
  }
}

/* Links that grow a 1px underline on hover, focus or when current. */
.link-line a {
  display: inline-block;
  text-decoration: none;
}

.link-line a::after {
  content: "";
  display: block;
  position: relative;
  bottom: -0.15em;
  width: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: width 300ms ease-out, opacity 300ms ease-out;
}

.link-line a:hover::after,
.link-line a:focus-visible::after,
.link-line a[aria-current="page"]::after {
  width: 100%;
  opacity: 1;
}

/* Running text in two columns from 1024px. */
@media (width >= 1024px) {
  .text-columns-2 {
    columns: 2;
    column-gap: 40px;
  }
}

/*
 * A six-track grid where cards alternate narrow and wide, left and right:
 * 1 = tracks 1-2, 2 = 4-6, 3 = 1-4, 4 = 3-6, then again.
 */
@media (width >= 768px) {
  .grid-stagger .ensoul-columns-block {
    align-items: start;
  }

  .grid-stagger .ensoul-column-wrapper:nth-child(4n + 1) {
    grid-column: 1 / span 2;
  }

  .grid-stagger .ensoul-column-wrapper:nth-child(4n + 2) {
    grid-column: 4 / -1;
  }

  .grid-stagger .ensoul-column-wrapper:nth-child(4n + 3) {
    grid-column: 1 / span 4;
  }

  .grid-stagger .ensoul-column-wrapper:nth-child(4n + 4) {
    grid-column: 3 / -1;
  }
}

/*
 * Items in a row with a thin rule between them from 1024px; stacked with a horizontal rule below that.
 * The rule is drawn by the item but stands on its own, as on the old site: --rise and --fade move and
 * fade the text only, and the rule moves back by --rise so it stays where it is.
 */
.divided-row .\@container\/inner > * {
  position: relative;
  padding: 32px 48px;
  translate: 0 var(--rise, 0px);
  -webkit-text-fill-color: color-mix(in srgb, currentColor calc(var(--fade, 1) * 100%), transparent);
}

.divided-row .\@container\/inner > * + *::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 320px;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%);
  translate: 0 calc(var(--rise, 0px) * -1);
}

@media (width < 1024px) {
  .divided-row .\@container\/inner {
    flex-direction: column !important;
  }
}

@media (width >= 1024px) {
  .divided-row .\@container\/inner > * + *::before {
    top: 50%;
    left: 0;
    width: 1px;
    height: 96px;
    /* The rule grows upwards from its bottom end. */
    transform: translateY(-50%) scaleY(var(--line, 1));
    transform-origin: center bottom;
  }
}

@media (width >= 1280px) {
  .divided-row .\@container\/inner > * {
    padding: 32px 64px;
  }

  .divided-row .\@container\/inner > * + *::before {
    height: 128px;
  }
}

/* A plus sign in each corner of the box. */
.plus-corners > .ensoul-group {
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16'%3E%3Cpath fill='%23adadad' fill-rule='evenodd' d='M8 2.69c.17 0 .31.14.31.31v4.69H13a.31.31 0 1 1 0 .62H8.31V13a.31.31 0 1 1-.62 0V8.31H3a.31.31 0 1 1 0-.62h4.69V3c0-.17.14-.31.31-.31Z'/%3E%3C/svg%3E");
  background-image: var(--plus), var(--plus), var(--plus), var(--plus);
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position:
    var(--spacing-content-padding) 0,
    calc(100% - var(--spacing-content-padding)) 0,
    var(--spacing-content-padding) 100%,
    calc(100% - var(--spacing-content-padding)) 100%;
}

/* The bordered square that opens a section title row. */
.index-box {
  flex: 0 0 auto;
  width: 24px !important;
  height: 24px;
  margin: 0;
  border: 1px solid var(--color-neutral-400);
  transition: background-color 300ms ease-out, border-color 300ms ease-out;
}

@media (width >= 768px) {
  .index-box {
    width: 32px !important;
    height: 32px;
  }
}

@media (width >= 1024px) {
  .index-box {
    width: 40px !important;
    height: 40px;
  }
}

/* A 1px rule that takes the space left in a row. */
.rule-fill {
  flex: 1 1 0%;
  min-width: 0;
  width: auto !important;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-neutral-400);
}

/* Slider bullets stacked on the right edge, as on a vertical slider. */
.dots-right .swiper-pagination {
  top: 50% !important;
  bottom: auto !important;
  left: auto !important;
  right: 20px !important;
  width: auto !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: translateY(-50%);
}

.dots-right .swiper-pagination-bullet {
  flex-shrink: 0;
  margin: 0 !important;
  background: #fff;
  opacity: 0.5;
}

.dots-right .swiper-pagination-bullet-active {
  opacity: 1;
}

@media (width >= 1280px) {
  .dots-right .swiper-pagination {
    right: 32px !important;
  }
}

/* Content pushed to the end of its row on mobile only. */
@media (width < 768px) {
  .justify-end-mobile,
  .justify-end-mobile > .ensoul-group > .\@container\/inner {
    justify-content: flex-end !important;
  }
}

/* The divider block prints its own rule inside; these classes draw the line themselves. */
:is(.index-box, .rule-fill) > :is(hr, div) {
  display: none;
}

/*
 * Ordered lists count with their own counter: Chromium ignores counter-reset on an ol's list-item
 * counter, so a list that continues an earlier one sets --list-start in its custom CSS instead.
 */
ol.wp-block-ensoul-list {
  counter-reset: ensoul-ol var(--list-start, 0);
}

ol.wp-block-ensoul-list > li {
  counter-increment: ensoul-ol;
}

ol.wp-block-ensoul-list > li::marker {
  content: counter(ensoul-ol) ". ";
}