.lookbook {
  background-color: #000000;
  color: white;
}

.lookbook h4 {
  background-color: #000000;
  color: #b2fc4f;
}

.lookbook-img {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* border-radius: 0.5rem; */
}

.lookbook-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

.lookbook-img .overlay-dark {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
  transition: background 0.3s ease;
}

.lookbook-img .category-item:hover .overlay-dark {
  background: rgba(0, 0, 0, 0.6);
}

.lookbook-img .overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3; /* lebih tinggi dari overlay-dark */
  transform: translate(-50%, -50%);
  text-align: center;
  /* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); */
}

.lookbook-img .overlay-content .btn {
  background-color: #b2fc4f;
  color: #000; /* atau #fff kalau mau tulisan putih */
  border: none;
}

/* Square (1:1) untuk col-md-4 */
.img-square {
  aspect-ratio: 1 / 1;
  height: 300px; /* fallback kalau browser tidak support aspect-ratio */
}

/* Tinggi tetap (ikut square) untuk col-md-8 */
.img-full {
  height: 100%;
  height: 500px;
}

/* Baris 3: 16:9 ratio */
.img-wide {
  aspect-ratio: 16 / 9;
  max-height: 450px;
}

/* MODAL LOOKBOOK - RESPONSIVE & NO CROP */
.lookbook-modal .modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.lookbook-modal .carousel-item {
  height: auto;
  text-align: center;
}

.lookbook-modal .carousel-item img {
  width: 100%;
  height: auto;
  /* max-height: 75vh;  */
  /* KUNCI: tidak akan lebih tinggi dari layar */
  object-fit: contain; /* KUNCI: tidak terpotong */
}

.lookbook-viewmore{
  font-size: 10px; /* 8px terlalu kecil, bikin wrap */
  padding: 6px 6px;
  transition: 0.3s ease;

  display: flex;                 /* KUNCI */
  justify-content: center;       /* center */
  align-items: center;           /* sejajar vertikal */
  gap: 6px;                       /* jarak text & icon */
  white-space: nowrap;            /* anti 2 baris */
}

.lookbook-viewmore i {
  transition: 0.3s ease;
}

.lookbook-viewmore:hover i {
  transform: translateX(5px);
}


/* FULL BLACK MODAL */
.lookbook-modal .modal-content {
  background: #000 !important;
  color: #fff\;
  border: none;
}

.lookbook-modal .modal-header {
  border: none;
  background: #000;
  color:#b2fc4f;
}

.lookbook-modal .btn-close {
  filter: invert(1); /* biar tombol close putih */
}

/* Background di dalam carousel */
.lookbook-modal .carousel-item {
  background: #000;
}

@media (min-width: 768px) {
  .lookbook-viewmore {
    font-size: 12px;
  }
}

@media (min-width: 1200px) {
  .lookbook-viewmore {
    font-size: 14px;
    padding: 8px 12px;
  }
}

/* Responsive fix untuk tablet (<=768px) */
@media (max-width: 768px) {
  .img-square,
  .img-full,
  .img-wide {
    height: 200px !important; /* pakai !important jika override aspect-ratio */
    aspect-ratio: auto; /* matikan aspect-ratio jika perlu */
  }
}

/* Responsive fix untuk mobile (<=576px) */
@media (max-width: 576px) {
  .img-square,
  .img-full,
  .img-wide {
    height: 150px !important;
    aspect-ratio: auto;
  }
}