/* css/clients.css */

.clients-section {
   background-color: var(--color-white);
   padding: 80px 0;
   position: relative;
   content-visibility: auto;
   contain-intrinsic-size: 500px;
}

.clients-header {
   font-family: var(--font-heading, 'Montserrat', sans-serif);
   font-weight: 900;
   font-size: 3rem;
   letter-spacing: 1.5px;
   color: var(--color-meteorite);
   margin-bottom: 25px;
   text-transform: uppercase;
}

/* Badge Kategori Kapsul (Merah Maroon) */
.client-category-badge {
   display: inline-block;
   background-color: var(--color-maroon);
   color: var(--color-white);
   font-family: var(--font-heading, 'Montserrat', sans-serif);
   font-weight: 700;
   font-size: 1.1rem;
   padding: 8px 36px;
   border-radius: 50px;
   box-shadow: 0 4px 12px rgba(156, 0, 4, 0.25);
   margin-bottom: 30px;
}

/* Grid Wrapper Pembungkus Logo */
.clients-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 30px;
   align-items: center;
   justify-content: center;
   background-color: #f6f6f8;
   border-radius: 16px;
   padding: 45px 35px;
   max-width: 1200px;
   margin: 0 auto;
}

/* Kartu / Kotak Penahan Logo */
.client-logo-item {
   background-color: var(--color-white);
   border-radius: 12px;
   height: 110px;
   padding: 18px 22px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(0, 0, 0, 0.05);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
   transition:
      transform 0.3s ease,
      box-shadow 0.3s ease,
      border-color 0.3s ease;
}

.client-logo-item:hover {
   transform: translateY(-4px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
   border-color: rgba(156, 0, 4, 0.3);
}

/* Gambar Logo: Auto Scale & Maintain Aspect Ratio */
.client-logo-item img {
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
   object-fit: contain;
   filter: grayscale(15%);
   transition: filter 0.3s ease;
}

.client-logo-item:hover img {
   filter: grayscale(0%);
}

/* =========================================
   RESPONSIVE BREAKPOINTS
   ========================================= */
@media (max-width: 992px) {
   .clients-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      padding: 30px 20px;
   }
   .clients-header {
      font-size: 2.3rem;
   }
}

@media (max-width: 768px) {
   .clients-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
   }
   .client-logo-item {
      height: 95px;
      padding: 12px 16px;
   }
}

@media (max-width: 480px) {
   .clients-grid {
      grid-template-columns: 1fr;
   }
}