/* ==========================================================================
   PATH: /css/services.css
   TYPE: stylesheet
   STATUS: shared
   USES: reusable services grids, service cards, featured service variant

   PURPOSE
   This file owns the reusable service-card component system used for:
   - homepage service section
   - canonical city-page "why this city" grids
   - canonical city-page related-services grids
   - any future support pages reusing the same service-card pattern

   KEEP IN THIS FILE
   - .services-grid
   - .service-card
   - .service-card-featured
   - .service-tag
   - service-card internal heading/body spacing
   - shared responsive behavior for this component
   - explicit light-band support for the service-card system

   DO NOT PUT IN THIS FILE
   - outer section shell layout like .services-wrap
   - band background or light/dark section treatment
   - intro-column spacing like .services-intro
   - page-only copy spacing tweaks
   - unrelated card systems like journal, portfolio, FAQ, city cards

   OWNERSHIP NOTES
   - If the selector styles the card module itself, it belongs here.
   - If the selector positions the intro column beside the module, it belongs
     in bands.css.
   - If a page needs a one-off version of services content, create a modifier
     or page override instead of editing the base component here.
   - If the same service-card system must work in both dark and light bands,
     that compatibility belongs here rather than in repeated page-local fixes.
   ========================================================================== */

/* ==========================================================================
   SERVICES GRID
   This is the inner card grid for the services component.
   ========================================================================== */

.services-grid {
  display: grid;
  gap: 1.4rem;
  padding: 0 0 1rem;
}

/* ==========================================================================
   SERVICE CARD
   Base card used across dark and light bands. The card inherits surrounding
   theme context unless a variant overrides it.
   ========================================================================== */

.service-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.55rem;
  min-height: 320px;
  padding: 1.85rem 1.6rem;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(247, 243, 238, 0.16);
  border-radius: 0;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.service-card:hover,
.service-card:focus-within {
  border-color: rgba(247, 243, 238, 0.28);
  background: rgba(255, 255, 255, 0.06);
}

.service-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-heading-lg);
  font-weight: 500;
  line-height: 1.04;
  color: var(--text-light);
}

.service-card p {
  margin: 0;
  max-width: 36ch;
  color: var(--muted-light);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-loose);
}

.service-card:not(.service-card-featured) h3 {
  margin-top: 0.7rem;
}

/* ==========================================================================
   FEATURED SERVICE VARIANT
   Used when one service should receive stronger emphasis, such as the homepage
   Custom Homes card or city-page primary-focus card.
   ========================================================================== */

.service-card-featured {
  background: rgba(214, 173, 84, 0.08);
  border: 1px solid rgba(214, 173, 84, 0.35);
}

.service-card-featured:hover,
.service-card-featured:focus-within {
  border-color: rgba(214, 173, 84, 0.45);
  background: rgba(214, 173, 84, 0.11);
}

/* ==========================================================================
   FEATURED TAG
   Small label used inside the featured service card.
   ========================================================================== */

.service-tag {
  display: inline-block;
  width: fit-content;
  margin-bottom: 0.85rem;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: var(--type-label-size-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
}

/* ==========================================================================
   LIGHT-BAND SUPPORT
   The base service card styling is dark-band oriented. These rules let the
   same shared component work cleanly inside light-band contexts without
   repeating page-local overrides.
   ========================================================================== */

.band-light .services-grid .service-card {
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--line-dark);
}

.band-light .services-grid .service-card:hover,
.band-light .services-grid .service-card:focus-within {
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(34, 30, 25, 0.18);
}

.band-light .services-grid .service-card h3,
.band-light .services-grid .service-card p,
.band-light .services-grid .service-card a {
  color: inherit;
}

.band-light .services-grid .service-card-featured {
  background: rgba(198, 164, 109, 0.08);
  border-color: rgba(198, 164, 109, 0.35);
}

.band-light .services-grid .service-card-featured:hover,
.band-light .services-grid .service-card-featured:focus-within {
  background: rgba(198, 164, 109, 0.12);
  border-color: rgba(198, 164, 109, 0.45);
}



/* ==========================================================================
   RESPONSIVE BEHAVIOR
   Desktop uses a wider first-card pattern inside the component grid, while
   tablet and mobile collapse to simpler stacks.
   ========================================================================== */

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .services-grid {
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    gap: 0.85rem;
    align-items: stretch;
  }
}

@media (max-width: 979px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}