/* Page-specific styling for the Crypto IRA - Algorithmic page only.
   Relies on design-tokens.css (tokens + universal atoms) and crypto-ira-shared.css
   (hero, trust-badges, feature-cards, steps, right-for-you layout, cta-band, video-card)
   — both must be enqueued first. All classes carry the crypto-ira- prefix.

   2026-08-03 rebuild: this is the first page in the family actually built against
   Harshal's own Figma mockup (node 318:310 desktop / 318:647 mobile) rather than a
   written brief — the page previously shipped with the system's default orange scheme
   since no mockup existed yet. The mockup uses the family's blue accent (#3B7CCB /
   #002F5F) throughout, confirmed by checking every color reference in the pulled Figma
   data (the only orange, #F06D1A, belongs to the sitewide header's "Open Account" nav
   button, not this page's own content) — per Jonathan 2026-08-03, switching to match. */

/* Accent color: same override pattern as crypto-ira-self-guided.css and crypto-ira-hub.css. */
.crypto-ira-eyebrow,
.crypto-ira-step__number {
  color: #3B7CCB;
}

.crypto-ira-step__number-rule {
  background: #3B7CCB;
}

.crypto-ira-btn-primary {
  background: #3B7CCB;
  border-color: #3B7CCB;
}

.crypto-ira-btn-primary:hover {
  background: var(--color-bg-white);
  color: #3B7CCB;
  border-color: #3B7CCB;
}

.crypto-ira-icon-chip {
  background: #F4F9FF;
  border-color: rgba(59, 124, 203, 0.22);
}

/* Video card play button: shared default is orange (Algorithmic's own scheme,
   pre-mockup) — override to this page's new blue accent, scoped to this page's own
   video-card instance only, same technique as Parent Hub's Video Overview section. */
.crypto-ira-algo-trading .crypto-ira-video-card__play {
  background: #3B7CCB;
  box-shadow: 0 4px 24px rgba(59, 124, 203, 0.4);
}

/* Hero: split two-column layout (text+CTA left, photo right) per the mockup — the
   structural classes (.crypto-ira-hero__inner--split, __col, __media-card, and the
   responsive stacking/max-width/mobile-nav-clearance rules) live in crypto-ira-shared.css.
   Only this page's own padding tuning stays here, matching the self-guided pattern. */
.crypto-ira-hero__overlay {
  padding: 80px 0;
}

/* Background/text-color override, added 2026-08-04 per Jonathan flagging the shipped navy
   background as wrong. The 2026-08-03 rebuild moved this hero to the split white-background
   layout structurally but never added this color override, so it was silently still
   inheriting the shared flat hero's navy background + white text underneath. Confirmed via a
   fresh Figma pull (node 318:310/318:647): hero section fill #FFFFFF, title #002F5F, subhead
   #4E5056, both breakpoints — same values and same override pattern as
   crypto-ira-self-guided.css's own hero. */
.crypto-ira-hero {
  background: var(--color-bg-white);
}

.crypto-ira-hero__title {
  color: var(--color-navy);
  text-align: left;
  font-size: 64px;
  line-height: 72px;
}

.crypto-ira-hero__subhead {
  color: var(--color-body);
  text-align: left;
  max-width: none;
}

@media (max-width: 640px) {
  .crypto-ira-hero__title { font-size: 32px; line-height: 40px; }
}

/* Reasserted here (not left to crypto-ira-shared.css alone) since this file loads after
   that stylesheet and would otherwise silently win at every width if it declared its own
   unconditional padding — see docs/roadmap.md's 2026-08-03 "hero-clearance regression"
   lesson from the Parent Hub build. */
@media (max-width: 992px) {
  .crypto-ira-hero__overlay { padding-top: 120px; }
}

@media (max-width: 1024px) {
  .crypto-ira-hero__overlay { padding-bottom: 64px; }
}

@media (max-width: 640px) {
  .crypto-ira-hero__overlay { padding-bottom: 48px; }
}

/* Overview section background, matching the family's established #F6F6F6 edge-to-edge
   convention (Self-Guided's own Overview/Supported Assets sections already do this) —
   confirmed via the Figma pull that this page's Overview section also uses #F6F6F6. */
.crypto-ira-overview {
  background: #F6F6F6;
}

/* How It Works and Bitcoin/Ethereum: added 2026-08-03 (Harshal's revised mockup) —
   the original build shipped both white since the first Figma pull didn't flag a
   background on either; the current pull confirms both use the same #F6F6F6 as
   Overview. Not applying this to Alpha Objective, which has its own already-documented
   deliberate white-over-mockup-gray decision above (unchanged by this revision). */
.crypto-ira-how-it-works,
.crypto-ira-crypto-focus {
  background: #F6F6F6;
}

/* Bitcoin/Ethereum investment-focus section — net new, not in the shared library since
   no other family page uses it yet. */
.crypto-ira-crypto-focus__cards {
  display: flex;
  align-items: stretch;
  gap: 56px;
  margin-top: 56px;
}

.crypto-ira-crypto-focus__card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

/* Matches the mockup's 24px card padding exactly (shared .crypto-ira-card default is
   32px/24px desktop/mobile) — same compounded-selector technique as Self-Guided's
   Supported Assets cards. */
.crypto-ira-card.crypto-ira-crypto-focus__card {
  padding: 24px;
}

.crypto-ira-crypto-focus__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}

