/* ==========================================================================
   Las Vegas Express Detailing — location (service-area) pages
   Loads AFTER homepage.css and depends on its tokens (--lv-*). Everything
   shared (buttons, eyebrows, bands, hero canvas motifs, reviews, map frame,
   quote form) stays in homepage.css; this file only carries what the location
   pages add: an image-free hero paired with the quote form, the H3 service
   cards, the label/description cards, light-band lists, and the fact rows in
   the closing CTA.
   ========================================================================== */

/* ==========================================================================
   1. Hero — same canvas as the homepage, no photo, form alongside
   ========================================================================== */
.lc-hero { padding: 58px 0 150px; }

/* Breadcrumb sits above the kicker and reads as a hairline trail. */
.lc-crumbs {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: .82rem;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .55);
}

.lc-crumbs a {
  color: rgba(255, 255, 255, .74);
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}

.lc-crumbs a:hover { color: var(--lv-accent-lt); border-bottom-color: rgba(127, 212, 255, .5); }

.lc-crumbs i { font-size: .7rem; color: rgba(255, 255, 255, .32); }

.lc-crumbs [aria-current] { color: var(--lv-white); font-weight: 500; }

/* Location H1s are short place-name sentences — sized between the homepage
   headline and the longer service-page H1. */
.lc-hero-h1 {
  margin: 0 0 4px;
  color: var(--lv-white);
  font-size: clamp(2rem, 4.6vw, 3.15rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
}

/* Five short badge-like items read better in two columns than one long stack. */
.lc-hero-checks {
  margin: 26px 0 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px;
}

.lc-hero-checks li i { color: var(--lv-accent-lt); }

/* The doc's hero call-to-action line, set apart from the lead paragraphs. */
.lc-hero-cta {
  position: relative;
  z-index: 2;
  margin: 0 0 26px;
  padding: 14px 18px;
  border: 1px solid rgba(46, 139, 255, .3);
  border-left: 3px solid var(--lv-accent);
  border-radius: var(--lv-radius-sm);
  background: rgba(46, 139, 255, .08);
  color: rgba(255, 255, 255, .92);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}

/* ==========================================================================
   2. Section body — rhythm for the mixed paragraph / list / card runs
   ========================================================================== */
.lc-body {
  position: relative;
  z-index: 2;
}

.lc-body > p { margin-bottom: 22px; }

.lc-body > ul,
.lc-body > div { margin-bottom: 34px; }

.lc-body > :last-child { margin-bottom: 0; }

/* A cue line ("Interior detailing can cover:") hugs the list it introduces. */
.lc-body > p.lv-lead-cue,
.lc-body > p.lv-lead-cue-light { margin-bottom: 16px; }

/* ==========================================================================
   3. Lists on light bands (the dark bands reuse .lv-reason-grid)
   ========================================================================== */
.lc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 20px;
}

.lc-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 15px;
  border: 1px solid var(--lv-line);
  border-radius: 11px;
  background: var(--lv-white);
  color: var(--lv-text);
  font-size: .95rem;
  line-height: 1.5;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--lv-ease);
}

.lc-list li:hover {
  border-color: rgba(46, 139, 255, .45);
  box-shadow: 0 10px 26px -12px rgba(5, 9, 14, .3);
  transform: translateX(4px);
}

.lc-list li i { color: var(--lv-accent); font-size: .95rem; }

/* ==========================================================================
   4. Service cards — the H3 blocks under "What ... Services Are Available?"
   No photography on location pages, so the card leads with an icon plate.
   ========================================================================== */
.lc-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.lc-svc-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  padding: 30px 26px 26px;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  background: var(--lv-white);
  box-shadow: 0 6px 22px rgba(5, 9, 14, .05);
  transition: transform .4s var(--lv-ease), box-shadow .4s var(--lv-ease), border-color .4s;
}

.lc-svc-card:hover {
  transform: translateY(-8px);
  border-color: rgba(46, 139, 255, .55);
  box-shadow: 0 26px 60px rgba(5, 9, 14, .14);
}

.lc-svc-index {
  position: absolute;
  top: 16px;
  right: 20px;
  color: rgba(24, 32, 43, .1);
  font-family: var(--lv-head);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
}

.lc-svc-icon {
  display: inline-grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(46, 139, 255, .16), rgba(139, 123, 255, .14));
  color: var(--lv-accent-dk);
  font-size: 1.3rem;
}

.lc-svc-body { display: flex; flex-direction: column; flex: 1 1 auto; }

