/**
 * Mobile Homepage Refinement
 * Tighter, more app-like spacing for the dashboard homepage on mobile.
 * Uses a 4px spacing system. Mobile-only overrides.
 *
 * IMPORTANT: spacing-fixes.css uses [class*="hero"] and [class*="card"]
 * with !important, which inflates padding on nearly every homepage element.
 * We use body[data-page="dashboard"] prefix for higher specificity.
 */

/* ==========================================================
   HEADER FIX: Prevent logo/icon overlap on narrow screens
   ========================================================== */

@media (max-width: 480px) {
  /* Let logo shrink to fit available space */
  .app-logo {
    max-width: 120px !important;
    height: auto !important;
  }

  /* Reduce right-side icon gaps */
  .unified-header-right {
    gap: 0.35rem !important;
  }

  /* Shrink auth avatar */
  .auth-user-trigger {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.7rem !important;
  }

  /* Compact language selector flag */
  .language-selector-header .lang-flag {
    width: 22px !important;
    height: 16px !important;
  }

  .language-selector-header select {
    font-size: 0 !important;  /* hide text, show flag only */
    padding: 2px 4px !important;
    min-width: 0 !important;
    width: 30px !important;
  }
}

@media (max-width: 375px) {
  .app-logo {
    max-width: 130px !important;
  }

  .unified-header {
    gap: 0.3rem !important;
  }
}

/* ==========================================================
   MOBILE: <= 768px  (primary target)
   ========================================================== */

