/* ---------------------------------------------------
   JOURNAL CAROUSEL – RESPONSIVE HERO IMAGE (FINAL)
--------------------------------------------------- */
.journal-carousel {
  width: 100%;
}

/* --- BASE --- */
.journal-carousel .carousel-item {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  position: relative; /* wajib agar aspect-ratio fix */
}

.journals-archive h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  margin-bottom: 1rem;
   color: #b2fc4f; /* Spotify green */
  text-shadow: 0 0 8px rgba(29, 185, 84, 0.3);
}

.journal-carousel .carousel-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* --- MOBILE: PERFECT SQUARE (1:1) --- */
@media (max-width: 768px) {
  .journal-carousel .carousel-item {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;      /* override bootstrap */
    min-height: 0 !important;
  }
}

/* --- DESKTOP: 16:9 CINEMATIC --- */
@media (min-width: 769px) {
  .journal-carousel .carousel-item {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;   
    min-height: 0 !important;
  }
}