/*
 * Guide components: key takeaways box, text tables and calls to action.
 *
 * Add a Group block with the class "bb-key-takeaways" near the top of a guide.
 * Inside it: an H2, a "bb-key-takeaways__lead" paragraph, an optional "bb-key-takeaways__facts"
 * group of "bb-key-takeaways__fact" groups, and an ordered list with the class
 * "bb-key-takeaways__list".
 */

.bb-key-takeaways {
  --bb-kt-ink: #0b0b0c;
  --bb-kt-olive: #5f6a00;

  position: relative;
  margin: 8px 0 56px;
  padding: clamp(28px, 4vw, 52px) clamp(22px, 4vw, 52px) clamp(24px, 3.5vw, 44px);
  color: rgba(11, 11, 12, 0.78);
  background: #f7f5ef;
}

/* Classic themes wrap group contents in an inner container. */
.bb-key-takeaways .wp-block-group__inner-container {
  display: contents;
}

.bb-guide-content .bb-key-takeaways > :first-child,
.bb-key-takeaways > :first-child,
.bb-key-takeaways > .wp-block-group__inner-container > :first-child {
  margin-top: 0;
}

.bb-guide-content .bb-key-takeaways > :last-child,
.bb-key-takeaways > :last-child,
.bb-key-takeaways > .wp-block-group__inner-container > :last-child {
  margin-bottom: 0;
}

.bb-guide-content .bb-key-takeaways h2,
.bb-key-takeaways h2 {
  margin: 0 0 18px;
  font-family: "Larken", serif;
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.18;
  color: var(--bb-kt-ink);
}

.bb-guide-content .bb-key-takeaways__lead,
.bb-key-takeaways__lead {
  max-width: 62ch;
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(11, 11, 12, 0.86);
}

/* Headline facts */

.bb-key-takeaways__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 32px 0 8px;
  border-top: 1px solid rgba(11, 11, 12, 0.12);
  border-bottom: 1px solid rgba(11, 11, 12, 0.12);
}

.bb-key-takeaways__fact {
  padding: 22px 24px 22px 0;
}

.bb-key-takeaways__fact + .bb-key-takeaways__fact {
  padding-left: 24px;
  border-left: 1px solid rgba(11, 11, 12, 0.12);
}

.bb-guide-content .bb-key-takeaways__value,
.bb-key-takeaways__value {
  margin: 0 0 6px;
  font-family: "Larken", serif;
  font-size: clamp(28px, 2.8vw, 38px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--bb-kt-ink);
}

.bb-guide-content .bb-key-takeaways__label,
.bb-key-takeaways__label {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(11, 11, 12, 0.62);
}

.bb-key-takeaways__label a {
  color: inherit;
}

/* Numbered takeaways */

.bb-guide-content ol.bb-key-takeaways__list,
ol.bb-key-takeaways__list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bb-kt;
}

.bb-guide-content .bb-key-takeaways__list > li,
.bb-key-takeaways__list > li {
  position: relative;
  margin: 0;
  padding: 18px 0 18px 52px;
  font-size: 16px;
  line-height: 1.65 !important;
  counter-increment: bb-kt;
}

.bb-key-takeaways__list > li + li {
  border-top: 1px solid rgba(11, 11, 12, 0.08);
}

.bb-guide-content .bb-key-takeaways__list > li::before,
.bb-key-takeaways__list > li::before {
  content: counter(bb-kt, decimal-leading-zero);
  position: absolute;
  top: 17px;
  left: 0;
  width: auto;
  height: auto;
  font-family: "Larken", serif;
  font-size: 20px;
  line-height: 1.3;
  color: var(--bb-kt-olive);
  background: none;
  transform: none;
}

.bb-key-takeaways__list > li::marker {
  content: none;
}

.bb-key-takeaways__list strong {
  font-weight: 600;
  color: var(--bb-kt-ink);
}

@media (max-width: 767px) {
  .bb-key-takeaways {
    margin-right: -4px;
    margin-left: -4px;
  }

  .bb-key-takeaways__facts {
    grid-template-columns: 1fr;
  }

  .bb-key-takeaways__fact,
  .bb-key-takeaways__fact + .bb-key-takeaways__fact {
    padding: 16px 0;
    border-left: 0;
  }

  .bb-key-takeaways__fact + .bb-key-takeaways__fact {
    border-top: 1px solid rgba(11, 11, 12, 0.12);
  }

  .bb-guide-content .bb-key-takeaways__list > li,
  .bb-key-takeaways__list > li {
    padding-left: 40px;
  }
}

/*
 * Short answer: a paragraph with the class "bb-short-answer" whose opening <strong> is the label.
 */

.bb-guide-content p.bb-short-answer,
p.bb-short-answer {
  margin: 8px 0 32px;
  padding: 26px clamp(22px, 3vw, 36px);
  font-family: "Larken", serif;
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.5;
  color: #0b0b0c;
  background: #f7f5ef;
}

.bb-guide-content p.bb-short-answer > strong:first-child,
p.bb-short-answer > strong:first-child {
  display: block;
  margin-bottom: 10px;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5f6a00;
}

/*
 * Split variant: add "bb-key-takeaways--split" alongside "bb-key-takeaways" to stack the
 * facts in a left-hand column with the takeaways beside them.
 */

.bb-key-takeaways--split {
  display: grid;
  grid-template-columns: minmax(190px, 0.36fr) 1fr;
  column-gap: clamp(28px, 4vw, 56px);
  background: #fff;
  border: 1px solid rgba(11, 11, 12, 0.14);
}

.bb-key-takeaways--split > h2,
.bb-key-takeaways--split > .bb-key-takeaways__lead,
.bb-key-takeaways--split > .wp-block-group__inner-container > h2,
.bb-key-takeaways--split > .wp-block-group__inner-container > .bb-key-takeaways__lead {
  grid-column: 1 / -1;
}

