/* ============================================================================
 * desktop.css — Desktop / web adaptive layer (≥1024px)
 * ----------------------------------------------------------------------------
 * ADDITIVE ONLY. Every rule lives inside a min-width media query, so the mobile
 * (<768px) and tablet (<1024px) experiences are untouched — same components,
 * colors, typography, icons, animations, logic.
 *
 * SAFETY MODEL: width expansion is scoped to the HOME screen only, via
 * :has(#screenWIT.active). When any other (data-dense) screen is active the
 * selector stops matching and the app snaps back to its exact 480px mobile
 * column, so those screens render identically to mobile and cannot break.
 * The starfield canvas redraws to its element width on resize/init, so widening
 * it (with !important to beat the inline width) fills the wider frame cleanly.
 * ==========================================================================*/

@media (min-width: 1024px) {

  /* ── Widen the app frame, HOME screen only. The fixed starfield spans the
        full viewport (content stays capped) so there is never an edge seam;
        html/body already set overflow:hidden, so 100vw cannot add scroll. ── */
  body:has(#screenWIT.active) { max-width: 1080px !important; }
  body:has(#screenWIT.active) #globalStarCanvas { width: 100vw !important; }

  /* ── Full-width desktop header ── */
  /* Top padding trimmed with the base header; 12px re-added the gap the tighter
     .hdr-title line-height removes, since this rule overrides it on desktop. */
  body:has(#screenWIT.active) .hdr { padding: 4px 32px 6px !important; }
  body:has(#screenWIT.active) .hdr-title { font-size: clamp(22px, 2.4vw, 32px) !important; }

  /* ── Home hero: spacious, responsively-scaled heading ── */
  #screenWIT .wit-hero {
    padding: 48px 24px 22px !important;
    max-width: 820px;
    margin: 0 auto;
  }
  #screenWIT .wit-hero #witHeroTitle {
    font-size: clamp(2rem, 3.2vw, 3rem) !important;
    line-height: 1.25 !important;
  }
  #screenWIT .wit-hero #witHeroSub {
    font-size: clamp(14px, 1.3vw, 17px) !important;
    line-height: 1.75 !important;
  }

  /* ── Primary CTA + Find-Nakshatra bar: contained & centered ── */
  #screenWIT .wit-cta,
  #screenWIT .wit-findbar {
    max-width: 520px;
    margin: 0 auto;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* ── Feature cards → fixed 2-column grid (desktop, matches tablet) ── */
  #screenWIT .wit-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding: 20px 28px 10px !important;
    max-width: 820px;
    margin: 0 auto;
    align-items: stretch;
  }
  #screenWIT .wit-feature-card { padding: 18px 20px !important; }

  /* ── Full-width desktop nav ── */
  body:has(#screenWIT.active) .bottom-nav { padding: 12px 24px 14px !important; gap: 8px; }

  /* ── Desktop footer spacing ── */
  .copyright-bar { padding: 16px 24px !important; }
}

/* ── Large desktop: use more of the canvas, cap for readability ── */
@media (min-width: 1440px) {
  body:has(#screenWIT.active) { max-width: 1200px !important; }
  /* Keep the 2-column card grid readable — a modest bump, not full width. */
  #screenWIT .wit-cards { max-width: 900px; }
}