/* ==========================================================================
   Sidebar card — shared sidebar/aside container (Sprint 2)
   Used on agency-show, articles, calculator, my-ads, neighborhoods, anywhere
   the layout needs a quiet bordered panel in a sidebar column.

   Canonical home is HERE. Pages may add CONTEXT padding/margin via wrapping,
   not redefine the surface/border treatment.
   ========================================================================== */

.sidebar-card {
    background: var(--warm-white);
    border: 1px solid var(--hairline-strong);
    border-radius: 0;
    padding: clamp(20px, 2.5vw, 28px);
    box-shadow: none;
}

/* Stickier on desktop — used when sidebar should follow scroll */
.sidebar-card--sticky {
    position: sticky;
    top: 96px;
}

@media (max-width: 960px) {
    .sidebar-card--sticky {
        position: static;
        top: auto;
    }
}

/* Filled / dark variant — used for prominent callouts */
.sidebar-card--ink {
    background: var(--navy);
    color: var(--cream);
    border-color: var(--navy);
}

.sidebar-card--ink :where(h2, h3, h4) {
    color: var(--cream);
}

.sidebar-card--ink :where(p, li) {
    color: var(--cream);
    opacity: 0.85;
}

/* Header inside sidebar-card */
.sidebar-card__title {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.3;
    color: inherit;
}

.sidebar-card__eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--taupe);
}

.sidebar-card--ink .sidebar-card__eyebrow {
    color: var(--cream);
    opacity: 0.7;
}

/* Hairline separator inside the card */
.sidebar-card__divider {
    display: block;
    height: 1px;
    margin: 18px 0;
    background: var(--hairline);
}

.sidebar-card--ink .sidebar-card__divider {
    background: rgba(255, 255, 255, 0.15);
}