/* ============================================================================
   AACL CANONICAL COMPONENT LAYER
   Loaded LAST on every page (after homepage.css and any per-page <style>), so it
   is the single source of truth for how shared components LOOK. It normalizes the
   divergent per-page classes the 2026-07 audit found (11 card variants, 3
   testimonial looks, 5 eyebrows, boxed vs line-only quotes, blue-stripe boxes,
   mixed primary buttons) down to the system locked in DESIGN.md
   (web_components.component_system, Brenda's 2026-07-07 decision-picker choices).

   Uses !important sparingly to win over inline per-page <style> by intent, not by
   accident. New pages should EXTEND the shared classes and not re-declare these
   inline; this file is the interim consolidation layer while inline blocks are
   thinned. Structural HTML is never touched here — CSS only.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. CARD SYSTEM  — one look: elevated dark gradient, blue hairline, radius-xl.
   Decisions: card-bg=elevated gradient, card-radius=1.5rem, card-border=blue.
   --------------------------------------------------------------------------- */
.benefit-card,
.value-card,
.team-card,
.comparison-card,
.feature-card,
.goal-card,
.step-card,
.story-card,
.article-related-card,
.further-reading-card,
.related-card,
.source-card {
    background: var(--gradient-card) !important;
    border: 1px solid rgba(125, 211, 252, 0.15) !important;
    border-radius: var(--radius-xl) !important;
}

/* One hover signature for every interactive card: lift + blue glow + brighten.
   (The radial-bloom ::before is the "premium glow" roadmap item; the box-shadow
   glow here is the locked baseline and is safe across arbitrary card markup.) */
.benefit-card,
.value-card,
.comparison-card,
.feature-card,
.story-card,
.article-related-card,
.further-reading-card,
.related-card {
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base) !important;
}
.benefit-card:hover,
.value-card:hover,
.comparison-card:hover,
.feature-card:hover,
.story-card:hover,
.article-related-card:hover,
.further-reading-card:hover,
.related-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(125, 211, 252, 0.3) !important;
    box-shadow: 0 20px 40px rgba(125, 211, 252, 0.12) !important;
}
@media (hover: none) {
    .benefit-card:hover, .value-card:hover, .comparison-card:hover, .feature-card:hover,
    .story-card:hover, .article-related-card:hover, .further-reading-card:hover, .related-card:hover {
        transform: none !important;
    }
}

/* ---------------------------------------------------------------------------
   2. TESTIMONIAL  — the halo + glow card is THE social-proof card.
   .testimonial-card already carries it (homepage.css). Bring the bespoke
   .physician-card look into line: same shell + glow, drop the AI-ish serif
   quote-mark. Photo may stay (credibility), no structural change.
   --------------------------------------------------------------------------- */
.physician-card {
    background: rgba(125, 211, 252, 0.06) !important;
    border: 1px solid rgba(148, 163, 184, 0.4) !important;
    border-radius: var(--radius-xl) !important;
}
.physician-card:hover {
    background: rgba(125, 211, 252, 0.1) !important;
    border-color: rgba(125, 211, 252, 0.3) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px rgba(125, 211, 252, 0.12) !important;
}
.physician-card__quotemark { display: none !important; }

/* ---------------------------------------------------------------------------
   3. QUOTES  — inline quotes are LINE-ONLY (no box). The blue stripe lives here.
   Decision: article-quote = line-only. Overrides the boxed variants centrally.
   The one full-bleed featured band (.article-highlight) is intentionally left
   alone (the sanctioned single emphasis moment per page).
   --------------------------------------------------------------------------- */
.article-content blockquote,
.article-pullquote,
.pullquote {
    background: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    border-left: 3px solid var(--electric-blue) !important;
    padding: var(--space-2) 0 var(--space-2) var(--space-6) !important;
}
/* .pull-quote uses a giant decorative quote-mark instead of a stripe — convert
   it to the same line-only treatment. */
.pull-quote {
    border-left: 3px solid var(--electric-blue) !important;
    padding-left: var(--space-6) !important;
    background: none !important;
}
.pull-quote::before { display: none !important; }

/* ---------------------------------------------------------------------------
   4. CALLOUT / ANSWER BOX  — one clean box: elevated gradient, blue hairline,
   radius-xl, NO stripe (Batch 1 removed the stripes; this unifies bg + radius).
   --------------------------------------------------------------------------- */
.aeo-answer,
.callout-box,
.answer-block,
.article-tldr,
.article-answer-snippet,
.article-callout {
    background: var(--gradient-card) !important;
    border: 1px solid rgba(125, 211, 252, 0.2) !important;
    border-left-width: 1px !important;
    border-radius: var(--radius-xl) !important;
}

/* ---------------------------------------------------------------------------
   5. EYEBROW LABEL  — one bordered pill.
   --------------------------------------------------------------------------- */
.apply-label,
.clinicians-hero__eyebrow,
.about-hero__label,
.article-label,
.stories-hero-label {
    background: rgba(125, 211, 252, 0.1) !important;
    border: 1px solid rgba(125, 211, 252, 0.2) !important;
    border-radius: var(--radius-full) !important;
    color: var(--electric-blue) !important;
    text-transform: uppercase !important;
}

/* ---------------------------------------------------------------------------
   6. SECTION HEADLINES  — heavy (900). Gradient accent stays a markup choice
   (.text-gradient spans); this only kills the lighter-weight outlier.
   --------------------------------------------------------------------------- */
.clinicians-section-title {
    font-weight: 900 !important;
}

/* ---------------------------------------------------------------------------
   7. PRIMARY BUTTON  — the main conversion button is the white pill.
   .form-submit was a bespoke blue rounded-rect; bring it to the white pill.
   (Nav chips .btn--nav and small .btn--primary chips are left alone; page-level
   primary CTAs that use .btn--primary are swapped to .btn--cta per page.)
   --------------------------------------------------------------------------- */
.form-submit {
    background: var(--white) !important;
    color: var(--brand-black) !important;
    border-radius: var(--radius-full) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 800 !important;
}
.form-submit:hover {
    background: var(--electric-blue) !important;
    color: var(--brand-black) !important;
}