/* molecule-viewer.css - the PDP section AROUND <peptide-viewer>.
 *
 * The viewer's own chrome (stage card, chips, tooltip, caption) lives in its
 * shadow root and is not reachable from here; this file styles only the section
 * wrapper - heading, lede, region list, and the reserved stage box.
 *
 * THE AUTHOR DECLARES THE WIDTH, the CSS does not guess. The block is dropped
 * into Elementor layouts whose column width is not derivable from the viewport (a
 * one-third column on a 1440px desktop is 420px), so `[ppcro_molecule_viewer]`
 * takes `layout="narrow"` (default) or `layout="wide"`, and wide adds `.ppmv--wide`.
 *
 * This started as a container query on `.ppmv`, which read better but was wrong:
 * `container-type: inline-size` applies containment, and inside an Elementor
 * shortcode widget that inflated the widget wrapper from 561px to 1013px on
 * mobile - ~450px of empty column under the block, present before any JS ran.
 * Whoever revisits this: measure the WIDGET wrapper, not just the section.
 *
 * The stage height is declared twice on purpose: on the placeholder (so the
 * server render already occupies the final space and the model cannot shift the
 * page when it appears) and as the --pv-height custom property the shadow CSS
 * reads. Both come from the same variable, so there is one number to change.
 */

.ppmv {
    /* Brand tokens the shadow CSS falls back on; forwarded so a theme change
       reaches inside the component too. */
    --pp-font: var(--wd-text-font, Inter, Arial, Helvetica, sans-serif);
    --pp-border: #e8e3ef;
    --pp-text: #302b3f;
    --pp-muted: #716b7f;
    --pp-subtle: #9b94a7;
    --pp-violet-50: #f4f1fa;
    --pp-violet-300: #c3b2dd;
    --pp-violet-500: #5f4b8b;
    --pp-violet-600: #4b3b75;

    /* Narrow base: a portrait stage suits a vertical chain, and 620px in a
       one-third column would be a very tall slot. A bare narrow stage carries no
       copy above or below it, so it can sit level with the neighbouring columns
       without towering over them. Widened further down for layout="wide". */
    --pv-height: 380px;

    clear: both;
    /* 40 -> 48 at the bottom: the Enlarge button hangs 32px below the card. */
    margin: 34px 0 48px;
}

/* Single column is the base: copy, then the stage (DOM order). */
.ppmv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.ppmv-head {
    max-width: 62ch;
}

/* The region list ships with [hidden]; a theme rule that sets `display` on a
   div would otherwise win over the UA stylesheet and show an empty list. */
.ppmv [hidden] {
    display: none;
}

.ppmv-eyebrow {
    display: block;
    margin: 0 0 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pp-violet-600);
}

.ppmv-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: #4a3f73;
}

.ppmv-lede {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pp-muted);
}

/* Region list: the same regions as the chips on the stage, as selectable text.
   Filled by the viewer from its own geometry; ships hidden.
   NOT shown in a narrow block: it exists to use the room the two-column layout
   has spare, and next to the chips it is a repeat. In a three-up Elementor row it
   was also what made this column overshoot its neighbours by ~200px. */
.ppmv-regions-wrap {
    display: none;
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--pp-border);
}

.ppmv-regions-title {
    margin: 0 0 12px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pp-subtle);
}

.ppmv-regions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px 18px;
    margin: 0;
    font-size: 13.5px;
}

.ppmv-regions dt {
    margin: 0;
    color: var(--pp-text);
}

.ppmv-regions dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--pp-subtle);
    white-space: nowrap;
}

/* Reserved box. `peptide-viewer` is an unknown element until the module lands,
   so it needs display:block itself; the min-height keeps the space either way. */
.ppmv-stage,
.ppmv peptide-viewer {
    display: block;
    min-height: var(--pv-height);
}

/* Skeleton while the module is on the wire: the same precision-cut card outline
   as the real stage, so the swap is a fill, not a jump. */
