/* =============================================
   THE ICON! CREATIVE SERVICES – services.css
   Spesifik untuk services.php
   Requires: style.css
   ============================================= */

/* =============================================
   HERO SECTION
   ============================================= */

.services-hero {
  position: relative;
  background: #0B0B0B;
  min-height: 685px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 220px;
  padding-bottom: 80px;
}

/* Konten kiri */
.services-hero__content {
  position: relative;
  z-index: 3;
  flex: 0 0 65%;
  padding-left: calc((100% - var(--container)) / 2); /* +20px sesuai left navbar */
  padding-right: 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: -30px
}

.services-hero__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.services-hero__title span {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: 68px;
  line-height: 1.05;
  letter-spacing: -1px;
}

.services-hero__title--white { color: #ffffff; }
.services-hero__title--lime  { color: var(--lime) }

.services-hero__desc {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
  max-width: 540px;
}

/* Foto kanan */
.services-hero__photo {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  overflow: hidden;
}
@media screen and (max-width: 1366px) {
  .services-hero__photo {
    top: 40px;
  }
}

.services-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: grayscale(30%) brightness(0.7);
}

/* Fade foto dari kiri */
.services-hero__photo-fade {
  position: absolute;
  inset: 0;
  /*
  background: linear-gradient(
    to right,
    #0d0d0d 0%,
    rgba(13,13,13,0.75) 30%,
    rgba(13,13,13,0.15) 70%,
    transparent 100%
  );
  */
}

/* =============================================
   TORN DIVIDER
   Hanya tampilkan 116px pertama (bagian sobek)
   ============================================= */

.services-torn {
  height: 116px;
  background-image: url('../images/bg_services.webp');
  background-size: auto;        /* ← tidak di-stretch, crop dari kiri */
  background-position: left top;
  background-repeat: no-repeat;
  margin-top: -116px;
  position: relative;
  z-index: 5;
}

/* =============================================
   PAPER BACKGROUND WRAPPER
   Lanjutkan dari posisi px ke-117 ke bawah
   ============================================= */

.services-paper-wrap {
  position: relative;
  background-image: url('../images/bg_services.webp');
  background-size: auto;        /* ← tidak di-stretch */
  background-position-x: left;
  background-position-y: -116px;
  background-repeat: no-repeat;
}



/* =============================================
   RESPONSIVE
   ============================================= */

/* ===== TABLET 768px ===== */
@media (max-width: 768px) {

  .services-hero {
    padding-top: 0;
    padding-bottom: 0;
    min-height: auto;
    flex-direction: column; /* ← stack vertikal */
    overflow: visible;
  }

  /* Foto full width di atas */
  .services-hero__photo {
    position: relative; /* ← tidak absolute lagi */
    width: 100%;
    height: 500px;
    margin-top: -500px; /* ← jarak dari navbar */
  }
  
  .services-hero__photo img {
    object-fit: cover;              /* ← pastikan cover */
    object-position: 100% 50%;      /* ← 75% dari kiri = area kanan, 50% = tengah vertikal */
  } 

  /* Konten overlap ke atas foto */
  .services-hero__content {
    position: relative;
    z-index: 3;
    flex: none;
    width: 100%;
    padding: 0 24px;
    margin-top: -60px; /* ← overlap ke atas foto */
    padding-bottom: 50px; /* ← jarak sebelum torn */
  }

  .services-hero__title span { font-size: 48px; }
  .services-hero__desc { font-size: 16px; max-width: 100%; }
}

/* ===== MOBILE 480px ===== */
@media (max-width: 480px) {

  .services-hero {
	 padding-top: 300px;
    padding-bottom: 80px;
  }

  .services-hero__content { padding: 0 16px; }

  .services-hero__title span { font-size: 36px; }
  .services-hero__desc       { font-size: 14px; }
}