/* ════════════════════════════════════════════════════════════════════════
 * Lyra Bento Feature Grids
 *
 * Three blocks share this stylesheet (registered by LYRA_BT_Bento_Feature_Grids):
 *   - .lyra-bt-bfg.lyra-bt-bfg--editorial   — 5-tile asymmetric (1 hero + 4 small)
 *   - .lyra-bt-bfg.lyra-bt-bfg--showcase    — 6-tile uniform 3-col responsive grid
 *   - .lyra-bt-bfg.lyra-bt-bfg--magazine    — 4-tile 2×2 with structurally
 *                                      different tile content per slot
 *
 * Theming flows through CSS custom properties set as inline styles on
 * the .lyra-bt-bfg wrapper. The stylesheet never hard-codes colors that the
 * admin can customize — each color reads through a var(--lyra-bt-bfg-*)
 * with a sensible fallback for cases where the admin left the field
 * blank.
 *
 * Per-tile accent override: tiles set --lyra-bt-bfg-tile-accent on their
 * own inline style; rules inside the tile use the per-tile var first
 * and fall back to the block accent. So setting accent_override on one
 * tile in the inspector recolors only that tile.
 *
 * Hover-reveal: detail and CTA are positioned at the bottom of each
 * tile in a clipping container with max-height:0 and opacity:0. On
 * :hover OR :focus-within, they transition to natural height +
 * opacity 1. Keyboard users get the same affordance via Tab-focus.
 * Blocks where the admin turned off reveal-on-hover get the
 * .lyra-bt-bfg-ed--detail-always / .lyra-bt-bfg-sh--detail-always modifier
 * which forces the reveal panel open.
 * ════════════════════════════════════════════════════════════════════ */

.lyra-bt-bfg {
  /* Fallback color vars (used when admin leaves the field blank). The
   * fallback chain inside each rule reads --lyra-bt-bfg-* first, then
   * falls back to these defaults. */
  --lyra-bt-bfg-accent-default: #6366f1;
  --lyra-bt-bfg-text-default: #0f172a;
  --lyra-bt-bfg-muted-default: #64748b;
  --lyra-bt-bfg-tile-bg-default: #ffffff;
  --lyra-bt-bfg-border-default: #e2e8f0;
  --lyra-bt-bfg-heading-default: #0f172a;

  box-sizing: border-box;
  padding: var(--lyra-bt-bfg-pad-v, 64px) var(--lyra-bt-bfg-pad-h, 24px);
  background: var(--lyra-bt-bfg-bg, transparent);
  color: var(--lyra-bt-bfg-text, var(--lyra-bt-bfg-text-default));
  font-family: inherit;
  line-height: 1.55;
}

.lyra-bt-bfg *,
.lyra-bt-bfg *::before,
.lyra-bt-bfg *::after {
  box-sizing: border-box;
}

.lyra-bt-bfg--bounded {
  max-width: var(--lyra-bt-bfg-max-w, 1180px);
  margin-left: auto;
  margin-right: auto;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.lyra-bt-bfg__empty {
  padding: 32px 24px;
  text-align: center;
  background: rgba(15, 23, 42, 0.04);
  border: 1px dashed rgba(15, 23, 42, 0.18);
  border-radius: 12px;
  color: var(--lyra-bt-bfg-muted, var(--lyra-bt-bfg-muted-default));
  font-size: 14px;
  font-style: italic;
}

/* ── Block header ────────────────────────────────────────────────── */
.lyra-bt-bfg__header {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lyra-bt-bfg__header--left   { align-items: flex-start; text-align: left; }
.lyra-bt-bfg__header--center { align-items: center;     text-align: center; }
.lyra-bt-bfg__header--right  { align-items: flex-end;   text-align: right; }

.lyra-bt-bfg__heading {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--lyra-bt-bfg-heading, var(--lyra-bt-bfg-heading-default));
  margin: 0;
}
.lyra-bt-bfg__subheading {
  font-size: 16px;
  line-height: 1.55;
  color: var(--lyra-bt-bfg-muted, var(--lyra-bt-bfg-muted-default));
  max-width: 640px;
  margin: 0;
}
.lyra-bt-bfg__header--center .lyra-bt-bfg__subheading { margin-left: auto; margin-right: auto; }
.lyra-bt-bfg__header--right  .lyra-bt-bfg__subheading { margin-left: auto; }

/* ════════════════════════════════════════════════════════════════════════
 * EDITORIAL (asymmetric 5-tile bento)
 * ════════════════════════════════════════════════════════════════════════ */

.lyra-bt-bfg-ed__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(220px, auto) minmax(220px, auto);
  gap: var(--lyra-bt-bfg-gap, 14px);
  grid-auto-flow: dense;
}

