/* ============================================================
   responsiveness.css — shared by index.html + catalogue.html
   Loaded LAST so it overrides.
   ============================================================ */

/* ---- HERO: grow with content so buttons never get cut off ---- */
.hero-section { height: auto; min-height: clamp(560px, 82vh, 880px); padding: 104px 0 60px; }
.hero-container { padding-top: 0; padding-bottom: 0; }
.hero-buttons { flex-wrap: wrap; }

/* short laptops (button-gets-cut case) */
@media (min-width: 992px) and (max-height: 760px) {
  .hero-section { min-height: 0; padding: 96px 0 48px; }
  .hero-heading { font-size: clamp(2.2rem, 3.4vw, 3.2rem); margin-bottom: 1.1rem; }
  .hero-paragraph { margin-bottom: 1.4rem; }
  .hero-eyebrow { margin-bottom: 1rem; }
}

/* ---- NAV: homepage collapses to hamburger below 1200px now.
   Keep the pill light + the dropdown links readable. ---- */
@media (max-width: 1199px) {
  .nav-glass-pill { background: rgba(255, 255, 255, 0.97) !important; border-radius: 22px; }
  .custom-glass-nav .navbar-brand.text-white { color: #1a1f28 !important; }
  .custom-glass-nav .navbar-toggler i { color: #1a1f28 !important; }
  .navbar-collapse { margin-top: 12px; }
  .navbar-nav .nav-link { color: #1a1f28 !important; margin: 2px 0; padding: 10px 6px; border-radius: 10px; }
  .navbar-nav .nav-link::after { display: none; }
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link.active { background: rgba(255, 140, 0, 0.1); color: #1a1f28 !important; }
}

/* ---- TABLET & DOWN (<=991px) ---- */
@media (max-width: 991px) {
  .custom-glass-nav { padding-top: 12px; }
  .hero-section { min-height: 74vh; padding: 110px 0 52px; background-position: 68% center; }
  .hero-paragraph { max-width: 100%; font-size: 1.05rem; }
  .hero-buttons .btn-custom { flex: 1 1 auto; text-align: center; }

  /* About section: stop the absolute-image overlap mess */
  .about-section-light { padding: 80px 0; }
  .about-images-wrapper { min-height: 0; margin-bottom: 34px; text-align: center; }
  .main-img { width: 100%; height: auto; max-height: 420px; object-fit: cover; }
  .secondary-img { display: none; }
  .floating-badge-stacked { top: 16px; left: auto; right: 16px; padding: 16px 22px; }
}

/* ---- PHONES (<=576px) ---- */
@media (max-width: 576px) {
  .hero-section { padding: 100px 0 44px; }
  .hero-heading { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .hero-eyebrow { font-size: .75rem; letter-spacing: 1.5px; }
  .hero-paragraph { font-size: 1rem; margin-bottom: 1.8rem; }
  .hero-buttons { gap: 12px; }
  .hero-buttons .btn-custom { width: 100%; }

  .brands-section, .suppliers-section { padding-left: 16px; padding-right: 16px; }
  .brand-logo { font-size: 1.05rem; }
  .brand-logo i { font-size: 1.3rem; }
  .marquee-track { gap: 48px; }
  .header-line { max-width: 60px; }

  .about-section-light { padding: 60px 0; }
  .floating-badge-stacked { top: 12px; right: 12px; padding: 12px 16px; }
  .floating-badge-stacked .display-5 { font-size: 1.8rem; }

  /* catalogue banner scales down cleanly */
  .cat-banner h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .cat-wrap { padding-left: 14px; padding-right: 14px; }
}