/* ============================================================
   BRAND SLIDER - RESPONSIVE CSS
   ROOT CAUSE FIX: On mobile, slides must NOT wrap cards —
   instead we increase the number of slides using a separate
   mobile track approach via CSS transform overrides.
   Since we only have 2 radio inputs (b1/b2), the correct fix
   is to make the slide show ALL logos as a flat scrollable
   grid on mobile instead of a flex-slide model.
   ============================================================ */

/* ── ≤1199px (laptops) ── */
@media only screen and (max-width: 1199px) {
  .brand-title { font-size: 26px; }
  .logo-card { min-height: 90px; padding: 14px 10px; }
}

/* ── ≤991px (tablets landscape) ── */
@media only screen and (max-width: 991px) {
  .brand-title { font-size: 22px; }
  .brand-section { padding: 0 0 60px; }
  .logo-card { min-height: 80px; padding: 12px 8px; }
  .logo-card svg { max-width: 110px; }
  .slider-shell .arrow { width: 32px; height: 32px; font-size: 20px; }
}

/* ── ≤768px (tablets portrait + phones) ──
   KEY FIX: disable the CSS-only radio slider on mobile.
   Instead, show ALL logo-cards as a flat responsive grid.
   This is the only robust approach when using pure CSS
   with a fixed number of radio inputs (no JS).
   -------------------------------------------------------- */
@media only screen and (max-width: 768px) {

  .brand-title { font-size: 20px; margin-bottom: 16px; }
  .brand-section { padding: 30px 0 50px; }

  /* 1. Hide the arrow labels and dots — not needed in grid mode */
  .brand-section .slider-shell .arrow,
  .brand-section ~ .dots,
  .brand-section .dots { display: none !important; }

  /* 2. Remove the viewport overflow clipping */
  .brand-section .slider-viewport { overflow: visible; }

  /* 3. Reset the track: make it full width, no slide animation */
  .brand-section .slider-track {
    width: 100% !important;
    transform: none !important;
    transition: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* 4. Each "slide" div becomes a flat container that also wraps */
  .brand-section .slide {
    width: 100% !important;
    display: contents; /* dissolve slide wrapper — cards flow into track */
  }

  /* 5. Each logo card takes 2-per-row on tablet */
  .logo-card {
    flex: 0 0 calc(33.33% - 8px);
    max-width: calc(33.33% - 8px);
    min-height: 80px;
    padding: 12px 8px;
    box-sizing: border-box;
  }

  .logo-card svg { max-width: 100%; height: auto; }

  /* 6. Remove the slider-shell flex gap that would push arrows */
  .brand-section .slider-shell {
    display: block;
  }
}

/* ── ≤575px (phones) ── */
@media only screen and (max-width: 575px) {
  .brand-title { font-size: 18px; margin-bottom: 14px; }
  .brand-section { padding: 24px 0 40px; }

  /* 2 logos per row on phone */
  .logo-card {
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
    min-height: 70px;
    padding: 10px 6px;
  }

  .brand-section .slider-track { gap: 10px; }
}

/* ── ≤380px (small phones) ── */
@media only screen and (max-width: 380px) {
  .brand-title { font-size: 15px; letter-spacing: 0.3px; }
  .brand-section { padding: 20px 0 36px; }

  .logo-card {
    flex: 0 0 calc(50% - 5px);
    max-width: calc(50% - 5px);
    min-height: 60px;
    padding: 8px 4px;
  }

  .logo-card svg { max-width: 90px; height: 36px; }
  .brand-section .slider-track { gap: 8px; }
}