/* ==========================================================================
   Demo stage - a card grid where each card runs a real theme component
   ==========================================================================
   Shows off front-end effects (svg-line-draw vegetables, marker text,
   LK Porras animated background ...) as live demos with a title and a short
   description. No video, no GIF: the stage contains the component's real
   markup and the component initialises itself as anywhere else on the site.

   DOM structure (globalClasses on GB containers, generated by gbgen):

   .color-section                                   section
     .gb-container (flex, wrap)                     inner: header block + cards
       [header block]                               chainAnimation order 0
       .demo-card                                   48 % / 100 % mobile, order 1..n
         .demo-stage .color-section [palette]       stage, aspect 4:3, padding 0
           .demo-stage__fx [component classes]      optional: absolute layer the
                                                    component injects into
                                                    (svg-line-draw-container)
           .demo-stage__content                     centred text above the fx
             h3 / p.marker-text ...
         .demo-card__body                           tag, h3, p
           p.demo-card__tag

   HTML attributes on .demo-stage (GB htmlAttributes):
     data-demo   which replay handler to use: svg-line-draw | marker-text | lk-porras
     data-shape  etc. are passed through to the component

   JS (js/blocks/demo-stage.js): injects nothing by itself. The "Toista"
   button is added on the front end by includes/demo-stage/demo-stage.php
   (render_block filter) and the script replays the component named in
   data-demo through window.ApplariDemoReplay. Without JS the stage shows the
   component's no-JS fallback (plain text, empty background) and no button.
   The editor gets a static preview of the button via ::after.
   ========================================================================== */

@media only screen and (min-width: 320px) {

    /* ---- Grid ------------------------------------------------------------ */
    .demo-card {
        display: flex;
        flex-direction: column;
    }

    /* ---- Stage ----------------------------------------------------------- */
    .gb-container.demo-stage {
        position: relative;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        padding: 0;
        border: 1px solid var(--border-clr);
        border-radius: 4px;
        isolation: isolate;
        background-color: var(--bg-clr);
        color: var(--font-clr);
    }
    /* Palette sections normally drop the top padding after a same-colour
       section (base.css); the stage is never padded. */
    .gb-container.demo-stage.color-section {
        padding: 0;
    }

    .demo-stage__fx {
        position: absolute;
        inset: 0;
        z-index: 0;
    }
    .demo-stage .svg-line-draw-container {
        position: absolute;
        inset: 0;
    }

    .gb-container.demo-stage__content {
        position: relative;
        z-index: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 8%;
        background-color: unset;
    }
    .gb-container.demo-stage__content.no-padding{
        padding: 0;
    } 

    .demo-stage__content--corner {
        justify-content: flex-end;
        align-items: flex-start;
        text-align: left;
    }
    .demo-stage__content h3,
    .demo-stage__content p {
        margin: 0;
    }
    .demo-stage__content p + p,
    .demo-stage__content h3 + p {
        margin-top: 6px;
    }

    /* Marker text inside a stage: large, almost straight so it fits 4:3 */
    .demo-stage .marker-text {
        font-size: clamp(28px, 4vw, 44px);
        --marker-text-tilt: -2deg;
    }

    /* ---- Replay button (front end, injected by demo-stage.php) ---------- */
    .demo-stage__replay {
        position: absolute;
        right: 12px;
        top: 12px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font: 700 11px/1 var(--main-font);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid currentColor;
        background: transparent;
        color: var(--font-clr);
        cursor: pointer;
        opacity: 0.55;
        transition: opacity 0.3s, background-color 0.3s, color 0.3s, border-color 0.3s;
    }
    .demo-stage__replay svg {
        width: 12px;
        height: 12px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .demo-stage__replay:hover,
    .demo-stage__replay:focus-visible,
    .demo-stage:hover .demo-stage__replay {
        opacity: 1;
    }
    .demo-stage__replay:hover,
    .demo-stage__replay:focus-visible {
        background: var(--btn-bg);
        color: var(--btn-font-clr);
        border-color: var(--btn-bg);
    }
    .demo-stage__replay.is-busy svg {
        animation: demo-stage-spin 0.8s linear infinite;
    }
    @keyframes demo-stage-spin {
        to { transform: rotate(360deg); }
    }

    /* Editor: static preview of the button so the stage looks like the front */
    .editor-styles-wrapper .demo-stage::after {
        content: "Toista";
        position: absolute;
        right: 12px;
        top: 12px;
        z-index: 2;
        font: 700 11px/1 var(--main-font);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid currentColor;
        opacity: 0.55;
        pointer-events: none;
    }

    /* ---- Card body ------------------------------------------------------- */
    .demo-card__body {
        padding-top: 20px;
    }
    .demo-card__tag {
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--link-clr);
        margin-bottom: 8px;
    }
    .demo-card__body h3 {
        margin-bottom: 8px;
    }
    .demo-card__body p:last-child {
        margin-bottom: 0;
    }

    /* ---- LK Porras animated background (generator in js/applari-js) ----- */
    .lk-porras-bg-dynamic {
        background-image: none;
        position: relative;
        overflow: hidden;
    }
    .lk-porras-bg-svg-wrapper {
        position: absolute;
        inset: 0;
        z-index: 0;
        opacity: 0;
        pointer-events: none;
    }
    .lk-porras-bg-svg-wrapper svg {
        width: 100%;
        height: 100%;
        display: block;
    }
    .lk-porras-bg-dynamic.lk-porras-bg-revealed .lk-porras-bg-svg-wrapper {
        animation: lk-porras-container-reveal 0.5s ease-out forwards;
    }
    @keyframes lk-porras-container-reveal {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        .lk-porras-bg-dynamic.lk-porras-bg-revealed .lk-porras-bg-svg-wrapper {
            animation: none;
            opacity: 1;
        }
    }
}

@media only screen and (min-width: 768px) {
    .demo-stage__replay {
        opacity: 0.4;
    }
}