/* Mobile-only styles for Homepage (phones only, not tablets)
   Scope: screens up to 767px wide
*/

@media (max-width: 767px) {
  /* Hero: tighten spacing for small screens */
  .hero { width: 94%; max-width: 640px; margin: 12px auto; padding: 14px 12px; min-height: 180px; }
  .hero h1 { font-size: 2.2rem; margin-bottom: 0.6rem; }
  .hero p { font-size: 1.15rem; margin-bottom: 1.2rem; }
  .hero-ctas { gap: 10px; }
  .hero-btn { padding: 0.7rem 1.6rem; font-size: 1.0rem; border-radius: 26px; }

  /* Home grid stacking on phones */
  .home-grid { width: 94% !important; max-width: 720px !important; margin: 12px auto 20px auto !important; display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .home-grid .box { grid-column: 1 / -1 !important; min-height: 140px !important; }
  .home-grid .box1 { min-height: 220px !important; }
  /* Geen decoratieve afbeelding meer op box2 voor mobiel */
  .brand-info { padding: 14px !important; }
  .product-teaser .teaser-inner { padding: 14px !important; }
  .product-teaser h3 { font-size: 1.02rem !important; }
  .product-teaser p { font-size: .95rem !important; }
}

/* Extra mobile tweaks for background images and readability */
@media (max-width: 767px) {
  /* Slightly reduce blur strength on mobile (perf) */
  .home-grid .box:not(.box1) { -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important; }

  /* Dim background images a bit more for text contrast */
  .card-bg img { opacity: 0.42 !important; }

  /* Tighten brand info content and buttons */
  .brand-info h2 { font-size: 1.18rem !important; }
  .brand-info p { font-size: 0.98rem !important; }
  .brand-info .info-actions { gap: 6px !important; }
  .brand-info .info-actions a { padding: 9px 12px !important; font-size: 0.94rem !important; border-radius: 9px !important; }

  /* Strengthen overlays when a custom background is used */
  .product-teaser.has-bg::before { background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.68)) !important; }
  .brand-info.hifuture-info::before { background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.45)) !important; }
  .brand-info.earfun-info.has-bg::before { background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.45)) !important; }
}