/* ============================================================
   Divi Instagram Carousel – Frontend Styles
   ============================================================ */

/* ── CSS defaults (overridden by inline vars per instance) ── */
:root {
  --diic-arrow-color:   #ffffff;
  --diic-arrow-bg:      rgba(0, 0, 0, 0.5);
  --diic-dot-color:     #cccccc;
  --diic-dot-active:    #000000;
  --diic-overlay:       rgba(0, 0, 0, 0.45);
  --diic-caption-color: #ffffff;
  --diic-gap:           16px;
  --diic-radius:        12px;
  --diic-ratio:         1/1;
}

/* ── Wrapper ───────────────────────────────────────────────── */
.diic-carousel-wrapper {
  position:   relative;
  width:      100%;
  overflow:   hidden;
  user-select: none;
}

/* ── Track container & track ──────────────────────────────── */
.diic-track-container {
  overflow: hidden;
  width:    100%;
}

.diic-track {
  display:    flex;
  gap:        var(--diic-gap);
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* ── Slides ────────────────────────────────────────────────── */
.diic-slide {
  flex:        0 0 auto;
  /* width set dynamically by JS */
  overflow:    hidden;
  border-radius: var(--diic-radius);
}

.diic-slide-inner {
  position: relative;
  width:    100%;
  overflow: hidden;
  border-radius: var(--diic-radius);
}

.diic-slide-inner img {
  display:     block;
  width:       100%;
  aspect-ratio: var(--diic-ratio);
  object-fit:  cover;
  transition:  transform 0.4s ease;
}

.diic-slide-inner:hover img {
  transform: scale(1.04);
}

/* ── Caption overlay ───────────────────────────────────────── */
.diic-slide-overlay {
  position:         absolute;
  inset:            0;
  background:       var(--diic-overlay);
  display:          flex;
  align-items:      flex-end;
  padding:          16px;
  border-radius:    var(--diic-radius);
  opacity:          0;
  transition:       opacity 0.35s ease;
}

.diic-slide-inner:hover .diic-slide-overlay {
  opacity: 1;
}

.diic-slide-caption {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  color:          var(--diic-caption-color);
}

.diic-caption-title {
  font-weight: 700;
  font-size:   1rem;
  line-height: 1.2;
}

.diic-caption-subtitle {
  font-size:   0.85rem;
  opacity:     0.85;
}

/* ── Arrow buttons ─────────────────────────────────────────── */
.diic-arrow {
  position:         absolute;
  top:              50%;
  transform:        translateY(-50%);
  z-index:          10;
  background:       var(--diic-arrow-bg);
  color:            var(--diic-arrow-color);
  border:           none;
  border-radius:    50%;
  width:            40px;
  height:           40px;
  font-size:        1.6rem;
  line-height:      1;
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       background 0.2s, opacity 0.2s;
  padding:          0;
  box-shadow:       0 2px 8px rgba(0,0,0,0.25);
}

.diic-arrow:hover {
  filter: brightness(1.2);
}

.diic-arrow.diic-disabled {
  opacity:  0.3;
  cursor:   not-allowed;
  pointer-events: none;
}

.diic-prev { left:  10px; }
.diic-next { right: 10px; }

/* ── Dot navigation ────────────────────────────────────────── */
.diic-dots {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             6px;
  margin-top:      14px;
  flex-wrap:       wrap;
}

.diic-dot {
  width:           8px;
  height:          8px;
  border-radius:   50%;
  background:      var(--diic-dot-color);
  border:          none;
  padding:         0;
  cursor:          pointer;
  transition:      background 0.25s, transform 0.25s;
}

.diic-dot.diic-dot-active {
  background:  var(--diic-dot-active);
  transform:   scale(1.35);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 980px) {
  .diic-arrow {
    width:  34px;
    height: 34px;
    font-size: 1.3rem;
  }
}

@media (max-width: 767px) {
  .diic-arrow {
    width:  30px;
    height: 30px;
    font-size: 1.1rem;
  }
}