/* css/services.css */

.services-section {
   padding: 100px 5%;
   background-color: var(--color-white);
}

.services-header {
   text-align: center;
   color: var(--color-maroon);
   font-size: 3.5rem;
   font-weight: 900;
   margin-bottom: 60px;
   text-transform: uppercase;
}

/* --- GRID 3 KOLOM OTOMATIS --- */
.services-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 30px;
   max-width: 1250px;
   margin: 0 auto;
}

/* --- KARTU LAYANAN --- */
.service-card-item {
   position: relative;
   height: 480px;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
   display: flex;
   align-items: flex-end;
   transition:
      transform 0.4s ease,
      box-shadow 0.4s ease;
}

/* Efek Hover: Kartu naik dan bayangan menguat */
.service-card-item:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 45px rgba(156, 0, 4, 0.2);
}

/* Background Gambar dengan Efek Zoom Halus saat Hover */
.service-img-bg {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-size: cover;
   background-position: center;
   transition: transform 0.6s ease;
   z-index: 1;
}

.service-card-item:hover .service-img-bg {
   transform: scale(1.08); /* Gambar sedikit memperbesar diri */
}

/* Overlay Gelap Gradasi (Transparan di atas, gelap pekat di bawah agar teks terbaca) */
.service-card-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.1) 30%,
      rgba(15, 15, 15, 0.85) 90%
   );
   z-index: 2;
}

/* Konten Teks di dalam Kartu */
.service-card-content {
   position: relative;
   z-index: 3;
   padding: 40px 30px;
   color: var(--color-white);
   width: 100%;
}

.service-card-content h3 {
   font-size: 26px;
   font-weight: 800;
   margin-bottom: 15px;
   color: var(--color-white);
}

.service-card-content p {
   font-size: 14.5px;
   line-height: 1.6;
   color: #e0e0e0;
   margin-bottom: 20px;
}

/* Tombol View More Minimalis */
.service-btn {
   display: inline-block;
   color: var(--color-white);
   font-family: var(--font-heading);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-decoration: none;
   position: relative;
   transition: color 0.3s ease;
}

.service-btn:hover {
   color: #ffcccc;
}

/* Garis kecil di bawah tombol */
.service-btn::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: -4px;
   width: 100%;
   height: 2px;
   background-color: var(--color-maroon);
   transition: background-color 0.3s ease;
}

.service-btn:hover::after {
   background-color: var(--color-white);
}

/* =========================================
   RESPONSIVE (MOBILE & TABLET)
   ========================================= */
@media (max-width: 992px) {
   .services-section {
      padding: 70px 20px;
   }

   .services-header {
      font-size: 2.5rem;
      margin-bottom: 40px;
   }

   .service-card-item {
      height: 420px;
   }
}