/**
 * Home Services Section Styles
 * ------------------------------------------------------------
 * This file is loaded only by index.html and is scoped to:
 * .index-page .home-services-section
 *
 * Keep services spacing and cards here so the section does not mix with:
 * - hero styles in home-sections.css
 * - about styles in home-about.css
 * - shared page styles in main.css
 */

/* ============================================================
   Home Services Section Shell
   Purpose:
   - Removes the oversized blank gap after the About benefits list.
   - Keeps the service cards close to the section heading.
============================================================ */

/* Section wrapper:
   Starts after the About benefits list with exactly one line of visual space.
   No negative pull-up is used, so the Services title does not overlap the list. */
.index-page .home-services-section {
  margin-top: 0 !important;
  padding-top: 1.4rem !important;
  padding-bottom: clamp(28px, 3.5vw, 48px) !important;
  background: #ffffff;
}

/* Direct follow-up rule:
   Handles the exact About-to-Services handoff.
   The 1.4rem top padding is the single-line space requested between sections. */
.index-page .home-about-section + .home-services-section {
  margin-top: 0 !important;
  padding-top: 1.4rem !important;
}

/* Services containers: keep content aligned with the rest of the home page. */
.index-page .home-services-section > .container {
  max-width: 1240px;
}

/* ============================================================
   Home Services Title
   Purpose:
   - Keeps "Our Services" close to the About list.
   - Reduces title vertical margins without changing the wording.
============================================================ */

/* Title wrapper: compact and centered. */
.index-page .home-services-section .home-services-title {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Faint background title: keep decorative text but reduce its vertical footprint. */
.index-page .home-services-section .home-services-title span {
  line-height: 0.9;
}

/* Visible section eyebrow: professional navy scale. */
.index-page .home-services-section .home-services-title h2 {
  margin: 0 0 8px !important;
  color: #082d73;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
}

/* Main services heading: compact bottom spacing before cards. */
.index-page .home-services-section .home-services-title h1 {
  margin: 0 !important;
  color: #082d73;
  font-size: clamp(34px, 3vw, 48px);
  font-weight: 800;
  line-height: 1.12;
}

/* ============================================================
   Home Services Cards
   Purpose:
   - Keeps the card grid close to the heading.
   - Leaves shared card design intact while tightening section spacing.
============================================================ */

/* Card row: smaller row gap than Bootstrap default for a tighter section. */
.index-page .home-services-section .row {
  --bs-gutter-y: 1.25rem;
}

/* Card image: stable image height so cards line up cleanly. */
.index-page .home-services-section .card .card-img img {
  height: 140px;
  object-fit: cover;
}

/* Card title: keep long service names readable without adding extra height. */
.index-page .home-services-section .card h3 {
  margin-bottom: 4px;
  line-height: 1.2;
}

/* Card read-more paragraph: compact spacing below each button. */
.index-page .home-services-section .card p {
  margin-bottom: 16px;
}

/* ============================================================
   Home Services Responsive Rules
   Purpose:
   - Keeps spacing tight and readable on smaller screens.
============================================================ */

/* Tablet: keep heading scale controlled. */
@media (max-width: 991px) {
  .index-page .home-services-section {
    margin-top: 0 !important;
    padding-top: 1.2rem !important;
  }

  .index-page .home-services-section .home-services-title h2 {
    font-size: 28px;
  }

  .index-page .home-services-section .home-services-title h1 {
    font-size: 34px;
  }
}

/* Mobile: reduce title size and card image height. */
@media (max-width: 575px) {
  .index-page .home-services-section .home-services-title {
    margin-bottom: 14px !important;
  }

  .index-page .home-services-section .home-services-title h2 {
    font-size: 24px;
  }

  .index-page .home-services-section .home-services-title h1 {
    font-size: 28px;
  }

  .index-page .home-services-section .card .card-img img {
    height: 128px;
  }
}