/* ==========================================================
   Service pages — Buena Park Auto Glass

   Loaded AFTER homepage.css (see the $EXTRA_CSS hook in head.php),
   so it inherits the homepage "Precision Glass" tokens
   (--hp-ink, --hp-accent, --hp-ice, --hp-radius, --hp-shadow …)
   and only adds what the service layout needs on top:
   the hero variant, the H2/H3 detail + process grids, the FAQ
   accordion, and the CTA band card.
   ========================================================== */

/* ==========================================================
   Hero — reuses #hero.hero-section from homepage.css
   ========================================================== */

/* The homepage hero has 7 checklist items, so its last one spans
   both columns to fill the odd slot. Service checklists vary in
   length, so let every item keep its own cell here. */
#hero.service-hero .hero-checklist li:last-child {
  grid-column: auto;
}

#hero.service-hero .hero-checklist {
  margin-bottom: 2.1rem;
}

/* Service hero image is a product/scene shot rather than the
   homepage's portrait crop — keep it a touch wider and shorter. */
.service-hero .hero-img-frame img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* ==========================================================
   Inline prose links

   The docs anchor the brand name inside a body paragraph. main.css
   pins every <a> to 17px, which reads a size off from the copy it
   sits in, so inline links inherit their paragraph instead.
   ========================================================== */
.intro-content p a,
.section-head .section-lead a,
.svc-detail-card p a,
.svc-step-text a,
.svc-faq .accordion-body p a,
.svc-cta-card p a {
  font-size: inherit;
  font-weight: 600;
  color: var(--hp-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.25s ease;
}

.intro-content p a:hover,
.svc-detail-card p a:hover,
.svc-faq .accordion-body p a:hover {
  color: var(--hp-accent-deep);
}

/* On the dark bands the accent red is too low-contrast for body copy */
.section-head-dark .section-lead a,
.svc-step-text a,
.svc-cta-card p a {
  color: #ffffff;
}

.section-head-dark .section-lead a:hover,
.svc-step-text a:hover,
.svc-cta-card p a:hover {
  color: var(--hp-accent);
}

/* ==========================================================
   Intro + form section — vertical rhythm

   The intro copy is much shorter than the quote form beside it, so
   the row centres the two columns against each other instead of
   leaving the text stranded at the top of the form card.
   ========================================================== */
/* Trailing paragraph margin would push the optical centre up a line */
.intro-form-section .row.align-items-center .intro-content > p:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   Shared section shells
   ========================================================== */
.svc-section {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
  background:
    radial-gradient(65% 45% at 100% 0%, rgba(79, 195, 240, 0.07) 0%, rgba(79, 195, 240, 0) 60%),
    linear-gradient(180deg, var(--hp-light-bg) 0%, #ffffff 55%);
}

.svc-section-alt {
  background:
    radial-gradient(70% 55% at 0% 0%, rgba(var(--primary-color-rgb), 0.06) 0%, rgba(var(--primary-color-rgb), 0) 60%),
    linear-gradient(180deg, #ffffff 0%, var(--hp-light-bg) 100%);
}

.svc-section .container {
  position: relative;
  z-index: 1;
}

/* ==========================================================
   Detail cards — one per H3 block (mirrors .service-card)
   ========================================================== */
.svc-detail-card {
  position: relative;
  height: 100%;
  padding: 2.1rem 1.9rem 2rem;
  background: #ffffff;
  border: 1px solid rgba(8, 11, 18, 0.07);
  border-radius: var(--hp-radius-lg);
  box-shadow: var(--hp-shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.svc-detail-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--primary-color-rgb), 0.28);
  box-shadow: var(--hp-shadow);
}

/* Gradient hairline along the top edge, echoing .section-rule */
.svc-detail-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.9rem;
  right: 1.9rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--hp-accent) 0%, var(--hp-ice) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.svc-detail-card:hover::before {
  opacity: 1;
}

.svc-card-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.15rem;
  border-radius: 15px;
  font-size: 1.4rem;
  color: #fff;
  background: linear-gradient(140deg, var(--hp-accent) 0%, var(--hp-accent-deep) 100%);
  box-shadow: 0 12px 26px rgba(var(--primary-color-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.svc-detail-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.3px;
  color: var(--hp-lead-strong);
  margin-bottom: 0.85rem;
}

.svc-detail-card p {
  font-size: 0.99rem;
  line-height: 1.8;
  color: var(--hp-slate);
  margin-bottom: 1rem;
}

.svc-detail-card p:last-child {
  margin-bottom: 0;
}

/* Label a doc writes above a bullet run ("Common repair concerns include:").
   It is not a heading in the source, so it must not be styled as one. */
.svc-list-label,
.svc-section-note {
  max-width: 54rem;
  margin: 0 auto 1.4rem;
  text-align: center;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--hp-lead-strong);
}

.svc-section-note {
  font-weight: 400;
  line-height: 1.8;
  color: var(--hp-slate);
}

/* Bullet runs reuse the homepage credentials grid; on a service page they
   follow a label rather than a section head, so tighten the top gap. */
.svc-section .credentials-grid {
  margin-top: 0;
}

/* ==========================================================
   Process band (dark) — mirrors .whyus-section
   ========================================================== */
.svc-process-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
  background:
    radial-gradient(110% 80% at 85% 0%, rgba(var(--primary-color-rgb), 0.2) 0%, rgba(var(--primary-color-rgb), 0) 58%),
    radial-gradient(90% 70% at 0% 100%, rgba(79, 195, 240, 0.14) 0%, rgba(79, 195, 240, 0) 60%),
    linear-gradient(160deg, var(--hp-ink-3) 0%, var(--hp-ink-2) 45%, var(--hp-ink) 100%);
  color: #fff;
}

