/* Page-specific styling for the Crypto IRA - Self-Guided 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) — both
   must be enqueued first. Only this page's unique content (the hero's split
   text/photo layout, the supported-assets grid, and the "also available" cross-link
   to the Algorithmic page) lives here; don't add anything here that a sibling family
   page would also want — that belongs in crypto-ira-shared.css instead. All classes
   carry the crypto-ira- prefix; see crypto-ira-shared.css for why. */

/* Hero: this page's Figma mockup (Harshal's source of truth — build to the mockup,
   not the site's existing navy/glow hero pattern, per Jonathan 2026-07-24) is a
   two-column white-background layout: text + CTA on the left, a photo in a
   shadowed rounded card on the right. Overrides the shared .crypto-ira-hero* base
   classes (navy, centered, no photo) that the Algorithmic page uses — safe because
   each family page only enqueues its own tier-3 CSS, so this override never reaches
   Algorithmic's markup. */
.crypto-ira-hero {
  background: var(--color-bg-white);
}

/* Section backgrounds: Jonathan confirmed #F6F6F6, edge-to-edge, for "Why choose a self-directed
   Crypto IRA?" and "Popular Cryptocurrencies..." — set on the <section> itself (not the inner
   .crypto-ira-container) so it spans full viewport width while the container still centers/caps
   the content at 1280px. .crypto-ira-overview is also used by the Algorithmic page via
   crypto-ira-shared.css/its own tier-3 CSS — this override is safe since it only loads on this
   page's own tier-3 stylesheet, same reasoning as the hero override above. */
.crypto-ira-overview,
.crypto-ira-supported-assets {
  background: #F6F6F6;
}

.crypto-ira-hero__overlay {
  padding: 80px 0;
}

/* Explicit max-width, matching .crypto-ira-container's 1280px (var(--container-width)) —
   this can't just be left unset. Yesterday's fix removed this rule's max-width:none
   (which had let the hero stretch edge-to-edge, wider than the rest of the page) on the
   assumption that would let it fall through to .crypto-ira-container's 1280px cap on the
   same element. It doesn't: crypto-ira-shared.css separately defines .crypto-ira-hero__inner
   (no --split suffix) with max-width:800px, for the OTHER family pages' centered navy/glow
   hero — that shared file loads after design-tokens.css, so once self-guided.css stopped
   declaring max-width at all, the shared 800px silently became the winning value instead of
   .crypto-ira-container's 1280px, shrinking the whole hero to a narrow centered column
   (confirmed from Jonathan's 2026-07-29 staging screenshot). Re-declaring it explicitly here
   avoids depending on which max-width rule elsewhere happens to load last. */
.crypto-ira-hero__inner--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  max-width: var(--container-width);
  text-align: left;
}

.crypto-ira-hero__col {
  flex: 1 1 480px;
}

.crypto-ira-hero__eyebrow {
  text-align: left;
  margin-bottom: 12px;
}

/* Fixed 64px/72px per Harshal's QA doc, replacing the shared clamp(48px,6vw,80px)
   formula (which renders at 80px on any normal desktop viewport). */
.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;
  margin: 20px 0 16px;
}

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

.crypto-ira-hero__media-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 64px rgba(0, 47, 95, 0.14);
  overflow: hidden;
}

.crypto-ira-hero__media-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .crypto-ira-hero__overlay { padding-bottom: 64px; }
  /* text-align stays left here — content is left-aligned on mobile per Harshal's QA doc,
     same as desktop, so no center-align override is needed for the stacked layout. */
  .crypto-ira-hero__inner--split { flex-direction: column; gap: 40px; }
  /* .crypto-ira-hero__col's 480px flex-basis is a desktop *width* value (side-by-side
     layout); once stacked, the main axis is vertical, so that same 480px gets applied
     as a minimum *height* instead — reserving far more vertical space than the photo or
     text actually need and leaving a gap between them. Reset to auto so each column
     sizes to its own content height, same fix already used for the shared
     .crypto-ira-right-for-you__col/__image pair below. */
  .crypto-ira-hero__col { flex: 1 1 auto; }
  /* Mobile mockup (`Crypto Only Mobile.png`) stacks the photo above the eyebrow/title/copy —
     the opposite of the desktop side-by-side order. Visual-only reorder via flex `order`,
     set on the column itself (the actual flex item of .crypto-ira-hero__inner--split) —
     `order` on the nested .crypto-ira-hero__media-card had no effect, since only direct flex
     children are reordered; the underlying DOM/desktop order (text col, then media col) is
     untouched either way. */
  .crypto-ira-hero__col--media { order: -1; }
}

