/* ==========================================================
   Sunroof King — Interior Page Styles
   Loaded AFTER home.css on every page except index.html.
   Reuses home.css tokens/classes (btn, eyebrow-rule, svc-card,
   why-card, process-step, ct-banner, shop-info-card, trust-strip)
   and adds only the patterns those shared inner pages need.
   Never edit home.css from this file — the homepage is locked.
   ========================================================== */

/* ---------- Page hero (title band under header) ---------- */
.page-hero{ background:var(--gray-light); padding:52px 0 44px; border-bottom:1px solid var(--line); }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700; color:var(--charcoal-soft); margin-bottom:14px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--charcoal-soft); }
.breadcrumb a:hover{ color:var(--red); }
.breadcrumb .sep{ color:var(--line); }
.breadcrumb .current{ color:var(--red); }
.page-hero h1{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); max-width:760px; }
.page-hero .lede{ margin-top:14px; color:var(--charcoal-soft); font-size:1.05rem; max-width:660px; }
.page-hero-accent{ width:60px; height:4px; background:var(--red); border-radius:2px; margin:14px 0 16px; }
.page-hero-kicker{
  font-weight:800; text-transform:uppercase; letter-spacing:0.06em; font-size:0.8rem;
  color:var(--red); margin-bottom:10px;
}
.page-hero-kicker--orange{ color:var(--orange); }

/* ---------- Two-column page hero (copy + pills left, real photo right) ---------- */
.page-hero-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center; }
.page-hero-pills{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.page-hero-pill{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--white); border:1.5px solid rgba(242,96,12,0.32); border-radius:999px;
  padding:9px 20px 9px 15px; font-size:0.9rem; font-weight:700; color:var(--charcoal);
}
.page-hero-pill svg{ width:18px; height:18px; color:var(--orange); flex-shrink:0; }
.page-hero-image{
  background:var(--white); border-radius:22px; padding:10px;
  box-shadow:var(--shadow-md); border:1px solid var(--line);
}
.page-hero-image-inner{ border-radius:14px; overflow:hidden; aspect-ratio:4/3; }
.page-hero-image-inner img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Glass Replacement page hero photo ONLY: portrait source, shown uncropped.
   Deliberately a separate class from .page-hero-image/-inner above so Pages #1-3 and
   the Services hero (which use the 4/3 cover-cropped version) are never affected. ---------- */
.page-hero-portrait-frame{
  max-width:440px; margin:0 auto; background:var(--white); border-radius:22px; padding:10px;
  box-shadow:var(--shadow-md); border:1px solid var(--line);
}
.page-hero-portrait-frame img{ width:100%; height:auto; object-fit:contain; display:block; border-radius:14px; }

/* ---------- Shade Repair (Page #5) hero photo ONLY: same size/position as
   .page-hero-portrait-frame above, but no white padding/border, since this
   specific source photo already has its own border baked in. Rounded corners
   + a subtle shadow only. Separate class so no other page is affected. ---------- */
.page-hero-portrait-bare{ max-width:440px; margin:0 auto; }
.page-hero-portrait-bare img{ width:100%; height:auto; object-fit:contain; display:block; border-radius:22px; box-shadow:var(--shadow-sm); }

/* ---------- Problem category grid (compact scannable summary near a page hero) ---------- */
.problem-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; max-width:840px; margin:28px auto 0; }
.problem-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:22px 14px; text-align:center;
}
.problem-icon{
  width:44px; height:44px; border-radius:50%; background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
}
.problem-icon svg{ width:20px; height:20px; }
.problem-card h3{ font-family:var(--font-sans); font-size:0.86rem; font-weight:800; text-transform:uppercase; letter-spacing:0.01em; color:var(--charcoal); line-height:1.3; }

