/* ==========================================================================
   Trade Application — page-trade-enquiry.php
   Enqueued only on that slug (inc/trade-pages.php). The Trade Overview is
   blocks and brings its own styles.

   Reference register (Design.md §8.3): 48px band padding, Body 16, Display MD
   headings. Bands are separated by tone and space only — no cards, borders
   or shadows at page level (§8.2). The split is §8.1's 7 / 1 / 4.
   ========================================================================== */

.trade__band {
    padding-block: var(--sp-12);
}

/* 7 / 1 / 4 — main content in 1–7, the aside in 9–12. With nothing in the
   aside (an image not uploaded yet) the main column keeps its seven columns
   rather than stretching to twelve. */
.trade__split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-6);
    row-gap: var(--sp-8);
    align-items: start;
}
.trade__main  { grid-column: 1 / span 7; }
.trade__aside { grid-column: 9 / span 4; }

/* ── Section opener (§8.4) ─────────────────────────────────────────────── */

.trade__eyebrow {
    display: flex;
    align-items: center;
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-11);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    line-height: var(--lh-snug);
    color: var(--ink-muted);
}
.trade__eyebrow::before {
    content: '';
    flex: 0 0 auto;
    width: var(--sp-2);
    height: var(--sp-2);
    margin-right: var(--sp-2);
    border-radius: var(--r-0);
    background-color: var(--accent);
}

.trade__heading {
    margin: 0;
    font-size: clamp(var(--fs-28), 3.4vw, var(--fs-48));
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
}

.trade__lead {
    max-width: var(--container-blurb);
    margin-top: var(--sp-4);
    color: var(--ink-muted);
}

/* ── Application page ──────────────────────────────────────────────────── */

.trade__intro {
    margin-bottom: var(--sp-8);
}

/* The form block centres itself at 720px for use on an ordinary page; here
   the grid column is its width. */
.trade--apply .core-trade-application-form {
    max-width: none;
    margin: 0;
}

.trade__panel {
    padding: var(--sp-6);
    background: var(--paper-soft);
    font-size: var(--fs-14);
}
.trade__panel-title {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-normal);
}
.trade__panel-title:not(:first-child) { margin-top: var(--sp-6); }
.trade__panel-steps {
    margin: 0;
    padding-left: var(--sp-5);
    list-style: decimal;
    color: var(--ink-soft);
}
.trade__panel-steps li + li { margin-top: var(--sp-1); }
.trade__panel-text {
    margin: 0;
    line-height: var(--lh-body);
}
.trade__panel a { color: var(--ink); }
.trade__panel-muted { color: var(--ink-muted); }

/* ── Narrow screens — everything stacks ────────────────────────────────── */

@media (max-width: 899px) {
    .trade__main,
    .trade__aside { grid-column: 1 / -1; }
}