/* Global site wrapper: use a responsive width but cap at a sane maximum so layouts
   don't become too stretched on very large monitors. Width is percentage-based
   for small/medium screens, while `max-width` prevents excessive stretching. */
.site-wrapper {
  width: 85%;       /* relative width for responsiveness */
  max-width: 1280px;/* never wider than this on large monitors */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .site-wrapper {
    width: 100%;    /* use full viewport width on small screens */
    max-width: none;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Partners carousel styles */
.partners-scroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.partners-scroll::-webkit-scrollbar { display: none; height: 0; }
/* IE/Edge */
.partners-scroll { -ms-overflow-style: none; }

/* Ensure the carousel is a single non-wrapping row and items are aligned */
.partners-scroll {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 !important; /* we use explicit margins on items for edge-to-edge spacing */
}

/* Allow cards to size to their image width (so edge-to-edge spacing can be uniform)
   JS previously forced min-widths to guarantee overflow; removed so images determine width. */
.partners-scroll > .partner-card { min-width: 0 !important; }

/* Make desktop items larger so overflow/scrolling occurs on wide monitors */
@media (min-width: 1280px) {
  .partners-scroll > .partner-card { min-width: 420px !important; }
}

.partners-btn {
  width: 40px;
  height: 40px;
  background: rgba(31, 41, 55, 0.75); /* gray-800 with opacity */
  border-radius: 9999px;
  padding: 6px;
  display: flex;
}
.partners-btn:disabled { opacity: 0.35; }

@media (max-width: 768px) {
  /* On small screens show arrows inline above the scroll area */
  .partners-btn { display: none !important; }
}

/* Partner card sizing to ensure visible, larger clickable area */
.partner-card {
  flex: 0 0 auto;
  height: 150px; /* logos display height */
  min-height: 150px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important; /* remove internal padding so image margins represent edge-to-edge */
  width: auto;
}

@media (max-width: 1024px) {
  .partner-card { height: 120px; min-height: 120px; }
}

@media (max-width: 640px) {
  .partner-card { height: 100px; min-height: 100px; }
}

.partner-card:last-child { margin-right: 0 !important; }

/* Use image margin to ensure edge-to-edge spacing regardless of image width */
.partner-card img { margin-right: clamp(50px, 4vw, 75px) !important; }
.partners-scroll .partner-card:last-child img { margin-right: 0 !important; }

/* Slightly reduce spacing on smaller viewports while respecting clamp() */
@media (max-width: 1024px) {
  .partner-card img { margin-right: clamp(36px, 6vw, 60px) !important; }
}

@media (max-width: 640px) {
  .partner-card img { margin-right: clamp(24px, 8vw, 36px) !important; }
}

/* Force partner images to the intended display height to avoid thumbnailing */
.partner-card img {
  display: block;
  /* fill the card height so all logos appear the same visual height */
  height: 100% !important;
  max-height: none !important;
  width: auto !important;
  object-fit: contain !important;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1024px) {
  .partner-card img { height: 160px !important; max-height: 160px !important; }
}

@media (max-width: 640px) {
  .partner-card img { height: 120px !important; max-height: 120px !important; }
}

/* Debug outline and overlay (temporary) */
.partners-scroll.debug-outline {
  outline: 3px dashed rgba(255,165,0,0.9);
  outline-offset: 6px;
}
.partners-debug {
  position: absolute;
  right: 8px;
  top: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  z-index: 50;
}
.partners-debug small { display:block; opacity:0.85 }