/*
 * /holiday-lighting/ page styles.
 * Loaded only by public/holiday-lighting/index.html, after main.css and home-polish.css.
 * home-polish.css supplies the shared buttons, mobile bar, and booking band.
 */

.hl-page { color: #222; }
.hl-narrow { max-width: 920px; }

.hl-hero {
  background: #111;
  color: #fff;
  padding: 0;
  border-bottom: 6px solid #a97b50;
  text-align: center;
  overflow: visible;
}
.hl-hero-photo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  background: #111;
}
.hl-hero-copy {
  background: #1c2089;
  padding: 1.75rem 0 2rem;
}
.hl-hero h1 { color: #fff; font-weight: 900; font-size: 2.6rem; line-height: 1.15; margin: 0 0 .75rem; }
.hl-hero .hp-eyebrow { color: #E3A03B; }
.hl-subhead { font-size: 1.35rem; font-weight: 700; margin: 0 auto; max-width: 40rem; color: rgba(255, 255, 255, .95); }
.hl-breadcrumb { font-size: .9rem; margin-bottom: 1.25rem; color: rgba(255, 255, 255, .8); }
.hl-breadcrumb a { color: #fff; text-decoration: underline; }
.hl-hero-actions { margin: 1.5rem 0 0; }
@media (max-width: 767px) {
  .hl-hero-copy { padding: 1.35rem 0 1.5rem; }
  .hl-hero h1 { font-size: 1.85rem; }
  .hl-subhead { font-size: 1.15rem; }
}

.hl-section { padding: 2.75rem 0; border-bottom: 1px solid #e3e4ee; }
.hl-section:nth-of-type(even) { background: #f6f7fb; }
.hl-section h2 { color: #1c2089; font-weight: 900; font-size: 1.9rem; margin-bottom: 1rem; }
.hl-section p { font-size: 1.07rem; line-height: 1.65; }
@media (max-width: 767px) { .hl-section h2 { font-size: 1.5rem; } }

.hl-kicker {
  display: inline-block;
  margin: 0 0 .7rem;
  padding: .2rem .55rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 2px;
}
.hl-kicker-plan { background: #1c2089; color: #fff; }
.hl-kicker-done { background: #E3A03B; color: #000; }

.hl-photo { margin: 1.25rem 0 0; background: #fff; box-shadow: 0 1px 8px rgba(0, 0, 0, .12); }
.hl-photo img { display: block; width: 100%; height: auto; }

.hl-video {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1rem;
  background: #000;
}

.hl-back { margin: 1.5rem 0 0 !important; font-size: 1rem !important; }
.hl-back a { color: #fff; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .hl-page .hp-btn { transition: none; }
}