/* ============================================================
 * Expandable Cards — single panel + 3-column grid (Lyra)
 * ============================================================
 *
 * Visual model:
 *   .lyra-bt-ec                      — block wrapper (single or grid)
 *   .lyra-bt-ec__row                 — one row of cards (single = 1 card,
 *                                  grid = up to 3 cards). In grid mode
 *                                  this is `display: grid` with 3 equal
 *                                  columns; in single mode it just lays
 *                                  out one full-width card.
 *   .lyra-bt-ec__card                — the always-visible card surface.
 *                                  Carries per-card CSS vars inline
 *                                  (bg image, gradient, overlay).
 *   .lyra-bt-ec__bg                  — bg-image layer (absolute fill).
 *   .lyra-bt-ec__overlay             — gradient overlay on top of bg.
 *   .lyra-bt-ec__content             — title / subtitle / button stack.
 *   .lyra-bt-ec__panel               — the hidden expandable panel sitting
 *                                  next to its card. When expanded, it
 *                                  uses `grid-column: 1 / -1` so it spans
 *                                  the full row in grid mode.
 *
 * Animation pattern matches LYRA_BT_Text_Expandable: measure scrollHeight in
 * JS, transition `height` ~300ms ease-out, then settle to `auto`.
 * prefers-reduced-motion → instant.
 * ============================================================ */

.lyra-bt-ec {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    /* Block-level defaults — actual values are emitted server-side as
       inline CSS vars on the wrapper. Listed here so the cascade has
       something to fall back on if the inline tag is stripped (e.g.
       in a sanitized preview context). */
    --lyra-bt-ec-text-color: #fff;
    --lyra-bt-ec-text-align: left;
    --lyra-bt-ec-card-min-h: 220px;
    --lyra-bt-ec-card-pad-v: 24px;
    --lyra-bt-ec-card-pad-h: 24px;
    --lyra-bt-ec-card-radius: 8px;
    --lyra-bt-ec-panel-bg: #fff;
    --lyra-bt-ec-panel-pad-v: 32px;
    --lyra-bt-ec-panel-pad-h: 32px;
    --lyra-bt-ec-grid-gap: 16px;
}

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

/* Single-panel block: the row is just a stack containing one card. */
.lyra-bt-ec--panel .lyra-bt-ec__row {
    display: block;
}

/* Grid block: rows are 3-column CSS grids. The grid-template-columns
   declaration is also emitted server-side (so the column count comes
   from the block's data), but we set the default here too. */
.lyra-bt-ec--grid .lyra-bt-ec__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lyra-bt-ec-grid-gap);
}

/* Rows after the first need a top gap so consecutive rows don't
   visually butt up against each other. */
.lyra-bt-ec--grid .lyra-bt-ec__row + .lyra-bt-ec__row {
    margin-top: var(--lyra-bt-ec-grid-gap);
}

/* ── Card ────────────────────────────────────────────────── */

