/* trader.css — Trader Services overview (EW2027).
   Sibling of investor.css; uses the shared ew-theme.css tokens and the same
   card system. The signature hero mark is the combined four-circle Trader
   logo (sentiment / quant / technical / EPS). */

.trd-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 20px 72px;
}

/* ---- hero ---- */
.trd-hero {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 28px 0 36px;
    border-bottom: 1px solid var(--border, #d6dce6);
    margin-bottom: 40px;
}

.trd-hero-mark {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
}

    .trd-hero-mark .trd-hero-mark-svg {
        width: 100%;
        height: 100%;
        display: block;
        isolation: isolate;
    }

        /* hero mark glyphs read as white against the four brand circles
       (fixed, not --surface, which flips to near-black in dark mode) */
        .trd-hero-mark .trd-hero-mark-svg .ciricon {
            fill: #ffffff;
        }

.trd-hero-copy {
    min-width: 0;
}

.trd-eyebrow {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ew-gold, #ddb785);
}

.trd-title {
    margin: 0 0 12px;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    line-height: 1.08;
    font-weight: 800;
    color: var(--text, #050505);
}

.trd-lede {
    margin: 0;
    max-width: 62ch;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--text-muted, #5b6472);
}

/* ---- offering grid ---- */
.trd-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 680px) {
    .trd-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .trd-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.trd-card {
    display: flex;
    flex-direction: column;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d6dce6);
    border-radius: 14px;
    padding: 26px 24px;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.trd-card-link {
    cursor: pointer;
    /* the cards are <a> elements now, so the whole card is one link target and
       keyboard users can reach it. (They were <article onclick> before.) */
    text-decoration: none;
    color: inherit;
}

    .trd-card-link:focus-visible {
        outline: 2px solid var(--ew-gold, #ddb785);
        outline-offset: 3px;
    }

    .trd-card-link:hover {
        border-color: var(--ew-gold, #ddb785);
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
    }

/* Plays spans the full grid width and lays its icon beside the copy */
.trd-card-wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 26px;
}

    .trd-card-wide .trd-card-wide-body {
        min-width: 0;
    }

@media (max-width: 679px) {
    .trd-card-wide {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
}

.trd-card-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 16px;
    color: var(--ew-gold, #ddb785);
    flex: 0 0 auto;
}

.trd-card-wide .trd-card-icon {
    margin-bottom: 0;
}

.trd-card-icon-lg {
    width: 92px;
    height: 92px;
}

.trd-card-icon .trd-icon {
    width: 100%;
    height: 100%;
    display: block;
}

.trd-card-icon .trd-icon-combo {
    isolation: isolate;
}

/* Single-color line icons inherit the gold via currentColor, but NOT the
       combined Plays mark, which carries its own four brand colors. */
.trd-card-icon .trd-icon:not(.trd-icon-combo) path,
.trd-card-icon .trd-icon:not(.trd-icon-combo) rect,
.trd-card-icon .trd-icon:not(.trd-icon-combo) polygon,
.trd-card-icon .trd-icon:not(.trd-icon-combo) circle {
    fill: currentColor;
}

/* Shapes that set fill="none" mean it — the blanket rule above would turn the
       Trends rings into solid discs. The attribute selector outranks it. */
.trd-card-icon .trd-icon:not(.trd-icon-combo) [fill="none"],
.trd-card-icon .trd-icon:not(.trd-icon-combo) [fill="none"] path,
.trd-card-icon .trd-icon:not(.trd-icon-combo) [fill="none"] circle,
.trd-card-icon .trd-icon:not(.trd-icon-combo) [fill="none"] rect,
.trd-card-icon .trd-icon:not(.trd-icon-combo) [fill="none"] polygon {
    fill: none;
}

/* The combined Plays mark keeps its four brand quadrant colors
       (--ew-darkred/blue/darkgreen/gold, baked as inline fills); its inner
       glyphs read as white in both themes. */
.trd-card-icon .trd-icon-combo .ciricon {
    fill: #ffffff;
}

.trd-card-title {
    margin: 0 0 10px;
    font-size: 1.16rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text, #050505);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

    .trd-card-title sup {
        font-size: 0.6em;
    }

.trd-card-text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-muted, #5b6472);
}

/* ---- combined-mark blending ----
   The four brand circles overlap translucently. On light surfaces they
   MULTIPLY (overlaps deepen toward the EW2023 look); on the dark theme
   multiply would go murky, so the circles SCREEN instead (overlaps lighten),
   matching how the EW2023 menu mark behaved on its dark bar. The blend lives
   here (not inline) so it can flip with the theme. */
.trd-hero-mark-svg .ewfill-darkred,
.trd-hero-mark-svg .ewfill-blue,
.trd-hero-mark-svg .ewfill-darkgreen,
.trd-hero-mark-svg .ewfill-gold,
.trd-icon-combo .ewfill-darkred,
.trd-icon-combo .ewfill-blue,
.trd-icon-combo .ewfill-darkgreen,
.trd-icon-combo .ewfill-gold {
    mix-blend-mode: multiply;
}

:root[data-theme="dark"] .trd-hero-mark-svg .ewfill-darkred,
:root[data-theme="dark"] .trd-hero-mark-svg .ewfill-blue,
:root[data-theme="dark"] .trd-hero-mark-svg .ewfill-darkgreen,
:root[data-theme="dark"] .trd-hero-mark-svg .ewfill-gold,
:root[data-theme="dark"] .trd-icon-combo .ewfill-darkred,
:root[data-theme="dark"] .trd-icon-combo .ewfill-blue,
:root[data-theme="dark"] .trd-icon-combo .ewfill-darkgreen,
:root[data-theme="dark"] .trd-icon-combo .ewfill-gold {
    mix-blend-mode: screen;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .trd-hero-mark-svg .ewfill-darkred,
    :root:not([data-theme="light"]) .trd-hero-mark-svg .ewfill-blue,
    :root:not([data-theme="light"]) .trd-hero-mark-svg .ewfill-darkgreen,
    :root:not([data-theme="light"]) .trd-hero-mark-svg .ewfill-gold,
    :root:not([data-theme="light"]) .trd-icon-combo .ewfill-darkred,
    :root:not([data-theme="light"]) .trd-icon-combo .ewfill-blue,
    :root:not([data-theme="light"]) .trd-icon-combo .ewfill-darkgreen,
    :root:not([data-theme="light"]) .trd-icon-combo .ewfill-gold {
        mix-blend-mode: screen;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trd-card-link:hover {
        transform: none;
    }
}