/* Hero tile (always the first tile in the repeater) spans 2×2.
 * Position determined by .lyra-bt-bfg-ed--hero-* modifier on the wrapper. */
.lyra-bt-bfg-ed__tile.is-hero {
  grid-column: span 2;
  grid-row: span 2;
}
.lyra-bt-bfg--editorial.lyra-bt-bfg-ed--hero-top-left     .lyra-bt-bfg-ed__tile.is-hero { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.lyra-bt-bfg--editorial.lyra-bt-bfg-ed--hero-top-right    .lyra-bt-bfg-ed__tile.is-hero { grid-column: 3 / span 2; grid-row: 1 / span 2; }
.lyra-bt-bfg--editorial.lyra-bt-bfg-ed--hero-bottom-left  .lyra-bt-bfg-ed__tile.is-hero { grid-column: 1 / span 2; grid-row: 2 / span 1; grid-row: 1 / span 2; }
.lyra-bt-bfg--editorial.lyra-bt-bfg-ed--hero-bottom-right .lyra-bt-bfg-ed__tile.is-hero { grid-column: 3 / span 2; grid-row: 1 / span 2; }
/* (bottom-left / bottom-right use the same span-2 hero placement; visual
 * difference comes from which corner small tiles fill — auto-flow:dense
 * does the rest.) */

/* Tile shared */
.lyra-bt-bfg-ed__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  background: var(--lyra-bt-bfg-tile-bg, var(--lyra-bt-bfg-tile-bg-default));
  border: 1px solid var(--lyra-bt-bfg-border, var(--lyra-bt-bfg-border-default));
  border-radius: var(--lyra-bt-bfg-tile-radius, 18px);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.lyra-bt-bfg-ed__tile:hover,
.lyra-bt-bfg-ed__tile:focus-within {
  transform: translateY(-2px);
  border-color: var(--lyra-bt-bfg-tile-accent, var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default)));
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

/* Decorative accent corner — shows the tile accent in the top-right */
.lyra-bt-bfg-ed__tile::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at top right, var(--lyra-bt-bfg-tile-accent, var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default))), transparent 65%);
  opacity: 0.14;
  pointer-events: none;
  transition: opacity .22s ease;
}
.lyra-bt-bfg-ed__tile:hover::before,
.lyra-bt-bfg-ed__tile:focus-within::before { opacity: 0.28; }

/* Icon — top right */
.lyra-bt-bfg-ed__icon {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 22px;
  line-height: 1;
  z-index: 2;
}
.lyra-bt-bfg-ed__tile.is-hero .lyra-bt-bfg-ed__icon {
  font-size: 30px;
  top: 22px;
  right: 24px;
}

/* Stat block — big monospace value + small label */
.lyra-bt-bfg-ed__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  order: 1;
}
.lyra-bt-bfg-ed__stat-value {
  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', ui-monospace, monospace;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--lyra-bt-bfg-tile-accent, var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default)));
  font-variant-numeric: tabular-nums;
}
.lyra-bt-bfg-ed__tile.is-hero .lyra-bt-bfg-ed__stat-value {
  font-size: clamp(48px, 6vw, 72px);
}
.lyra-bt-bfg-ed__stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lyra-bt-bfg-muted, var(--lyra-bt-bfg-muted-default));
}