.ppmv-stage {
    position: relative;
    background: #fbfaf7;
    border: 1px solid var(--pp-border);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.ppmv[data-theme="dark"] .ppmv-stage {
    background: radial-gradient(closest-side at 50% 46%, #514575 0%, #2a2348 44%, #161225 100%);
    border-color: transparent;
}

/* Once the viewer is up it draws its own card AND a caption row below it, so the
   placeholder must stop painting - otherwise the dark stage bleeds behind that
   caption. Keyed off the attribute the viewer sets on the section when it is
   ready, not off `:has(peptide-viewer:defined)`: that selector did not survive
   Autoptimize's CSS minifier on the live stack. */
.ppmv[data-ppmv-ready] .ppmv-stage {
    background: none;
    border-color: transparent;
    clip-path: none;
    min-height: 0;
}

/* A bare narrow stage is trimmed a little further on a desktop: at ~420px wide the
   card only has to keep pace with the columns beside it, and a phone needs the
   extra height more than a 1440px screen does. */
@media (min-width: 768px) {
    .ppmv:not(.ppmv--wide) {
        --pv-height: 360px;
    }
}

/* ---------------------------------------------------------------------- *
 *  Enlarge button + lightbox. Desktop only: below 1024px the card already
 *  spans the screen, so an overlay would be the same picture with a backdrop.
 * ---------------------------------------------------------------------- */

.ppmv-expand {
    /* Revealed at >=1024px once the viewer reports ready. `!important` because
       the theme sets `display: flex` on buttons inside the product body with
       enough specificity to win - measured on prod, where the button showed up
       on a 390px phone despite this rule. */
    display: none;
    /* UNDER the card, not on it: the stage chrome (mode chips bottom-left, focus
       chips top-right, eyebrow top-left) already claims every corner, and a
       button laid over them collides on the narrow card the moment a molecule
       has one chip too many. */
    position: absolute;
    right: 0;
    bottom: -32px;
    z-index: 2;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    /* It sits on the PAGE now, not on the dark stage, so it takes the page's
       palette whatever theme the card is set to. */
    color: var(--pp-violet-600);
    background: var(--pp-violet-50);
    border: 1.5px solid transparent;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    cursor: pointer;
    transition: background .16s cubic-bezier(.2, .8, .2, 1), border-color .16s cubic-bezier(.2, .8, .2, 1);
}

.ppmv-expand:hover { background: #ebe4f8; border-color: var(--pp-violet-300); }
.ppmv-expand:focus-visible { outline: 2px solid #c3b6e6; outline-offset: 2px; }

/* The overlay lives on <body>, outside any transformed Elementor ancestor -
   `position: fixed` inside one of those would be positioned against IT, not the
   viewport, and the panel would land somewhere down the page. */
.ppmv-lightbox {
    position: fixed;
    inset: 0;
    /* Above the page furniture that outranks a plain five-digit z-index: our own
       geo overlay sits at 2147482000 and the support chat bubble paints over
       anything lower (it overlapped the mode chips at 100000). A modal the
       visitor just asked for belongs on top of both. */
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3vh 3vw;
    background: rgba(16, 14, 26, .82);
    backdrop-filter: blur(3px);
    animation: ppmv-fade .18s cubic-bezier(.2, .8, .2, 1);
}

@keyframes ppmv-fade { from { opacity: 0 } to { opacity: 1 } }

.ppmv-lightbox-panel {
    position: relative;
    width: min(1080px, 92vw);
    /* The stage reads this; the viewer's own ResizeObserver re-fits the model. */
    --pv-height: min(82vh, 780px);
}

.ppmv-lightbox peptide-viewer { display: block; }

.ppmv-lightbox-close {
    position: absolute;
    top: -38px;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #ded7ef;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .28);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    cursor: pointer;
}

.ppmv-lightbox-close:hover { background: rgba(255, 255, 255, .12); }
.ppmv-lightbox-close:focus-visible { outline: 2px solid #c3b6e6; outline-offset: 2px; }

/* While a card is on loan to the lightbox its own slot must not collapse, or the
   page jumps and the three-up row reflows behind the overlay. */
.ppmv-stage.is-lent { min-height: var(--pv-height); }
.ppmv .ppmv-stage.is-lent .ppmv-expand { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .ppmv-lightbox { animation: none; }
}

@media (min-width: 1024px) {
    .ppmv[data-ppmv-ready] .ppmv-expand { display: inline-flex !important; }
}

/* The theme forces `position: relative` on buttons inside the product body
   (measured on prod: the computed value came back relative while right/bottom
   sat inert), which dropped both buttons into the flow at the left edge. Scoped
   selector + !important on the ONE property that is being overridden. */
.ppmv .ppmv-expand { position: absolute !important; display: none !important; }
.ppmv-lightbox .ppmv-lightbox-close { position: absolute !important; }

/* Desktop, narrow placement: the card at 90% of the room it is given (Драго,
   2026-08-04). Both axes, so it scales rather than squashes - the height comes
   from the custom property the shadow CSS reads, the width from the stage box,
   and `margin-inline: auto` keeps it centred in its column instead of drifting
   left. Only from 1024px up: below that the three-up row has already stacked and
   the card is the full width of the page, where 90% would just read as a margin. */
@media (min-width: 1024px) {
    .ppmv:not(.ppmv--wide) {
        --pv-height: 324px;   /* 360 x 0.9 */
    }

    .ppmv:not(.ppmv--wide) .ppmv-stage {
        width: 90%;
        margin-inline: auto;
    }
}

/* layout="wide": two columns, but only where a desktop actually has the room.
   The stage takes the larger share and comes out roughly square, which is what an
   elongated chain needs - the viewer's auto-fit sizes the model by the SHORTER
   field of view, so a panoramic card would strand a vertical needle in dead
   space. The copy fills what would otherwise be empty. */
@media (min-width: 1024px) {
    .ppmv--wide {
        --pv-height: 620px;
    }

    /* `:not([hidden])` so the attribute the viewer manages still wins: the list
       ships hidden and is only revealed once it has rows. */
    .ppmv--wide .ppmv-regions-wrap:not([hidden]) {
        display: block;
    }

    .ppmv--wide .ppmv-grid {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        gap: 34px;
        align-items: center;
    }

    .ppmv--wide .ppmv-stage {
        grid-column: 1;
        grid-row: 1;
        clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
    }

    .ppmv--wide[data-ppmv-ready] .ppmv-stage {
        clip-path: none;
    }

    .ppmv--wide .ppmv-head {
        grid-column: 2;
        grid-row: 1;
        max-width: 46ch;
    }

    .ppmv--wide .ppmv-title {
        font-size: 24px;
    }

    .ppmv--wide .ppmv-lede {
        font-size: 14.5px;
    }
}

/* Viewport-level typography and rhythm - genuinely about the device, not about
   how much room the block was given. */
@media (max-width: 767px) {
    .ppmv {
        margin: 26px 0 32px;
    }

    .ppmv-title {
        font-size: 20px;
    }

    .ppmv-lede {
        font-size: 13.5px;
    }
}