/**
 * Services page styles
 *
 * 1. Our Car Detailing Service
 * 2. Responsive
 *
 * The "Why Choose Us" red checklist band and the numbered FAQ accordion are
 * shared with About — see assets/css/components/repair-services.css and
 * assets/css/components/faq-accordion.css (rules.md's Shared Section Reuse).
 */

/* ============================ OUR CAR DETAILING SERVICE ============================ */
.our-car-detailing-service {
  padding-top: 60px;
  padding-bottom: 20px;
}
.our-car-detailing-service__grid {
  margin-top: 2.5rem;
}
.service-detail-card {
  /* An <a> since each card is one `service` post — reset the link's own
	   colour/underline so the body and title rules below still own the type. */
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  border-radius: 0;
  overflow: hidden;
  height: 100%;
  /* Sampled off the design's card render (node 341:3925): the card's visual
	   bounds run 8px past its box on the top/left and 17px on the bottom/right,
	   i.e. a 12px blur offset 4px down and right. */
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.16);
}
.service-detail-card:hover .service-detail-card__img,
.service-detail-card:focus-visible .service-detail-card__img {
  transform: scale(1.04);
}
.service-detail-card__media {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 700 / 401;
  overflow: hidden;
}
.service-detail-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}
.service-detail-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0) 55%
  );
}
.service-detail-card__body {
  /* flex: 1 so the body's background fills the full card height even when
	   a sibling card in the same row is taller (Bootstrap's .row stretches
	   columns to match) — otherwise the shorter card's bg stops short of the
	   card's bottom edge. */
  flex: 1 1 auto;
  background: var(--color-light-bg);
  padding: 1.25rem;
}
.service-detail-card__title {
  color: var(--color-accent-red);
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  transition: color var(--transition-fast);
}
.service-detail-card:hover .service-detail-card__title,
.service-detail-card:focus-visible .service-detail-card__title {
  color: var(--heading-color);
}
.service-detail-card__text {
  color: var(--heading-color);
  font-size: clamp(0.875rem, 0.85vw + 0.6rem, 0.9375rem);
  line-height: 1.5;
  margin-bottom: 0;
}

/* ============================ RESPONSIVE ============================ */

/* --- sm: 576-767 --- */
@media (max-width: 767.98px) {
  .service-detail-card__body {
    padding: 1rem;
  }
}