/* ============================================================
   BEINC — Policy Page Content (Section CSS)
   Reusable across the policy template family. Long-form legal /
   policy copy on the page's black2 background.

   Mirrors idp-content's centered reading column (60vw on desktop,
   double pad-x on tablet, single pad-x on phone) but inverts the
   palette for a dark page and adds the richer block styles a
   legal document needs:
     - distinct meta block at the top of the article
     - h2 / h3 / h4 hierarchy
     - paragraphs, ordered + unordered lists
     - anchored links

   Also defines the brands-marquee wrapper (.policy-brands) used
   to host the projects-brands-marquee inside the policy frame.

   Depends on: global.css
   ============================================================ */


.policy-content {
    position: relative;
    background: var(--color-black2);
    color: var(--color-white);
    padding: var(--space-10) 0;
}

/* Centered reading column */
.policy-content__inner {
    width: 100%;
    max-width: 60vw;
    margin: 0 auto;
    padding: 0 var(--pad-x);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
}

/* Cap on ultra-wide so paragraphs stay readable */
@media (min-width: 1600px) {
    .policy-content__inner { max-width: 900px; }
}


/* ── Meta block (Beinc / ABN / URL / Last Updated) ──
   Sits at the top of the article, set apart from the body copy
   by a dashed grid divider underneath. Smaller, lighter type so
   it reads as metadata rather than the start of the legal copy. */
.policy-content__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-7);
    border-bottom: var(--guide-width) var(--guide-style) var(--color-grid);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-normal);
}

.policy-content__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.policy-content__meta-label {
    color: var(--color-greyish);
    flex-shrink: 0;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-family: var(--font-heading);
}

.policy-content__meta-value {
    color: var(--color-white);
}

.policy-content__meta-value a {
    color: inherit;
    border-bottom: 1px solid var(--color-grid);
    transition: border-color var(--duration-fast) var(--ease-primary);
}

.policy-content__meta-value a:hover {
    border-color: var(--color-white);
}


/* ── Heading hierarchy ── */
.policy-content__inner h2 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    color: var(--color-white);
    margin: 0 0 var(--space-5) 0;
}

.policy-content__inner h3 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
    color: var(--color-white);
    margin: var(--space-5) 0 var(--space-4) 0;
}

.policy-content__inner h4 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-white);
    margin: var(--space-4) 0 var(--space-3) 0;
}


/* ── Paragraphs ── */
.policy-content__inner p {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-normal);
    color: var(--color-white);
    margin: 0 0 var(--space-4) 0;
}

.policy-content__inner p:last-child { margin-bottom: 0; }


/* ── Inline links ── */
.policy-content__inner a {
    color: var(--color-white);
    border-bottom: 1px solid var(--color-grid);
    transition: border-color var(--duration-fast) var(--ease-primary);
}

.policy-content__inner a:hover {
    border-color: var(--color-white);
}


/* ── Lists (ul + ol) ── */
.policy-content__inner ul,
.policy-content__inner ol {
    margin: 0 0 var(--space-4) 0;
    padding-left: var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-normal);
    color: var(--color-white);
}

.policy-content__inner ul { list-style: disc; }
.policy-content__inner ol { list-style: decimal; }

.policy-content__inner li {
    margin-bottom: var(--space-2);
}

.policy-content__inner li::marker {
    color: var(--color-greyish);
}


/* ── A "block" is one numbered policy section (h2 + p + list) ── */
.policy-content__block {
    display: block;
}


/* ============================================================
   BORDERED CHUNK
   Reusable boxed container — used standalone (internships) or
   as the right column on careers. Dashed grid border, --radius
   rounded corners, 20px internal padding. Inherits all
   typography (h2, p, ul, a) from .policy-content__inner.
   ============================================================ */
.policy-content__chunk {
    border: var(--guide-width) var(--guide-style) var(--color-grid);
    border-radius: var(--radius);
    padding: 20px;
}
.policy-content__chunk > :first-child { margin-top: 0; }
.policy-content__chunk > :last-child  { margin-bottom: 0; }


/* ============================================================
   CAREERS — 2-column body variant
   Left column: plain text. Right column: bordered chunk.
   Vertical dashed divider sits exactly down the middle.
   align-items: center keeps a shorter column vertically aligned
   with the centre of the taller one — section grows to hug the
   taller column's natural height.

   Horizontal layout (matches the user's pad-x-on-every-edge spec):
     pad-x  →  left content  →  pad-x  →  divider
     divider  →  pad-x  →  right content  →  pad-x

   Edge verticals on .policy-frame already sit at --pad-x from
   the screen edges, so the column-end pad-x lands the content
   visibly inside those rails (no overlap).
   ============================================================ */
