/* ==========================================================================
   Services listing page (page-services.php). White cards on a light-grey
   section — image, title, short description, Learn More. Mirrors the homepage
   service-card look (sharp corners, hover lift, red left-border).
   Tokens: --primary-color #f00004, --heading-color #141414,
   --text-color #4a4a4a, --border-color #e6e6e6, fonts --font-head/--font-body.
   ========================================================================== */

.sp-services-list { background: #313130; }

.sp-services-list__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem;
}
@media (max-width: 991.98px) { .sp-services-list__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (max-width: 575.98px)  { .sp-services-list__grid { grid-template-columns: 1fr; } }

.sp-svc-card {
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid var(--border-color);
   border-left: 5px solid transparent;
   border-radius: 0;
   overflow: hidden;
   transition: transform .25s ease, box-shadow .25s ease, border-left-color .25s ease;
}
.sp-svc-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 18px 40px rgba(20, 20, 20, .12);
   border-left-color: var(--primary-color);
}

.sp-svc-card__media {
   display: block;
   aspect-ratio: 16 / 10;
   overflow: hidden;
}
.sp-svc-card__media img {
   width: 100%; height: 100%;
   object-fit: cover;
   transition: transform .5s ease;
}
.sp-svc-card:hover .sp-svc-card__media img { transform: scale(1.05); }

.sp-svc-card__body {
   display: flex;
   flex-direction: column;
   flex: 1;
   padding: 1.6rem 1.5rem 1.75rem;
}

.sp-svc-card__title {
   font-family: var(--font-head);
   font-size: 1.35rem;
   line-height: 1.25;
   font-weight: 700;
   margin: 0 0 .7rem;
}
.sp-svc-card__title a { color: var(--heading-color); }
.sp-svc-card__title a:hover { color: var(--primary-color); }

.sp-svc-card__text {
   color: var(--text-color);
   font-size: 1rem;
   line-height: 1.65;
   margin: 0 0 1.35rem;
}

.sp-svc-card__btn {
   margin-top: auto;
   align-self: flex-start;
   padding: .75rem 1.6rem;
   font-size: .8rem;
}