/* ==========================================================================
   IDRIS UMZUG — ALL SERVICES PAGE STYLES
   --------------------------------------------------------------------------
   Services-specific sections. Shared components (CTA, FAQ, checklists, split)
   reuse the fp-* classes from front-page.css. Built on assets/css/theme.css.

   Contents:
     1. Hero
     2. Services grid
     3. Stress-free residential (what-we-handle)
     4. Responsive
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */
.sv-hero {
  position: relative;
  text-align: center;
  color: var(--color-white);
  padding-top: 12.5rem;
  padding-bottom: var(--space-10);
  /* Same banner image treatment as the front-page hero */
  background-color: var(--color-dark);
  background-image: url("../images/home-ban.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sv-hero h1 { color: var(--color-white); max-width: 900px; margin: 0 auto var(--space-5); }
.sv-hero p { color: rgba(255, 255, 255, 0.82); max-width: 1080px; margin: 0 auto var(--space-6); }
.sv-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.sv-hero .btn--outline { color: var(--color-white); border-color: rgba(255, 255, 255, 0.5); }
.sv-hero .btn--outline:hover { background: var(--color-white); color: var(--color-dark); }
.head-sec{ max-width: 1080px !important;}
/* ==========================================================================
   2. SERVICES GRID
   ========================================================================== */
.sv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.sv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;     /* anchor the text panel to the bottom */
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  min-height: 500px;
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.sv-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.sv-card__media { position: absolute; inset: 0; }
.sv-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Only this panel gets a background + frosted blur */
.sv-card__body {
  position: relative;
  z-index: 1;
  padding: var(--space-6);
  color: var(--color-white);
  background: rgba(12, 35, 64, 0.7);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  height: 200px;
}
.sv-card__body h3 { color: var(--color-white); font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.sv-card__body p { color: rgba(255, 255, 255, 0.78); font-size: var(--fs-sm); margin: 0; }

/* ==========================================================================
   3. STRESS-FREE RESIDENTIAL (what we handle)
   ========================================================================== */
.sv-stressfree .fp-split__content p { color: var(--color-body); }
.sv-handle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin: var(--space-6) 0;
}
.sv-handle__label {
  display: block;
  margin-bottom: var(--space-3);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
}
.sv-handle .fp-checklist { margin: 0; }
/* Enables animating to/from height:auto */
:root {
  interpolate-size: allow-keywords;
}

/* Animate the revealed content of each <details> */
.fp-faq__item::details-content {
  block-size: 0;
  overflow: clip;
  transition:
    block-size 0.35s ease,
    content-visibility 0.35s ease allow-discrete;
}
.fp-faq__item[open]::details-content {
  block-size: auto;
}

/* keep your padding — it now animates along with the height */
.fp-faq__answer {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-body);
}
.fp-faq__answer p { margin: 0; }

/* ==========================================================================
   4. RESPONSIVE
   ========================================================================== */
@media (max-width: 1023px) {
  .sv-grid { grid-template-columns: repeat(2, 1fr); }
  .head-sec{ max-width: 100% !important;}
}

@media (max-width: 767px) {
  .sv-hero { padding-top: 10rem; }
  .sv-grid { grid-template-columns: 1fr; }
  .sv-handle { grid-template-columns: 1fr; }
}