.bb-guide-content .bb-key-takeaways--split .bb-key-takeaways__lead,
.bb-key-takeaways--split .bb-key-takeaways__lead {
  max-width: none;
  padding-bottom: 28px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(11, 11, 12, 0.12);
}

.bb-key-takeaways--split .bb-key-takeaways__facts {
  display: block;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-right: 1px solid rgba(11, 11, 12, 0.12);
}

.bb-key-takeaways--split .bb-key-takeaways__fact,
.bb-key-takeaways--split .bb-key-takeaways__fact + .bb-key-takeaways__fact {
  padding: 16px 24px 16px 0;
  border-left: 0;
}

.bb-key-takeaways--split .bb-key-takeaways__fact + .bb-key-takeaways__fact {
  border-top: 1px solid rgba(11, 11, 12, 0.08);
}

.bb-guide-content .bb-key-takeaways--split .bb-key-takeaways__value,
.bb-key-takeaways--split .bb-key-takeaways__value {
  color: var(--bb-kt-olive);
  font-variant-numeric: tabular-nums;
}

.bb-guide-content .bb-key-takeaways--split ol.bb-key-takeaways__list,
.bb-key-takeaways--split ol.bb-key-takeaways__list {
  padding: 10px 0;
}

.bb-guide-content .bb-key-takeaways--split .bb-key-takeaways__list > li,
.bb-key-takeaways--split .bb-key-takeaways__list > li {
  padding-left: 0;
}

.bb-guide-content .bb-key-takeaways--split .bb-key-takeaways__list > li::before,
.bb-key-takeaways--split .bb-key-takeaways__list > li::before {
  content: none;
}

@media (max-width: 767px) {
  .bb-key-takeaways--split {
    grid-template-columns: 1fr;
  }

  .bb-key-takeaways--split .bb-key-takeaways__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(11, 11, 12, 0.12);
  }

  .bb-key-takeaways--split .bb-key-takeaways__fact,
  .bb-key-takeaways--split .bb-key-takeaways__fact + .bb-key-takeaways__fact {
    padding: 0;
    border-top: 0;
  }

  .bb-guide-content .bb-key-takeaways--split .bb-key-takeaways__value,
  .bb-key-takeaways--split .bb-key-takeaways__value {
    font-size: 22px;
  }

  .bb-guide-content .bb-key-takeaways--split .bb-key-takeaways__label,
  .bb-key-takeaways--split .bb-key-takeaways__label {
    font-size: 12px;
  }
}

/*
 * Text tables: a Table block with the class "bb-guide-text-table". Guide tables
 * right-align the last column for figures; text columns read better left-aligned.
 */

.bb-guide-content .bb-guide-text-table th:last-child,
.bb-guide-content .bb-guide-text-table td:last-child {
  text-align: left;
}

.bb-guide-content .bb-guide-text-table td {
  vertical-align: top;
}

/*
 * Inline call to action: a paragraph with the class "bb-guide-inline-cta".
 */

.bb-guide-content .bb-guide-inline-cta,
.bb-guide-inline-cta {
  margin: 40px 0 8px;
  padding: 22px 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(11, 11, 12, 0.72);
  border-top: 1px solid rgba(11, 11, 12, 0.14);
  border-bottom: 1px solid rgba(11, 11, 12, 0.14);
}

.bb-guide-inline-cta strong {
  font-weight: 600;
  color: #0b0b0c;
}

.bb-guide-content .bb-guide-inline-cta a,
.bb-guide-inline-cta a {
  display: inline-block;
  font-weight: 600;
  color: #0b0b0c;
  white-space: nowrap;
}

/*
 * Closing call to action: a Group block with the class "bb-guide-cta-panel",
 * containing a heading, a paragraph and a "bb-guide-cta-panel__action" link.
 */

.bb-guide-cta-panel {
  margin: 64px 0 40px;
  padding: clamp(32px, 5vw, 60px) clamp(24px, 5vw, 60px);
  color: rgba(247, 245, 239, 0.78);
  background: #0b0b0c;
}

.bb-guide-cta-panel .wp-block-group__inner-container {
  display: contents;
}

.bb-guide-content .bb-guide-cta-panel h3,
.bb-guide-cta-panel h3 {
  margin: 0 0 16px;
  font-family: "Larken", serif;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1.2;
  color: #f7f5ef;
}

.bb-guide-content .bb-guide-cta-panel p,
.bb-guide-cta-panel p {
  max-width: 56ch;
  margin: 0 0 28px;
  color: inherit;
}

.bb-guide-content .bb-guide-cta-panel .bb-guide-cta-panel__action,
.bb-guide-cta-panel .bb-guide-cta-panel__action {
  margin: 0;
}

.bb-guide-content .bb-guide-cta-panel__action a,
.bb-guide-cta-panel__action a {
  display: inline-block;
  padding: 16px 30px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  /* Overrides the global "p a" link colour, which is !important. */
  color: #0b0b0c !important;
  background: #a0b100;
  transition: background-color 0.3s;
}

.bb-guide-content .bb-guide-cta-panel__action a:hover,
.bb-guide-cta-panel__action a:hover,
.bb-guide-cta-panel__action a:focus-visible {
  /* The global "p a:hover" rule fades links to 0.7, which turns white grey on the dark panel. */
  opacity: 1;
  background: #fff;
}

@media (max-width: 767px) {
  .bb-guide-inline-cta a {
    white-space: normal;
  }
}

@media print {
  .bb-key-takeaways {
    background: none;
    border: 1px solid #ccc;
  }

  .bb-guide-cta-panel {
    display: none;
  }
}