/* TrendHive LMS mobile hotfix: compact phone layout, no hero overlap, no long blank hero space. */
@media screen and (max-width: 767px) {
  html, body { max-width: 100%; overflow-x: hidden !important; }
  .container { width: min(100% - 28px, var(--max)); }

  .site-header { position: sticky !important; top: 0; z-index: 1000; }
  .navbar { min-height: 62px !important; padding: 8px 0 !important; }
  .brand { gap: 10px !important; }
  .brand-mark { width: 42px !important; height: 42px !important; border-radius: 16px !important; font-size: 18px !important; }
  .brand strong { font-size: 20px !important; line-height: 1.1 !important; }
  .brand small { display: none !important; }
  .menu-toggle { width: 42px !important; height: 42px !important; border-radius: 16px !important; display: block !important; }
  .nav-links { top: 66px !important; left: 14px !important; right: 14px !important; }

  .hero { min-height: 0 !important; padding: 22px 0 20px !important; overflow: hidden !important; }
  .hero-grid { display: block !important; padding: 20px 0 0 !important; }
  .hero-copy { margin: 0 0 16px !important; }
  .eyebrow { font-size: 10px !important; letter-spacing: .8px !important; }
  h1 { font-size: 32px !important; line-height: 1.04 !important; letter-spacing: -1px !important; margin: 8px 0 10px !important; }
  .hero-copy p { font-size: 14.5px !important; line-height: 1.55 !important; margin: 0 0 14px !important; }
  .hero-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 9px !important; margin: 0 !important; }
  .hero-actions .btn { width: auto !important; min-height: 42px !important; padding: 11px 10px !important; justify-content: center !important; font-size: 13px !important; }
  .hero-points { display: none !important; }

  .hero-showcase { position: relative !important; display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; min-height: 0 !important; height: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  .hero-showcase .dashboard-float,
  .hero-showcase .mini-count { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden !important; }

  .hero-showcase .hero-photo { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; display: block !important; width: 100% !important; height: 220px !important; min-height: 0 !important; border-radius: 22px !important; transform: none !important; box-shadow: 0 14px 32px rgba(63,13,25,.14) !important; }
  .hero-showcase .hero-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; }
  .live-badge { top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; padding: 7px 10px !important; font-size: 10px !important; }

  .hero-showcase .book-card { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; display: grid !important; grid-template-columns: 66px 1fr !important; gap: 10px !important; padding: 10px !important; border-radius: 18px !important; transform: none !important; box-shadow: 0 12px 26px rgba(63,13,25,.10) !important; z-index: 1 !important; }
  .book-card img { width: 66px !important; height: 56px !important; border-radius: 12px !important; }
  .book-card strong { font-size: 13.5px !important; }
  .book-card small { font-size: 11px !important; line-height: 1.35 !important; margin-top: 3px !important; }

  .stats-strip { padding: 14px 0 8px !important; }
  .stats-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 9px !important; }
  .stat-card { border-radius: 18px !important; padding: 15px 12px !important; min-height: 86px !important; }
  .stat-card strong { font-size: 26px !important; line-height: 1 !important; }
  .stat-card span { font-size: 11.5px !important; margin-top: 7px !important; }
  .stat-card:nth-child(n+5) { display: none !important; }

  .section-pad { padding: 30px 0 !important; }
  .section-heading { margin-bottom: 16px !important; }
  .section-heading h2,
  .preview-copy h2,
  .solution-copy h2,
  .cta-copy h2 { font-size: 25px !important; line-height: 1.12 !important; margin: 8px 0 9px !important; }
  .section-heading p,
  .preview-copy p,
  .solution-copy p,
  .cta-copy p { font-size: 13.8px !important; line-height: 1.55 !important; }

  .problem-grid { grid-template-columns: 1fr !important; gap: 9px !important; }
  .problem-card { padding: 14px 13px !important; border-radius: 17px !important; }
  .problem-card h3 { font-size: 15px !important; margin: 6px 0 4px !important; }
  .problem-card p { font-size: 12.3px !important; line-height: 1.45 !important; }

  .solution-section,
  .preview-section,
  .teacher-section,
  .student-section,
  .faculty-section,
  .customization-section { display: none !important; }

  .mobile-portal-tabs { display: block !important; padding: 28px 0 !important; background: #fff8ec !important; }
  .mobile-tab-card { border-radius: 22px !important; }
  .mobile-tab-head { padding: 16px 16px 8px !important; }
  .mobile-tab-head h2 { font-size: 24px !important; line-height: 1.12 !important; margin: 7px 0 7px !important; }
  .mobile-tab-head p { display: none !important; }
  .portal-tabs { gap: 7px !important; padding: 10px 10px 0 !important; }
  .portal-tab { padding: 9px 5px !important; font-size: 12px !important; }
  .portal-panel { padding: 14px !important; }
  .portal-panel h3 { font-size: 18px !important; margin-bottom: 8px !important; }
  .portal-panel ul { gap: 7px !important; }
  .portal-panel li { padding: 9px 10px !important; font-size: 12.5px !important; }
  .portal-mini-preview { padding: 12px !important; gap: 8px !important; }
  .portal-mini-preview span { padding: 9px 10px !important; font-size: 11.5px !important; }

  .courses-section { padding-top: 30px !important; }
  .courses-section .section-heading p { display: none !important; }
  .course-grid { display: flex !important; grid-template-columns: none !important; gap: 12px !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; margin-inline: -14px !important; padding: 0 14px 10px !important; }
  .course-card { min-width: 84% !important; scroll-snap-align: start !important; border-radius: 20px !important; }
  .course-media { height: 142px !important; }
  .course-body { padding: 15px !important; }
  .course-body h3 { font-size: 18px !important; margin: 6px 0 !important; }
  .course-body p { font-size: 12.8px !important; line-height: 1.45 !important; }
  .course-footer { display: block !important; font-size: 12px !important; }
  .course-footer a { display: inline-block !important; margin-top: 8px !important; }

  .timeline { grid-template-columns: 1fr !important; gap: 9px !important; }
  .timeline-step { padding: 14px !important; border-radius: 18px !important; }
  .timeline-step h3 { font-size: 16px !important; margin: 8px 0 4px !important; }
  .timeline-step p { font-size: 12.8px !important; line-height: 1.45 !important; margin: 0 !important; }

  .report-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .certificate-card { padding: 20px 14px !important; border-radius: 20px !important; }
  .certificate-card h3 { font-size: 25px !important; }
  .certificate-card p { font-size: 12.8px !important; }
  .report-mini-grid { grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
  .report-mini-grid div { padding: 12px !important; border-radius: 15px !important; }
  .report-mini-grid div:last-child { grid-column: 1 / -1 !important; }

  .testimonials-section { padding-top: 20px !important; }
  .testimonial-grid { grid-template-columns: 1fr !important; }
  .testimonial-card:nth-child(n+2) { display: none !important; }
  .testimonial-card { padding: 16px !important; border-radius: 18px !important; }
  .testimonial-card p { font-size: 13.5px !important; line-height: 1.55 !important; }

  .cta-section { padding: 32px 0 !important; }
  .cta-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .cta-contact { grid-template-columns: 1fr !important; gap: 8px !important; }
  .lead-form { padding: 16px !important; border-radius: 20px !important; }
  .lead-form input,
  .lead-form textarea { padding: 11px 12px !important; font-size: 13px !important; }
  .lead-form textarea { min-height: 86px !important; }

  .faq-section { padding-top: 30px !important; }
  .faq-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .faq-question { padding: 14px 15px !important; font-size: 13.5px !important; }
  .faq-answer { font-size: 12.8px !important; line-height: 1.55 !important; }

  .site-footer { padding: 28px 0 !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .footer-grid p { font-size: 13px !important; }
}

@media screen and (max-width: 380px) {
  .hero-actions { grid-template-columns: 1fr !important; }
  h1 { font-size: 30px !important; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .stat-card strong { font-size: 23px !important; }
  .course-card { min-width: 88% !important; }
  .report-mini-grid { grid-template-columns: 1fr !important; }
  .report-mini-grid div:last-child { grid-column: auto !important; }
}