/*
  christmas-lighting-service-template — Figma 696:4193 overrides.
  Scoped to the holiday single <main> so permanent/bistro lighting stay unchanged.
*/

.christmas-lighting-service-template {
  --color-christmas-gallery-bg: #2e532a;
  --color-christmas-copy: #141414;
}

/*
  Hero uses the standard service-page stack (editable bg + red diagonal ::before).
  Do not add a second photo on ::before — that pseudo-element is the red multiply wedge.
*/

/* ---------- Definition band — red + pattern (696:4257) ---------- */

.christmas-lighting-service-template .service-detail-v1-service-detail--christmas-template {
  position: relative;
  isolation: isolate;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  overflow: hidden;
}

.christmas-lighting-service-template .service-detail-v1-service-detail--christmas-template::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.2;
  background-image: url("../../../images/christmas-lighting-service-template/pattern-red-lightbulbs.webp");
  background-size: cover;
  background-position: left center;
  pointer-events: none;
}

.christmas-lighting-service-template .service-detail-v1-service-detail--christmas-template .service-detail-v1-service-detail__inner {
  position: relative;
  z-index: 1;
}

.christmas-lighting-service-template .service-detail-v1-service-detail--christmas-template .service-detail-v1-service-detail__breadcrumb-link,
.christmas-lighting-service-template .service-detail-v1-service-detail--christmas-template .service-detail-v1-service-detail__breadcrumb-current {
  color: var(--color-text-muted);
}

.christmas-lighting-service-template .service-detail-v1-service-detail--christmas-template .service-detail-v1-service-detail__title,
.christmas-lighting-service-template .service-detail-v1-service-detail--christmas-template .service-detail-v1-service-detail__body {
  color: var(--color-text-inverse);
}

