/* ────────────────────────────────────────────────────────────────
   mobile-panel-fix.css  (orchestrator-app-mobile-panel-fix v1.0.0)
   Mobile panel-layout primitive applied AFTER styles.css on every page.
   All 8 rules scoped to @media (max-width: 720px).
   CSS file 145 lines; well under 350L cap.
   ──────────────────────────────────────────────────────────────── */

/* P1: hero-inner collapses to 1-col */
/* P2: hero drops min-height on mobile */
@media (max-width: 720px) {
  .hero-inner {
    grid-template-columns: 1fr !important;
    min-height: 360px !important;
    padding: clamp(24px, 5vw, 40px) !important;
    gap: 24px !important;
  }
  .hero h1 { font-size: clamp(2.8rem, 13vw, 4.4rem) !important; }
  .hero h1 span { display: inline !important; }
  .hero p.hero-sub { font-size: 15px !important; max-width: none !important; }

  /* P6: card-stack no longer absolute-positioned children */
  .card-stack {
    position: relative !important;
    min-height: 0 !important;
    margin-top: 12px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* P5: float-cards stack vertically, NOT overlap */
  .float-card {
    position: relative !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .float-card.c1, .float-card.c2, .float-card.c3 {
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
  }
  .float-card-img { height: 180px !important; }

  /* P3: carousel-grid 1-col on mobile */
  .carousel-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .slide { min-height: 80px !important; padding: 14px !important; }

  /* P4: all multi-col grids → 1-col (NOT .pricing-grid — section-cta.css
     handles pricing breakpoints at 980px/560px) */
  .shop-grid, .match-grid, .jobs-grid,
  .browse-grid, .spotlight, .events-strip, .quote-grid,
  .feature-list, .carousel-shell {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .feature-list { grid-template-columns: 1fr !important; }

  /* P7: section padding clamp smaller on mobile */
  .section { padding: clamp(36px, 6vw, 60px) 0 !important; }
  .browse-shell { padding: clamp(36px, 6vw, 60px) 0 !important; }

  /* P8: panel padding + radius auto-sizing */
  .section-cta { padding: 18px !important; gap: 16px !important; }
  .plan, .quote-card, .carousel-card, .float-card,
  .spotlight-card, .event-card, .job-card, .linkedin-card, .browse-card,
  .admin-card {
    padding: 18px !important;
    border-radius: 18px !important;
  }
  .plan-price { font-size: 26px !important; }
  .plan-features { margin: 14px 0 !important; gap: 8px !important; }

  /* Auto-sizing: images use aspect-ratio for predictable layouts */
  .event-card-img, .spotlight-card-img,
  .float-card-img, .quote-card-avatar, .job-card-avatar,
  .shop-mockup-img { aspect-ratio: 16 / 10 !important; }
  .photo-stage img { min-height: 240px !important; height: 240px !important; }

  /* Match-bubbles: stack rather than absolute */
  .match-bubbles { min-height: 0 !important; display: none !important; }

  /* Hide marquee on mobile to save vertical real-estate */
  .marquee { display: none !important; }
  .announce { font-size: 12px !important; padding: 8px 14px !important; }

  /* Admin dashboard */
  .admin-card, .admin-kpis > *, .admin-tier-grid > * { padding: 14px !important; }

  /* RBH pages (blog/host/resume/templates) */
  .hero-stage { padding: 24px !important; gap: 22px !important; }
  .panel, .vip-box { padding: 18px !important; }
  .vip-form { flex-direction: column !important; }
  .vip-form input[type="file"] {
    padding: 12px !important;
    font-size: 14px !important;
  }

  /* Hero h1 line-height tighter on mobile */
  h1 { line-height: .92 !important; }
  h2 { line-height: 1 !important; }

  /* Reduce default 56px section-cta top margin */
  .section-cta { margin-top: 36px !important; }
}

/* ────────────────────────────────────────────────────────────────
   Desktop default ≥721px — only set rules that were DAMAGED by
   the mobile overrides. The original 4-col pricing grid is in
   section-cta.css (Dmitrii mymitap-15c batch). Do NOT re-assert
   pricing-grid here — it's 4-col by default.
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 721px) {
  .hero-inner { grid-template-columns: 1fr 1fr !important; }
  .hero-inner { min-height: 760px !important; }
  .carousel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Restore 4-col for shops/match/jobs/browse (section-cta only handles pricing) */
  /* NOTE: pricing-grid is intentionally LEFT to section-cta.css 4-col rule. */
}