/* Board Questions
   Width, side gutter and vertical padding follow the theme Spacing settings
   via --fs-container-width / --fs-side-gutter / --fs-section-spacing (set in
   theme-overrides.css), matching How It Works. */

.bq {
  --bq-bg: #FFFFFF;
  --bq-text: #211A21;
  --bq-body: #58504E;
  --bq-eyebrow: #A85A0C;
  --bq-accent: #F7931E;
  --bq-line: #D8D4D3;
  --bq-dot: 60px;
  --bq-gap: clamp(20px, 2vw, 28px);
  --bq-ease: cubic-bezier(.22, .61, .36, 1);

  background: var(--bq-bg);
  color: var(--bq-text);
  padding: var(--fs-section-spacing, 80px) 0;
}

.bq--bordered {
  border-bottom: 1px solid var(--bq-section-border, #B0AAA8);
}

.bq--dark {
  --bq-bg: #211A21;
  --bq-text: #FFFFFF;
  --bq-body: rgba(255, 255, 255, .78);
  --bq-eyebrow: #F7931E;
  --bq-line: rgba(176, 170, 168, .35);
}

.bq *,
.bq *::before,
.bq *::after {
  box-sizing: border-box;
}

.bq__inner {
  width: 100%;
  max-width: calc(var(--fs-container-width, 1240px) + (var(--fs-side-gutter, 16px) * 2));
  margin: 0 auto;
  padding: 0 var(--fs-side-gutter, 16px);
}

.bq__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Heading row: heading left, intro right */

.bq__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: 20px clamp(32px, 5vw, 80px);
  margin-bottom: clamp(40px, 5vw, 60px);
}

.bq__heading {
  max-width: 13em;
  margin: 0;
  font-family: var(--fs-heading-font);
  font-size: clamp(calc(var(--fs-h2-size) * 0.6), 5.4vw, var(--fs-h2-size));
  font-weight: var(--fs-h2-weight);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--bq-text);
}

.bq__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 34em;
  padding-top: 0.6em;
}

.bq__intro {
  font-size: var(--fs-body-size);
  line-height: 1.6;
  color: var(--bq-body);
}

.bq__intro p { margin: 0; }
.bq__intro p + p { margin-top: 0.5em; }

.bq__intro a {
  color: inherit;
  text-decoration-color: var(--bq-accent);
  text-underline-offset: 3px;
}

/* Steps
   Each step is a subgrid spanning the four shared rows (marker, eyebrow,
   question, tags) so the divider above the tags lines up across the row
   however long each question runs. */

.bq__grid {
  display: grid;
  grid-template-columns: repeat(var(--bq-cols, 5), minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto;
  column-gap: var(--bq-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bq__step {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  margin: 0;
  padding: 0;
}

@supports not (grid-template-rows: subgrid) {
  .bq__step {
    display: flex;
    flex-direction: column;
  }

  .bq__foot { margin-top: auto; }
}

/* Number circle and connector line */

.bq__marker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.bq__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bq-dot);
  height: var(--bq-dot);
  border: 2px solid var(--bq-accent);
  border-radius: 50%;
  font-family: var(--fs-heading-font);
  font-size: calc(var(--fs-body-size) * 1.15);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--bq-accent);
  transition: background-color .35s ease, color .35s ease;
}

.bq__line {
  flex: 1 1 auto;
  min-width: 16px;
  height: 2px;
  background: var(--bq-line);
  transform-origin: left center;
}

.bq__loop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-eyebrow-size);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--bq-body);
}

.bq__loop-icon { flex: 0 0 auto; }

.bq__loop--stacked { display: none; }

/* Text */

.bq__eyebrow {
  margin: 0 0 18px;
  font-size: var(--fs-eyebrow-size);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bq-eyebrow);
}

.bq__question {
  margin: 0;
  padding-bottom: 24px;
  font-family: var(--fs-heading-font);
  font-size: clamp(calc(var(--fs-h3-size) * 0.66), 1.7vw, calc(var(--fs-h3-size) * 0.76));
  font-weight: var(--fs-h3-weight);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--bq-text);
}

.bq__foot {
  padding-top: 16px;
  border-top: 1px solid var(--bq-line);
}

.bq__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bq__tag {
  margin: 0;
  padding: 5px 12px;
  border: 1px solid var(--bq-line);
  border-radius: 999px;
  font-size: calc(var(--fs-small-size) * 0.92);
  line-height: 1.3;
  color: var(--bq-body);
  transition: border-color .35s ease;
}