.lc-svc-body h3 {
  margin: 0 0 10px;
  font-family: var(--lv-head);
  font-size: 1.17rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--lv-text);
}

.lc-svc-body h3 a {
  color: inherit;
  transition: color .25s;
}

.lc-svc-body h3 a:hover { color: var(--lv-accent-dk); }

.lc-svc-body p {
  margin: 0 0 18px;
  color: var(--lv-muted);
  font-size: .95rem;
  line-height: 1.72;
}

.lc-svc-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  color: var(--lv-muted);
  font-size: .93rem;
  line-height: 1.7;
}

/* The doc's "Book <Service>" call-to-action, pinned to the card foot. */
.lc-svc-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  color: var(--lv-accent-dk);
  font-size: .93rem;
  font-weight: 600;
  transition: gap .25s var(--lv-ease), color .25s;
}

.lc-svc-link:hover { gap: 13px; color: var(--lv-accent); }

/* Same cards when the section lands on a dark band */
.lv-band-dark .lc-svc-card {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.lv-band-dark .lc-svc-card:hover {
  border-color: rgba(46, 139, 255, .38);
  background: rgba(46, 139, 255, .06);
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, .6);
}

.lv-band-dark .lc-svc-index { color: rgba(255, 255, 255, .09); }
.lv-band-dark .lc-svc-icon  { color: var(--lv-accent-lt); }
.lv-band-dark .lc-svc-body h3 { color: var(--lv-white); }
.lv-band-dark .lc-svc-body h3 a:hover { color: var(--lv-accent-lt); }
.lv-band-dark .lc-svc-body p,
.lv-band-dark .lc-svc-list { color: rgba(255, 255, 255, .78); }
.lv-band-dark .lc-svc-link { color: var(--lv-accent-lt); }

/* ==========================================================================
   5. Label / description cards ("Car Wash: For routine exterior dirt ...")
   These are body copy in the doc, not headings, so the line stays a paragraph
   and the label is a span - the sentence reads exactly as authored.
   ========================================================================== */
.lc-def-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.lc-def-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  background: var(--lv-white);
  box-shadow: 0 6px 22px rgba(5, 9, 14, .05);
  transition: transform .4s var(--lv-ease), box-shadow .4s var(--lv-ease), border-color .4s;
}

.lc-def-card:hover {
  transform: translateY(-6px);
  border-color: rgba(46, 139, 255, .5);
  box-shadow: 0 22px 52px rgba(5, 9, 14, .13);
}

.lc-def-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(46, 139, 255, .16), rgba(139, 123, 255, .14));
  color: var(--lv-accent-dk);
  font-size: 1.08rem;
}

.lc-def-title {
  font-family: var(--lv-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--lv-text);
}

.lc-def-title a { color: inherit; transition: color .25s; }
.lc-def-title a:hover { color: var(--lv-accent-dk); }

.lc-def-card p {
  margin: 0;
  color: var(--lv-muted);
  font-size: .95rem;
  line-height: 1.72;
}

