/* ============================================================
   LEGACY SEO PAGES  (vehicle-specific + specialty pages)

   Used by:
     toyota-camry-sunroof-repair.html
     ford-sunroof.html
     mercedes-panoroof-fix-recommended.html
     shuttered-panoramic-sunroof-replacement.html

   SCOPE: every selector is prefixed .lg- and lives in this file
   alone, so the frozen Gallery / Reviews / FAQ / Knowledge Center /
   Contact pages and the shared header + footer are never affected.
   Colours, radii and shadows come from the existing site tokens.
   ============================================================ */

/* ---------- Hero: copy left, contained real photo right ---------- */
.lg-hero-grid{ grid-template-columns:1.5fr 1fr; gap:44px; align-items:center; }
.lg-kicker{
  font-family:var(--font-sans);
  font-size:0.76rem; font-weight:800; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--orange); margin-bottom:12px;
}
.lg-hero-copy .lede{
  font-weight:800; color:var(--charcoal);
  font-size:1.06rem; margin-top:12px; margin-bottom:16px;
}
.lg-hero-copy p:not(.lede):not(.lg-kicker){
  color:var(--charcoal-soft); font-size:0.97rem; line-height:1.72; margin-bottom:14px;
}
.lg-hero-photo{ display:flex; justify-content:center; }
/* Contained, never a billboard. Shown whole so nothing important is cropped. */
.lg-hero-photo img{
  width:100%; max-width:430px; height:auto; display:block;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(23,20,18,0.15);
}

/* ---------- Symptom list ---------- */
.lg-symptoms{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:14px; margin-top:26px;
}
.lg-symptom{
  display:flex; gap:13px; align-items:flex-start;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:18px 20px;
}
.lg-symptom svg{
  width:20px; height:20px; color:var(--red);
  flex-shrink:0; margin-top:2px;
}
.lg-symptom span{ font-size:0.94rem; color:var(--charcoal); line-height:1.55; }