.lyra-bt-bfg-ed__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  order: 2;
}
.lyra-bt-bfg-ed--stat-first .lyra-bt-bfg-ed__stat { order: 1; }
.lyra-bt-bfg-ed--stat-first .lyra-bt-bfg-ed__copy { order: 2; }
/* When stat-first is OFF, copy goes first */
.lyra-bt-bfg--editorial:not(.lyra-bt-bfg-ed--stat-first) .lyra-bt-bfg-ed__copy { order: 1; }
.lyra-bt-bfg--editorial:not(.lyra-bt-bfg-ed--stat-first) .lyra-bt-bfg-ed__stat { order: 2; }

.lyra-bt-bfg-ed__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  color: var(--lyra-bt-bfg-text, var(--lyra-bt-bfg-text-default));
}
.lyra-bt-bfg-ed__tile.is-hero .lyra-bt-bfg-ed__title {
  font-size: 22px;
}
.lyra-bt-bfg-ed__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--lyra-bt-bfg-muted, var(--lyra-bt-bfg-muted-default));
  margin: 0;
}
.lyra-bt-bfg-ed__tile.is-hero .lyra-bt-bfg-ed__body {
  font-size: 15px;
  max-width: 480px;
}

/* Hover-reveal panel: detail + CTA */
.lyra-bt-bfg-ed__reveal {
  order: 3;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
}
.lyra-bt-bfg-ed__tile:hover .lyra-bt-bfg-ed__reveal,
.lyra-bt-bfg-ed__tile:focus-within .lyra-bt-bfg-ed__reveal,
.lyra-bt-bfg-ed--detail-always .lyra-bt-bfg-ed__reveal {
  max-height: 280px;
  opacity: 1;
  margin-top: 4px;
}
.lyra-bt-bfg-ed__detail {
  font-size: 13px;
  line-height: 1.5;
  color: var(--lyra-bt-bfg-muted, var(--lyra-bt-bfg-muted-default));
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--lyra-bt-bfg-border, var(--lyra-bt-bfg-border-default));
}
.lyra-bt-bfg-ed__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
  color: var(--lyra-bt-bfg-tile-accent, var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default)));
  text-decoration: none;
  letter-spacing: 0.005em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: gap .2s ease;
}
.lyra-bt-bfg-ed__cta:hover { gap: 9px; }
.lyra-bt-bfg-ed__cta-arrow { width: 13px; height: 13px; }

/* Editorial responsive */
@media (max-width: 900px) {
  .lyra-bt-bfg-ed__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }
  .lyra-bt-bfg-ed__tile.is-hero,
  .lyra-bt-bfg--editorial.lyra-bt-bfg-ed--hero-top-left     .lyra-bt-bfg-ed__tile.is-hero,
  .lyra-bt-bfg--editorial.lyra-bt-bfg-ed--hero-top-right    .lyra-bt-bfg-ed__tile.is-hero,
  .lyra-bt-bfg--editorial.lyra-bt-bfg-ed--hero-bottom-left  .lyra-bt-bfg-ed__tile.is-hero,
  .lyra-bt-bfg--editorial.lyra-bt-bfg-ed--hero-bottom-right .lyra-bt-bfg-ed__tile.is-hero {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}
@media (max-width: 560px) {
  .lyra-bt-bfg-ed__grid { grid-template-columns: 1fr; }
  .lyra-bt-bfg-ed__tile { padding: 18px; }
}

/* ════════════════════════════════════════════════════════════════════════
 * SHOWCASE (6 uniform tiles, 3-col responsive)
 * ════════════════════════════════════════════════════════════════════════ */

.lyra-bt-bfg-sh__grid {
  display: grid;
  grid-template-columns: repeat(var(--lyra-bt-bfg-cols-desktop, 3), minmax(0, 1fr));
  gap: var(--lyra-bt-bfg-gap, 16px);
}

.lyra-bt-bfg-sh__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--lyra-bt-bfg-tile-bg, var(--lyra-bt-bfg-tile-bg-default));
  border: 1px solid var(--lyra-bt-bfg-border, var(--lyra-bt-bfg-border-default));
  border-radius: var(--lyra-bt-bfg-tile-radius, 16px);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.lyra-bt-bfg-sh__tile:hover,