/* The site's mobile nav (.mobile-menu-header-container, assets/css/mobile-header-navigation.css)
   is position:fixed and ~80px tall, shown only below 992px — this page calls get_header()
   directly (bespoke landing-page pattern, no .blockWrapper), so nothing else pushes content
   below it. Without this, the reduced padding-top above (64px, then 48px below) puts the hero
   photo partly underneath the fixed nav. 120px = 80px nav height + ~40px comfortable clearance. */
@media (max-width: 992px) {
  .crypto-ira-hero__overlay { padding-top: 120px; }
}

@media (max-width: 640px) {
  .crypto-ira-hero__overlay { padding-bottom: 48px; }
  .crypto-ira-hero__inner--split { gap: 32px; }
  /* Per Harshal's QA doc: title 32px/40px and body copy 14px/20px on mobile,
     down from the desktop 64px/72px and 16px values above. */
  .crypto-ira-hero__title { font-size: 32px; line-height: 40px; }
  .crypto-ira-hero__body { font-size: 14px; line-height: 20px; }
}

/* Accent color: this page's mockup (`Crypto Only Desktop.png`, confirmed via pixel sample —
   #3B7CCB) uses blue for eyebrows, buttons, step numbers, and icon chips instead of the shared
   family's orange (--color-orange). Per Jonathan 2026-07-27: mockup is source of truth here.
   Scoped as page-only overrides of the shared/tier-1 selectors, same rationale as the hero
   override above — this file only loads on this page, so Algorithmic's orange scheme (confirmed
   separately, not part of this review) is untouched. */
.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;
}

/* CTA band button sits on the navy section background (unlike the hero/also-available
   buttons, which sit on white) — Harshal's QA doc specifies a transparent "ghost" hover
   here instead: transparent fill, white text/border. Compounded with .crypto-ira-btn-primary
   for specificity, since that class's own :hover rule above is otherwise equal-specificity
   and would win by load order. Border-width stays 2px (not the doc's literal 1px) to keep
   the border always-present/no-resize-on-hover property from the sitewide button work. */
.crypto-ira-btn-primary.crypto-ira-cta-band__cta:hover {
  background: transparent;
  color: var(--color-bg-white);
  border-color: var(--color-bg-white);
}

/* Mockup's "Learn More" secondary CTA is solid blue-filled at rest (not the shared
   outline style) but still inverts on hover per the 2026-07-28 sitewide hover
   convention, which supersedes the earlier 2026-07-27 "match mockup exactly" call
   for the hover state specifically. */
.crypto-ira-btn-secondary {
  background: #3B7CCB;
  color: var(--color-bg-white);
  border-color: #3B7CCB;
}

.crypto-ira-btn-secondary: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);
}

/* Compatibility & Fit checklist icons: 16px per Harshal's QA doc (shared default is 20px) —
   scoped to this page since the Algorithmic page's own right-for-you checklist uses this
   same shared class and hasn't had its own QA pass yet. */
.crypto-ira-checklist__item img {
  width: 16px;
  height: 16px;
}

/* Supported Assets grid */
.crypto-ira-asset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
}

/* Flat 24px at every breakpoint (not the general 32px/24px desktop/mobile split) —
   Harshal's QA doc calls this out specifically for the Supported Assets grid, likely
   because these are denser tiles (8 cards, 4-up grid) than the feature/step cards.
   Compounded with .crypto-ira-card for guaranteed specificity over that class's own
   padding, rather than relying on this file loading last. */
.crypto-ira-card.crypto-ira-asset-card {
  padding: 24px;
}

