/* =========================
   Services block (Gilcon)
   ========================= */

/* Section */
.services { background: var(--services-bg, transparent); border-bottom: solid 1px var(--highlight);}
.services--pad-sm { padding-block: 24px; }
.services--pad-md { padding-block: 40px; }
.services--pad-lg { padding-block: 64px; }
.services__title { margin: 0 0 1rem; }

/* Optional soft cards variant (if you toggle it in PHP) */
.services--soft .svc-card { background: #fff; }

/* Grid */
.services__grid{
  display: grid;
  gap: clamp(16px, 3vw, 32px);
  grid-template-columns: 1fr; /* mobile/tablet: one column */
}

/* Card base */
.svc-card{
  background: #f5f5f5;                          /* Figma tile feel */
  border-radius: var(--radius, 12px);
  box-shadow: 2px 4px 20px rgba(0,0,0,.10);      /* X2 Y4 Blur20 10% */
  padding: clamp(16px, 2vw, 24px);
  overflow: visible;                              /* prevent clipping */
}

/* Title + subtitle */
.svc-card__title{
  margin: 0 0 .5rem;
  color: var(--accent);
  font-size: var(--step-1);
}

.svc-card__subtitle{
  margin: 0 0 .5rem;
  font-weight: 700;
  color: var(--accent);
  font-size: var(--step-0);

}

/* ---------- Images ---------- */
/* Mobile/tablet: natural height, no crop */
.svc-card__media{ margin: 0 0 .75rem; }
.svc-card__media img{
  display: block;
  width: 100%;
  height: auto;                                   /* no cropping */
  border-radius: var(--radius, 12px);
}

/* ---------- Copy + link alignment ---------- */
.svc-card__content{
  display: flex;
  flex-direction: column;
  min-height: 0;                                  /* iOS flex overflow fix */
}

.svc-card__copy{
  font-size: 14px;
  color: var(--muted);
  margin: .25rem 0 1rem;
  flex: 1 1 auto;                                 /* pushes link to bottom */
}

.svc-card__link{
  margin-top: auto;
  align-self: flex-start;
  display: inline-block;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.svc-card__link:hover{ color: var(--brand); }
.svc-card__link::after{ content: "  ›"; }

/* ---------- Desktop layout ---------- */
@media (min-width: 960px){
  .services__grid{
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;                         /* make columns equal height */
  }

  /* Ensure each card fills its grid track and can't expand it */
  .services__grid > .svc-card{
    height: 100%;
    min-width: 0;                                 /* stop overflow from widening the column */
  }

  /* Also prevent inner content from forcing width */
  .svc-card__content,
  .svc-card__title,
  .svc-card__subtitle,
  .svc-card__media{ min-width: 0; }

  .svc-card{
    display: grid;
    grid-template-columns: 1fr 1fr;               /* image | content */
    grid-template-areas:
      "title   title"
      "media   content";
    column-gap: clamp(16px, 2.2vw, 28px);
    align-items: start;
  }

  .svc-card__title{ grid-area: title; margin-bottom: .5rem; }
  .svc-card__media{ grid-area: media; margin: 0; aspect-ratio: 4 / 3; } /* choose 4/3 or 16/9 */
  .svc-card__media img{ width: 100%; height: 100%; object-fit: cover; } /* equal heights */
  .svc-card__content{ grid-area: content; display: flex; flex-direction: column; justify-content: flex-start; height: 100%; min-height: 0; }

  .svc-card__copy{ flex: 1 1 auto; margin-bottom: .6rem; }
  .svc-card__link{ margin-top: auto; align-self: flex-start; }
}