.lyra-bt-bfg-sh__tile:focus-within {
  transform: translateY(-3px);
  border-color: var(--lyra-bt-bfg-tile-accent, var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default)));
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

/* Icon variants */
.lyra-bt-bfg-sh__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .22s ease;
}
.lyra-bt-bfg-sh__icon-glyph { display: block; line-height: 1; }
.lyra-bt-bfg-sh__tile:hover .lyra-bt-bfg-sh__icon,
.lyra-bt-bfg-sh__tile:focus-within .lyra-bt-bfg-sh__icon { transform: scale(1.08) rotate(-3deg); }

.lyra-bt-bfg-sh--icon-tinted-tile .lyra-bt-bfg-sh__icon {
  border-radius: 11px;
  background: color-mix(in srgb, var(--lyra-bt-bfg-tile-accent, var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default))) 14%, transparent);
  color: var(--lyra-bt-bfg-tile-accent, var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default)));
}
.lyra-bt-bfg-sh--icon-outline .lyra-bt-bfg-sh__icon {
  border-radius: 50%;
  border: 1.5px solid var(--lyra-bt-bfg-tile-accent, var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default)));
  color: var(--lyra-bt-bfg-tile-accent, var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default)));
}
.lyra-bt-bfg-sh--icon-naked .lyra-bt-bfg-sh__icon {
  background: transparent;
  border: none;
  width: auto;
  height: auto;
  font-size: 28px;
  color: var(--lyra-bt-bfg-tile-accent, var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default)));
}

.lyra-bt-bfg-sh__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  color: var(--lyra-bt-bfg-text, var(--lyra-bt-bfg-text-default));
}
.lyra-bt-bfg-sh__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--lyra-bt-bfg-muted, var(--lyra-bt-bfg-muted-default));
  margin: 0;
}

/* Hover-reveal */
.lyra-bt-bfg-sh__reveal {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
}
.lyra-bt-bfg-sh__tile:hover .lyra-bt-bfg-sh__reveal,
.lyra-bt-bfg-sh__tile:focus-within .lyra-bt-bfg-sh__reveal,
.lyra-bt-bfg-sh--detail-always .lyra-bt-bfg-sh__reveal {
  max-height: 280px;
  opacity: 1;
  margin-top: 4px;
}
.lyra-bt-bfg-sh__detail {
  font-size: 13px;
  line-height: 1.5;
  color: var(--lyra-bt-bfg-muted, var(--lyra-bt-bfg-muted-default));
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--lyra-bt-bfg-border, var(--lyra-bt-bfg-border-default));
}
.lyra-bt-bfg-sh__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
  color: var(--lyra-bt-bfg-tile-accent, var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default)));
  text-decoration: none;
  letter-spacing: 0.005em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: gap .2s ease;
}
.lyra-bt-bfg-sh__cta:hover { gap: 9px; }
.lyra-bt-bfg-sh__cta-arrow { width: 13px; height: 13px; }

/* Showcase responsive */
@media (max-width: 900px) {
  .lyra-bt-bfg-sh__grid { grid-template-columns: repeat(var(--lyra-bt-bfg-cols-tablet, 2), minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .lyra-bt-bfg-sh__grid { grid-template-columns: repeat(var(--lyra-bt-bfg-cols-mobile, 1), minmax(0, 1fr)); }
  .lyra-bt-bfg-sh__tile { padding: 20px; }
}

/* ════════════════════════════════════════════════════════════════════════
 * MAGAZINE (2×2 of structurally-different tiles)
 * ════════════════════════════════════════════════════════════════════════ */

.lyra-bt-bfg-mg__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lyra-bt-bfg-gap, 18px);
}
/* Single visible tile spans the full width */
.lyra-bt-bfg-mg--visible-1 .lyra-bt-bfg-mg__grid { grid-template-columns: 1fr; }
.lyra-bt-bfg-mg--visible-3 .lyra-bt-bfg-mg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lyra-bt-bfg-mg--visible-3 .lyra-bt-bfg-mg__tile:first-child { grid-column: 1 / -1; }

