/* The styles the named behaviours need.

   In @layer haya-defaults with the rest of the product's defaults, so a
   site's own tokens and a page's own styles both win over them (CMS-L11 —
   and the reason that matters is that an unlayered rule beats a layered one
   whatever the load order, which cost this product a silently ignored font
   choice once already).

   Everything here is written so that the absence of the script leaves the
   page readable: the pending state is added by JavaScript, never by the
   server, so a section is visible unless something is actively animating
   it. */

@layer haya-defaults {
    .pb-reveal-pending {
        opacity: 0;
        transform: translateY(12px);
    }

    .pb-reveal-done {
        opacity: 1;
        transform: none;
        transition: opacity 420ms ease-out, transform 420ms ease-out;
    }

    /* A reader who asked for less motion gets the content and none of the
       movement — the transition is the decoration, not the content. */
    @media (prefers-reduced-motion: reduce) {
        .pb-reveal-pending {
            opacity: 1;
            transform: none;
        }

        .pb-reveal-done {
            transition: none;
        }
    }

    .pb-sticky {
        position: sticky;
        inset-block-start: var(--pb-sticky-offset, 0);
        z-index: 5;
    }

    /* The rocket stage. The host becomes its own stacking context so the
       stage can sit behind the section's text (z-index -1) without dropping
       behind the section's background. The stage spans the whole section and
       takes no room; the pin inside it is what stays in view while the text
       scrolls past. Both classes are added by the script, so a page whose
       script never ran carries none of this. */
    .pb-rocket-host {
        position: relative;
        isolation: isolate;
    }

    .pb-rocket-stage {
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
    }

    .pb-rocket-stage__pin {
        position: sticky;
        inset-block-start: 0;
        block-size: 100vh;
        overflow: hidden;
        opacity: 0;
        transition: opacity 800ms ease;
    }

    .pb-rocket-stage.is-ready .pb-rocket-stage__pin {
        opacity: 1;
    }

    /* A widget whose data the page does not have. Only ever rendered inside
       the builder — a visitor never sees one. */
    .pb-widget-needs-data,
    .pb-unknown-widget,
    .pb-failed-widget {
        padding: var(--spacing-md, 16px);
        border: 1px dashed var(--color-border, #e5e7eb);
        border-radius: var(--radius-md, 8px);
        color: var(--color-text-muted, #6b7280);
        font-size: var(--font-size-small, 13px);
        text-align: center;
    }

    /* An image with no picture chosen yet: a picture-shaped box to click on
       (CMS-L41 task 11). Editor-only, like the rule above. */
    .pb-image-placeholder {
        display: grid;
        place-items: center;
        align-content: center;
        gap: 8px;
        aspect-ratio: 16 / 9;
        /* Big enough to read and to click (I23): the bare 82×54 box with an
           icon told a first-time author nothing. */
        min-height: 120px;
        padding: 16px;
        border: 1px dashed var(--color-border, #cbd5e1);
        border-radius: var(--radius-md, 8px);
        background: var(--color-bg-gray, #f3f4f6);
        color: var(--color-text-muted, #64748b);
    }

    .pb-image-placeholder__label {
        font-size: var(--font-size-small, 13px);
        text-align: center;
    }

    /* Enough room to click on, for a text widget an author has not written
       into yet. */
    .pb-empty-text {
        min-height: 1.5em;
    }

    .pb-columns {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
        gap: var(--spacing-md, 16px);
    }
}

/* ── The embed frame ────────────────────────────────────────────────────────
   The ratio is a custom property so the widget can carry it per node, and the
   frame fills the box absolutely — an iframe without this collapses to its
   default 150px whatever the box around it says. */
.pb-embed {
    position: relative;
    width: 100%;
    /* Padding an author adds must not widen the box past its column: with
       content-box, width:100% plus padding pushed a form out of its section,
       where overflow:hidden cut it off. */
    box-sizing: border-box;
    aspect-ratio: var(--pb-embed-ratio, 16 / 9);
    overflow: hidden;
}

.pb-embed > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The generic box owns no look of its own: everything it is comes from the
   inspector. Only `display` is set, so an empty one is still a drop target
   with a height the author can see in the builder. */
.pb-generic {
    display: block;
}

/* The editor-only stand-in for a generic block with nothing in it yet: the
   same dashed "needs something" look the other widgets use, so an empty block
   is something an author can see and click rather than a zero-height line. */
.pb-generic-empty {
    display: grid;
    place-items: center;
    min-height: 6rem;
    padding: var(--spacing-4, 1rem);
    border: 1px dashed currentColor;
    border-radius: var(--radius-md, 0.5rem);
    opacity: 0.6;
    font-size: 0.875rem;
}