/* ===== Repairs page — v2 (mobile-first, scoped) ===== */

/* -------- Form + FAQ (same look as other pages) -------- */
.install-form { display:grid; gap:14px; }
.install-form .form-group { display:grid; gap:6px; }
.install-form label { font-weight:600; color:var(--navy); font-size:.95rem; }
.install-form input,
.install-form select,
.install-form textarea{
  width:100%;
  border:1px solid #e6eef7;
  border-radius:8px;
  padding:10px 12px;
  font: inherit; font-size:.95rem;
  background:#fff; transition:border-color .2s, box-shadow .2s;
}
.install-form input:focus,
.install-form select:focus,
.install-form textarea:focus{
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 2px rgba(0,123,255,.15);
}
.install-form textarea{ resize:vertical; }
.install-form .btn-block{ width:100%; text-align:center; }

.faq-list{ display:grid; gap:18px; }
.faq-item{
  background:#fff; border:1px solid #e6eef7; border-radius:14px;
  padding:18px; box-shadow:0 8px 18px rgba(15,34,57,.06);
}
.faq-item h3{ margin-top:0; color:var(--navy); }
.faq-item p{ margin:0; color:var(--muted); }

/* -------- Page-scoped containment & grids -------- */
body[data-page="repairs"] .container{ padding-inline:20px; }

/* keep grid children from pushing outside on small screens */
body[data-page="repairs"] .about-hero__grid,
body[data-page="repairs"] .story-grid,
body[data-page="repairs"] .values-grid,
body[data-page="repairs"] .cta-grid{
  grid-auto-flow: row;
}

/* -------- CTA/hero buttons: compact on desktop, full-width on phones -------- */
body[data-page="repairs"] .about-hero .hero-ctas,
body[data-page="repairs"] .cta-banner .cta-actions{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
body[data-page="repairs"] .about-hero .hero-ctas .btn,
body[data-page="repairs"] .cta-banner .cta-actions .btn{
  flex: 0 0 auto;       /* content-sized on desktop/tablet */
  min-width: auto;
  max-width: 100%;
  white-space: nowrap;  /* don’t grow huge */
  box-sizing: border-box;
}
@media (max-width: 560px){
  body[data-page="repairs"] .about-hero .hero-ctas .btn,
  body[data-page="repairs"] .cta-banner .cta-actions .btn{
    width:100%;         /* stack + stretch on small phones */
    white-space: normal;
  }
}

/* -------- CTA banner hardening (bg image + overlay always visible) -------- */
body[data-page="repairs"] .cta-banner{
  position:relative; isolation:isolate; color:#fff;
  padding-block: clamp(36px, 8vw, 72px);
}
body[data-page="repairs"] .cta-banner::before{
  content:""; position:absolute; inset:0;
  background-image: var(--cta-bg-image, none);
  background-size: cover; background-position: center;
  z-index: 0;
}
body[data-page="repairs"] .cta-banner::after{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0, var(--overlay-alpha, .72));
  z-index: 0;
}
body[data-page="repairs"] .cta-banner > .container{ position:relative; z-index:1; }

/* side card containment + hide on phones */
body[data-page="repairs"] .cta-card{
  box-sizing:border-box; width:100%; max-width:420px; justify-self:end;
  background:#fff; color:#111; border:1px solid #e6eef7; border-radius:14px;
  padding:18px; display:grid; gap:12px; align-content:start;
  box-shadow:0 16px 28px rgba(15,34,57,.12);
}
@media (max-width: 992px){
  body[data-page="repairs"] .cta-grid{ grid-template-columns:1fr; gap:20px; }
  body[data-page="repairs"] .cta-card{ justify-self:stretch; max-width:100%; margin:0; }
}
@media (max-width: 560px){
  body[data-page="repairs"] .cta-banner .container{ padding-inline:16px; }
  body[data-page="repairs"] .cta-grid .cta-card{ display:none !important; }
}

/* -------- Values icons: ensure FA glyphs show -------- */
body[data-page="repairs"] .value-card i{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:10px; line-height:1; font-size:20px;
  color:#fff; background:linear-gradient(135deg, var(--blue), var(--blue-dark));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 8px 18px rgba(15,34,57,.12);
}

/* -------- Tablet stacks -------- */
@media (max-width: 992px){
  body[data-page="repairs"] .about-hero__grid{ grid-template-columns:1fr; gap:18px; }
  body[data-page="repairs"] .story-grid{ grid-template-columns:1fr; gap:24px; }
  body[data-page="repairs"] .values-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
  body[data-page="repairs"] #repair-form.story-card{
    width:100%; max-width:100%; box-sizing:border-box; justify-self:stretch; margin:0;
  }
}

/* -------- Phones -------- */
@media (max-width: 560px){
  body[data-page="repairs"] .values-grid{ grid-template-columns:1fr; }
  body[data-page="repairs"] .story-card{ padding:16px; border-radius:12px; }
  body[data-page="repairs"] .about-hero{ padding-block: clamp(36px, 12vw, 60px); }
  body[data-page="repairs"] .about-hero__grid{ grid-template-columns:1fr; }
}

/* -------- Header safety: keep solid even if JS toggles classes -------- */
#site-header, .site-header{ background: var(--c-navy) !important; }
#site-header .nav-bar, .site-header .nav-bar{
  background: var(--c-blue) !important;
  box-shadow: 0 5px 15px rgba(0,0,0,.1);
}

/* -------- Misc guards -------- */
/* keep hero/media images behaving */
body[data-page="repairs"] .about-hero__media img{ width:100%; height:100%; object-fit:cover; }
/* badge chips slightly clearer on dark */
body[data-page="repairs"] .about-hero__badges span{
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  color:#fff; font-weight:700; border-radius:999px; padding:.45rem .7rem;
}
/* --- Repairs form overflow fix --- */
.story-card { 
  min-width: 0;                /* allow grid child to shrink */
}

.story-card .install-form { 
  max-width: 100%;
}

.story-card .form-group { 
  min-width: 0; 
}

.story-card input,
.story-card select,
.story-card textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;       /* include padding in width */
}

.story-card .btn-block {
  width: 100%;
}

/* Optional: if any edge cases still peek out, clip the card contents */
@supports (overflow: clip) {
  .story-card { overflow: clip; }
}
/* or fallback: .story-card { overflow: hidden; } */