/* ══════════════════════════════════════════════════════════════════════════
   SUPERIOR MOBILE AUTO GLASS — static / info pages
   (About Us · Contact Us · Privacy Policy · Terms & Conditions · Wiki)

   Loaded AFTER homepage.css and location.css by _info_page.php.

   homepage.css owns every token, the buttons, the form sheet, .band/.panel/
   .blist/.card and the framed .hero-media image. location.css owns the
   image-less hero, the .lblocks rhythm and the closing CTA band. This file
   adds ONLY what neither of them has: the document meta line, the contents
   index, H4 sub-blocks, the verbatim multi-line contact block and the
   image + copy split. Nothing here restyles a shared component.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── HERO ──────────────────────────────────────────────────────────────────
   Info H1s are full sentences — the wiki's runs to three lines — so they sit
   a step below the location scale and get a fourth entry delay. */
.hero--info h1{font-size:clamp(31px,3.9vw,54px);line-height:1.04}
.hero--info h1 .l4>span{animation-delay:1.22s}

/* "Last Updated: …" — the document's own line, set as a label above the H1
   so it reads as document metadata rather than as body copy. */
.info-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber);margin-bottom:16px;
  opacity:0;animation:fadeUp .9s var(--ease) .86s forwards}

/* These documents carry no section lede, so the home page's heading/lede
   split would leave a permanent void on the right. One column instead. */
.info-page .sec-head{grid-template-columns:1fr}

/* A list block is wrapped in its own reveal element here, so the lead-in and
   its panel are no longer siblings of .lblocks — restate their pairing. */
.info-page .lblocks .leadin{margin-top:0}
.info-page .lblocks .leadin+.panel{margin-top:16px}

/* The intro band can carry more than one paragraph on these pages. */
.loc-intro p+p{margin-top:22px}

/* Legal and reference copy is read, not skimmed: hold the measure. */
.legal-page .lblocks .p{max-width:74ch}


/* Sentence-length bullets (the legal pages write theirs as full clauses)
   drop the home page's mono-uppercase chip voice and keep only its marker —
   set in caps at 11px they read as shouting, and legal copy has to be read. */
.blist--prose li{font-family:var(--body);font-size:14.5px;letter-spacing:0;
  text-transform:none;line-height:1.62;color:var(--chalk-2);
  align-items:flex-start;padding:12px 2px}
.blist--prose li::before{margin-top:.62em}


/* ── CONTENTS INDEX ────────────────────────────────────────────────────────
   Navigation only, built from the page's own H2s. A 20-section reference
   page is unusable without one; it adds no wording of its own. */
.info-toc-band{padding-top:clamp(40px,5vh,64px);padding-bottom:0}
.info-toc{padding:26px 30px}
.info-toc ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:0 38px}
.info-toc li{border-bottom:1px solid var(--line-soft)}
.info-toc a{display:flex;align-items:baseline;gap:14px;padding:11px 2px;
  font-size:13.5px;line-height:1.5;color:var(--chalk-2);
  transition:color .3s var(--ease)}
.info-toc a .n{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color:var(--amber);flex:none}
@media(hover:hover){.info-toc a:hover{color:var(--chalk)}}
@media(max-width:560px){.info-toc{padding:20px 18px}}


/* ── H4 SUB-BLOCKS ─────────────────────────────────────────────────────────
   The wiki nests a fourth heading level ("Main Characteristics", "Examples")
   under its H3s. Indented behind a hairline so the depth is visible without
   inventing another card. */
.info-sub{margin-top:24px;padding-left:22px;border-left:1px solid var(--line)}
.info-sub+.info-sub{margin-top:28px}
.info-sub h4{font-family:var(--grot);font-weight:700;text-transform:uppercase;
  letter-spacing:-.012em;font-size:clamp(15px,1.5vw,17px);line-height:1.15;
  color:var(--chalk);margin-bottom:12px}
.info-sub .p+.panel,.info-sub .leadin+.panel{margin-top:16px}
.info-sub .panel{padding:24px 26px}
@media(max-width:560px){
  .info-sub{padding-left:16px}
  .info-sub .panel{padding:20px 16px}
}


/* ── VERBATIM MULTI-LINE BLOCK ─────────────────────────────────────────────
   Business name / phone / hours as the documents write them: one line per
   line, nothing merged, nothing added. A label before the colon is set in the
   mono voice so the block scans like a docket entry. */
.info-lines{border-top:1px solid var(--line);max-width:56ch}
.info-lines li{display:flex;align-items:baseline;gap:16px;padding:12px 2px;
  border-bottom:1px solid var(--line-soft);
  font-size:14.5px;line-height:1.6;color:var(--chalk-2)}
.info-lines li b{font-family:var(--mono);font-weight:500;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--amber);
  flex:none;min-width:72px}
.info-lines li>span{min-width:0}
@media(max-width:560px){.info-lines li{flex-direction:column;gap:4px}}

/* Legal/static pages show the site address once, in the shared footer. If a
   document's own contact block ever carries an Address line it stays in the
   DOM — it is simply not rendered on those pages. */
.legal-page .info-contact-address{display:none !important}


/* ── IMAGE + COPY SPLIT ────────────────────────────────────────────────────
   About Us and Contact Us are otherwise unbroken text. The picture is the
   home page's framed .hero-media card, unchanged — only the split is new.
   Decorative: it never replaces or alters a word of the document. */
/* The two columns are centred on each other, not top-aligned: these sections
   vary from two paragraphs to a paragraph + list, and a top-aligned short
   column leaves the copy stranded against the top of a tall square photo.
   The section head rides inside the copy column (see _info_page.php), so the
   heading travels down with its own copy and the photo centres on the pair —
   no gap opens between a heading and the text belonging to it. */
.info-media{display:grid;grid-template-columns:1.06fr .94fr;gap:0 46px;
  align-items:center}
.info-media-copy{min-width:0}
.info-media .hero-media{margin-top:0;width:100%;max-width:480px}
.info-media--right .hero-media{margin-left:auto}
.info-media--left .info-media-copy{order:2}
.info-media--left .hero-media{order:1}
@media(max-width:900px){
  .info-media{grid-template-columns:1fr;gap:0}
  .info-media--left .info-media-copy,.info-media--left .hero-media{order:0}
  .info-media .hero-media{margin-top:36px;margin-left:0;max-width:520px}
}


/* ── CLOSING CTA ───────────────────────────────────────────────────────────
   The document's own closing block, followed by the site's standard action
   pair. No CTA wording is invented here. */
.info-cta .lblocks{margin-top:clamp(28px,3.4vh,42px)}
.info-cta .hero-acts{margin-top:36px}


/* Reduced motion: content is present, it simply does not travel. */
@media(prefers-reduced-motion:reduce){
  .info-meta{animation:none;opacity:1}
}