/**
 * P4PN Fluid System v1 — no resolution locks; cover-scale typography & boxes.
 * Loaded globally after tokens. Uses clamp / cqi / dvh only.
 */

:root {
    --p4pn-fluid-min: 0.72;
    --p4pn-fluid-max: 1;
    --p4pn-space-xs: clamp(0.25rem, 0.6cqi, 0.5rem);
    --p4pn-space-sm: clamp(0.5rem, 1.2cqi, 0.85rem);
    --p4pn-space-md: clamp(0.85rem, 2cqi, 1.25rem);
    --p4pn-space-lg: clamp(1.25rem, 3cqi, 2rem);
    --p4pn-space-xl: clamp(1.75rem, 4cqi, 3rem);
    --p4pn-radius-sm: clamp(8px, 1.2cqi, 12px);
    --p4pn-radius-md: clamp(12px, 1.8cqi, 18px);
    --p4pn-radius-lg: clamp(16px, 2.4cqi, 24px);
    --p4pn-font-xs: clamp(0.62rem, 1.4cqi, 0.72rem);
    --p4pn-font-sm: clamp(0.72rem, 1.6cqi, 0.88rem);
    --p4pn-font-md: clamp(0.88rem, 2cqi, 1.05rem);
    --p4pn-font-lg: clamp(1.05rem, 2.8cqi, 1.35rem);
    --p4pn-font-xl: clamp(1.35rem, 4cqi, 2rem);
    --p4pn-font-2xl: clamp(1.75rem, 5.5cqi, 3rem);
    --p4pn-font-3xl: clamp(2rem, 7cqi, 3.75rem);
    --p4pn-glass-bg: linear-gradient(145deg, rgba(14, 12, 22, 0.88), rgba(8, 8, 14, 0.78));
    --p4pn-glass-border: rgba(255, 255, 255, 0.09);
    --p4pn-glass-shadow: 0 clamp(12px, 2cqi, 24px) clamp(32px, 4cqi, 56px) rgba(0, 0, 0, 0.45);
    --p4pn-cover-scale: 1;
    --p4pn-content-max: 72rem;
    --p4pn-tl-width: clamp(7.25rem, 13cqi, 9.5rem);
    --p4pn-tl-pad: clamp(0.6rem, 1.1cqi, 0.9rem);
    --p4pn-tl-radius: clamp(10px, 1.6cqi, 14px);
    --p4pn-tl-idx: clamp(0.82rem, 1.8cqi, 1.05rem);
    --p4pn-tl-label: clamp(0.52rem, 1.15cqi, 0.62rem);
    --p4pn-tl-hint: clamp(0.48rem, 1cqi, 0.56rem);
    --p4pn-btn-pad-y: clamp(0.5rem, 1.1cqi, 0.72rem);
    --p4pn-btn-pad-x: clamp(0.95rem, 2.2cqi, 1.35rem);
    --p4pn-btn-font: clamp(0.58rem, 1.25cqi, 0.68rem);
    --p4pn-lead-max: 62ch;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Fluid glass box — replaces fixed px card sizes */
.p4pn-box,
body.p4pn-fluid .p4p-3d-box,
body.p4pn-fluid .p4p-btn-glow {
    border-radius: var(--p4pn-radius-md);
}

body.p4pn-fluid .p4p-3d-box {
    border: 1px solid var(--p4pn-glass-border);
    background: var(--p4pn-glass-bg);
    box-shadow: var(--p4pn-glass-shadow);
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.45s, border-color 0.35s;
}

body.p4pn-fluid .p4p-3d-box:hover {
    transform: translateY(clamp(-2px, -0.4cqi, -6px));
}

/* Mesh canvas — edge-to-edge on all rich pages */
body.p4pn-fluid .p4p-page-mesh {
    position: fixed !important;
    inset: 0;
    width: 100% !important;
    height: 100dvh !important;
    pointer-events: none;
    z-index: 0;
}

body.p4pn-fluid .p4p-mesh-readability--lite {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

body.p4pn-fluid .p4p-services-main__inner,
body.p4pn-fluid .p4p-page--about__content,
body.p4pn-fluid .p4pn-page__inner {
    position: relative;
    z-index: 3;
    width: min(100% - var(--p4pn-space-md) * 2, 76rem);
    margin-inline: auto;
    padding-inline: var(--p4pn-space-md);
}

/* Section headings — fluid type */
body.p4pn-fluid .p4p-section-title,
body.p4pn-fluid .p4p-blog-hub__title {
    font-size: var(--p4pn-font-2xl);
}

body.p4pn-fluid .p4p-section-intro,
body.p4pn-fluid .p4p-kicker {
    font-size: var(--p4pn-font-xs);
}

/* Cover-scale blocks (inner pages hero bands) */
[data-p4pn-fluid-block] {
    transform: scale(var(--p4pn-cover-scale, 1));
    transform-origin: center top;
    will-change: transform;
}

/* Kill common resolution locks from legacy CSS */
body.p4pn-fluid .p4p-section__shell,
body.p4pn-fluid .p4p-services-section__shell {
    max-width: min(100% - var(--p4pn-space-md) * 2, 72rem) !important;
}

@media (prefers-reduced-motion: reduce) {
    [data-p4pn-fluid-block] {
        transform: none !important;
    }

    body.p4pn-fluid .p4p-3d-box:hover {
        transform: none;
    }
}