/* ================================================================
   LGC Nature Photography Slider — slider.css
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap');

/* ── Wrapper ── */
.lgc-ns-wrap {
  position: relative;
  width: 100%;
  height: var(--lgc-height, 520px);
  overflow: hidden;
  background: #0d0d0d;
  font-family: 'Lato', sans-serif;
  -webkit-user-select: none;
  user-select: none;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/* ── Slides ── */
.lgc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.3s ease;
  display: flex;
  align-items: center;
  z-index: 1;
}
.lgc-slide.lgc-active { opacity: 1; z-index: 2; }
.lgc-slide.lgc-out    { opacity: 0; z-index: 1; }

/* Background image — size & position controlled per-slide via inline styles */
.lgc-bg {
  position: absolute;
  inset: 0;
  background-size: cover;        /* fallback default */
  background-position: center;   /* fallback default */
  background-repeat: no-repeat;
  transform: scale(1);
  transition: opacity 1.3s ease;
}

/* Zoom-in animation on active slide */
@keyframes lgc-zoom {
  from { transform: scale(1);    }
  to   { transform: scale(1.08); }
}
.lgc-slide.lgc-active .lgc-bg {
  animation: lgc-zoom 8s ease-out forwards;
}

/* Gradient overlay — text side */
.lgc-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.35) 55%,
    transparent 100%
  );
  z-index: 1;
}

/* ── Text layer ── */
.lgc-text {
  position: relative;
  z-index: 3;
  padding: 0 8%;
  max-width: 580px;
  transform: translateY(28px);
  opacity: 0;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  text-align: left !important;
  transition:
    transform 0.9s cubic-bezier(.22,.9,.36,1) 0.45s,
    opacity   0.9s ease                       0.45s;
}
.lgc-slide.lgc-active .lgc-text {
  transform: translateY(0);
  opacity: 1;
}

.lgc-label {
  display: block !important;
  font-weight: 400 !important;
  font-size: clamp(10px, 1.1vw, 13px) !important;
  letter-spacing: 0.38em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  margin-bottom: 12px !important;
  /* Metallic gold */
  background: linear-gradient(135deg, #c8960c 0%, #f5d580 35%, #e8b923 55%, #f9e898 75%, #c8960c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #d4a017; /* fallback */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.lgc-title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(28px, 4.5vw, 62px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin: 0 0 16px !important;
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  /* Metallic gold */
  background: linear-gradient(135deg, #b8860b 0%, #f5d580 30%, #fdf0a0 50%, #e8b923 70%, #b8860b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #d4a017; /* fallback */
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.75)) drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.lgc-desc {
  font-weight: 300 !important;
  font-size: clamp(12px, 1.25vw, 15px) !important;
  color: rgba(255,255,255,.9) !important;
  line-height: 1.75 !important;
  max-width: 420px !important;
  margin-bottom: 28px !important;
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.6) !important;
}

.lgc-btn {
  display: inline-block !important;
  padding: 11px 30px !important;
  border: 1.5px solid #d4a017 !important;
  background: rgba(212,160,23,.1) !important;
  color: #f5d580 !important;
  text-decoration: none !important;
  font-size: clamp(10px, 1.05vw, 12px) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(4px) !important;
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 12px rgba(212,160,23,0.2) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
}
.lgc-btn:hover,
.lgc-btn:focus {
  background: #d4a017 !important;
  color: #111 !important;
  border-color: #d4a017 !important;
  outline: none !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 20px rgba(212,160,23,0.5) !important;
  text-shadow: none !important;
}

/* ── Horizontal dot navigation ── */
.lgc-dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.lgc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .3s, border-color .3s, transform .3s;
}
.lgc-dot.lgc-active {
  background: #fff;
  border-color: #fff;
  transform: scale(1.4);
}
.lgc-dot:focus { outline: 2px solid rgba(255,255,255,.5); outline-offset: 2px; }

/* ── Arrow buttons ── */
.lgc-arrow {
  position: absolute;
  bottom: 26px;
  z-index: 10;
  width: 46px;
  height: 46px;
  background: rgba(255,255,255,.12);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: background .3s;
  padding: 0;
}
.lgc-arrow:hover,
.lgc-arrow:focus { background: rgba(255,255,255,.3); outline: none; }
.lgc-arrow svg { fill: #fff; width: 20px; height: 20px; }
.lgc-prev { right: 60px; }
.lgc-next { right: 10px; }

/* ── Progress bar ── */
.lgc-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: rgba(255,255,255,.85);
  z-index: 10;
  /* width transition injected by JS */
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .lgc-ns-wrap { --lgc-height: 380px !important; }
  .lgc-dots { display: none; }
  .lgc-text { padding: 0 6%; }
  .lgc-desc { display: none; }
}