/* ═══════════════════════════════════════════════════════════════════════
   Lyra Text with Expandable Read More — frontend styles

   The PHP renderer emits per-instance scoped rules inline (typography,
   colors, padding, button styling, fade gradient color/height). The
   global rules below cover:
     - Outer alignment wrapper
     - Preview wrapper + fade overlay positioning
     - Expandable region's base "hidden" state (height:0 + overflow)
     - Button alignment
     - prefers-reduced-motion fallback
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ────────────────────────────────────────────────────── */
.lyra-bt-te-wrap { display: block; }
.lyra-bt-te-wrap--align-left   .lyra-bt-te { margin-left: 0;    margin-right: auto; }
.lyra-bt-te-wrap--align-center .lyra-bt-te { margin-left: auto; margin-right: auto; }
.lyra-bt-te-wrap--align-right  .lyra-bt-te { margin-left: auto; margin-right: 0;    }

/* ── Box ──────────────────────────────────────────────────────────────── */
.lyra-bt-te {
    box-sizing: border-box;
    /* Per-instance rules (font-size, line-height, padding, bg, border,
       max-width, font-weight, letter-spacing, text-transform, color)
       are emitted by build_style_tag(). */
}

/* Empty state (admins only) */
.lyra-bt-te--empty {
    padding: 14px 18px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    border-radius: 6px;
}

/* No-more variant — body shown plain, no toggle button. */
.lyra-bt-te--no-more .lyra-bt-te__body > p:first-child  { margin-top: 0; }
.lyra-bt-te--no-more .lyra-bt-te__body > p:last-child   { margin-bottom: 0; }

/* ── Text alignment ──────────────────────────────────────────────────── */
.lyra-bt-te--align-left    .lyra-bt-te__preview,
.lyra-bt-te--align-left    .lyra-bt-te__more,
.lyra-bt-te--align-left    .lyra-bt-te__body    { text-align: left;    }
.lyra-bt-te--align-center  .lyra-bt-te__preview,
.lyra-bt-te--align-center  .lyra-bt-te__more,
.lyra-bt-te--align-center  .lyra-bt-te__body    { text-align: center;  }
.lyra-bt-te--align-right   .lyra-bt-te__preview,
.lyra-bt-te--align-right   .lyra-bt-te__more,
.lyra-bt-te--align-right   .lyra-bt-te__body    { text-align: right;   }
.lyra-bt-te--align-justify .lyra-bt-te__preview,
.lyra-bt-te--align-justify .lyra-bt-te__more,
.lyra-bt-te--align-justify .lyra-bt-te__body    { text-align: justify; }

/* ── Preview wrapper + fade overlay ──────────────────────────────────── */
/* The preview wrapper is position:relative so the fade overlay can sit
   absolutely over its bottom edge. The fade is hidden when expanded. */
.lyra-bt-te__preview-wrap {
    position: relative;
}
.lyra-bt-te__preview > p:first-child  { margin-top: 0; }
.lyra-bt-te__preview > p:last-child   { margin-bottom: 0; }

.lyra-bt-te__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    /* Per-instance: height + linear-gradient bottom color emitted inline. */
}
.lyra-bt-te.is-expanded .lyra-bt-te__fade {
    display: none;
}
/* Hide the fade if the admin disabled gradient (no .lyra-bt-te--has-fade class). */
.lyra-bt-te:not(.lyra-bt-te--has-fade) .lyra-bt-te__fade {
    display: none;
}

/* ── Expandable region ──────────────────────────────────────────────── */
/* The hidden attr removes the region from the a11y tree when collapsed.
   When JS un-hides it for animation, the height transition takes it from
   0 to its scrollHeight and back. */
.lyra-bt-te__more {
    overflow: hidden;
    /* height is set inline by JS during transitions; default is auto when
       not transitioning. The hidden attr handles the "fully collapsed"
       case so we don't need an additional CSS rule for that state. */
}
.lyra-bt-te__more[hidden] {
    /* Browser default for [hidden] is display:none — but during the
       brief transition window we want it animatable. JS removes the
       attr for the entire animation lifecycle, then re-applies it on
       collapse complete. */
    display: none;
}
.lyra-bt-te__more-inner > p:first-child  { margin-top: 0.6em; }
.lyra-bt-te__more-inner > p:last-child   { margin-bottom: 0; }

/* ── Buttons row ──────────────────────────────────────────────────── */
.lyra-bt-te__buttons {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.lyra-bt-te--btn-align-left   .lyra-bt-te__buttons { justify-content: flex-start; }
.lyra-bt-te--btn-align-center .lyra-bt-te__buttons { justify-content: center;     }
.lyra-bt-te--btn-align-right  .lyra-bt-te__buttons { justify-content: flex-end;   }

.lyra-bt-te__toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    line-height: 1;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    /* Per-instance: color, bg, border, padding, border-radius, font-size
       emitted inline via build_style_tag(). */
}
.lyra-bt-te__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── Reduced-motion fallback ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lyra-bt-te__more {
        transition: none !important;
    }
}