.svc-process-section .svc-process-grid-bg {
  position: absolute;
  inset: 0;
  background-image: var(--hp-grid);
  background-size: var(--hp-grid-size);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 80%);
  pointer-events: none;
  z-index: -1;
}

.svc-process-section .container {
  position: relative;
  z-index: 1;
}

.svc-step-card {
  position: relative;
  height: 100%;
  padding: 2.1rem 1.8rem 1.9rem;
  border-radius: var(--hp-radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.028) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.svc-step-card:hover {
  transform: translateY(-5px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(var(--primary-color-rgb), 0.45);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.svc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(140deg, var(--hp-accent) 0%, var(--hp-accent-deep) 100%);
  box-shadow: 0 10px 24px rgba(var(--primary-color-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.svc-step-title {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.2px;
  color: #ffffff;
  margin-bottom: 0.7rem;
}

.svc-step-text {
  font-size: 0.97rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 0;
}

/* ==========================================================
   FAQ accordion (Bootstrap collapse, themed)
   ========================================================== */
.svc-faq-wrap {
  max-width: 56rem;
  margin: 0 auto;
}

.svc-faq .accordion-item {
  margin-bottom: 1rem;
  background: #ffffff;
  border: 1px solid rgba(8, 11, 18, 0.08);
  border-radius: var(--hp-radius) !important;
  overflow: hidden;
  box-shadow: var(--hp-shadow-sm);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.svc-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(var(--primary-color-rgb), 0.3);
  box-shadow: var(--hp-shadow);
}

.svc-faq .accordion-header {
  margin: 0;
}

.svc-faq .accordion-button {
  gap: 0.9rem;
  padding: 1.25rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.2px;
  color: var(--hp-lead-strong);
  background: #ffffff;
  box-shadow: none;
}

/* The question is an H3 for document structure; the button is only
   the control wrapped around it, so it carries no type styling. */
.svc-faq .accordion-button h3 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}

.svc-faq .accordion-button:not(.collapsed) {
  color: var(--hp-accent);
  background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.06) 0%, rgba(var(--primary-color-rgb), 0) 100%);
}

.svc-faq .accordion-button:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.18);
}

/* Replace Bootstrap's chevron image with a themed plus/minus badge */
.svc-faq .accordion-button::after {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  content: "\002B";
  background-image: none;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--hp-accent) 0%, var(--hp-accent-deep) 100%);
  box-shadow: 0 6px 14px rgba(var(--primary-color-rgb), 0.35);
  transform: none;
  transition: transform 0.3s ease, background 0.3s ease;
}

.svc-faq .accordion-button:not(.collapsed)::after {
  content: "\2212";
  transform: rotate(180deg);
}

.svc-faq .accordion-body {
  padding: 0 1.5rem 1.4rem;
  font-size: 0.99rem;
  line-height: 1.85;
  color: var(--hp-slate);
}

.svc-faq .accordion-body p {
  margin-bottom: 0;
}

/* ==========================================================
   CTA band — reuses .schedule-section shell from homepage.css
   ========================================================== */
.svc-cta-card {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2.4rem 2.2rem;
  border-radius: var(--hp-radius-lg);
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.svc-cta-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #ffffff;
  margin-bottom: 1rem;
}

.svc-cta-card p {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.1rem;
}

.svc-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.6rem;
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1199.98px) {
  .svc-section,
  .svc-process-section {
    padding: 4.5rem 0 5rem;
  }
}

@media (max-width: 991.98px) {
  /* Hero image leads on tablet/mobile — Bootstrap's order-1/order-2
     utilities on the columns handle the swap; this keeps the spacing
     sensible once stacked. */
  #hero.service-hero .hero-image-col {
    margin-bottom: 2.25rem;
  }

  #hero.service-hero .hero-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .svc-cta-card {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 575.98px) {
  .svc-section,
  .svc-process-section {
    padding: 3.5rem 0 4rem;
  }

  #hero.service-hero .hero-checklist {
    grid-template-columns: 1fr;
  }

  .svc-detail-card {
    padding: 1.75rem 1.35rem 1.6rem;
  }

  .svc-detail-card::before {
    left: 1.35rem;
    right: 1.35rem;
  }

  .svc-step-card {
    padding: 1.75rem 1.35rem 1.6rem;
  }

  .svc-faq .accordion-button {
    padding: 1.05rem 1.1rem;
    font-size: 0.99rem;
  }

  .svc-faq .accordion-body {
    padding: 0 1.1rem 1.2rem;
  }
}