/* ==========================================================================
   services.css - the services index (/services)
   A two-column mosaic of service cards interleaved with two photographs.
   Each card links through to its own page under /services/<slug>.
   ========================================================================== */

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-block: var(--space-5);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 275px;
  padding: 45px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--on-light);
  transition: box-shadow var(--transition);
}

.service-card:hover,
.service-card:focus-visible {
  box-shadow: var(--shadow-hover);
}

.service-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.service-card__body {
  color: var(--on-light);
}

/* The chevron affordance that marks a card as a link. */
.service-card__more {
  margin-top: auto;
  padding-top: var(--space-2);
  font-weight: var(--weight-medium);
  color: var(--ink);
}

.service-card__more::after {
  content: "\00a0\2192";
  transition: margin-inline-start var(--transition);
}

.service-card:hover .service-card__more::after {
  margin-inline-start: 4px;
}

/** Image cells sit in the same grid but carry no padding. */
.service-figure {
  min-height: 275px;
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--transition);
}

.service-figure:hover {
  box-shadow: var(--shadow-hover);
}

.service-figure img {
  width: 100%;
  height: 275px;
  object-fit: cover;
  border-radius: var(--radius);
  filter: brightness(80%) saturate(0%);
  transition: transform var(--transition);
}

.service-figure:hover img {
  transform: scale(1.1);
}

@media (max-width: 1024px) {
  .service-figure,
  .service-figure img {
    min-height: 0;
    height: 370px;
  }
}

@media (max-width: 767px) {
  .service-grid {
    grid-template-columns: 1fr;
    margin-block: var(--space-5) var(--space-4);
  }

  .service-card {
    padding: var(--space-4);
  }

  .service-figure,
  .service-figure img {
    height: 335px;
  }
}