/* =====================================================================
   WML Roll Reveal  —  class-based, drop onto any layout
   =====================================================================

   HOW TO USE (in Bricks, on your own grid):

   1. Make a container a CSS grid however you like, e.g.
        display: grid;  grid-template-columns: 1fr 1fr 1fr;  gap: 24px;
   2. On each direct child of that grid add the class:  wml-rr-card
   3. Inside each card add ONE wrapper with the class:  wml-rr-panel
        - this is the visible surface; style it (bg, padding, radius) freely
   4. Inside the panel:
        - put the ALWAYS-VISIBLE intro content directly
        - wrap the HIDDEN detail content in a single:  wml-rr-detail
          (put all detail markup inside ONE element within it)

   On hover/focus (or tap on touch) the card floats above the grid,
   fills the full row width, and the detail rolls open. Neighbours don't
   move, so there is no hover flicker.

   The width-overlay requires the small JS file (it measures the grid).
   Without JS it gracefully falls back to a simple in-place reveal.
   ===================================================================== */

/* ---------- BEHAVIOUR (works on ANY grid) ---------- */

.wml-rr-card {
    --wml-rr-dur: 0.55s;
    --wml-rr-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

/* Lift the hovered/open card above its neighbours */
.wml-rr-card:hover,
.wml-rr-card:focus-within,
.wml-rr-card.is-open {
    z-index: 30;
}

/* The visible surface. In flow by default (so the cell sizes itself with
   no JS / no flash); JS promotes it to an overlay once measured. */
.wml-rr-panel {
    position: relative;
    box-sizing: border-box;
    transition:
        left var(--wml-rr-dur) var(--wml-rr-ease),
        width var(--wml-rr-dur) var(--wml-rr-ease),
        box-shadow var(--wml-rr-dur) var(--wml-rr-ease),
        transform var(--wml-rr-dur) var(--wml-rr-ease);
}

.wml-rr-card.wml-rr-ready .wml-rr-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    will-change: left, width;
}

/* Overlay geometry comes from JS (full grid-row width, aligned to the row) */
.wml-rr-card.wml-rr-ready:hover .wml-rr-panel,
.wml-rr-card.wml-rr-ready:focus-within .wml-rr-panel,
.wml-rr-card.wml-rr-ready.is-open .wml-rr-panel {
    left: var(--wml-rr-x, 0px);
    width: var(--wml-rr-w, 100%);
}

/* The reveal wrapper — smooth height from 0 using the grid-rows trick */
.wml-rr-detail {
    display: grid;
    grid-template-rows: 0fr;
    perspective: 1400px;
    transition: grid-template-rows var(--wml-rr-dur) var(--wml-rr-ease);
}

.wml-rr-card:hover .wml-rr-detail,
.wml-rr-card:focus-within .wml-rr-detail,
.wml-rr-card.is-open .wml-rr-detail {
    grid-template-rows: 1fr;
}

/* The single child of .wml-rr-detail does the 3D "roll" */
.wml-rr-detail > * {
    min-height: 0;
    overflow: hidden;
    transform-origin: top center;
    transform: rotateX(-90deg);
    opacity: 0;
    transition:
        transform var(--wml-rr-dur) var(--wml-rr-ease),
        opacity calc(var(--wml-rr-dur) * 0.8) var(--wml-rr-ease);
}

.wml-rr-card:hover .wml-rr-detail > *,
.wml-rr-card:focus-within .wml-rr-detail > *,
.wml-rr-card.is-open .wml-rr-detail > * {
    transform: rotateX(0deg);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .wml-rr-panel,
    .wml-rr-detail,
    .wml-rr-detail > * {
        transition-duration: 0.001s;
    }
    .wml-rr-detail > * {
        transform: none;
    }
}

/* =====================================================================
   SKIN  —  default look used by the "Roll Reveal Card" widget.
   Scoped to .wml-rr-grid so it never touches your own hand-built cards.
   ===================================================================== */

.wml-rr-grid {
    --wml-rr-cols: 3;
    --wml-rr-gap: 24px;
    --wml-rr-accent: #7877ff;
    display: grid;
    grid-template-columns: repeat(var(--wml-rr-cols), 1fr);
    gap: var(--wml-rr-gap);
    width: 100%;
}

.wml-rr-grid .wml-rr-card {
    min-height: 60px; /* pre-JS fallback so the cell never collapses */
}

.wml-rr-grid .wml-rr-panel {
    background: #111118;
    color: #fff;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.wml-rr-grid .wml-rr-card:hover .wml-rr-panel,
.wml-rr-grid .wml-rr-card:focus-within .wml-rr-panel,
.wml-rr-grid .wml-rr-card.is-open .wml-rr-panel {
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.34);
}

.wml-rr-grid .wml-rr-card:focus {
    outline: none;
}

.wml-rr-intro {
    position: relative;
}

.wml-rr-intro > :first-child {
    margin-top: 0;
}

.wml-rr-intro > :last-child {
    margin-bottom: 0;
}

/* Plus / minus indicator */
.wml-rr-grid .wml-rr-indicator {
    position: absolute;
    top: 26px;
    right: 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--wml-rr-accent);
    transition: transform var(--wml-rr-dur) var(--wml-rr-ease);
    z-index: 2;
}

.wml-rr-grid .wml-rr-indicator::before,
.wml-rr-grid .wml-rr-indicator::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: transform var(--wml-rr-dur) var(--wml-rr-ease);
}

.wml-rr-grid .wml-rr-indicator::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.wml-rr-grid .wml-rr-card:hover .wml-rr-indicator,
.wml-rr-grid .wml-rr-card:focus-within .wml-rr-indicator,
.wml-rr-grid .wml-rr-card.is-open .wml-rr-indicator {
    transform: rotate(180deg);
}

.wml-rr-grid .wml-rr-card:hover .wml-rr-indicator::after,
.wml-rr-grid .wml-rr-card:focus-within .wml-rr-indicator::after,
.wml-rr-grid .wml-rr-card.is-open .wml-rr-indicator::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.wml-rr-grid .wml-rr-content {
    max-width: 70ch;
}

.wml-rr-grid .wml-rr-content > :last-child {
    margin-bottom: 0;
}

.wml-rr-grid .wml-rr-divider {
    display: block;
    width: 48px;
    height: 3px;
    border-radius: 3px;
    background: var(--wml-rr-accent);
    margin: 16px 0 14px;
}