/* ---------- Custom Sunroof Types grid (icon info-cards; Custom Installation page only) ---------- */
.type-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.type-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:26px 22px; text-align:left;
}
.type-icon{
  width:42px; height:42px; border-radius:50%; background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.type-icon svg{ width:20px; height:20px; }
.type-card h3{ font-family:var(--font-sans); font-size:1rem; font-weight:800; text-transform:uppercase; letter-spacing:0.01em; color:var(--charcoal); margin-bottom:8px; line-height:1.3; }
.type-card p{ font-size:0.9rem; color:var(--charcoal-soft); line-height:1.6; }
.type-card--featured{
  grid-column:span 2; background:var(--cream); border:1.5px solid rgba(242,96,12,0.35); padding:30px 28px;
}
.type-card--featured .type-icon{ background:var(--orange); width:48px; height:48px; }
.type-card--featured .type-icon svg{ width:22px; height:22px; }
.type-card--featured h3{ font-size:1.15rem; }
.type-card--featured p{ font-size:0.95rem; }

/* ---------- Generic content section ---------- */
.content-section{ padding:64px 0; }
.content-section.alt{ background:var(--gray-light); }
.content-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.content-grid.reverse .content-photo{ order:-1; }
.content-photo{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--line); }
.content-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.content-copy h2{ font-size:1.7rem; margin-bottom:16px; }
.content-copy h3{ font-size:1.15rem; margin:22px 0 10px; }
.content-copy p{ color:var(--charcoal-soft); font-size:0.98rem; line-height:1.7; margin-bottom:14px; }

/* ---------- Checklist (symptoms, what's included, etc.) ---------- */
.check-list{ list-style:none; display:flex; flex-direction:column; gap:11px; margin:16px 0; }
.check-list li{ display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:var(--charcoal); line-height:1.5; }
.check-list li svg{ width:19px; height:19px; color:var(--red); flex-shrink:0; margin-top:2px; }

/* ---------- Full-width intro block (About / Services overview) ---------- */
.intro-block{ max-width:800px; margin:0 auto; text-align:center; }
.intro-block p{ color:var(--charcoal-soft); font-size:1.05rem; line-height:1.75; margin-bottom:16px; }

/* ---------- Specialty tag pills (compact alternative to a full icon grid) ---------- */
.specialty-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:820px; margin:0 auto; }
.specialty-pill{
  background:var(--white); border:1px solid var(--line); border-radius:999px;
  padding:10px 20px; font-size:0.88rem; font-weight:700; color:var(--charcoal); box-shadow:var(--shadow-sm);
}

/* ---------- Photo trio (three real photos side by side, e.g. shop/team/workspace) ---------- */
.photo-trio{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.photo-trio-item{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); aspect-ratio:4/3; }
.photo-trio-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-trio-caption{ text-align:center; color:var(--charcoal-soft); font-size:0.92rem; margin-top:22px; }

/* ---------- Services overview grid (reuses .svc-card visuals from home.css) ---------- */
.service-overview-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.service-overview-grid .svc-card{ text-decoration:none; }
.service-overview-grid .svc-body p.svc-link{
  margin-top:10px; color:var(--red); font-weight:700; font-size:0.82rem;
  text-transform:uppercase; letter-spacing:0.03em;
}

/* ---------- FAQ accordion ---------- */
.faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.faq-question{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; font-family:var(--font-sans); font-weight:700; font-size:1rem; color:var(--black);
}
.faq-question .faq-icon{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--gray-light); color:var(--red);
  display:flex; align-items:center; justify-content:center; transition:transform 0.2s ease, background 0.2s ease;
}
.faq-question .faq-icon svg{ width:14px; height:14px; }
.faq-item.is-open .faq-question .faq-icon{ background:var(--red); color:var(--white); transform:rotate(45deg); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height 0.25s ease; }
.faq-answer-inner{ padding:0 24px 20px; color:var(--charcoal-soft); font-size:0.95rem; line-height:1.65; }
.faq-item.is-open .faq-answer{ max-height:400px; }