@media (min-width: 1024px) {
  .christmas-lighting-service-template .service-detail-v1-service-detail--christmas-template {
    block-size: var(--service-detail-v1-lighting-band-h);
    min-block-size: var(--service-detail-v1-lighting-band-h);
    max-block-size: var(--service-detail-v1-lighting-band-h);
    overflow: hidden;
  }

  .christmas-lighting-service-template .service-detail-v1-service-detail--christmas-template .service-detail-v1-service-detail__inner {
    box-sizing: border-box;
    block-size: var(--service-detail-v1-lighting-band-h);
    max-inline-size: none;
    margin-inline: 0;
    padding-block: var(--service-detail-v1-lighting-pad-y);
    padding-inline: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 0;
    row-gap: var(--service-detail-v1-stack-gap-desktop);
    align-content: start;
  }

  .christmas-lighting-service-template .service-detail-v1-service-detail--christmas-template .service-detail-v1-service-detail__breadcrumb {
    padding-inline: var(--header-pad-x);
  }

  .christmas-lighting-service-template .service-detail-v1-service-detail--christmas-template .service-detail-v1-service-detail__text-block {
    align-self: center;
    max-inline-size: none;
    padding-inline: var(--header-pad-x);
  }

  .christmas-lighting-service-template .service-detail-v1-service-detail--christmas-template .service-detail-v1-service-detail__media {
    max-inline-size: none;
    inline-size: 100%;
    min-block-size: 0;
    block-size: auto;
    align-self: stretch;
    margin-block: calc(-1 * var(--service-detail-v1-lighting-pad-y));
  }

  .christmas-lighting-service-template .service-detail-v1-service-detail--christmas-template .service-detail-v1-service-detail__image {
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* ---------- Overview row — white + sage deco (696:4536) ---------- */

.christmas-lighting-service-template .brand-intro-service-page--christmas-template {
  background-color: var(--color-bg);
  color: var(--color-christmas-copy);
  border-block-end: 0;
  overflow-x: clip;
}

.christmas-lighting-service-template .brand-intro-service-page--christmas-template .brand-intro-service-page__bg {
  display: none;
}

.christmas-lighting-service-template .brand-intro-service-page--christmas-template .brand-intro-service-page__title,
.christmas-lighting-service-template .brand-intro-service-page--christmas-template .brand-intro-service-page__body p,
.christmas-lighting-service-template .brand-intro-service-page--christmas-template .brand-intro-service-page__subhead {
  color: var(--color-christmas-copy);
}

.christmas-lighting-service-template .brand-intro-service-page--christmas-template .brand-intro-service-page__text-block {
  position: relative;
}

.christmas-lighting-service-template .brand-intro-service-page--christmas-template .brand-intro-service-page__deco {
  position: absolute;
  inset-block: -10%;
  inset-inline-end: -20%;
  inline-size: min(520px, 90%);
  block-size: auto;
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}

.christmas-lighting-service-template .brand-intro-service-page--christmas-template .brand-intro-service-page__deco img {
  inline-size: 100%;
  block-size: 100%;
  max-width: none;
  object-fit: contain;
}

.christmas-lighting-service-template .brand-intro-service-page--christmas-template .brand-intro-service-page__title,
.christmas-lighting-service-template .brand-intro-service-page--christmas-template .brand-intro-service-page__body {
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .christmas-lighting-service-template .brand-intro-service-page--christmas-template {
    min-block-size: var(--brand-intro-service-lighting-band-h);
  }

  .christmas-lighting-service-template .brand-intro-service-page--christmas-template .brand-intro-service-page__inner {
    box-sizing: border-box;
    min-block-size: var(--brand-intro-service-lighting-band-h);
    max-inline-size: none;
    margin-inline: 0;
    padding: 0;
    gap: 0;
  }

  .christmas-lighting-service-template .brand-intro-service-page--christmas-template .brand-intro-service-page__row--media-start {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0;
    align-items: stretch;
    inline-size: 100%;
    min-block-size: var(--brand-intro-service-lighting-band-h);
    padding-inline: 0;
  }

  .christmas-lighting-service-template .brand-intro-service-page--christmas-template .brand-intro-service-page__media {
    grid-column: 1;
    inline-size: 100%;
    max-inline-size: none;
    align-self: stretch;
    block-size: auto;
    min-block-size: 0;
    aspect-ratio: auto;
    margin: 0;
  }

  .christmas-lighting-service-template .brand-intro-service-page--christmas-template .brand-intro-service-page__text-block {
    grid-column: 2;
    align-self: center;
    max-inline-size: none;
    gap: var(--space-lg);
    box-sizing: border-box;
    padding-block: var(--brand-intro-service-lighting-pad-y);
    padding-inline: var(--brand-intro-service-lighting-row-gap) var(--header-pad-x);
  }

  .christmas-lighting-service-template .brand-intro-service-page--christmas-template .brand-intro-service-page__image {
    inset-inline-start: -17.04%;
    inset-block-start: -0.03%;
    inline-size: 162.57%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* ---------- Red CTA band pattern (696:4266) ---------- */

.christmas-lighting-service-template .cta-v2--christmas-template {
  position: relative;
  isolation: isolate;
}

.christmas-lighting-service-template .cta-v2--christmas-template::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  background-image: url("../../../images/christmas-lighting-service-template/cta-red-pattern.webp");
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.christmas-lighting-service-template .cta-v2--christmas-template .cta-v2__inner {
  position: relative;
  z-index: 1;
}

/* ---------- Gallery — forest green (696:4523) ---------- */

.christmas-lighting-service-template .service-gallery-lighting-service-template {
  background-color: var(--color-christmas-gallery-bg);
}

/*
  Holiday hero is a before/after composite — show the full width (no cover crop).
*/
.christmas-lighting-service-template
  .service-gallery-lighting-service-template[data-gallery-thumb-lightbox]
  .service-gallery-lighting-service-template__stage {
  aspect-ratio: unset;
  overflow: visible;
}

.christmas-lighting-service-template
  .service-gallery-lighting-service-template[data-gallery-thumb-lightbox]
  .service-gallery-lighting-service-template__stage-image {
  position: static;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
  object-position: center;
}

/* ---------- Benefits — white star plate, six cards in two rows of three ---------- */

@media (min-width: 1024px) {
  .christmas-lighting-service-template .benefits-services-shine-template__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, var(--benefits-services-card-w)));
    justify-content: center;
  }

  .christmas-lighting-service-template .benefits-services-shine-template__item {
    display: flex;
    max-inline-size: none;
    min-inline-size: 0;
  }

  .christmas-lighting-service-template .benefits-services-shine-template__card {
    flex: 1 1 auto;
  }
}