/* ═══════════════════════════════════════════════════════════════════════
   Lyra "Did You Know?" Fact Strip — frontend styles

   Items are absolutely positioned within .lyra-bt-fact-strip__items so the
   container takes the height of the tallest item; the JS measures all
   items on init and sets min-height. Only the .is-active item is
   visible (opacity 1 for fade, translateX(0) for slide).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Container ────────────────────────────────────────────────────────── */
.lyra-bt-fact-strip {
    box-sizing: border-box;
    background: #f1f5f9;
    color: #0f172a;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    position: relative;
}
.lyra-bt-fact-strip--align-left   { text-align: left;   }
.lyra-bt-fact-strip--align-center { text-align: center; }
.lyra-bt-fact-strip--align-right  { text-align: right;  }

/* Empty-state hint shown to admins only when no items are configured. */
.lyra-bt-fact-strip--empty {
    background: #fef3c7;
    color: #78350f;
    border: 1px dashed #fcd34d;
}

/* ── Inner row (prev / prefix / items / next) ─────────────────────────── */
.lyra-bt-fact-strip__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 24px;
}
.lyra-bt-fact-strip--align-left   .lyra-bt-fact-strip__inner { justify-content: flex-start; }
.lyra-bt-fact-strip--align-center .lyra-bt-fact-strip__inner { justify-content: center;     }
.lyra-bt-fact-strip--align-right  .lyra-bt-fact-strip__inner { justify-content: flex-end;   }

/* Prefix label */
.lyra-bt-fact-strip__prefix {
    flex: 0 0 auto;
    font-weight: 700;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85em;
    white-space: nowrap;
}

/* ── Items wrapper ────────────────────────────────────────────────────── */
.lyra-bt-fact-strip__items {
    flex: 1 1 auto;
    position: relative;
    min-height: 1.4em;       /* fallback before JS measurement runs */
    overflow: hidden;
}
/* When measuring tallest item on init, items are temporarily un-positioned
   so getBoundingClientRect returns natural height. */
.lyra-bt-fact-strip__items--measuring .lyra-bt-fact-strip__item {
    position: static !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: none !important;
}

.lyra-bt-fact-strip__item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.lyra-bt-fact-strip--align-left   .lyra-bt-fact-strip__item { justify-content: flex-start; }
.lyra-bt-fact-strip--align-center .lyra-bt-fact-strip__item { justify-content: center;     }
.lyra-bt-fact-strip--align-right  .lyra-bt-fact-strip__item { justify-content: flex-end;   }

.lyra-bt-fact-strip__item.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Slide transition variant — items slide in from the right. */
.lyra-bt-fact-strip--slide .lyra-bt-fact-strip__item {
    opacity: 1;
    transform: translateX(40px);
    transition: transform 0.45s ease, opacity 0.45s ease;
}
.lyra-bt-fact-strip--slide .lyra-bt-fact-strip__item.is-active {
    transform: translateX(0);
}
.lyra-bt-fact-strip--slide .lyra-bt-fact-strip__item:not(.is-active) {
    opacity: 0;
    transform: translateX(-40px);
}

/* When only one item, no transition jitter — render statically. */
.lyra-bt-fact-strip--single .lyra-bt-fact-strip__item {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* Prefers-reduced-motion — kill the transitions, no auto-rotation
   (the JS already skips the timer; here we also drop the animation so
   manual nav clicks don't trigger a fade). */
@media (prefers-reduced-motion: reduce) {
    .lyra-bt-fact-strip__item {
        transition: none !important;
        transform: none !important;
    }
}

/* ── Item text + icon + link ─────────────────────────────────────────── */
.lyra-bt-fact-strip__icon {
    flex: 0 0 auto;
    font-size: 1.1em;
    line-height: 1;
}
.lyra-bt-fact-strip__text {
    flex: 0 1 auto;
}
.lyra-bt-fact-strip__link {
    color: #2563eb;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.lyra-bt-fact-strip__link:hover,
.lyra-bt-fact-strip__link:focus {
    text-decoration: underline;
}

/* ── Manual navigation arrows ────────────────────────────────────────── */
.lyra-bt-fact-strip__nav {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    line-height: 1;
    font-size: 18px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.lyra-bt-fact-strip__nav:hover,
.lyra-bt-fact-strip__nav:focus {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* ── Dot indicators ──────────────────────────────────────────────────── */
.lyra-bt-fact-strip__dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 8px;
}
.lyra-bt-fact-strip--align-left   .lyra-bt-fact-strip__dots { justify-content: flex-start; }
.lyra-bt-fact-strip--align-right  .lyra-bt-fact-strip__dots { justify-content: flex-end;   }
.lyra-bt-fact-strip__dot {
    background: rgba(0, 0, 0, 0.25);
    border: none;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.lyra-bt-fact-strip__dot:hover,
.lyra-bt-fact-strip__dot:focus {
    transform: scale(1.2);
    outline: 2px solid currentColor;
    outline-offset: 1px;
}
.lyra-bt-fact-strip__dot.is-active {
    background: #3b82f6;
}