/* ──────────────────────────────────────────────────────────────────
   Keyword Rotator – Reusable inline rotating text
   Usage: [er_rotator words="WORD1,WORD2" color="#FF8DA1"]
   ────────────────────────────────────────────────────────────────── */

.er-rotator {
    display: inline-grid;
    /* Container auto-sizes to the widest keyword and keeps a real text baseline.
       Text alignment (left/center) is naturally inherited from the parent. */
}

.er-rotator__word {
    grid-area: 1 / 1;
    font-style: normal;
    text-transform: none;
    white-space: nowrap;
    opacity: 0;
    /* Fast fade out: Old keyword disappears in 0.2s. */
    transition: opacity 0.2s ease;
}

.er-rotator__word.is-active {
    opacity: 1;
    /* Delayed fade in: Wait for old keyword to disappear (0.2s delay). */
    transition: opacity 0.3s ease 0.2s;
}

/* ─── Mobile line break (opt-in via mobile_block="true") ──────── */

@media (max-width: 768px) {
    .er-rotator--mobile-block {
        display: grid !important; /* Preserves stacking while forcing a line break */
    }

    .er-rotator__word {
        white-space: normal;
    }
}