/* ---------- Gallery ---------- */
/* ---------- Curated gallery: one 3 x 3 grid of the strongest real photos ---------- */
.curated-gallery{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:24px; margin-top:34px;
}
.curated-item{ margin:0; }
.curated-link{
  display:block; aspect-ratio:1/1; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:var(--shadow-sm); background:var(--cream);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.curated-link:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.curated-link img{ width:100%; height:100%; object-fit:cover; display:block; }
.curated-item figcaption{
  margin-top:11px; text-align:center;
  font-size:0.82rem; font-weight:700; line-height:1.4;
  color:var(--charcoal-soft); letter-spacing:0.01em;
}

/* Curated gallery responsive: 3 cols desktop, 2 cols tablet, 1 col phone so the
   work stays large enough to actually see. */
@media (max-width: 900px){
  .curated-gallery{ grid-template-columns:repeat(2, 1fr); gap:18px; }
}
@media (max-width: 560px){
  .curated-gallery{
    grid-template-columns:1fr; gap:20px;
    max-width:400px; margin-left:auto; margin-right:auto;
  }
}

/* ---------- Gallery hero: intro copy left (~60%), real shop video right (~40%) ---------- */
.gallery-hero-grid{ grid-template-columns:1.5fr 1fr; gap:44px; align-items:center; }
.gallery-hero-copy .lede{
  font-weight:800; color:var(--charcoal);
  font-size:1.08rem; margin-top:12px; margin-bottom:18px;
}
.gallery-hero-copy p:not(.lede){
  color:var(--charcoal-soft); font-size:0.97rem; line-height:1.72; margin-bottom:14px;
}
.gallery-hero-copy p:last-child{ margin-bottom:0; }

/* ---------- Gallery video (real shop clip) ----------
   Portrait 9:16 clip shown with its own custom poster image.
   No autoplay - playback starts only on user action. */
.gallery-hero-video{ display:flex; flex-direction:column; align-items:center; }
.gallery-video-frame{
  position:relative; width:100%; max-width:340px;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-md);
  background:var(--charcoal); aspect-ratio:9/16;
}
.gallery-video-frame--hero{
  max-width:300px;
  border:3px solid var(--orange); border-radius:18px;
  box-shadow:0 10px 28px rgba(23,20,18,0.16);
}
.gallery-video-frame video{
  width:100%; height:100%; display:block; object-fit:cover; background:var(--charcoal);
}
/* Transparent click target over the poster. The poster artwork already carries
   its own play graphic, so nothing visible is drawn on top of it. Mirrors the
   approved Page #6 hero video behaviour. */
.gallery-video-play{ display:none; }
.gallery-video-frame.js-overlay .gallery-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;
}
.gallery-video-frame.js-overlay .gallery-video-play:hover{
  background:rgba(242,96,12,0.12);
}
.gallery-video-frame.js-overlay .gallery-video-play:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:-8px;
}
.gallery-video-frame.is-playing .gallery-video-play{ display:none; }
.gallery-video-caption{
  text-align:center; color:var(--charcoal-soft);
  font-size:0.9rem; margin-top:14px; max-width:300px;
}

@media (max-width: 900px){
  .gallery-hero-grid{ grid-template-columns:1fr; gap:30px; }
  .gallery-hero-video{ order:2; }
  .gallery-hero-copy{ order:1; }
}
@media (max-width: 640px){
  .gallery-video-frame--hero{ max-width:260px; }
}

/* ---------- Reviews placeholder ---------- */

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch; }
.contact-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:30px 32px;
}
.contact-card h3{ font-size:1.2rem; margin-bottom:18px; }
.contact-photo{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--line); }
.contact-photo img{ width:100%; height:100%; object-fit:cover; display:block; min-height:320px; }

