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

/* --- Form + FAQ (your original styles, kept) --- */
.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-family: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); }

/* --- Mobile containment & wrapping (scoped) --- */
body[data-page="installations"] .container{ padding-inline:20px; }

/* Prevent long CTAs from overflowing */
body[data-page="installations"] .hero-ctas,
body[data-page="installations"] .cta-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
body[data-page="installations"] .hero-ctas .btn,
body[data-page="installations"] .cta-actions .btn{
  flex:0 1 260px;         /* allow shrinking and wrapping */
  min-width:0;
  max-width:100%;
  white-space:normal;     /* allow text wrap on narrow phones */
  text-align:center;
  box-sizing:border-box;
}

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

/* --- Tablet (≤ 992px): stack two-column blocks --- */
@media (max-width: 992px){
  body[data-page="installations"] .about-hero__grid{ grid-template-columns:1fr; gap:18px; }
  body[data-page="installations"] .story-grid{ grid-template-columns:1fr; gap:24px; }
  body[data-page="installations"] .values-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
  body[data-page="installations"] .cta-grid{ grid-template-columns:1fr; gap:20px; }

  /* Form card stretches full width on mobile/tablet */
  body[data-page="installations"] #install-form.story-card{
    width:100%; max-width:100%; box-sizing:border-box; justify-self:stretch; margin:0;
  }
}

/* --- Phone (≤ 560px): single-column, hide side CTA card --- */
@media (max-width: 560px){
  body[data-page="installations"] .values-grid{ grid-template-columns:1fr; }
  body[data-page="installations"] .cta-banner .container{ padding-inline:16px; }
  body[data-page="installations"] .cta-grid .cta-card{ display:none !important; } /* hide right-hand card */
  body[data-page="installations"] .story-card{ padding:16px; border-radius:12px; }
  body[data-page="installations"] .about-hero{ padding-block: clamp(36px, 12vw, 60px); }
}

/* --- Nice-to-haves --- */
/* Make sure icons stay centered & visible in value cards */
body[data-page="installations"] .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);
}

/* Guard: keep images from stretching weirdly */
body[data-page="installations"] .about-hero__media img{ width:100%; height:100%; object-fit:cover; }

/* --- CTA buttons: compact by default, full-width on phones --- */
body[data-page="installations"] .cta-banner .cta-actions .btn{
  flex: 0 0 auto;        /* size to content */
  min-width: auto;
  max-width: 100%;
  white-space: nowrap;   /* keep on one line on desktop/tablet */
}

@media (max-width: 560px){
  body[data-page="installations"] .cta-banner .cta-actions .btn{
    width: 100%;         /* stack + stretch on small phones */
    white-space: normal; /* allow wrapping if needed */
  }
}

/* keep inputs inside the card/container */
.install-form,
.install-form .form-group,
.install-form input,
.install-form select,
.install-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* make sure the card itself can't overflow */
.story-card { max-width: 100%; box-sizing: border-box; }