.policy-content--careers {
    /* --pad-x in the global tokens resolves against the *containing
       block's* width, which for a grid item is the column track —
       not the viewport. So `padding: 0 var(--pad-x)` on a grid
       column produces ~half the visual gap we want. We need a copy
       of the same value expressed in viewport units (vw) so it
       resolves the same regardless of containing-block size. Kept
       in lock-step with --pad-x (2% / 4%) per breakpoint below. */
    --pad-x-vw: 2vw;
}
@media (max-width: 1023px) {
    .policy-content--careers { --pad-x-vw: 4vw; }
}

.policy-content--careers .policy-content__inner {
    max-width: 100%;
    /* --pad-x-vw of inset on each side. The .policy-frame edge
       verticals sit at --pad-x from the viewport edges; this
       padding starts the inner's content box flush with those
       rails, so the column's own --pad-x-vw then becomes the
       visible breathing room between the edge vline and the
       column text (matching the spec):
         pad-x → edge vline → pad-x → left col → pad-x → middle vline
                                    → pad-x → right col → pad-x → edge vline → pad-x */
    padding: 0 var(--pad-x-vw);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
    position: relative;
}

.policy-content__column {
    padding: 0 var(--pad-x-vw);
}

.policy-content__column-divider {
    position: absolute;
    /* Pull back half the line width so the 1px stroke straddles
       the 50% seam evenly instead of sitting just to the right.
       Done via `left` (not transform) so the `transform` slot
       is free for the JS reveal scaleY animation below. */
    left: calc(50% - 0.5px);
    /* Extend the line PAST the inner's top + bottom into the
       section's --space-10 vertical padding so it spans the full
       section edge-to-edge (top of policy-content to bottom),
       not just the centred content area. */
    top: calc(-1 * var(--space-10));
    bottom: calc(-1 * var(--space-10));
    width: 0;
    border-left: var(--guide-width) var(--guide-style) var(--color-grid);
    pointer-events: none;
    /* Pre-stage for the entry reveal — matches the structural
       edge verticals on .policy-frame: scale up from 0 along Y
       so the line "draws" downward from its top anchor. JS in
       policy-page-hero.js animates scaleY 0 → 1 alongside the
       other structural lines on the same frame. */
    transform: scaleY(0);
    transform-origin: top center;
    will-change: transform;
}


/* ============================================================
   TABLET (≤1023px)
   Careers: same 2-column layout — section just grows in height
   if either column wraps more lines. Cap on the column padding
   already comes from --pad-x doubling at this breakpoint.
   ============================================================ */
/* No changes — desktop rules carry through. */


/* ============================================================
   MOBILE (≤767px)
   Careers collapses to a single stacked column: left text on
   top, bordered chunk underneath, --space-7 gap between them.
   Divider hidden. The full-width column gets --pad-x from the
   viewport edges via the inner wrapper (column children's own
   padding is reset to 0 to avoid double-padding).
   ============================================================ */
@media (max-width: 767px) {
    .policy-content--careers .policy-content__inner {
        grid-template-columns: 1fr;
        gap: var(--space-7);
        padding: 0 var(--pad-x);
    }

    .policy-content--careers .policy-content__column {
        padding: 0;
    }

    .policy-content--careers .policy-content__column-divider {
        display: none;
    }
}


/* ============================================================
   BRANDS MARQUEE WRAPPER
   Hosts the projects-brands-marquee inside the .policy-frame so
   the strip sits between the global padded edges (matches the
   contact page's brands strip behaviour).
   ============================================================ */
.policy-brands {
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    background: var(--color-black2);
}

.policy-brands .projects-brands-marquee {
    width: 100%;
    height: 40vh;
    min-height: 200px;
}


/* ============================================================
   TABLET (≤1023px)
   Mirrors idp-content: column grows to full width, side padding
   doubles so the copy still hugs visibly inside the frame's
   edge dashed lines (which sit at --pad-x).
   ============================================================ */
@media (max-width: 1023px) {
    .policy-content__inner {
        max-width: 100%;
        padding: 0 calc(var(--pad-x) * 2);
    }
}


/* ============================================================
   MOBILE (≤767px)
   Tighter column padding + significantly smaller heading sizes
   so the hierarchy reads naturally on a narrow screen (desktop
   xl/lg/sm sizes look oversized at <=375px).
   ============================================================ */
@media (max-width: 767px) {
    .policy-content__inner {
        max-width: 100%;
        padding: 0 var(--pad-x);
        gap: var(--space-7);
    }

    .policy-content__inner h2 { font-size: 22px; }
    .policy-content__inner h3 { font-size: 18px; }
    .policy-content__inner h4 { font-size: 14px; }
}