/* Brand colors, not the page accent — Bitcoin orange and Ethereum's own blue are fixed
   regardless of this page's blue/orange scheme. */
.crypto-ira-crypto-focus__icon--bitcoin {
  background: #F7931A;
}

.crypto-ira-crypto-focus__icon--ethereum {
  background: #627EEA;
}

.crypto-ira-crypto-focus__icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.crypto-ira-crypto-focus__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--color-title);
  margin: 0 0 16px;
}

.crypto-ira-crypto-focus__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0 0 16px;
}

.crypto-ira-crypto-focus__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-meta);
  margin: 0 0 12px;
}

.crypto-ira-crypto-focus__desc:last-child {
  margin-bottom: 0;
}

/* Callout treatment for the section intro's second paragraph, added per Harshal's
   updated mockup — left accent border, matching this page's blue accent color. */
.crypto-ira-crypto-focus__callout {
  border-left: 2px solid #3B7CCB;
  padding-left: 16px;
}

/* Alpha Objective / "The Animus Difference" — restructured 2026-08-03 from the old
   4-feature-card layout into the mockup's actual 2-column layout (long-form copy left,
   a 4-item icon+label evaluation list right). System reserves #f8f9fb for comparison
   sections and forbids gray section backgrounds otherwise, so this stays plain white
   like its neighbors rather than the gray band the Figma mockup used. */
.crypto-ira-alpha-objective {
  background: var(--color-bg-white);
}

.crypto-ira-alpha-objective__row {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  margin-top: 24px;
}

.crypto-ira-alpha-objective__copy {
  flex: 1 1 auto;
}

/* Left-aligned, matching this section's 2-column layout — the base h2.crypto-ira-section-heading
   rule centers by default, so this must be compounded (not a single-class override) to win
   outright regardless of load order, same specificity fix as .crypto-ira-right-for-you__heading
   in crypto-ira-shared.css. */
.crypto-ira-section-heading.crypto-ira-alpha-objective__heading {
  text-align: left;
  margin: 0;
}

.crypto-ira-alpha-objective__subhead {
  text-align: left;
  margin: 12px 0 0;
}

.crypto-ira-alpha-objective__body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-body);
  text-align: left;
  margin: 0 0 16px;
  max-width: none;
}

.crypto-ira-alpha-objective__body:last-child {
  margin-bottom: 0;
}

.crypto-ira-alpha-objective__list-col {
  flex: 0 0 400px;
}

.crypto-ira-alpha-objective__list-intro {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-title);
  margin: 0 0 16px;
}

.crypto-ira-alpha-objective__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crypto-ira-alpha-objective__list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}

.crypto-ira-alpha-objective__list-item span:last-child {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: var(--color-navy);
}

/* Left-column "also:" checklist, added per Harshal's updated mockup — reuses the same
   icon-chip list-item component as the right-column list, but with full-sentence body
   copy instead of short labels: regular weight (not bold) and top-aligned icon rather
   than vertically centered against multiple lines of text. */
.crypto-ira-alpha-objective__list--body .crypto-ira-alpha-objective__list-item {
  align-items: flex-start;
}

.crypto-ira-alpha-objective__list--body .crypto-ira-alpha-objective__list-item span:last-child {
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-body);
}

/* "Show more" toggle for this page's truncated mobile paragraphs (Overview, How Works,
   Bitcoin/Ethereum focus). One reusable class pair, used by three separate blocks on this
   page rather than the single-instance __more-suffixed classes Self-Guided/Hub used — base
   (desktop/tablet) state hidden by default. Must come before the max-width:640px query below
   so that query's display:inline can win the cascade on mobile (same selector, equal
   specificity — source order decides).
   2026-08-03 revision: AlgoTrading's intro is now one unified sentence (no natural second-
   paragraph split), and Alpha Objective's old hidden paragraphs became a proper icon-bulleted
   list instead of overflow text — both dropped show-more accordingly. */
.crypto-ira-show-more {
  display: none;
}

@media (max-width: 1024px) {
  .crypto-ira-alpha-objective__row { flex-direction: column; gap: 40px; }
  .crypto-ira-alpha-objective__list-col { flex: 1 1 auto; width: 100%; }
  .crypto-ira-crypto-focus__cards { flex-direction: column; gap: 24px; }
}

@media (max-width: 640px) {
  /* Mockup shows the 5 Overview cards as a 2-up wrapping grid (not the shared
     single-column stack) with the odd 5th card staying at half-width rather than
     stretching to fill its row — same fix as Self-Guided's own "Why choose" cards. */
  .crypto-ira-feature-cards { flex-direction: row; flex-wrap: wrap; }
  .crypto-ira-feature-card { flex: 0 1 calc(50% - 9px); }

  /* Mobile mockup shows a vertical connector (short line + down arrow) between stacked
     steps, not the shared display:none — same technique as Self-Guided's own fix. */
  .crypto-ira-step-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    padding: 16px 0;
    gap: 4px;
  }
  .crypto-ira-step-connector::before {
    width: 1px;
    height: 24px;
    flex: none;
  }
  .crypto-ira-step-connector img {
    transform: rotate(90deg);
  }

  .crypto-ira-truncate {
    display: none;
  }

  .crypto-ira-truncate.is-expanded {
    display: block;
  }

  .crypto-ira-show-more {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 700;
    color: #3B7CCB;
    cursor: pointer;
  }
}