/* Hover: number fills with the accent. Pointer devices only. */

@media (hover: hover) {
  .bq__step:hover .bq__num {
    background: var(--bq-accent);
    color: var(--bq-bg);
  }

  .bq__step:hover .bq__tag { border-color: var(--bq-accent); }
}

/* Below desktop: a vertical timeline, circles down the left with the
   connector running between them */

@media (max-width: 1023px) {
  .bq { --bq-dot: 52px; }

  .bq__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .bq__step {
    display: grid;
    grid-row: auto;
    grid-template-columns: var(--bq-dot) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 20px;
  }

  .bq__marker {
    grid-column: 1;
    grid-row: 1 / span 3;
    flex-direction: column;
    gap: 0;
    margin: 0;
  }

  .bq__line {
    width: 2px;
    height: auto;
    min-width: 0;
    min-height: 24px;
    transform-origin: center top;
  }

  .bq__step--last .bq__line,
  .bq__loop--row { display: none; }

  .bq__eyebrow,
  .bq__question,
  .bq__foot { grid-column: 2; }

  .bq__eyebrow {
    display: flex;
    align-items: center;
    min-height: var(--bq-dot);
    margin: 0;
  }

  .bq__question { padding-bottom: 18px; }

  .bq__foot {
    margin-bottom: 40px;
    border-top: 0;
    padding-top: 0;
  }

  .bq__step--last .bq__foot { margin-bottom: 0; }

  .bq__loop--stacked {
    display: inline-flex;
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .bq__head { flex-direction: column; }
  .bq__aside { padding-top: 0; }
}

/* Scroll animation
   .is-animated is printed server-side (never in the editor), so content is
   hidden from first paint. The JS adds .is-visible to the heading row, the
   intro and each step as they enter the viewport. */

.bq.is-animated .bq__reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .8s var(--bq-ease), transform .8s var(--bq-ease);
}

.bq.is-animated .bq__aside { transition-delay: .15s; }

.bq.is-animated .bq__step { --bq-d: calc(var(--i, 0) * .14s); }

.bq.is-animated .bq__num,
.bq.is-animated .bq__loop,
.bq.is-animated .bq__eyebrow,
.bq.is-animated .bq__question,
.bq.is-animated .bq__foot {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity .6s var(--bq-ease) calc(var(--bq-d) + var(--bq-td, 0s)),
    transform .6s var(--bq-ease) calc(var(--bq-d) + var(--bq-td, 0s)),
    background-color .35s ease,
    color .35s ease;
}

.bq.is-animated .bq__num { transform: scale(.6); }

.bq.is-animated .bq__line {
  transform: scaleX(0);
  transition: transform .9s var(--bq-ease) calc(var(--bq-d) + .2s);
}

.bq.is-animated .bq__loop     { --bq-td: .7s; }
.bq.is-animated .bq__eyebrow  { --bq-td: .25s; }
.bq.is-animated .bq__question { --bq-td: .35s; }
.bq.is-animated .bq__foot     { --bq-td: .45s; }

/* In view */

.bq.is-animated .bq__reveal.is-visible,
.bq.is-animated .bq__step.is-visible .bq__num,
.bq.is-animated .bq__step.is-visible .bq__line,
.bq.is-animated .bq__step.is-visible .bq__loop,
.bq.is-animated .bq__step.is-visible .bq__eyebrow,
.bq.is-animated .bq__step.is-visible .bq__question,
.bq.is-animated .bq__step.is-visible .bq__foot {
  opacity: 1;
  transform: none;
}

/* Timeline layout: steps reveal one by one as they scroll in, so no stagger,
   and the connector draws downwards */
@media (max-width: 1023px) {
  .bq.is-animated .bq__step { --i: 0; }
  .bq.is-animated .bq__line { transform: scaleY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bq__num,
  .bq__tag { transition: none; }

  .bq.is-animated .bq__reveal,
  .bq.is-animated .bq__num,
  .bq.is-animated .bq__line,
  .bq.is-animated .bq__loop,
  .bq.is-animated .bq__eyebrow,
  .bq.is-animated .bq__question,
  .bq.is-animated .bq__foot {
    opacity: 1;
    transform: none;
    transition: none;
  }
}