/* ===== IMAGE SLIDER ===== */
.slider-section {
  background: var(--off-white);
  padding: 80px 0 0;
  overflow: hidden;
  border-bottom: 1px solid var(--gray-200);
}

.slider-header {
  padding: 0 5%;
  margin-bottom: 36px;
}

.slider-track-wrap {
  position: relative;
  overflow: hidden;
}

.slider-track {
  display: flex;
  gap: 18px;
  transition: transform 0.62s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 0 5%;
  will-change: transform;
}

/* ---- Individual Slide ---- */
.slide-card {
  flex-shrink: 0;
  width: 420px;
  height: 275px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.4s;
}

.slide-card:hover { box-shadow: var(--shadow-lg); }

.slide-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.5s var(--ease);
}
.slide-card:hover img { transform: scale(1.05); }

/* Fallback placeholder (shown when no image) */
.slide-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}

.slide-fallback-icon {
  font-size: 62px; opacity: 0.22; position: relative; z-index: 1;
}

.slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,31,58,0.88) 0%, transparent 55%);
  z-index: 2;
}

.slide-label {
  position: absolute; bottom: 18px; left: 18px; z-index: 3;
}
.slide-label span {
  display: block; font-size: 9.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 3px; font-weight: 700;
}
.slide-label h4 {
  font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: 15px; color: var(--white); line-height: 1.2;
}

/* ---- Controls ---- */
.slider-controls {
  display: flex; align-items: center; gap: 14px;
  padding: 26px 5%;
  justify-content: flex-end;
}

.slider-btn {
  width: 42px; height: 42px;
  border: 1px solid var(--gray-200);
  background: var(--white); border-radius: var(--radius-sm);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--navy);
  transition: all var(--t-base);
  line-height: 1;
}
.slider-btn:hover {
  background: var(--navy); border-color: var(--navy); color: var(--white);
}

.slider-dots {
  display: flex; gap: 7px; align-items: center;
  margin-right: 10px;
}
.slider-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gray-200); cursor: pointer;
  transition: all var(--t-base);
}
.slider-dot.active {
  background: var(--orange); width: 22px; border-radius: 3px;
}