/* =========================================================
   Shared page content layer — .pg-*
   For the standing content pages: About, RVIA, Expert
   Upfitter, Financing, Owner's Manual.

   Those pages were the last ones still rendering through the
   legacy sheets (t051622.css, f051022.css, resources.css):
   centered light-on-white slabs, alternating .light-bg /
   .dark-bg bands, uppercase 1.2rem h2/h3 from the global
   reset. This is one dark, left-aligned layer for all of
   them, on the same measure and in the same voice as the
   headers above them.

   Everything restates its type because the sitewide reset in
   m072224.css sets `* { font-weight: 300; color: var(--c3) }`
   and `p { font-size: 1.1rem; line-height: 2rem;
   letter-spacing: .05rem }`, and `h2, h3 { uppercase;
   1.2rem }` — inheriting from a section never survives.
   ========================================================= */

/* ---- Section shell ------------------------------------------------------
   The footer's measure, exactly as the headers and .cx / .bl-shell use it:
   .footer-max caps content at 1600px and footer.css supplies the gutter, so
   every band on the page shares one left edge. */
.pg-section {
    padding-top: clamp(1rem, 3vw, 3rem);
    padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
    padding-left: max(6rem, calc(50vw - 800px));
    padding-right: max(6rem, calc(50vw - 800px));
}

@media only screen and (min-width: 1600px) {
    .pg-section {
        padding-left: max(9rem, calc(50vw - 800px));
        padding-right: max(9rem, calc(50vw - 800px));
    }
}