/* ---------- Numbered process steps ---------- */
.lg-steps{ counter-reset:lgstep; margin-top:26px; max-width:860px; }
.lg-step{
  counter-increment:lgstep;
  display:flex; gap:18px; align-items:flex-start;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.lg-step:last-child{ border-bottom:0; }
.lg-step::before{
  content:counter(lgstep);
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  background:var(--red); color:var(--white);
  font-family:var(--font-sans); font-weight:800; font-size:0.95rem;
  display:flex; align-items:center; justify-content:center;
}
.lg-step h3{
  font-family:var(--font-sans); font-size:0.95rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.02em;
  color:var(--charcoal); margin-bottom:5px;
}
.lg-step p{ font-size:0.95rem; color:var(--charcoal-soft); line-height:1.65; }

/* ---------- Body copy + model lists ---------- */
.lg-prose{ max-width:820px; }
.lg-prose p{
  color:var(--charcoal-soft); font-size:0.98rem;
  line-height:1.75; margin-bottom:15px;
}
.lg-prose p:last-child{ margin-bottom:0; }
.lg-prose a{ color:var(--red); font-weight:700; }
.lg-prose a:hover{ text-decoration:underline; }

.lg-models{
  display:flex; flex-wrap:wrap; gap:11px; margin-top:22px;
}
.lg-model{
  display:inline-flex; align-items:center;
  background:var(--white); border:1.5px solid rgba(242,96,12,0.32);
  border-radius:999px; padding:9px 18px;
  font-family:var(--font-sans); font-size:0.88rem; font-weight:700;
  color:var(--charcoal);
}

/* ---------- Two photos side by side, contained ---------- */
.lg-photo-pair{
  display:grid; grid-template-columns:1fr 1fr;
  gap:22px; max-width:900px; margin:30px auto 0;
}
.lg-photo{
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  aspect-ratio:4/3;
}
.lg-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.lg-photo-caption{
  text-align:center; color:var(--charcoal-soft);
  font-size:0.9rem; margin-top:16px;
}

/* ---------- Related service links ---------- */
.lg-related{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:18px; margin-top:28px;
}
.lg-related-card{
  display:block; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:22px 22px 20px;
  text-decoration:none; color:inherit;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.lg-related-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.lg-related-card h3{
  font-family:var(--font-sans); font-size:0.94rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.01em;
  color:var(--charcoal); margin-bottom:7px; line-height:1.3;
}
.lg-related-card p{ font-size:0.89rem; color:var(--charcoal-soft); line-height:1.6; }
.lg-related-card .lg-more{
  display:inline-block; margin-top:11px;
  font-size:0.8rem; font-weight:800; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--red);
}
.lg-related-card:hover .lg-more{ text-decoration:underline; }

/* ---------- Shop facts strip (plain info, not a promo banner) ---------- */
.lg-facts{
  max-width:860px; margin:0 auto;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:28px 30px;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:18px 30px;
}
.lg-fact{ display:flex; gap:13px; align-items:flex-start; }
.lg-fact svg{ width:20px; height:20px; color:var(--red); flex-shrink:0; margin-top:2px; }
.lg-fact div{ font-size:0.95rem; color:var(--charcoal-soft); line-height:1.6; }
.lg-fact strong{
  display:block; font-family:var(--font-sans);
  font-size:0.77rem; font-weight:800; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--charcoal); margin-bottom:3px;
}
.lg-facts a{ color:var(--red); font-weight:700; }
.lg-facts a:hover{ text-decoration:underline; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .lg-hero-grid{ grid-template-columns:1fr; gap:30px; }
  .lg-hero-copy{ order:1; }
  .lg-hero-photo{ order:2; }
  .lg-symptoms{ grid-template-columns:1fr; }
  .lg-related{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .lg-facts{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .lg-photo-pair{ grid-template-columns:1fr; gap:16px; max-width:420px; }
  .lg-facts{ padding:24px 22px; }
  .lg-step{ gap:14px; }
}

/* ============================================================
   CAMRY PAGE — real repair video in the hero + portrait photo trio
   Video behaviour mirrors the approved Page #6 / Gallery pattern:
   poster first, transparent click target, no autoplay, no sound
   until the visitor presses play.
   ============================================================ */
.lg-hero-video{ display:flex; justify-content:center; }
.lg-video-frame{
  position:relative; width:100%; max-width:300px;
  aspect-ratio:9/16; overflow:hidden;
  border:3px solid var(--orange); border-radius:18px;
  box-shadow:0 10px 28px rgba(23,20,18,0.16);
  background:var(--charcoal);
}
.lg-video-frame video{
  width:100%; height:100%; display:block;
  object-fit:cover; background:var(--charcoal);
}
/* Transparent click target. The poster artwork carries its own play graphic,
   so nothing visible is drawn on top of it. */
.lg-video-play{ display:none; }
.lg-video-frame.js-overlay .lg-video-play{
  display:block; position:absolute; inset:0;
  width:100%; height:100%;
  margin:0; padding:0; border:0;
  background:transparent; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:background 0.18s ease;
}
.lg-video-frame.js-overlay .lg-video-play:hover{ background:rgba(242,96,12,0.12); }
.lg-video-frame.js-overlay .lg-video-play:focus-visible{
  outline:3px solid var(--orange); outline-offset:-8px;
}
.lg-video-frame.is-playing .lg-video-play{ display:none; }

/* Three portrait photos. 3/4 matches the source files, so nothing is cropped. */
.lg-photo-trio{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:20px; max-width:840px; margin:30px auto 0;
}
.lg-photo-tall{
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  aspect-ratio:3/4;
}
.lg-photo-tall img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width: 900px){
  .lg-hero-video{ order:2; }
}
@media (max-width: 640px){
  .lg-video-frame{ max-width:260px; }
  .lg-photo-trio{ grid-template-columns:1fr; gap:16px; max-width:330px; }
}