.lyra-bt-bfg-mg__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  background: var(--lyra-bt-bfg-tile-bg, var(--lyra-bt-bfg-tile-bg-default));
  border: 1px solid var(--lyra-bt-bfg-border, var(--lyra-bt-bfg-border-default));
  border-radius: var(--lyra-bt-bfg-tile-radius, 20px);
  overflow: hidden;
  min-height: 280px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.lyra-bt-bfg-mg__tile:hover { box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08); }

.lyra-bt-bfg-mg__tile-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lyra-bt-bfg-mg__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default));
}
.lyra-bt-bfg-mg__tile-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--lyra-bt-bfg-heading, var(--lyra-bt-bfg-heading-default));
}
.lyra-bt-bfg-mg__tile-caption {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lyra-bt-bfg-muted, var(--lyra-bt-bfg-muted-default));
  margin: 0;
}

/* ── Chart tile ──────────────────────────────────────────────────── */
.lyra-bt-bfg-mg__chart {
  flex: 1;
  display: flex;
  align-items: flex-end;
  margin: 4px 0 8px;
}
.lyra-bt-bfg-mg__chart-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  gap: 14px;
  align-items: end;
  width: 100%;
  min-height: 160px;
}
.lyra-bt-bfg-mg__chart-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.lyra-bt-bfg-mg__chart-bar-track {
  position: relative;
  background: color-mix(in srgb, var(--lyra-bt-bfg-text, var(--lyra-bt-bfg-text-default)) 6%, transparent);
  border-radius: 6px;
  height: 140px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.lyra-bt-bfg-mg__chart-bar-fill {
  position: relative;
  width: 100%;
  background: color-mix(in srgb, var(--lyra-bt-bfg-text, var(--lyra-bt-bfg-text-default)) 18%, transparent);
  border-radius: 6px 6px 0 0;
  height: 0%;
  animation: lyra-bt-bfg-bar-grow .9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  animation-delay: 0.15s;
  --lyra-bt-bfg-bar-pct: 0%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
}
.lyra-bt-bfg-mg__chart-bar.is-highlight .lyra-bt-bfg-mg__chart-bar-fill {
  background: var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default));
}
@keyframes lyra-bt-bfg-bar-grow {
  from { height: 0%; }
  to   { height: var(--lyra-bt-bfg-bar-pct, 0%); }
}
.lyra-bt-bfg-mg__chart-bar-value {
  font-family: 'SF Mono', 'Monaco', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--lyra-bt-bfg-tile-bg, var(--lyra-bt-bfg-tile-bg-default));
  font-variant-numeric: tabular-nums;
  opacity: 0;
  animation: lyra-bt-bfg-bar-value-in .3s ease 1s forwards;
}
@keyframes lyra-bt-bfg-bar-value-in { to { opacity: 1; } }
.lyra-bt-bfg-mg__chart-bar:not(.is-highlight) .lyra-bt-bfg-mg__chart-bar-value {
  color: var(--lyra-bt-bfg-text, var(--lyra-bt-bfg-text-default));
  opacity: 0;
  animation: lyra-bt-bfg-bar-value-in .3s ease 1s forwards;
}
.lyra-bt-bfg-mg__chart-bar-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--lyra-bt-bfg-muted, var(--lyra-bt-bfg-muted-default));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Logo strip tile ─────────────────────────────────────────────── */
.lyra-bt-bfg-mg__logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 16px;
  flex: 1;
  align-content: center;
  margin: 8px 0;
}
.lyra-bt-bfg-mg__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  text-decoration: none;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter .22s ease, opacity .22s ease, transform .22s ease;
}
.lyra-bt-bfg-mg__logo:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-2px);
}
.lyra-bt-bfg-mg__logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.lyra-bt-bfg-mg__logo-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lyra-bt-bfg-text, var(--lyra-bt-bfg-text-default));
  text-transform: none;
}

