/* ==================================================================
   CUSTOM SUNROOF INSTALLATION + HEADLINER LANDING PAGES
   Created 2026-09-06 for the 7-page bulk package.

   Scope: body.cs on the six vehicle pages, body.cs-hl on the headliner page.
   One class per page, matching how every other key in sk_frozen_body_class()
   works. Component rules use the unique .cs- prefix, which no approved page
   carries, so they cannot reach any existing page.

   These are Google Ads / conversion landing pages, not article pages:
   one wide approved graphic, a short confirming headline, two service
   blocks, and a close. No cards, no badges, no decorative chrome, and
   no body Call/Text controls — the header and footer already carry the
   only Call and Text controls on the site.

   Depends on home.css for the design tokens (--red, --charcoal, --cream,
   --line, --font-serif) plus .wrap, the header and the footer. Depends on
   pages.css for .breadcrumb only. It deliberately does NOT load
   legacy-pages.css: none of the .kh-* landing furniture is used here, and
   keeping that 249KB sheet off an ad landing page is worth the separation.
   ================================================================== */

/* ---------- page ground ---------- */
body.cs,
body.cs-hl{
  background:var(--white);
}

/* ---------- 1. WIDE APPROVED GRAPHIC ----------
   The graphic is the hero. It runs the full width of the viewport with no
   crop, no wash, no overlay and no text on top of it — the artwork already
   carries the vehicle name and the "Custom Sunroof Installation" line, and
   it is approved as supplied. aspect-ratio holds the box before the file
   decodes so nothing below it jumps. */
.cs-banner{
  width:100%;
  margin:0;
  line-height:0;
  background:var(--gray-light);
}
.cs-banner img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1774 / 887;
}
body.cs-hl .cs-banner img{ aspect-ratio:1942 / 809; }

/* ---------- 2. THE ANSWER, IMMEDIATELY ----------
   Everything a visitor needs in the first screen after the graphic: what
   this page is, and that the answer to their question is yes. */
.cs-intro{
  padding:44px 0 8px;
}
.cs-intro .breadcrumb{ margin-bottom:22px; }

.cs-kicker{
  margin:0 0 14px;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--red);
}
.cs-intro h1{
  margin:0;
  font-family:var(--font-serif);
  font-size:clamp(2rem, 4.4vw, 3.35rem);
  line-height:1.1;
  letter-spacing:-0.015em;
  color:var(--charcoal);
  max-width:20ch;
}
.cs-intro h1 .accent{ color:var(--red); }

.cs-rule{
  width:72px; height:4px; border-radius:2px;
  background:var(--red);
  margin:26px 0 24px;
}

.cs-lede{
  margin:0;
  max-width:62ch;
  font-size:1.18rem;
  line-height:1.62;
  color:var(--charcoal);
}
.cs-lede strong{ color:var(--charcoal); font-weight:700; }

/* ---------- 3. SECTIONS ---------- */
.cs-section{ padding:52px 0; }
.cs-section.alt{ background:var(--cream); border-block:1px solid var(--line); }
.cs-section:last-of-type{ padding-bottom:64px; }

.cs-h2{
  margin:0 0 10px;
  font-family:var(--font-serif);
  font-size:clamp(1.5rem, 2.5vw, 2.05rem);
  line-height:1.22;
  color:var(--charcoal);
  max-width:26ch;
}
.cs-h2 .accent{ color:var(--red); }

/* 2026-09-07 READABILITY: 1.05rem computed to 16.8px, under the 17-18px
   target for a paragraph set in the softer charcoal. 1.10rem = 17.6px. */
.cs-sub{
  margin:0 0 28px;
  max-width:62ch;
  font-size:1.10rem;
  line-height:1.62;
  color:var(--charcoal-soft);
}

/* ---------- 4. PLAIN SERVICE LIST ----------
   A rule-separated list, not a grid of cards. Two columns only where there
   is genuinely room for them. */
.cs-list{
  list-style:none;
  margin:0; padding:0;
  border-top:1px solid var(--line);
  max-width:960px;
}
.cs-list li{
  padding:15px 0 15px 30px;
  border-bottom:1px solid var(--line);
  position:relative;
  /* 2026-09-07 READABILITY: 1.04rem computed to 16.64px. These rows carry the
     installation and Custom Interior detail - the most-read text on the page -
     so they move to 1.08rem = 17.28px, and the leading opens 1.55 -> 1.6. */
  font-size:1.08rem;
  line-height:1.6;
  color:var(--charcoal);
}
.cs-list li::before{
  content:"";
  position:absolute; left:2px; top:24px;
  width:9px; height:9px; border-radius:50%;
  background:var(--red);
}
.cs-list li b{ font-weight:700; }

