/**
 * Strateg.tech 2026 - Responsive (any device)
 * Aligns with Bootstrap 5 breakpoints; mobile-first.
 * BS5: xs <576, sm ≥576, md ≥768, lg ≥992, xl ≥1200, xxl ≥1400
 */

:root {
  --strateg-bp-sm: 576px;
  --strateg-bp-md: 768px;
  --strateg-bp-lg: 992px;
  --strateg-bp-xl: 1200px;
  --strateg-bp-xxl: 1400px;
  --strateg-touch-min: 44px; /* min touch target (a11y) */
}

/* Prevent horizontal scroll on small screens */
html {
  overflow-x: hidden;
}
body {
  min-width: 280px;
}

/* Touch-friendly interactive elements */
@media (hover: none) or (pointer: coarse) {
  .logo-item,
  .axis-items a,
  .btn,
  a.btn {
    min-height: var(--strateg-touch-min);
    min-width: var(--strateg-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
  }
  .axis-items a {
    display: flex;
  }
  .logo-item {
    padding: 1rem;
  }
}

/* Extra small (portrait phones): stack and compact */
@media (max-width: 575px) {
  .header .container,
  .main-content .container,
  .footer .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .main-content .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  .main-content .row [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  #footer .row > [class*="col-"] {
    margin-bottom: 1.5rem;
  }
}

/* Small (landscape phones, ≥576px): already handled by base + other CSS */
@media (min-width: 576px) {
  .logo-gallery {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

/* Medium (tablets, ≥768px) */
@media (min-width: 768px) {
  .two-axis-nav {
    grid-template-columns: repeat(2, 1fr);
  }
  .logo-gallery {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* Large+ breakpoints: container max-width from Bootstrap 5 base */