/* =============================================================
   Legal pages — Privacy Policy, Cookie Policy, Terms & Legal
   Body classes: .page-privacy-policy / .page-cookie-policy / .page-legal-terms
   Shared scope: .page-legal (applied to all three)
   ============================================================= */

/* ---- compact hero (no mandatory background media) ---- */
.page-legal .legal-hero {
    min-height: clamp(340px, 52vh, 620px);
}
.page-legal .legal-hero .st-hero-inner {
    padding-top: clamp(110px, 16vh, 180px);
}
.page-legal .legal-hero .st-hero-title {
    font-size: clamp(30px, 5.5vw, 72px);
}

/* ---- section wrapper ---- */
.page-legal .legal-block {
    position: relative;
    padding: clamp(52px, 8vw, 96px) var(--st-pad, clamp(16px, 3.5vw, 40px));
    max-width: 68rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 48px);
    border-top: 1px solid rgba(255, 255, 255, .055);
    transition: background .35s;
}
.page-legal .legal-block:hover {
    background: rgba(255, 255, 255, .016);
}

/* Thin left accent bar — draws in as block enters viewport */
.page-legal .legal-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 0;
    background: var(--brand-red, #E01B18);
    transition: height .7s var(--st-ease-out, cubic-bezier(.19, 1, .22, 1));
    pointer-events: none;
}
.page-legal .legal-block.is-in::before {
    height: 100%;
}

/* Two columns when media present; single column otherwise */
@media (min-width: 768px) {
    .page-legal .legal-block:has(.legal-block-media) {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
    .page-legal .legal-block.legal-block-img-first .legal-block-inner { order: 2; }
    .page-legal .legal-block.legal-block-img-first .legal-block-media  { order: 1; }
}

/* Text column without media: narrower for readability */
.page-legal .legal-block:not(:has(.legal-block-media)) .legal-block-inner {
    max-width: 52rem;
}

/* ---- inner text ---- */
.page-legal .legal-block-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.8vw, 20px);
}

/* ---- kicker ---- */
.page-legal .st-kicker {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(242, 240, 236, .38);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.page-legal .st-kicker::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--brand-red, #E01B18);
    box-shadow: 0 0 8px rgba(224, 27, 24, .5);
    flex-shrink: 0;
    transition: box-shadow .4s;
}
.page-legal .legal-block:hover .st-kicker::before {
    box-shadow: 0 0 14px rgba(224, 27, 24, .75);
}

/* ---- title ---- */
.page-legal .legal-block-title {
    margin: 0;
    font-family: var(--disp);
    font-variation-settings: "wdth" 112;
    font-weight: 900;
    font-size: clamp(22px, 3.2vw, 42px);
    letter-spacing: -.03em;
    line-height: .95;
    text-transform: uppercase;
    color: var(--ink-f, #F2F0EC);
    padding-bottom: 16px;
    position: relative;
}
.page-legal .legal-block-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 20px;
    background: var(--brand-red, #E01B18);
    transition: width .6s var(--st-ease-out, cubic-bezier(.19, 1, .22, 1));
}
.page-legal .legal-block.is-in .legal-block-title::after {
    width: 40px;
}

/* ---- lead ---- */
.page-legal .legal-block-lead {
    margin: 0;
    font-family: var(--read);
    font-size: clamp(15px, 1.45vw, 18px);
    line-height: 1.65;
    color: rgba(242, 240, 236, .72);
}

/* ---- body paragraphs ---- */
.page-legal .legal-block-body {
    margin: 0;
    font-family: var(--read);
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 1.72;
    color: rgba(242, 240, 236, .6);
}
.page-legal .legal-block-body p { margin: 0; }
.page-legal .legal-block-body p + p { margin-top: 14px; }

/* ---- bullet list — red left accent, hover slide ---- */
.page-legal .legal-list {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .06);
    font-family: var(--read);
    font-size: clamp(13px, 1.25vw, 15px);
    line-height: 1.65;
    color: rgba(242, 240, 236, .58);
}
.page-legal .legal-list li {
    padding: 10px 6px 10px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    border-left: 2px solid rgba(224, 27, 24, .28);
    margin-left: 0;
    transition: border-left-color .3s, color .3s, padding-left .3s, background .3s;
}
.page-legal .legal-list li:hover {
    border-left-color: var(--brand-red, #E01B18);
    color: rgba(242, 240, 236, .88);
    padding-left: 26px;
    background: rgba(224, 27, 24, .04);
}

/* ---- definition-list pairs (Key|Value) ---- */
.page-legal .legal-pairs {
    margin: 4px 0 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.page-legal .legal-pair {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: 12px;
    padding: clamp(10px, 1.2vw, 14px) 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    transition: background .25s, border-bottom-color .25s;
    cursor: default;
}
.page-legal .legal-pair:hover {
    background: rgba(255, 255, 255, .03);
    border-bottom-color: rgba(224, 27, 24, .2);
}
.page-legal .legal-pair-term {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(242, 240, 236, .32);
    padding-top: 3px;
    transition: color .25s;
}
.page-legal .legal-pair:hover .legal-pair-term {
    color: rgba(255,255,255, .7);
}
.page-legal .legal-pair-desc {
    margin: 0;
    font-family: var(--read);
    font-size: 14px;
    line-height: 1.58;
    color: rgba(242, 240, 236, .7);
}

@media (max-width: 600px) {
    .page-legal .legal-pair {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

/* ---- optional media column ---- */
.page-legal .legal-block-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.page-legal .legal-block-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.72) contrast(1.08) brightness(.82);
    transform: scale(1.04);
    transition: transform .8s var(--st-ease-out, cubic-bezier(.19, 1, .22, 1)),
                filter .8s;
}
.page-legal .legal-block:hover .legal-block-media img {
    transform: scale(1.09);
    filter: saturate(.82) contrast(1.1) brightness(.9);
}

/* ---- CTA link (inherits .st-cta from studio-pages.css) ---- */
.page-legal .st-cta {
    margin-top: 20px;
}

/* ---- section counter (auto-numbers in the left accent) ---- */
.page-legal { counter-reset: legal-section; }
.page-legal .legal-block { counter-increment: legal-section; }