/* Homepage slider: the "Local & Private" slide style. Layers over hero-slider-template.php. */

.hero-slide--lp .background-layer { background: var(--olive); }

/* Velvet folds, warm spotlight and vignette over the blurred set photo or video. */
.hero-slide--lp .slide-overlay {
  background:
    radial-gradient(ellipse 85% 80% at 50% 45%, transparent 35%, rgba(14, 15, 9, .92) 100%),
    radial-gradient(ellipse 38% 42% at 50% 44%, rgba(255, 206, 120, .3), rgba(232, 182, 90, .08) 45%, transparent 72%),
    var(--curtain);
}

/* The slider runs 100vh below the site header, so centre on what's actually visible. */
.hero-slide--lp .hero-content { top: calc(50% - 54px); width: 100%; }

.hero-slide--lp .hero-title--logo {
  width: min(84vw, 560px, calc((100vh - 540px) * 2.25));
  min-width: 240px;
  margin: 0 auto;
  padding: 0;
}
.hero-slide--lp .hero-title--logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 36px rgba(0, 0, 0, .55));
}

.hero-slide--lp .hero-subtitle {
  margin: clamp(12px, 2.4vh, 22px) 0 0;
  padding: 0;
  font-family: var(--mono);
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 400;
  letter-spacing: .42em;
  color: var(--amber);
}

.hero-slide--lp .hero-description {
  max-width: 560px;
  margin: clamp(14px, 3vh, 28px) auto clamp(20px, 4vh, 40px);
  padding: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.45;
  color: var(--cream);
}

.hero-slide--lp .cta-button {
  padding: 18px 32px;
  border: 0;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink) !important; /* the slider sets a white link colour with !important */
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero-slide--lp .cta-button:hover { background: var(--amber); color: var(--ink) !important; }

/* Series credits. The slider runs 100vh below the site header, so the bottom strip sits
   one header-height up to stay on screen without scrolling. */
.lp-strip {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 0 var(--gutter);
  font-family: var(--mono);
  letter-spacing: .14em;
  color: var(--cream);
  pointer-events: none;
}
.lp-strip--top { top: 22px; font-size: 11px; letter-spacing: .16em; }
.lp-strip--bottom { bottom: 128px; font-size: 10px; color: var(--cream-70); }
.lp-strip__dim { color: var(--cream-60); }
.lp-strip__status { display: inline-flex; align-items: center; gap: 10px; color: var(--amber); }
.lp-strip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber);
}
.lp-strip__sponsor { display: inline-flex; align-items: center; gap: 14px; }
.lp-strip__sponsor img { display: block; width: auto; height: 16px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-slide--lp.active .hero-title--logo img { animation: lp-pull-focus 2.2s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes lp-pull-focus {
  from { opacity: 0; filter: blur(28px); transform: scale(1.08); }
  to { opacity: 1; filter: drop-shadow(0 8px 36px rgba(0, 0, 0, .55)); transform: none; }
}