/* banner_style.css - RESPONSIVE VERSION */

/* Container that visually frames the slider */
.banner-slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 8px;
  margin-top: 0px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  /* Use an aspect ratio for responsive height (16:6 ~ 2.66:1). Adjust as needed. */
  /* This keeps the banner height proportional to the width on all devices. */
  aspect-ratio: 16 / 6;
  background-color: #f6f6f6; /* gentle fallback color while images load */
}

/* The inner flex container that slides horizontally */
.banner-container {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

/* Each actual image slide.
   Important: min-width:100% forces each slide to occupy full viewport width. */
.slide-image {
  min-width: 100%;
  height: 100%;
  object-fit: contain; /* crop to fill the box while preserving aspect ratio */
  flex-shrink: 0;
  display: block;
}

/* Buttons (keep them visually on top) */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.45);
  border: none;
  padding: 8px 12px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 999px;
  color: #fff;
  user-select: none;
  transition: background-color 0.2s ease, transform 0.12s ease;
  z-index: 20;
}
.slider-btn:hover { transform: translateY(-50%) scale(1.03); background-color: rgba(0,0,0,0.6); }
.left-btn { left: 12px; }
.right-btn { right: 12px; }

/* Small dot indicators (optional - left commented if you don't want them)
.banner-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; display:flex; gap:6px; z-index:20; }
.banner-dots button { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.6); border:none; }
.banner-dots button.active { background:rgba(255,255,255,0.95); }
*/

/* ===== Responsive adjustments ===== */

/* On medium screens, keep same aspect ratio but tighten shadows */
@media (max-width: 1024px) {
  .banner-slider { aspect-ratio: 16 / 7; box-shadow: 0 3px 8px rgba(0,0,0,0.08); }
}

/* On small screens, make banner taller proportionally so focal area is visible */
@media (max-width: 768px) {
  .banner-slider { aspect-ratio: 16 / 9; border-radius: 6px; }
  .slider-btn { padding: 6px 10px; font-size: 18px; }
  .left-btn { left: 8px; }
  .right-btn { right: 8px; }
}

/* On very small screens / narrow phones, use contain so logos/text don't get cropped.
   If your banner's important area is centered, keep cover; otherwise switch to contain.
   Keep object-fit: cover by default; we switch to contain here only if desired. */
@media (max-width: 420px) {
  .slide-image { object-fit: cover; } /* change to 'contain' if you prefer no cropping */
}