@media only screen and (max-width: 1200px) {
    .pg-section {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Financing: its lone section sits directly under the split header's red
   rule, and the shared top padding stacked on the band's own bottom padding
   (slimmed in page-head.css) into an oversized gap — keep just a seam here. */
.financing-page .pg-section {
    padding-top: clamp(0.5rem, 1vw, 0.75rem);
}

@media only screen and (max-width: 700px) {
    .pg-section {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* A band that needs to read as a step up from the page without becoming a
   slab: a hairline above and a barely-there lift, not a block of colour.
   Replaces the legacy .light-bg / .dark-bg alternation, which inverted to
   near-white and broke the dark page in half. */
.pg-section--tint {
    border-top: 1px solid var(--theme-border-soft, rgba(255, 255, 255, 0.08));
    background:
        radial-gradient(120% 140% at 15% 0%, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 70%);
}

/* ---- Section head ------------------------------------------------------
   Eyebrow → title → short accent rule, the in-page echo of the page header's
   lockup so a section reads as the same family one level down. */
.pg-head {
    max-width: 46rem;
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}

.pg-head__eyebrow {
    margin: 0 0 0.7rem;
    color: var(--theme-text-muted, #c4c6cc);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pg-head__title {
    position: relative;
    margin: 0;
    padding-bottom: clamp(0.75rem, 1.2vw, 1rem);
    color: var(--theme-text-strong, #ffffff);
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-transform: none;
    text-wrap: balance;
}

/* Same accent recipe as the page headers, at section scale. */
.pg-head__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4.5rem;
    height: 0.19rem;
    border-radius: var(--theme-radius-pill, 999px);
    background: linear-gradient(90deg,
            var(--theme-accent, #aa0000) 0%,
            var(--theme-accent-deep, #8f0000) 58%,
            transparent 100%);
}

/* ---- Body copy --------------------------------------------------------- */
.pg-prose {
    max-width: 68ch;
}

/* The rhythm between blocks. No `margin: 0` on the elements themselves: that
   rule would be (0,1,1) and would silently beat this (0,1,0) one, collapsing
   the gap — m072224.css's `* { margin: 0 }` already zeroes them anyway. */
.pg-prose > * + * {
    margin-top: 1.05rem;
}

.pg-prose p,
.pg-prose li {
    color: var(--theme-text-muted, #c4c6cc);
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
    font-weight: 300;
    line-height: 1.72;
    letter-spacing: 0.01em;
    text-wrap: pretty;
}

.pg-prose strong {
    color: var(--theme-text-strong, #ffffff);
    font-weight: 600;
}

.pg-prose a {
    color: var(--theme-text-strong, #ffffff);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--theme-accent, #aa0000);
    text-decoration-thickness: 2px;
}

.pg-prose a:hover {
    text-decoration-color: var(--theme-text-strong, #ffffff);
}

/* Checked list — the marker is the compare table's green tick, same mask
   technique as .md-row::before, so a benefit list reads as "included". */
.pg-list {
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.7rem;
}

.pg-list li {
    position: relative;
    padding-left: 1.75rem;
}

.pg-list li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 0.9rem;
    height: 0.9rem;
    background: #46c97e;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.6l3.6 3.6L13.5 4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.6l3.6 3.6L13.5 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Card grid ---------------------------------------------------------
   The project's card recipe (.bl-card / .vt-card): theme border and surface
   tokens, 1rem radius, lift on hover. */
.pg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: clamp(1rem, 1.6vw, 1.5rem);
}

.pg-card {
    padding: clamp(1.35rem, 2vw, 1.85rem);
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.09));
    border-radius: var(--theme-radius-md, 1rem);
    background: var(--theme-surface-white-04, rgba(255, 255, 255, 0.04));
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.pg-card:hover {
    transform: translateY(-3px);
    border-color: var(--theme-border-strong, rgba(255, 255, 255, 0.18));
    box-shadow: var(--theme-shadow-card, 0 14px 34px rgba(0, 0, 0, 0.34));
}

.pg-card__title {
    margin: 0 0 0.6rem;
    color: var(--theme-text-strong, #ffffff);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-transform: none;
}

.pg-card__copy {
    margin: 0;
    color: var(--theme-text-muted, #c4c6cc);
    font-size: 0.97rem;
    font-weight: 300;
    line-height: 1.65;
    letter-spacing: 0.01em;
    text-wrap: pretty;
}

/* ---- Alternating media + copy rows -------------------------------------
   Replaces About's .expertise-left / .expertise-right, which faded a photo
   into a hard black edge with an inline background-image per block. */
.pg-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    align-items: center;
    gap: clamp(1.25rem, 3vw, 3rem);
}

.pg-split + .pg-split {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Photo side. Even rows put it second on wide screens, so the page reads as
   an alternating column rather than a stack of identical rows. */
.pg-split__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.09));
    border-radius: var(--theme-radius-md, 1rem);
    background: #0b0b0c center / cover no-repeat;
}

@media only screen and (min-width: 900px) {
    .pg-split:nth-of-type(even) .pg-split__media {
        order: 2;
    }
}

.pg-split__title {
    margin: 0 0 0.7rem;
    color: var(--theme-text-strong, #ffffff);
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: none;
}

/* ---- Media band (the "watch our process" plate) ------------------------ */
.pg-media {
    display: grid;
    place-items: center;
    min-height: clamp(15rem, 34vh, 24rem);
    border-radius: var(--theme-radius-md, 1rem);
    background: #0b0b0c center / cover no-repeat;
    box-shadow: inset 0 0 0 1px var(--theme-border, rgba(255, 255, 255, 0.09));
}

/* Scrim so the CTA holds against any frame of the photo behind it. */
.pg-media::before {
    content: "";
    grid-area: 1 / 1;
    align-self: stretch;
    justify-self: stretch;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(8, 8, 8, 0.35) 0%, rgba(8, 8, 8, 0.72) 100%);
}

.pg-media > * {
    grid-area: 1 / 1;
    z-index: 1;
}

/* The two plate photos. Restated here rather than reused from m072224.css's
   .rvia-process / .eu-process, whose rules also set the old .process band's
   50vh height and its white-wash gradient — the scrim above does that job now. */
.pg-media.rvia-process {
    background-image: url(/assets/images/van-conversion-company.jpg);
}

.pg-media.eu-process {
    background-image: url(/assets/images/camper-van-company.jpg);
}

/* ---- Two-column: content + aside panel ---------------------------------
   For a section whose copy would otherwise leave the right half of the
   measure empty (Financing): the main column keeps the prose measure and
   the aside carries a .pg-panel, centred against the taller column so it
   reads as a companion card rather than a footnote. Collapses to the
   natural stack below 980px. Inside the ~20rem aside, .pg-panel's own
   auto-fit grid stacks its mark above its copy without needing a variant. */
.pg-duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4.5rem);
}

@media only screen and (max-width: 980px) {
    .pg-duo {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Two-lane variant for longer checklists (Financing's eight benefits) —
   halves the column's height so the section doesn't scroll past its aside.
   Exactly two lanes, never more: at three-plus the items wrap mid-figure
   and the list reads as a wall rather than two tidy stacks. */
.pg-list--cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
}

@media only screen and (max-width: 560px) {
    .pg-list--cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Full-measure prose -------------------------------------------------
   For a section whose body should fill the band instead of holding the
   68ch reading column (Expert Upfitter's certification + benefits): the
   width comes back, and the content splits into two lanes so the lines
   stay readable — paragraphs via --duo, checklists via .pg-list--cols,
   which at this width takes a roomier gutter and breathing room between
   its multi-line items. */
.pg-prose--wide {
    max-width: none;
}

.pg-prose--duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.05rem clamp(2rem, 4vw, 4.5rem);
}

/* The grid gap owns the rhythm the lobotomised-owl margin usually sets. */
.pg-prose--duo > * + * {
    margin-top: 0;
}

.pg-prose--wide .pg-list--cols {
    gap: 1.1rem clamp(2rem, 4vw, 4.5rem);
}

/* Paragraph-length items need a full lane well before the 560px checklist
   threshold — under ~860px two lanes of this copy fall below 30ch. */
@media only screen and (max-width: 860px) {
    .pg-prose--duo,
    .pg-prose--wide .pg-list--cols {
        grid-template-columns: minmax(0, 1fr);
    }
    .pg-prose--duo {
        row-gap: 1.05rem;
    }
}

/* ---- Panel: a bordered call-out with its own CTA ----------------------- */
.pg-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.09));
    border-radius: var(--theme-radius-md, 1rem);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 60%);
}

.pg-panel__title {
    margin: 0 0 0.6rem;
    color: var(--theme-text-strong, #ffffff);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: none;
}

.pg-panel__copy {
    margin: 0 0 1.2rem;
    color: var(--theme-text-muted, #c4c6cc);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.65;
}

/* A logo or mark riding beside the copy. */
.pg-panel__mark {
    display: block;
    width: min(11rem, 60%);
    height: auto;
    margin: 0 auto;
}

/* ---- Section-level CTA row --------------------------------------------- */
.pg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: clamp(1.35rem, 2.5vw, 1.9rem);
}