/* =============================================================================
   FAQs block — standalone FAQ section.

   Layout: section-shell intro (eyebrow/title/title2/lead/content) on top, then
   the shared FAQ accordion + vertical scroll nav (vio-faqs.css) below. Colours
   come from attributes: section bg via .vio-bg--*, accordion item bg via
   --vio-faqs-q-bg (set by the FAQ helper), and text via --vio-faqs-text (set on
   .vio-faqs-block__body here).
   ============================================================================= */

.vio-faqs-block .vio-faqs-block__body {
  margin-top: 32px;
}

/* Constrain the accordion to a comfortable measure and center it under the
   (usually centered) intro. The scroll nav sits to the right of the list. */
@media (min-width: 768px) {
  .vio-faqs-block .vio-faqs-block__body {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Apply the global rounded-corner radius to each accordion item. The item
   wraps the question button + answer panel (each carries the item background),
   so radius + overflow:hidden on the item clips them into one rounded card. */
.vio-faqs-block .vio-faqs__item {
  border-radius: var(--vio-img-radius, 12px);
  overflow: hidden;
}

/* The shared vio-faqs.css handles the accordion internals + scroll nav. */

/* Mobile: the shared vio-faqs.css hides the vertical scroll nav on phones
   (touch-swipe pattern). For this standalone FAQs block we WANT the nav visible
   so it's immediately obvious the list scrolls (rather than looking like just
   ~5 questions). Re-enable it and shrink the arrows a touch for small screens. */
@media (max-width: 767px) {
  .vio-faqs-block .vio-faqs__scroll-wrap { display: flex; }
  .vio-faqs-block .vio-faqs__scrollnav { display: flex; }
  .vio-faqs-block .vio-faqs__arrow { width: 34px; height: 34px; }
  .vio-faqs-block .vio-faqs__arrow svg { width: 26px; height: 26px; }
}

/* =============================================================================
   Static grid mode (displayMode: 'grid') — every Q&A always visible, no
   accordion/toggle. Independent of the vio-faqs.css accordion styling above.
   ============================================================================= */

.vio-faq-grid__title {
  margin: 0 0 24px;
  text-align: center;
}

.vio-faq-grid {
  display: grid;
  grid-template-columns: repeat(var(--vio-faq-grid-cols, 3), 1fr);
  /* Named as custom properties (not just literals in `gap` below) so the
     divider pseudo-elements further down can reference the EXACT same
     values and always span precisely one full gap, at every breakpoint. */
  --vio-faq-gap-row: clamp(24px, 3vw, 48px);
  --vio-faq-gap-col: clamp(24px, 3vw, 40px);
  gap: var(--vio-faq-gap-row) var(--vio-faq-gap-col);
}

@media (max-width: 900px) {
  .vio-faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .vio-faq-grid {
    grid-template-columns: 1fr;
  }
}

.vio-faq-grid__q {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.vio-faq-grid__a {
  opacity: 0.8;
  font-size: 0.9rem;
}
.vio-faq-grid__a p:last-child {
  margin-bottom: 0;
}

/* ── Optional grid divider lines (gridLines toggle) ────────────────────────
   A plain border-right/border-bottom per cell (the first version of this)
   only ever spanned that ONE cell's own box - the row-gap/column-gap
   between cells has no element in it, so the vertical and horizontal
   lines never actually touched at the intersections, leaving a visible
   break exactly where they were supposed to cross (confirmed via
   screenshot). Pseudo-elements fix this by explicitly extending past the
   cell's own edge, all the way across the gap to where the NEXT cell
   starts - so a vertical line's bottom and a horizontal line's edges
   always land on the exact same coordinates and connect with no gap.
   --vio-faq-gap-row/-col (declared on .vio-faq-grid above) drive both the
   real `gap` AND these extensions, so they can never drift out of sync.
   Which cell counts as "last column"/"last row" (skipped - no dangling
   line off the grid's own outer edge) depends on the actual column count
   in effect at each breakpoint (gridColumns at desktop; forced to 2 on
   tablet, 1 on mobile), so each is handled separately, same as before.
   Caveat: the "last row" skip assumes the FAQ count divides evenly into
   that breakpoint's column count (the common case) - an uneven last row
   will show one item's horizontal divider where it shouldn't. */
.vio-faq-grid--lines .vio-faq-grid__item {
  position: relative;
}
.vio-faq-grid--lines .vio-faq-grid__item::before,
.vio-faq-grid--lines .vio-faq-grid__item::after {
  content: "";
  position: absolute;
  background: var(--vio-faq-grid-line-color, rgba(0, 0, 0, 0.15));
  pointer-events: none;
}
/* Vertical divider - runs the item's full height PLUS the row-gap below
   it, centered in the column-gap so it lands equidistant between this
   item's text and the next column's. */
.vio-faq-grid--lines .vio-faq-grid__item::before {
  top: 0;
  bottom: calc(-1 * var(--vio-faq-gap-row));
  right: calc(-1px - (var(--vio-faq-gap-col) / 2));
  width: 2px;
}
/* Horizontal divider - runs the item's full width PLUS the column-gap to
   its right, centered in the row-gap. */
.vio-faq-grid--lines .vio-faq-grid__item::after {
  left: 0;
  right: calc(-1 * var(--vio-faq-gap-col));
  bottom: calc(-1px - (var(--vio-faq-gap-row) / 2));
  height: 2px;
}

@media (min-width: 901px) {
  .vio-faq-grid--lines.vio-faq-grid--cols-1 .vio-faq-grid__item::before { display: none; }
  .vio-faq-grid--lines.vio-faq-grid--cols-2 .vio-faq-grid__item:nth-child(2n)::before { display: none; }
  .vio-faq-grid--lines.vio-faq-grid--cols-3 .vio-faq-grid__item:nth-child(3n)::before { display: none; }
  .vio-faq-grid--lines.vio-faq-grid--cols-4 .vio-faq-grid__item:nth-child(4n)::before { display: none; }
  .vio-faq-grid--lines.vio-faq-grid--cols-1 .vio-faq-grid__item:nth-last-child(-n+1)::after { display: none; }
  .vio-faq-grid--lines.vio-faq-grid--cols-2 .vio-faq-grid__item:nth-last-child(-n+2)::after { display: none; }
  .vio-faq-grid--lines.vio-faq-grid--cols-3 .vio-faq-grid__item:nth-last-child(-n+3)::after { display: none; }
  .vio-faq-grid--lines.vio-faq-grid--cols-4 .vio-faq-grid__item:nth-last-child(-n+4)::after { display: none; }
  /* The bottom-most row's vertical divider (before::) has no next row to
     reach for, so it must stop at its own bottom edge instead of
     overshooting past the grid's own outer edge. */
  .vio-faq-grid--lines.vio-faq-grid--cols-1 .vio-faq-grid__item:nth-last-child(-n+1)::before,
  .vio-faq-grid--lines.vio-faq-grid--cols-2 .vio-faq-grid__item:nth-last-child(-n+2)::before,
  .vio-faq-grid--lines.vio-faq-grid--cols-3 .vio-faq-grid__item:nth-last-child(-n+3)::before,
  .vio-faq-grid--lines.vio-faq-grid--cols-4 .vio-faq-grid__item:nth-last-child(-n+4)::before {
    bottom: 0;
  }
  /* Same overshoot problem, the other axis: the RIGHT-most column's
     horizontal divider (after::) has no next column to reach into, so it
     must stop at its own right edge instead of poking out past the
     grid's own outer edge. */
  .vio-faq-grid--lines.vio-faq-grid--cols-1 .vio-faq-grid__item::after,
  .vio-faq-grid--lines.vio-faq-grid--cols-2 .vio-faq-grid__item:nth-child(2n)::after,
  .vio-faq-grid--lines.vio-faq-grid--cols-3 .vio-faq-grid__item:nth-child(3n)::after,
  .vio-faq-grid--lines.vio-faq-grid--cols-4 .vio-faq-grid__item:nth-child(4n)::after {
    right: 0;
  }
}

@media (max-width: 900px) and (min-width: 601px) {
  .vio-faq-grid--lines .vio-faq-grid__item:nth-child(2n)::before { display: none; }
  .vio-faq-grid--lines .vio-faq-grid__item:nth-last-child(-n+2)::after { display: none; }
  .vio-faq-grid--lines .vio-faq-grid__item:nth-last-child(-n+2)::before { bottom: 0; }
  .vio-faq-grid--lines .vio-faq-grid__item:nth-child(2n)::after { right: 0; }
}

@media (max-width: 600px) {
  .vio-faq-grid--lines .vio-faq-grid__item::before { display: none; }
  .vio-faq-grid--lines .vio-faq-grid__item::after { right: 0; }
  .vio-faq-grid--lines .vio-faq-grid__item:last-child::after { display: none; }
}

/* ── Static list mode (displayMode = list) ─────────────────────────────────────
   Single column, every answer visible, no toggle UI. Optional reveal of the items
   beyond faqsListInitialVisible (button + .is-collapsed, set by the inline script;
   with JavaScript off everything stays visible). */
.vio-faq-list-wrap { width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; }
.vio-faq-list__title { margin: 0 0 16px; }
.vio-faq-list--align-left { text-align: left; }
.vio-faq-list--align-center { text-align: center; }
.vio-faq-list--align-right { text-align: right; }
.vio-faq-list__item { padding: 20px 0; }
.vio-faq-list--dividers .vio-faq-list__item + .vio-faq-list__item { border-top: 1px solid var(--vio-faq-list-divider, rgba(0, 0, 0, 0.15)); }
.vio-faq-list__q { margin: 0 0 8px; font-weight: 700; text-transform: none; }
.vio-faq-list__a > :first-child { margin-top: 0; }
.vio-faq-list__a > :last-child { margin-bottom: 0; }
.vio-faq-list__a p { margin: 0 0 0.75em; }
.vio-faq-list__a a { text-decoration: underline; }
.vio-faq-list.is-collapsed .vio-faq-list__item--extra { display: none; }
.vio-faq-list__more {
  display: block;
  margin: 12px auto 0;
  padding: 10px 20px;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  font: inherit;
  cursor: pointer;
}
.vio-faq-list__more[hidden] { display: none; }
.vio-faq-list__more:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Optional FAQ question / answer size + colour (accordion, grid and list modes). */
.vio-faqs-block__body.vio-faqs-block__body--qs-xs .vio-faqs__q-text,
.vio-faqs-block__body.vio-faqs-block__body--qs-xs .vio-faq-grid__q,
.vio-faqs-block__body.vio-faqs-block__body--qs-xs .vio-faq-list__q { font-size: calc(1.05rem * 0.64); }
.vio-faqs-block__body.vio-faqs-block__body--as-xs .vio-faqs__a,
.vio-faqs-block__body.vio-faqs-block__body--as-xs .vio-faq-grid__a,
.vio-faqs-block__body.vio-faqs-block__body--as-xs .vio-faq-list__a { font-size: calc(1rem * 0.64); }
.vio-faqs-block__body.vio-faqs-block__body--qs-sm .vio-faqs__q-text,
.vio-faqs-block__body.vio-faqs-block__body--qs-sm .vio-faq-grid__q,
.vio-faqs-block__body.vio-faqs-block__body--qs-sm .vio-faq-list__q { font-size: calc(1.05rem * 0.8); }
.vio-faqs-block__body.vio-faqs-block__body--as-sm .vio-faqs__a,
.vio-faqs-block__body.vio-faqs-block__body--as-sm .vio-faq-grid__a,
.vio-faqs-block__body.vio-faqs-block__body--as-sm .vio-faq-list__a { font-size: calc(1rem * 0.8); }
.vio-faqs-block__body.vio-faqs-block__body--qs-lg .vio-faqs__q-text,
.vio-faqs-block__body.vio-faqs-block__body--qs-lg .vio-faq-grid__q,
.vio-faqs-block__body.vio-faqs-block__body--qs-lg .vio-faq-list__q { font-size: calc(1.05rem * 1.25); }
.vio-faqs-block__body.vio-faqs-block__body--as-lg .vio-faqs__a,
.vio-faqs-block__body.vio-faqs-block__body--as-lg .vio-faq-grid__a,
.vio-faqs-block__body.vio-faqs-block__body--as-lg .vio-faq-list__a { font-size: calc(1rem * 1.25); }
.vio-faqs-block__body.vio-faqs-block__body--qs-xl .vio-faqs__q-text,
.vio-faqs-block__body.vio-faqs-block__body--qs-xl .vio-faq-grid__q,
.vio-faqs-block__body.vio-faqs-block__body--qs-xl .vio-faq-list__q { font-size: calc(1.05rem * 1.56); }
.vio-faqs-block__body.vio-faqs-block__body--as-xl .vio-faqs__a,
.vio-faqs-block__body.vio-faqs-block__body--as-xl .vio-faq-grid__a,
.vio-faqs-block__body.vio-faqs-block__body--as-xl .vio-faq-list__a { font-size: calc(1rem * 1.56); }
.vio-faqs-block__body.vio-faqs-block__body--qs-xxl .vio-faqs__q-text,
.vio-faqs-block__body.vio-faqs-block__body--qs-xxl .vio-faq-grid__q,
.vio-faqs-block__body.vio-faqs-block__body--qs-xxl .vio-faq-list__q { font-size: calc(1.05rem * 1.95); }
.vio-faqs-block__body.vio-faqs-block__body--as-xxl .vio-faqs__a,
.vio-faqs-block__body.vio-faqs-block__body--as-xxl .vio-faq-grid__a,
.vio-faqs-block__body.vio-faqs-block__body--as-xxl .vio-faq-list__a { font-size: calc(1rem * 1.95); }
.vio-faqs-block__body.vio-faqs-block__body--qs-3xl .vio-faqs__q-text,
.vio-faqs-block__body.vio-faqs-block__body--qs-3xl .vio-faq-grid__q,
.vio-faqs-block__body.vio-faqs-block__body--qs-3xl .vio-faq-list__q { font-size: calc(1.05rem * 3.0); }
.vio-faqs-block__body.vio-faqs-block__body--as-3xl .vio-faqs__a,
.vio-faqs-block__body.vio-faqs-block__body--as-3xl .vio-faq-grid__a,
.vio-faqs-block__body.vio-faqs-block__body--as-3xl .vio-faq-list__a { font-size: calc(1rem * 3.0); }
.vio-faqs-block__body.vio-faqs-block__body--qc .vio-faqs__q,
.vio-faqs-block__body.vio-faqs-block__body--qc .vio-faqs__q-text,
.vio-faqs-block__body.vio-faqs-block__body--qc .vio-faq-grid__q,
.vio-faqs-block__body.vio-faqs-block__body--qc .vio-faq-list__q { color: var(--vio-faqs-q-color); }
.vio-faqs-block__body.vio-faqs-block__body--ac .vio-faqs__a,
.vio-faqs-block__body.vio-faqs-block__body--ac .vio-faq-grid__a,
.vio-faqs-block__body.vio-faqs-block__body--ac .vio-faq-list__a { color: var(--vio-faqs-a-color); }

/* Optional FAQ question / answer weight (block-wide), and per-item question weight. */
.vio-faqs-block__body.vio-faqs-block__body--qw-normal .vio-faqs__q .vio-faqs__q-text,
.vio-faqs-block__body.vio-faqs-block__body--qw-normal .vio-faq-grid__q,
.vio-faqs-block__body.vio-faqs-block__body--qw-normal .vio-faq-list__q { font-weight: 400; }
.vio-faqs-block__body.vio-faqs-block__body--aw-normal .vio-faqs__a,
.vio-faqs-block__body.vio-faqs-block__body--aw-normal .vio-faq-grid__a,
.vio-faqs-block__body.vio-faqs-block__body--aw-normal .vio-faq-list__a { font-weight: 400; }
.vio-faqs-block__body.vio-faqs-block__body--qw-semibold .vio-faqs__q .vio-faqs__q-text,
.vio-faqs-block__body.vio-faqs-block__body--qw-semibold .vio-faq-grid__q,
.vio-faqs-block__body.vio-faqs-block__body--qw-semibold .vio-faq-list__q { font-weight: 600; }
.vio-faqs-block__body.vio-faqs-block__body--aw-semibold .vio-faqs__a,
.vio-faqs-block__body.vio-faqs-block__body--aw-semibold .vio-faq-grid__a,
.vio-faqs-block__body.vio-faqs-block__body--aw-semibold .vio-faq-list__a { font-weight: 600; }
.vio-faqs-block__body.vio-faqs-block__body--qw-bold .vio-faqs__q .vio-faqs__q-text,
.vio-faqs-block__body.vio-faqs-block__body--qw-bold .vio-faq-grid__q,
.vio-faqs-block__body.vio-faqs-block__body--qw-bold .vio-faq-list__q { font-weight: 700; }
.vio-faqs-block__body.vio-faqs-block__body--aw-bold .vio-faqs__a,
.vio-faqs-block__body.vio-faqs-block__body--aw-bold .vio-faq-grid__a,
.vio-faqs-block__body.vio-faqs-block__body--aw-bold .vio-faq-list__a { font-weight: 700; }
.vio-faqs-block__body.vio-faqs-block__body .vio-faqs__q .vio-faqs__q-text.vio-faqs__q-text--bold,
.vio-faqs-block__body.vio-faqs-block__body .vio-faq-grid__q.vio-faq-grid__q--bold,
.vio-faqs-block__body.vio-faqs-block__body .vio-faq-list__q.vio-faq-list__q--bold { font-weight: 700; }
.vio-faqs-block__body.vio-faqs-block__body .vio-faqs__q .vio-faqs__q-text.vio-faqs__q-text--normal,
.vio-faqs-block__body.vio-faqs-block__body .vio-faq-grid__q.vio-faq-grid__q--normal,
.vio-faqs-block__body.vio-faqs-block__body .vio-faq-list__q.vio-faq-list__q--normal { font-weight: 400; }