/* ── Quote tile ──────────────────────────────────────────────────── */
.lyra-bt-bfg-mg__tile--quote {
  background: color-mix(in srgb, var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default)) 6%, var(--lyra-bt-bfg-tile-bg, var(--lyra-bt-bfg-tile-bg-default)));
  border-color: color-mix(in srgb, var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default)) 18%, transparent);
}
.lyra-bt-bfg-mg__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default));
}
.lyra-bt-bfg-mg__star {
  width: 16px;
  height: 16px;
  fill: color-mix(in srgb, currentColor 22%, transparent);
}
.lyra-bt-bfg-mg__star.is-filled { fill: currentColor; }
.lyra-bt-bfg-mg__quote-text {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--lyra-bt-bfg-text, var(--lyra-bt-bfg-text-default));
  margin: 0;
  flex: 1;
  position: relative;
  padding-left: 8px;
}
.lyra-bt-bfg-mg__quote-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 56px;
  line-height: 0;
  color: var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default));
  margin-right: 4px;
  vertical-align: -16px;
}
.lyra-bt-bfg-mg__quote-attrib {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default)) 18%, transparent);
}
.lyra-bt-bfg-mg__quote-author {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--lyra-bt-bfg-text, var(--lyra-bt-bfg-text-default));
}
.lyra-bt-bfg-mg__quote-meta {
  font-size: 12.5px;
  color: var(--lyra-bt-bfg-muted, var(--lyra-bt-bfg-muted-default));
  letter-spacing: 0.005em;
}

/* ── Image + caption tile ────────────────────────────────────────── */
.lyra-bt-bfg-mg__tile--image { padding: 0; overflow: hidden; }
.lyra-bt-bfg-mg__image-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--lyra-bt-bfg-text, var(--lyra-bt-bfg-text-default)) 4%, transparent);
  overflow: hidden;
}
.lyra-bt-bfg-mg__image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.lyra-bt-bfg-mg__tile--image:hover .lyra-bt-bfg-mg__image-img { transform: scale(1.03); }
.lyra-bt-bfg-mg__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--lyra-bt-bfg-muted, var(--lyra-bt-bfg-muted-default)) 60%, transparent);
}
.lyra-bt-bfg-mg__image-placeholder svg { width: 56px; height: 56px; }
.lyra-bt-bfg-mg__image-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lyra-bt-bfg-mg__eyebrow--on-image { color: #fff; opacity: 0.85; }
.lyra-bt-bfg-mg__image-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
  color: #fff;
}
.lyra-bt-bfg-mg__image-body {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lyra-bt-bfg-mg__image-caption {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lyra-bt-bfg-muted, var(--lyra-bt-bfg-muted-default));
  margin: 0;
}
.lyra-bt-bfg-mg__image-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lyra-bt-bfg-accent, var(--lyra-bt-bfg-accent-default));
  text-decoration: none;
  letter-spacing: 0.005em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: gap .2s ease;
}
.lyra-bt-bfg-mg__image-cta:hover { gap: 9px; }
.lyra-bt-bfg-mg__image-cta svg { width: 13px; height: 13px; }

/* Magazine responsive */
@media (max-width: 900px) {
  .lyra-bt-bfg-mg__grid { grid-template-columns: 1fr; }
  .lyra-bt-bfg-mg--visible-3 .lyra-bt-bfg-mg__tile:first-child { grid-column: auto; }
  .lyra-bt-bfg-mg__tile { padding: 24px; min-height: 220px; }
  .lyra-bt-bfg-mg__tile--image { padding: 0; }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lyra-bt-bfg-ed__tile,
  .lyra-bt-bfg-sh__tile,
  .lyra-bt-bfg-mg__tile,
  .lyra-bt-bfg-mg__image-img,
  .lyra-bt-bfg-sh__icon,
  .lyra-bt-bfg-ed__cta,
  .lyra-bt-bfg-sh__cta,
  .lyra-bt-bfg-mg__image-cta,
  .lyra-bt-bfg-ed__reveal,
  .lyra-bt-bfg-sh__reveal,
  .lyra-bt-bfg-mg__logo {
    transition: none !important;
    animation: none !important;
  }
  .lyra-bt-bfg-mg__chart-bar-fill {
    animation: none !important;
    height: var(--lyra-bt-bfg-bar-pct, 0%) !important;
  }
  .lyra-bt-bfg-mg__chart-bar-value {
    animation: none !important;
    opacity: 1 !important;
  }
}