/* ---------- Service detail hero (photo band) ---------- */
.service-hero{ background:var(--white); padding:0; }
.service-hero-photo{ aspect-ratio:21/8; overflow:hidden; }
.service-hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Contained/medium hero-support photo (does not go full-bleed) ---------- */
.hero-support-wrap{ padding:0 0 56px; }
.hero-support-photo{
  max-width:640px; margin:0 auto; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radius); box-shadow:var(--shadow-md); border:1px solid var(--line);
}
.hero-support-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Simple mini trust strip reused inside service pages ---------- */
.mini-trust-wrap{ padding-bottom:52px; }
.mini-trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px;
  background:var(--gray-light); border-radius:var(--radius); padding:22px 26px; margin-top:8px;
}
.mini-trust .trust-item{ display:flex; align-items:center; gap:9px; }
.mini-trust .trust-item svg{ width:18px; height:18px; color:var(--red); flex-shrink:0; }
.mini-trust .trust-item span{ font-size:0.82rem; font-weight:700; color:var(--charcoal); text-transform:uppercase; letter-spacing:0.03em; }

/* ---------- Placeholder / editorial note box (never shown as a "review" — for internal TODOs) ---------- */
.editor-note{
  background:#FFF8E8; border:1px dashed #D9A400; border-radius:10px;
  padding:14px 18px; font-size:0.82rem; color:#6B5300; margin:18px 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px){
  .service-overview-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 900px){
  .content-grid{ grid-template-columns:1fr; }
  .content-grid .content-photo{ order:-1; }
  .page-hero-grid{ grid-template-columns:1fr; }
  .page-hero-image{ order:-1; }
  .page-hero-portrait-frame{ order:-1; max-width:300px; }
  .page-hero-portrait-bare{ order:-1; max-width:300px; }
  .contact-grid{ grid-template-columns:1fr; }
  .problem-grid{ grid-template-columns:repeat(2, 1fr); }
  .type-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 640px){
  .page-hero{ padding:40px 0 32px; }
  .content-section{ padding:44px 0; }
  .mini-trust-wrap{ padding-bottom:36px; }
  .mini-trust{ gap:10px 20px; padding:18px 20px; }
  .problem-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .type-grid{ grid-template-columns:1fr; }
  .type-card--featured{ grid-column:span 1; }
  .hero-support-photo{ max-width:100%; }
  .hero-support-wrap{ padding-bottom:40px; }
  .service-overview-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .faq-question{ padding:16px 18px; font-size:0.92rem; }
  .faq-answer-inner{ padding:0 18px 16px; }
  .contact-card{ padding:24px 22px; }
  .photo-trio{ grid-template-columns:1fr; gap:14px; }
}

/* ============================================================
   REVIEWS PAGE
   .reviews-hero-grid  - two-column hero, copy left / real photo right
   .reviews-note       - small honest placeholder shown until verified
                         customer reviews are supplied
   .work-links-grid    - 4 destination cards (Gallery / YouTube / IG / TikTok)
   .feedback-card      - single centred "Had Work Done Here?" card
   .review-card        - markup ready for real reviews when added
   ============================================================ */