.lc-def-grid-dark .lc-def-card {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.lc-def-grid-dark .lc-def-card:hover {
  border-color: rgba(46, 139, 255, .38);
  background: rgba(46, 139, 255, .06);
  box-shadow: 0 22px 52px -22px rgba(0, 0, 0, .6);
}

.lc-def-grid-dark .lc-def-icon  { color: var(--lv-accent-lt); }
.lc-def-grid-dark .lc-def-title { color: var(--lv-white); }
.lc-def-grid-dark .lc-def-title a:hover { color: var(--lv-accent-lt); }
.lc-def-grid-dark .lc-def-card p { color: rgba(255, 255, 255, .78); }

/* ==========================================================================
   6. Closing CTA — the map beside the copy. The business fact rows reuse
   homepage.css's .lv-cta-facts, already tuned for this light band.
   ========================================================================== */

/* .lv-cta-facts sits directly above the buttons here, so it needs the gap that
   the homepage's CTA (which has no fact row) never had to define. */
.lv-cta-facts { margin-bottom: 30px; }

/* The city map runs a little taller than the homepage's, to balance the copy. */
.lc-map iframe { height: 440px; }

/* ==========================================================================
   7. Responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
  .lc-svc-grid,
  .lc-def-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .lc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .lc-hero { padding: 40px 0 120px; }

  .lc-map iframe { height: 380px; }
}

@media (max-width: 767.98px) {
  .lc-hero-checks { grid-template-columns: minmax(0, 1fr); }

  .lc-svc-grid,
  .lc-def-grid,
  .lc-list { grid-template-columns: minmax(0, 1fr); }

  .lc-svc-card { padding: 26px 22px 24px; }

  .lc-map iframe { height: 320px; }
}

@media (max-width: 575.98px) {
  .lc-hero { padding: 30px 0 100px; }

  .lc-hero-cta { padding: 13px 15px; font-size: .95rem; }

  .lc-map iframe { height: 280px; }
}

/* ==========================================================================
   8. Centred bands — every section after the services grid
   The hero and the services grid stay left-aligned so the page opens with a
   strong left edge; from "Which service fits your vehicle?" down, each band
   centres on its own axis so the long run of list-heavy sections reads as a
   sequence of composed blocks rather than one ragged left column.
   ========================================================================== */
.lc-band-center .lv-band-head {
  text-align: center;
  /* homepage.css caps this at 780px with no auto margins, so it needs centring
     on the horizontal axis as well as internally. */
  margin-left: auto;
  margin-right: auto;
}

/* A centred heading needs its own accent, since the eyebrow no longer anchors
   the left edge. */
.lc-band-center .lv-band-head .lv-h2 { position: relative; padding-bottom: 22px; }

.lc-band-center .lv-band-head .lv-h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 74px;
  height: 3px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--lv-accent) 22%, var(--lv-accent-lt) 78%, transparent);
}

.lc-band-center .lc-body { text-align: center; }

.lc-band-center .lc-body > p {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* Lists become centred chips: a ragged final row now sits under the middle of
   the block instead of hanging off the left. */
.lc-band-center .lc-list,
.lc-band-center .lv-reason-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.lc-band-center .lc-list li,
.lc-band-center .lv-reason-grid li {
  flex: 0 0 auto;
  justify-content: center;
  padding: 11px 20px;
  border-radius: 999px;
}

.lc-band-center .lc-list li:hover,
.lc-band-center .lv-reason-grid li:hover { transform: translateY(-3px); }

/* Cards centre their icon and copy, and a partial last row centres too.
   Flex rather than grid: a capped basis keeps five cards as a balanced 3 + 2
   (dropping to 2 then 1 as the viewport narrows) AND centres the final short
   row, which a grid would pack against the left-hand column. */
.lc-band-center .lc-def-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.lc-band-center .lc-def-card { flex: 0 1 340px; }

.lc-band-center .lc-def-card {
  align-items: center;
  text-align: center;
}

.lc-band-center .lc-def-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 1.25rem;
}

.lc-band-center .lc-def-title { display: block; margin-bottom: 2px; }

/* Reviews: the quote mark caps the card instead of floating in the corner. */
.lc-band-center .lv-review { text-align: center; align-items: center; }

.lc-band-center .lv-review .lv-quote-mark {
  position: static;
  align-self: center;
  margin-bottom: 6px;
}

.lc-band-center .lv-review figcaption { width: 100%; }

@media (max-width: 767.98px) {
  /* Chips stay chips on phones - a dozen short items as full-width rows makes
     a needlessly long scroll, where wrapped chips take a third of the height. */
  .lc-band-center .lc-list,
  .lc-band-center .lv-reason-grid { gap: 9px; }

  .lc-band-center .lc-list li,
  .lc-band-center .lv-reason-grid li {
    padding: 9px 15px;
    font-size: .9rem;
  }

  .lc-band-center .lc-list li i,
  .lc-band-center .lv-reason-grid li i { font-size: .85rem; }
}

/* ==========================================================================
   9. Closing CTA, centred
   The band ends the page, so it reads as one centred column with the city map
   full width beneath it, rather than a two-column block that would fight the
   centred sections above it.
   ========================================================================== */
.lc-cta-center .lc-cta-head {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
}

.lc-cta-center .lc-cta-head .lv-h2 { position: relative; padding-bottom: 22px; }

.lc-cta-center .lc-cta-head .lv-h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 74px;
  height: 3px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--lv-accent) 22%, var(--lv-accent-lt) 78%, transparent);
}

.lc-cta-center .lc-cta-head .lv-lead-dark {
  margin-left: auto;
  margin-right: auto;
}

.lc-cta-center .lv-cta-facts { justify-content: center; }

.lc-cta-center .lv-hero-actions { justify-content: center; }

.lc-cta-center .lc-map {
  max-width: 1100px;
  margin: 0 auto;
}