/* ==========================================================================
   Las Vegas Express Detailing — legal & static info pages
   Covers privacy-policy/, terms-conditions/, about-us/ and contact-us/.
   Loaded after homepage.css, so every colour, radius, shadow and font comes
   from the tokens declared there — this sheet only adds the components those
   four pages need that the homepage / service / location sheets don't carry:
   a document layout with a sticky table of contents, a prose card, an
   info-card grid and a photo trust banner.
   ========================================================================== */

/* ---------- Hero ---------- */

/* Legal H1s are long sentences, so the hero runs shorter than the homepage's
   and leans on the form card beside it for height. */
.lg-hero { padding: 58px 0 150px; }

.lg-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);
}

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

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

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

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

.lg-hero-h1 {
  margin: 0 0 4px;
  color: var(--lv-white);
  font-size: clamp(1.85rem, 4.2vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.lg-hero-h1 .lg-h1-accent {
  background: linear-gradient(120deg, var(--lv-accent-lt) 0%, var(--lv-accent) 58%, var(--lv-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Inline links on the dark hero: the site's default link colour is too dark
   to read against the navy, so they get the ice-blue accent instead. */
.lg-hero a:not(.lv-btn):not(.lv-form-foot a) { color: var(--lv-accent-lt); }
.lg-hero a:not(.lv-btn):not(.lv-form-foot a):hover { color: var(--lv-white); }

/* The form card is white, so its own links must stay dark — undo the above. */
.lg-hero .lv-form-card a { color: var(--lv-accent-dk); }
.lg-hero .lv-form-card a:hover { color: var(--lv-accent); }

/* ---------- Document layout (privacy policy / terms) ---------- */

.lg-doc { padding: 88px 0 96px; }

.lg-doc-grid {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

/* --- Sticky table of contents --- */

.lg-toc {
  position: sticky;
  /* Clears the fixed header plus a little breathing room. */
  top: 104px;
  padding: 22px 20px;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  background: var(--lv-white);
  box-shadow: var(--lv-shadow);
}

.lg-toc-title {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lv-line);
  font-family: var(--lv-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lv-ink-3);
}

.lg-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Terms has twenty sections — cap the height so the card never outgrows
     the viewport it is pinned to. */
  max-height: min(62vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--lv-metal) transparent;
}

.lg-toc-list::-webkit-scrollbar { width: 6px; }
.lg-toc-list::-webkit-scrollbar-thumb { background: var(--lv-metal); border-radius: 99px; }

.lg-toc-list li + li { margin-top: 2px; }

.lg-toc-list a {
  display: block;
  padding: 7px 10px 7px 14px;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  color: var(--lv-muted);
  font-size: .875rem;
  line-height: 1.5;
  transition: color .22s, background .22s, border-color .22s;
}

.lg-toc-list a:hover {
  border-left-color: var(--lv-accent);
  background: rgba(46, 139, 255, .06);
  color: var(--lv-ink);
}

.lg-toc-foot {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--lv-line);
  font-size: .84rem;
  line-height: 1.6;
  color: var(--lv-muted);
}

.lg-toc-foot a { color: var(--lv-accent-dk); font-weight: 600; }
.lg-toc-foot a:hover { color: var(--lv-accent); }

/* --- Prose --- */

.lg-prose { min-width: 0; }

.lg-sec {
  padding: 30px 32px;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  background: var(--lv-white);
  box-shadow: var(--lv-shadow);
  /* scroll-margin keeps a jumped-to heading clear of the sticky header. */
  scroll-margin-top: 96px;
}

.lg-sec + .lg-sec { margin-top: 20px; }

.lg-sec h2 {
  margin: 0 0 16px;
  font-size: clamp(1.28rem, 2.1vw, 1.55rem);
  line-height: 1.28;
  color: var(--lv-ink);
}

/* A short accent rule under each section heading, echoing .lv-hero-rule. */
.lg-sec h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 14px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--lv-accent) 0%, var(--lv-accent-2) 100%);
}

.lg-sec p {
  max-width: 74ch;
  margin: 0 0 14px;
  color: var(--lv-muted);
  font-size: 1.0125rem;
  line-height: 1.8;
}

.lg-sec p:last-child { margin-bottom: 0; }

