/* MrFixer CSS Fixes v2.1 - FINAL */
/* Date: 2025-12-21 */
/* Fixes: Hero images + Brands responsive + flex-wrap */

/* ========================================= */
/* FIX #1: Missing Tailwind utility classes */
/* ========================================= */

/* CRITICAL: flex-wrap utility missing from Tailwind compilation! */
.flex-wrap {
  flex-wrap: wrap !important;
}

.max-w-5xl {
  max-width: 64rem !important;
}

.max-h-96 {
  max-height: 24rem !important;
}

.object-cover {
  object-fit: cover !important;
}

.object-bottom {
  object-position: bottom !important;
}

.object-center {
  object-position: center !important;
}

/* ========================================= */
/* FIX #0: Paslēpj zaļo debug badge         */
/* ========================================= */

/* Paslēpj debug badge - bet NE CTA */
/* Mērķis: Zaļais fixed element ar versijas info */
body > div[style*="position: fixed"][style*="background"],
body > div[style*="position:fixed"][style*="background"]:not(.mobile-sticky-cta) {
  display: none !important;
}

/* Vai alternatīvi - ja badge ir iekš wrapper */
.mobile-sticky-cta ~ div[style*="position: fixed"],
.mobile-sticky-cta + div[style*="position: fixed"] {
  display: none !important;
}

/* Saglabā CTA */
.mobile-sticky-cta {
  display: block !important;
}

@media (min-width: 768px) {
  .mobile-sticky-cta {
    display: none !important;
  }
}

/* ========================================= */
/* FIX #2: Brands section SUPER responsive  */
/* ========================================= */

/* Prevent extra-long brand names from breaking layout */
body section div.flex.flex-wrap.justify-center > span,
section div.flex.flex-wrap.justify-center > span,
div.flex.flex-wrap.justify-center > span {
  max-width: 100% !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* Vispārīgs brands container - maksimāla specificity */
body section div.flex.flex-wrap.justify-center,
section div.flex.flex-wrap.justify-center,
div.flex.flex-wrap.justify-center {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Default (Desktop 1024px+) */
body section div.flex.flex-wrap.justify-center,
section div.flex.flex-wrap.justify-center {
  gap: 0.75rem !important;
}

body section div.flex.flex-wrap.justify-center > span,
section div.flex.flex-wrap.justify-center > span,
div.flex.flex-wrap.justify-center > span {
  display: inline-block !important;
  font-size: 0.875rem !important; /* 14px - samazināts */
  padding: 0.5rem 0.875rem !important; /* 8px 14px */
  line-height: 1.25 !important;
}

/* Mobile FIRST (< 375px) - ļoti mazi ekrāni */
@media (max-width: 374px) {
  body section div.flex.flex-wrap.justify-center,
  section div.flex.flex-wrap.justify-center {
    gap: 0.375rem !important; /* 6px */
  }
  
  body section div.flex.flex-wrap.justify-center > span,
  section div.flex.flex-wrap.justify-center > span {
    font-size: 0.625rem !important; /* 10px */
    padding: 0.25rem 0.5rem !important; /* 4px 8px */
  }
}

/* Mobile (375px - 767px) */
@media (min-width: 375px) and (max-width: 767px) {
  body section div.flex.flex-wrap.justify-center,
  section div.flex.flex-wrap.justify-center {
    gap: 0.5rem !important; /* 8px */
  }
  
  body section div.flex.flex-wrap.justify-center > span,
  section div.flex.flex-wrap.justify-center > span {
    font-size: 0.75rem !important; /* 12px */
    padding: 0.375rem 0.625rem !important; /* 6px 10px */
  }
}

/* Tablet portrait (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  body section div.flex.flex-wrap.justify-center,
  section div.flex.flex-wrap.justify-center {
    gap: 0.625rem !important; /* 10px */
  }
  
  body section div.flex.flex-wrap.justify-center > span,
  section div.flex.flex-wrap.justify-center > span {
    font-size: 0.8125rem !important; /* 13px */
    padding: 0.4375rem 0.75rem !important; /* 7px 12px */
  }
}

/* Desktop (1024px+) - atgriežas pie default */
@media (min-width: 1024px) {
  body section div.flex.flex-wrap.justify-center,
  section div.flex.flex-wrap.justify-center {
    gap: 0.75rem !important; /* 12px */
  }
  
  body section div.flex.flex-wrap.justify-center > span,
  section div.flex.flex-wrap.justify-center > span {
    font-size: 0.875rem !important; /* 14px */
    padding: 0.5rem 0.875rem !important; /* 8px 14px */
  }
}

/* ========================================= */
/* BONUS: Brands section heading responsive */
/* ========================================= */

@media (max-width: 767px) {
  section h3,
  section h2 {
    font-size: 1.25rem !important; /* 20px mobile */
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  section h3,
  section h2 {
    font-size: 1.5rem !important; /* 24px tablet */
  }
}