@media (max-width: 768px) {

  /* -----------------------------------------------------------
     NUCLEAR RESET: Override spacing-fixes.css wildcard selectors
     [class*="hero"] { padding: 2rem 1.5rem !important }
     [class*="card"] { padding: 1.5rem !important }
     These add unwanted padding to every child element.
     ----------------------------------------------------------- */
  body[data-page="dashboard"] .homepage-hero,
  body[data-page="dashboard"] .homepage-hero [class*="hero"],
  body[data-page="dashboard"] .homepage-hero .hero-grid,
  body[data-page="dashboard"] .homepage-hero .hero-left,
  body[data-page="dashboard"] .homepage-hero .hero-headline,
  body[data-page="dashboard"] .homepage-hero .hero-subhead,
  body[data-page="dashboard"] .homepage-hero .hero-form,
  body[data-page="dashboard"] .homepage-hero .hero-form__row,
  body[data-page="dashboard"] .homepage-hero .hero-form__input,
  body[data-page="dashboard"] .homepage-hero .hero-form__button,
  body[data-page="dashboard"] .homepage-hero .hero-right,
  body[data-page="dashboard"] .homepage-hero .hero-right__title,
  body[data-page="dashboard"] .homepage-hero .hero-right__item,
  body[data-page="dashboard"] .homepage-hero .home-hero__form-wrap,
  body[data-page="dashboard"] .homepage-hero .home-hero__subtext,
  body[data-page="dashboard"] .homepage-hero .home-hero__checklist-inner,
  body[data-page="dashboard"] .homepage-hero .home-hero__checklist-chart,
  body[data-page="dashboard"] .homepage-hero .home-hero__dial-wrap {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* --- Page Shell: tighter horizontal padding --- */
  body[data-page="dashboard"] .page-shell {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 4px !important;
  }

  /* --- Homepage Hero wrapper --- */
  body[data-page="dashboard"] .homepage-hero {
    padding: 4px 0 8px !important;
  }

  /* --- Hero Collage: shrink ~25% on mobile --- */
  body[data-page="dashboard"] .home-hero__collage {
    width: 72% !important;
    max-width: 360px !important;
    margin: 4px auto 0 !important;
  }

  /* --- Hero grid + left column: zero gaps --- */
  body[data-page="dashboard"] .homepage-hero .hero-grid {
    gap: 0 !important;
    margin: 1rem 0 !important;
  }

  body[data-page="dashboard"] .hero-left {
    gap: 0 !important;
  }

  /* --- Headline: tighter leading --- */
  body[data-page="dashboard"] .hero-headline {
    font-size: 1.65rem !important;
    line-height: 1.15 !important;
    margin: 0 0 4px 0 !important;
  }

  /* --- Subhead: compact --- */
  body[data-page="dashboard"] .hero-subhead {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    margin: 0 0 6px 0 !important;
  }

  /* --- Hide the duplicate subhead below the form --- */
  body[data-page="dashboard"] .home-hero__subtext {
    display: none !important;
  }

  /* --- Form wrapper: no extra margin --- */
  body[data-page="dashboard"] .home-hero__form-wrap {
    margin: 0 !important;
  }

  /* --- Scan form: compact card feel --- */
  body[data-page="dashboard"] .hero-form {
    margin: 0 0 2px 0 !important;
  }

  body[data-page="dashboard"] .hero-form__row {
    flex-direction: column !important;
    padding: 4px !important;
    border-radius: 10px !important;
    gap: 4px !important;
  }

  body[data-page="dashboard"] .hero-form__input {
    height: 44px !important;
    font-size: 1rem !important;
    padding: 0 14px !important;
    min-width: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }

  body[data-page="dashboard"] .hero-form__button {
    height: 44px !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
    padding: 0 20px !important;
    margin: 2px 0 0 0 !important;
    width: 100% !important;
  }

  /* --- Usage Pill: attached to scan form --- */
  body[data-page="dashboard"] .home-hero__form-wrap .page-shell-usage-pill {
    margin: 4px 0 0 !important;
  }

  /* --- Benefits card (hero-right): compact --- */
  body[data-page="dashboard"] .home-hero .hero-right {
    margin: 1rem 0 !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
  }

  body[data-page="dashboard"] .home-hero__checklist-inner {
    gap: 6px !important;
    min-height: auto !important;
  }

  body[data-page="dashboard"] .home-hero__checklist-chart {
    max-height: 100px !important;
    margin: 0 auto !important;
  }

  body[data-page="dashboard"] .home-hero .hero-right__list {
    gap: 4px !important;
    margin: 0 !important;
  }

  body[data-page="dashboard"] .home-hero .hero-right__item {
    font-size: 14px !important;
    gap: 6px !important;
    padding: 1px 0 !important;
  }

  /* --- Example Chips: integrated, tighter --- */
  body[data-page="dashboard"] .home-hero > .example-chips {
    margin: 6px auto 4px !important;
    gap: 6px !important;
    padding: 0 !important;
  }

  body[data-page="dashboard"] .home-hero > .example-chips .example-chip {
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  /* --- What's Included link --- */
  body[data-page="dashboard"] .home-hero > .whats-included-link {
    margin: 4px auto 0 !important;
    padding: 0 !important;
    font-size: 0.875rem !important;
  }

  /* --- Feature Strip (What's Included section) --- */
  body[data-page="dashboard"] .feature-strip {
    padding: 16px 16px !important;
    margin: 0 !important;
  }

  body[data-page="dashboard"] .feature-strip__title {
    margin: 0 0 10px 0 !important;
    font-size: 0.8125rem !important;
  }

  body[data-page="dashboard"] .feature-strip__grid {
    gap: 10px !important;
  }

  body[data-page="dashboard"] .feature-strip__item {
    gap: 2px !important;
    padding: 0 !important;
  }

  body[data-page="dashboard"] .feature-strip__item-title {
    font-size: 0.875rem !important;
    margin: 0 !important;
  }

  body[data-page="dashboard"] .feature-strip__item-desc {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  /* --- Pro Upsell Card: compact & premium --- */
  body[data-page="dashboard"] .pro-upsell {
    padding: 0 16px 12px !important;
    margin: 0 !important;
  }

  body[data-page="dashboard"] .pro-upsell__card {
    padding: 12px 16px !important;
    border-radius: 10px !important;
    gap: 8px !important;
  }

  body[data-page="dashboard"] .pro-upsell__title {
    font-size: 0.9375rem !important;
    margin: 0 !important;
  }

  body[data-page="dashboard"] .pro-upsell__content {
    gap: 8px !important;
  }

  body[data-page="dashboard"] .pro-upsell__bullets {
    gap: 6px !important;
  }

  body[data-page="dashboard"] .pro-upsell__bullet {
    font-size: 0.8125rem !important;
    gap: 4px !important;
    padding: 0 !important;
  }

  body[data-page="dashboard"] .pro-upsell__cta {
    height: 40px !important;
    padding: 0 16px !important;
    font-size: 0.875rem !important;
    width: 100%;
  }

  /* --- Homepage Footer Bar: quieter --- */
  body[data-page="dashboard"] .homepage-footer-bar {
    padding: 10px 16px !important;
    margin: 0 !important;
  }

  body[data-page="dashboard"] .homepage-footer-bar__text {
    font-size: 0.8125rem !important;
  }

  /* --- Dial wrap: tighter --- */
  body[data-page="dashboard"] .home-hero__dial-wrap {
    margin: 0 !important;
  }

  body[data-page="dashboard"] .home-hero__dial {
    margin: 2px auto 0 !important;
  }
}


/* ==========================================================
   EXTRA SMALL: <= 380px  (iPhone SE, narrow Android)
   ========================================================== */

@media (max-width: 380px) {

  body[data-page="dashboard"] .hero-headline {
    font-size: 1.45rem !important;
    line-height: 1.15 !important;
  }

  body[data-page="dashboard"] .hero-subhead {
    font-size: 0.875rem !important;
  }

  body[data-page="dashboard"] .home-hero__collage {
    width: 68% !important;
    max-width: 280px !important;
  }

  body[data-page="dashboard"] .home-hero__checklist-chart {
    max-height: 90px !important;
  }

  body[data-page="dashboard"] .home-hero .hero-right__item {
    font-size: 13px !important;
  }

  body[data-page="dashboard"] .hero-form__input {
    height: 42px !important;
    font-size: 0.9375rem !important;
  }

  body[data-page="dashboard"] .hero-form__button {
    height: 42px !important;
    font-size: 0.9375rem !important;
  }
}