/* ============================================================
   home-preview.css — Earnings Preview block on the home page.
   Uses ew-theme.css tokens. Dark-mode aware via those tokens.
   ============================================================ */

.hep {
    max-width: 1300px;
    /* clears the Whisper Report section above */
    margin: 3.5rem auto 0;
    padding: 0 1rem;
}

.hep-head {
    margin-bottom: .35rem;
}

.hep-title {
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 800;
    color: var(--text);
    margin: 0;
}

/* flex row so the chip, the company name and the sentence after it share one
   centre line rather than sitting on the text baseline */
.hep-when {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .1rem .4rem;
    font-size: .92rem;
    color: var(--text-muted);
    margin: 0 0 1rem;
}

.hep-when-text {
    color: var(--text-muted);
}

.hep-when .calweek-name {
    color: var(--text);
}

/* a plain container, not a link — the body text keeps normal text colour */
.hep-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.4rem;
    color: var(--text);
}

.hep-headline {
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--text);
    margin: 0 0 .7rem;
}

.hep-body {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.65;
}

/* company logo, copy wraps around it. Transparent — the light/dark variants from
   /logo/{ticker} are already built for their background. */
.hep-logo {
    float: left;
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin: .15rem 1.1rem .6rem 0;
}

/* light is the default; dark hidden until a dark trigger fires */
.hep-logo-dark {
    display: none;
}

[data-theme="dark"] .hep-logo-light {
    display: none;
}

[data-theme="dark"] .hep-logo-dark {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hep-logo-light {
        display: none;
    }

    :root:not([data-theme="light"]) .hep-logo-dark {
        display: block;
    }
}

/* the float is taller than two paragraphs on narrow columns; keep the
   "Continue reading" link from riding up beside it */
.hep-card::after {
    content: "";
    display: block;
    clear: both;
}

.hep-body p {
    margin: 0 0 .9rem;
}

    .hep-body p:last-child {
        margin-bottom: 0;
    }

.hep-more {
    display: inline-block;
    margin-top: 1.1rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ew-color);
    text-decoration: none;
}

    .hep-more:hover {
        text-decoration: underline;
    }

/* chart sits under the card. .ew-chart-wrap already supplies the shell and the
   watermark positioning from ew-charts.css, so this only adds spacing. */
/* inside the card: no frame of its own, just separation from the copy above it.
   The canvas background comes from data-bg-var="--surface" on the chart div, so it
   matches the card in both themes instead of showing --chart-bg through it. */
.hep-chart {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    background: transparent;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

@media (max-width: 700px) {
    .hep-card {
        padding: 1rem 1.1rem;
    }

    .hep-body {
        font-size: .95rem;
    }

    .hep-logo {
        width: 64px;
        height: 64px;
        margin: .1rem .8rem .5rem 0;
    }

    .hep-chart [data-ew-chart] {
        height: 260px !important;
    }
}