.lg-sec a { color: var(--lv-accent-dk); font-weight: 500; }
.lg-sec a:hover { color: var(--lv-accent); }

/* Cue line that introduces a list ("Information may include:"). */
.lg-cue {
  margin-top: 20px !important;
  margin-bottom: 14px !important;
  color: var(--lv-ink-3) !important;
  font-weight: 500;
}

.lg-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}

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

.lg-list:last-child { margin-bottom: 0; }

.lg-list li {
  position: relative;
  padding-left: 22px;
  color: var(--lv-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.lg-list li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lv-accent);
  box-shadow: 0 0 0 3px rgba(46, 139, 255, .14);
}

/* ---------- Info cards (About / Contact) ---------- */

.lg-info-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.lg-info-grid li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius-sm);
  background: var(--lv-white);
  box-shadow: 0 10px 30px rgba(5, 9, 14, .05);
  color: var(--lv-text);
  font-size: .99rem;
  line-height: 1.55;
  transition: transform .3s var(--lv-ease), box-shadow .3s var(--lv-ease), border-color .3s;
}

.lg-info-grid li:hover {
  transform: translateY(-3px);
  border-color: rgba(46, 139, 255, .3);
  box-shadow: 0 18px 44px rgba(5, 9, 14, .1);
}

.lg-info-grid i {
  flex: none;
  margin-top: .16em;
  color: var(--lv-accent);
  font-size: 1.05rem;
}

/* --- Contact details block --- */

.lg-contact-card {
  padding: 26px 28px;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  background:
    radial-gradient(420px 200px at 92% 0%, rgba(46, 139, 255, .07) 0%, transparent 64%),
    var(--lv-white);
  box-shadow: var(--lv-shadow);
}

.lg-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.lg-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--lv-text);
  font-size: 1.02rem;
  line-height: 1.6;
}

.lg-contact-list i {
  flex: none;
  margin-top: .2em;
  color: var(--lv-accent);
}

.lg-contact-list a { color: var(--lv-accent-dk); font-weight: 600; word-break: break-word; }
.lg-contact-list a:hover { color: var(--lv-accent); }

/* Hook for hiding a redundant on-page address line. Legal pages show the
   address once, in the shared footer; if a contact block ever gains an
   address line, adding this class removes it from view without removing it
   from the DOM. About Us / Contact Us deliberately do NOT use it. */
.lg-contact-address { display: none !important; }

/* ---------- Trust banner (Contact Us) ---------- */

.lg-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  border-radius: var(--lv-radius);
  box-shadow: var(--lv-shadow-lg);
}

.lg-banner img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The source photo's subject sits left of centre; bias the crop so the
     technician stays in frame as the banner narrows. */
  object-position: 32% 46%;
}

.lg-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(8, 12, 18, .94) 0%,
    rgba(8, 12, 18, .78) 34%,
    rgba(8, 12, 18, .28) 68%,
    rgba(8, 12, 18, .1) 100%
  );
}

.lg-banner-caption { padding: 34px 34px 32px; }

.lg-banner-slogan {
  max-width: 26ch;
  margin: 0 0 20px;
  font-family: var(--lv-head);
  font-size: clamp(1.32rem, 2.5vw, 1.9rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.028em;
  color: var(--lv-white);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}

/* ---------- Responsive ---------- */

@media (max-width: 1199.98px) {
  .lg-doc-grid { grid-template-columns: 236px minmax(0, 1fr); gap: 32px; }
}

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

  .lg-doc { padding: 64px 0 72px; }

  /* Below lg the TOC stops being a rail: it sits above the prose as a
     normal, fully expanded card so it can't trap a scroll on touch. */
  .lg-doc-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  .lg-toc { position: static; top: auto; }
  .lg-toc-list { max-height: none; overflow-y: visible; }

  .lg-banner { min-height: 300px; }
}

@media (max-width: 767.98px) {
  .lg-sec { padding: 24px 22px; }
  .lg-sec p { font-size: .99rem; }

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

  .lg-contact-card { padding: 22px 20px; }

  .lg-banner { min-height: 260px; }
  .lg-banner-caption { padding: 24px 22px 22px; }
}

@media (max-width: 575.98px) {
  .lg-toc { padding: 18px 16px; }
  .lg-info-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .lg-info-grid li { transition: none; }
  .lg-info-grid li:hover { transform: none; }
}