.crypto-ira-asset-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crypto-ira-asset-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crypto-ira-asset-card__name-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.crypto-ira-asset-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
}

.crypto-ira-asset-card__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-title);
  margin: 0;
}

.crypto-ira-asset-card__ticker {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-meta);
  margin: 0;
}

.crypto-ira-asset-card__desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-body);
  margin: 0;
}

/* Per Harshal's QA doc: divider lines flank the centered text on either side,
   rather than one line sitting above it. Restructured from a bare <p> with a
   border-top into a flex row of [line, text, line], the two lines each taking
   the remaining width equally via flex:1. */
.crypto-ira-asset-grid__footnote {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-navy);
  text-align: center;
  margin: 32px 0 0;
}

.crypto-ira-asset-grid__footnote-line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* "Also available" cross-link to the Automated Crypto IRA (Algorithmic) page —
   reuses the shared two-column right-for-you row/col/image layout, swapping the
   checklist for a set of feature badges plus a secondary CTA. The Algorithmic page
   won't be live for about a week after this page ships, so "Coming Soon" is accurate
   at launch (per Jonathan 2026-07-24) — not a stale label to be dropped. */
.crypto-ira-also-available__tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-left: 3px solid var(--color-navy);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.0714em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: 16px;
}

.crypto-ira-also-available__badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 32px;
  padding: 0;
}

/* Per Harshal's QA doc, all four pills get the blue-tinted treatment that only the
   "Predefined trading methodology" pill had before — the --highlight modifier class
   is gone from the markup and this rule now covers every pill directly. */
.crypto-ira-also-available__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: #F4F9FF;
  border: 1px solid #C9E4FF;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-title);
}

.crypto-ira-also-available__badge img {
  width: 15px;
  height: 15px;
}

@media (max-width: 1024px) {
  .crypto-ira-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* This section's DOM order is text col, then image (opposite of the "right for you"
     section, which is already image-first) — reorder just this section's image above
     the text on mobile, same technique as the hero fix above. Scoped to
     .crypto-ira-also-available so it doesn't touch the shared .crypto-ira-right-for-you__image
     class used by the "right for you" section on this page or by the Algorithmic page's
     own right-for-you section. */
  .crypto-ira-also-available .crypto-ira-right-for-you__image { order: -1; }
  .crypto-ira-also-available .crypto-ira-right-for-you__row { gap: 40px; }
}

/* Base (desktop/tablet) state for the "Show more" toggle button — 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). */
.crypto-ira-show-more {
  display: none;
}

@media (max-width: 640px) {
  .crypto-ira-asset-grid { grid-template-columns: 1fr; }

  /* Mobile mockup shows the "Why choose" cards as a 2-up wrapping grid, not the shared
     single-column stack (crypto-ira-shared.css forces flex-direction:column at 1024px).
     flex-grow:0 (not 1) keeps the 5th/odd card at half-width instead of stretching to fill
     its row when it has no sibling beside it. */
  .crypto-ira-feature-cards { flex-direction: row; flex-wrap: wrap; }
  .crypto-ira-feature-card { flex: 0 1 calc(50% - 9px); }

  /* "Looking for an Automated Approach?" pills: default flex sizing (content-width, auto)
     wraps unevenly and reads as stacked once the section narrows to mobile. Same 2-up
     treatment and odd-item-safe flex-grow:0 as the feature cards above (gap is 12px here,
     not 18px, so the basis subtracts 6px instead of 9px). */
  .crypto-ira-also-available__badge {
    flex: 0 1 calc(50% - 6px);
    font-size: 12px;
    line-height: 16px;
  }

  /* Mobile mockup shows a vertical connector (short line + down arrow) between stacked
     steps, not the shared display:none. Reuses the same connector element/icon; only
     re-orients it for the column layout. */
  .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);
  }

  /* Mobile mockup truncates the "How it Works" intro to its first paragraph with an
     inline "Show more" toggle; desktop always shows both paragraphs in full (no rule
     needed there — .crypto-ira-how-it-works__more only gets display:none in this query). */
  .crypto-ira-how-it-works__more {
    display: none;
  }

  .crypto-ira-how-it-works__more.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;
  }
}