@media (min-width:860px){
  .cs-list--2col{
    columns:2;
    column-gap:52px;
  }
  .cs-list--2col li{ break-inside:avoid; }
}

/* ---------- 5. THE INCLUDED-HEADLINER STATEMENT ----------
   Called out because it is the single most commonly asked question about a
   custom install, and because it is a genuine inclusion rather than a
   promotion. A left rule, not a badge or a coloured box. */
.cs-note{
  margin:30px 0 0;
  padding:20px 0 20px 24px;
  border-left:4px solid var(--red);
  max-width:66ch;
  font-size:1.09rem;
  line-height:1.6;
  color:var(--charcoal);
}
.cs-note strong{ font-weight:700; }

/* The scope-limit note on the interior section uses the same shape in a
   quieter colour: it is a clarification, not a headline. */
/* 2026-09-07 READABILITY: 1.02rem computed to 16.32px. Quieter than .cs-note
   by design, but it still has to be readable: 1.05rem = 16.8px keeps the
   hierarchy (below .cs-note's 17.44px) and clears the 16-17px target. */
.cs-note--quiet{
  border-left-color:var(--line);
  color:var(--charcoal-soft);
  font-size:1.05rem;
}

/* ---------- 6. CLOSE ---------- */
.cs-close{
  padding:52px 0 66px;
  border-top:1px solid var(--line);
}
.cs-close p{
  margin:0;
  max-width:60ch;
  font-size:1.1rem;
  line-height:1.62;
  color:var(--charcoal);
}
.cs-close p + p{ margin-top:14px; }
.cs-close a{
  color:var(--red);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- 7. RELATED LINKS ----------
   Plain inline links, no tiles. */
.cs-related{
  margin:26px 0 0; padding:0;
  list-style:none;
  display:flex; flex-wrap:wrap; gap:10px 26px;
}
.cs-related a{
  font-size:1rem;
  color:var(--charcoal);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--line);
}
.cs-related a:hover{ color:var(--red); text-decoration-color:var(--red); }

/* ---------- 8. RESPONSIVE ---------- */
@media (max-width:860px){
  .cs-intro{ padding:32px 0 4px; }
  .cs-intro h1{ max-width:none; }
  .cs-lede{ font-size:1.08rem; }
  .cs-section{ padding:40px 0; }
  .cs-section:last-of-type{ padding-bottom:48px; }
  .cs-note{ padding:16px 0 16px 18px; font-size:1.04rem; }
  .cs-close{ padding:40px 0 52px; }
}

/* 2026-09-07 READABILITY: this block held the only text on the six pages that
   fell BELOW 16px - .cs-list li computed to 15.84px at 390px, which is where
   the "too tiny" report came from. The lede rose with it so the two keep their
   relationship. The h1 and h2 are untouched. */
@media (max-width:420px){
  .cs-intro h1{ font-size:1.72rem; }
  .cs-lede{ font-size:1.07rem; }              /* was 1.02rem = 16.32px -> 17.12px */
  .cs-list li{ font-size:1.04rem; padding-left:26px; }  /* was 0.99rem = 15.84px -> 16.64px */
  .cs-h2{ font-size:1.36rem; }
}


/* ==================================================================
   9. CUSTOM INTERIOR GRAPHIC                            (2026-09-06)
   One approved wide graphic per vehicle inside the "Complete Custom
   Interior Services" section. Shown whole and unmodified — no crop, no
   wash, no overlay, no text on top; each artwork carries its own
   wordmark.

   It breaks out of .wrap to a near-full-bleed width using the same
   technique the approved Vehicle Makes region dashboard uses
   (92vw, capped, centred), so the section reads as strongly as the hero
   without a second hard edge-to-edge image fighting it.

   Replaces the five-icon illustration band, removed 2026-09-06 at the
   owner's request once the real interior graphics were approved.
   ================================================================== */
.cs-interior-art{
  margin:30px 0 34px;
  line-height:0;
  background:var(--gray-light);
  border-radius:2px;
  overflow:hidden;
}
.cs-interior-art img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1944 / 809;
}

@media (min-width:901px){
  .cs-interior-art{
    width:92vw;
    max-width:1400px;
    margin-left:50%;
    margin-right:0;
    transform:translateX(-50%);
  }
}

@media (max-width:900px){
  .cs-interior-art{ margin:24px 0 28px; }
}