.reviews-hero-grid{ grid-template-columns:1.5fr 1fr; gap:44px; align-items:center; }
.reviews-hero-copy .lede{
  font-weight:800; color:var(--charcoal);
  font-size:1.08rem; margin-top:12px; margin-bottom:18px;
}
.reviews-hero-copy p:not(.lede){
  color:var(--charcoal-soft); font-size:0.97rem; line-height:1.72; margin-bottom:14px;
}
.reviews-hero-copy p:last-child{ margin-bottom:0; }
.reviews-hero-photo{ display:flex; justify-content:center; }
.reviews-hero-photo a{
  display:block; width:100%; max-width:420px;
  border-radius:18px; overflow:hidden;
  box-shadow:0 10px 28px rgba(23,20,18,0.16);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.reviews-hero-photo a:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.reviews-hero-photo img{ width:100%; height:auto; display:block; }

.reviews-section{ padding-bottom:22px; }
.reviews-note{
  max-width:620px; margin:0 auto; text-align:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:26px 28px;
}
.reviews-note h2{
  font-family:var(--font-sans); font-size:1.05rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.02em; color:var(--charcoal); margin-bottom:8px;
}
.reviews-note p{ color:var(--charcoal-soft); font-size:0.95rem; line-height:1.65; }

.work-links-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:30px; }
.work-link-card{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:24px 22px 22px;
  text-decoration:none; color:inherit;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.work-link-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.work-link-card h3{
  font-family:var(--font-sans); font-size:1rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.01em; color:var(--charcoal);
  margin-bottom:8px; line-height:1.3;
}
.work-link-card p{ font-size:0.9rem; color:var(--charcoal-soft); line-height:1.6; flex:1; }
.work-link-card .svc-more{ margin-top:12px; }

.feedback-card{
  max-width:680px; margin:0 auto; text-align:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:32px 30px;
}
.feedback-card .type-icon{ margin:0 auto 14px; }
.feedback-card h2{ font-size:1.3rem; margin-bottom:12px; }
.feedback-card p{ color:var(--charcoal-soft); font-size:0.98rem; line-height:1.7; }
.feedback-contact{ margin-top:16px; font-weight:700; }
.feedback-contact a{ color:var(--red); }
.feedback-contact a:hover{ text-decoration:underline; }
.feedback-sep{ color:var(--line); margin:0 10px; }

.review-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-bottom:30px; }
.review-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:26px 24px; margin:0;
}
.review-card blockquote{ margin:0 0 14px; color:var(--charcoal); font-size:0.96rem; line-height:1.7; }
.review-card figcaption{
  font-size:0.82rem; font-weight:800; text-transform:uppercase;
  letter-spacing:0.03em; color:var(--charcoal-soft);
}

@media (max-width: 1100px){
  .work-links-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 900px){
  .reviews-hero-grid{ grid-template-columns:1fr; gap:30px; }
  .reviews-hero-copy{ order:1; }
  .reviews-hero-photo{ order:2; }
  .review-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px){
  .work-links-grid{ grid-template-columns:1fr; }
  .review-grid{ grid-template-columns:1fr; }
  .reviews-note{ padding:22px 20px; }
  .feedback-card{ padding:26px 22px; }
  .feedback-sep{ display:none; }
  .feedback-contact a{ display:block; margin:4px 0; }
}

/* ============================================================
   FAQ PAGE
   Two-column hero matching the approved Gallery / Reviews heroes.
   Deliberately its own selectors (not shared with .reviews-hero-*)
   so the frozen Reviews page can never be affected by FAQ edits.
   ============================================================ */
.faq-hero-grid{ grid-template-columns:1.5fr 1fr; gap:44px; align-items:center; }
.faq-hero-copy .lede{
  font-weight:800; color:var(--charcoal);
  font-size:1.08rem; margin-top:12px; margin-bottom:18px;
}
.faq-hero-copy p:not(.lede){
  color:var(--charcoal-soft); font-size:0.97rem; line-height:1.72; margin-bottom:14px;
}
.faq-hero-copy p:last-child{ margin-bottom:0; }
.faq-hero-copy a{ color:var(--red); font-weight:700; }
.faq-hero-copy a:hover{ text-decoration:underline; }
.faq-hero-photo{ display:flex; justify-content:center; }
/* Owner artwork is shown whole - height:auto with no object-fit, so the
   signature and text along the bottom edge are never cropped. */
.faq-hero-photo img{
  width:100%; max-width:420px; height:auto; display:block;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(23,20,18,0.16);
}

/* Answer links to the service detail pages */
.faq-answer-inner a{ color:var(--red); font-weight:700; }
.faq-answer-inner a:hover{ text-decoration:underline; }

@media (max-width: 900px){
  .faq-hero-grid{ grid-template-columns:1fr; gap:30px; }
  .faq-hero-copy{ order:1; }
  .faq-hero-photo{ order:2; }
}

/* Mobile: show the shop photo whole. The 320px min-height on .contact-photo img
   crops ~43% of its width. .contact-photo is used by about.html only —
   contact.html moved to its own .cn- classes. */
@media (max-width: 640px){
  .contact-photo img{ min-height:0; height:auto; aspect-ratio:16/9; }
}