/* ==================================================================
   OZAVION — Product mockups (render_mockup)
   Frames the bespoke SVG product screens. Loaded via $page_styles
   on pages that show mockups.
   ================================================================== */

.mockup {
    position: relative;
    margin: 0;
    border-radius: var(--radius-xl);
    background: linear-gradient(160deg, rgba(91, 121, 240,0.10), rgba(124, 140, 248,0.04));
    border: 1px solid var(--color-border-strong);
    padding: clamp(0.75rem, 2vw, 1.25rem);
    box-shadow: var(--shadow-lg);
    isolation: isolate;
}
.mockup::before {
    /* soft accent glow behind the screen */
    content: "";
    position: absolute;
    inset: -30% 20% 40% -10%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(91, 121, 240,0.22), transparent);
    pointer-events: none;
}
.mockup__svg,
.mockup__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
/* Real product screenshot swapped in for the SVG mockup. */
.mockup__img { object-fit: cover; }
.mockup__cap {
    margin-top: var(--space-3);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-align: center;
    letter-spacing: 0.01em;
}

/* Subtle hover lift when the mockup is interactive/inside a link context */
.mockup--hover { transition: transform var(--transition), box-shadow var(--transition); }
.mockup--hover:hover { transform: translateY(-4px); }

/* ------------------------------------------------------------------
   ART — framed SVG illustrations (render_art)
   ------------------------------------------------------------------ */
.art {
    position: relative;
    width: 100%;
    margin: 0;
    aspect-ratio: var(--ratio, 16 / 10);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-lg);
    background: var(--color-surface);
}
.art__svg,
.art__img { display: block; width: 100%; height: 100%; }
/* Real photo swapped in for the SVG illustration. */
.art__img { object-fit: cover; }

/* Real brand logo file swapped in for the gradient-icon tile. */
.brand-logo--real { background: none; box-shadow: none; }
.brand-logo__img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }

/* Real client logo file swapped in for the SVG mark. */
img.client-logo--img { height: 26px; width: auto; object-fit: contain; }
.art__cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
    color: var(--color-text-soft);
    text-align: center;
    background: linear-gradient(transparent, rgba(5, 7, 14, 0.7));
}

/* Slight 3D tilt on wide screens for a premium product-shot feel */
@media (min-width: 1024px) {
    .mockup--tilt .mockup__svg {
        transform: perspective(1600px) rotateY(-7deg) rotateX(3deg);
        transform-origin: center left;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mockup--tilt .mockup__svg { transform: none; }
}