.lyra-bt-ec__card {
    position: relative;
    overflow: hidden;
    border-radius: var(--lyra-bt-ec-card-radius);
    min-height: var(--lyra-bt-ec-card-min-h);
    padding: var(--lyra-bt-ec-card-pad-v) var(--lyra-bt-ec-card-pad-h);
    color: var(--lyra-bt-ec-text-color);
    text-align: var(--lyra-bt-ec-text-align);
    cursor: pointer;
    /* Smooth transform on hover for that "lifted" feel. */
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
    isolation: isolate; /* keeps the overlay's opacity scoped to the card */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.lyra-bt-ec__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.lyra-bt-ec__card:focus-within {
    /* Focus ring lives on the inner button; mirror it on the card so
       keyboard users see the active card outline even though the card
       itself isn't the focusable element. */
    outline: 3px solid rgba(59, 130, 246, 0.45);
    outline-offset: 2px;
}

/* Bg image layer — fills the card; uses per-card CSS vars. */
.lyra-bt-ec__bg {
    position: absolute;
    inset: 0;
    background-image: var(--lyra-bt-ec-bg-image, none);
    background-position: var(--lyra-bt-ec-bg-pos, center);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Gradient overlay — sits on top of the image, opacity drives blend. */
.lyra-bt-ec__overlay {
    position: absolute;
    inset: 0;
    background: var(--lyra-bt-ec-bg-gradient, linear-gradient(135deg, #1e293b, #0f172a));
    opacity: var(--lyra-bt-ec-overlay-opacity, 0.7);
    z-index: 1;
}

/* Text stack — must sit above the overlay. */
.lyra-bt-ec__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lyra-bt-ec__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.lyra-bt-ec__subtitle {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    opacity: 0.9;
    margin: 0;
}

.lyra-bt-ec__cta {
    margin-top: 12px;
    display: flex;
    /* Mirror the card's horizontal text alignment for the button row. */
    justify-content: flex-start;
}

.lyra-bt-ec[style*="--lyra-bt-ec-text-align: center"] .lyra-bt-ec__cta,
.lyra-bt-ec__card[style*="--lyra-bt-ec-text-align: center"] .lyra-bt-ec__cta {
    justify-content: center;
}

.lyra-bt-ec[style*="--lyra-bt-ec-text-align: right"] .lyra-bt-ec__cta,
.lyra-bt-ec__card[style*="--lyra-bt-ec-text-align: right"] .lyra-bt-ec__cta {
    justify-content: flex-end;
}

.lyra-bt-ec__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.2;
    transition: background 150ms ease-out;
}

.lyra-bt-ec__btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.lyra-bt-ec__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.lyra-bt-ec__chevron {
    display: inline-flex;
    transition: transform 250ms ease-out;
}

/* Rotate the chevron when the button is in the "expanded" state. */
.lyra-bt-ec__btn[aria-expanded="true"] .lyra-bt-ec__chevron {
    transform: rotate(180deg);
}

/* ── Expandable panel ────────────────────────────────────── */

.lyra-bt-ec__panel {
    /* Hidden by default — JS will toggle `hidden` AND drive height. */
    background: var(--lyra-bt-ec-panel-bg);
    border-radius: var(--lyra-bt-ec-card-radius);
    overflow: hidden;
    height: 0;
    transition: height 300ms ease-out, margin 300ms ease-out;
    /* When inside a CSS-grid row, the panel must span the entire row so
       it slides under its card. Outside a grid (single-panel block) this
       is harmless. */
    grid-column: 1 / -1;
    margin-top: 0;
}

/* When `hidden` is present (default state) we use display:none so the
   panel takes no space at all. JS removes `hidden` BEFORE animating. */
.lyra-bt-ec__panel[hidden] {
    display: none !important;
}

/* While JS is animating the panel open / closed it sets these data
   attributes to coordinate the height transition. The "open" state
   ends with height:auto (set after the transition settles). */
.lyra-bt-ec__panel.is-open {
    margin-top: var(--lyra-bt-ec-grid-gap);
}

.lyra-bt-ec--panel .lyra-bt-ec__panel.is-open {
    margin-top: 12px;
}

.lyra-bt-ec__panel-inner {
    padding: var(--lyra-bt-ec-panel-pad-v) var(--lyra-bt-ec-panel-pad-h);
}

/* Admin-only placeholder shown when no saved block is selected. */
.lyra-bt-ec-empty {
    padding: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    color: #475569;
    background: #f8fafc;
}

/* ── Responsive collapse ─────────────────────────────────── */

/* Tablet: drop the grid to 2 columns. */
@media (max-width: 900px) {
    .lyra-bt-ec--grid .lyra-bt-ec__row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Phone: single column. */
@media (max-width: 600px) {
    .lyra-bt-ec--grid .lyra-bt-ec__row {
        grid-template-columns: 1fr;
    }
}

/* ── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .lyra-bt-ec__card,
    .lyra-bt-ec__panel,
    .lyra-bt-ec__btn,
    .lyra-bt-ec__chevron {
        transition: none !important;
    }
}