/* ==========================================================
   Services Cards  –  partial/services-cards.php
   ========================================================== */

/* ─── Per-service accent tokens ─────────────────────────── */
.sc-card--orange { --accent:#f5820f; --accent-dark:#e06b00; --accent-rgb:245,130,15; }
.sc-card--blue   { --accent:#3b82f6; --accent-dark:#1d4ed8; --accent-rgb:59,130,246; }
.sc-card--purple { --accent:#7c3aed; --accent-dark:#6d28d9; --accent-rgb:124,58,237; }
.sc-card--pink   { --accent:#ec4899; --accent-dark:#db2777; --accent-rgb:236,72,153; }

/* ─── Section ──────────────────────────────────────────── */
.sc-section { background:#fff; padding:80px 0 90px; }

/* ─── Heading ──────────────────────────────────────────── */
.sc-heading { max-width:620px; margin:0 auto 52px; }
.sc-label {
  display:inline-block; font-size:13px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--bs-primary,#f5820f); margin-bottom:10px;
}
.sc-title {
  font-size:clamp(28px,3vw,42px); font-weight:800;
  color:#0d0c22; line-height:1.2; margin-bottom:12px;
}
.sc-subtitle { font-size:17px; color:#6b7280; line-height:1.7; margin:0; }

/* ─── Shared card shell ────────────────────────────────── */
.sc-card {
  position:relative; overflow:hidden;
  background:#fff; border-radius:20px;
  border:1px solid rgba(0,0,0,0.08);
  text-decoration:none !important;
  display:flex; flex-direction:column; height:100%;
  transition:border-color .3s ease,
             box-shadow .4s cubic-bezier(.22,1,.36,1);
  will-change:transform;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 4px 10px rgba(0,0,0,.06);
}
.sc-card:hover {
  border-color:rgba(var(--accent-rgb),.28);
  box-shadow:
    0 2px 4px  rgba(var(--accent-rgb),.06),
    0 10px 24px rgba(var(--accent-rgb),.14),
    0 28px 56px rgba(var(--accent-rgb),.16),
    0 48px 96px rgba(0,0,0,.07);
}

/* Sliding accent bar at bottom */
.sc-card::after {
  content:''; position:absolute; bottom:0; left:0;
  height:3px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));
  box-shadow:0 0 14px rgba(var(--accent-rgb),.7);
  transition:width .5s cubic-bezier(.22,1,.36,1);
  z-index:3;
}
.sc-card:hover::after { width:100%; }

/* ─── Card layout — image left, content right ──────────── */
.sc-card { flex-direction:row; }

.sc-card__thumb {
  width:42%; flex-shrink:0;
  position:relative; overflow:hidden;
}

/* ─── Thumbnail image / SVG layer ──────────────────────── */
.sc-card__img {
  position:absolute; inset:-4%;
  transition:transform .7s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
}
.sc-card__img svg { width:100%; height:100%; display:block; }
.sc-card:not(:hover) .sc-card__img { transform:scale(1) translate(0,0); }

/* "New" badge */
.sc-card__new {
  position:absolute; top:14px; right:14px; z-index:2;
  font-size:9px; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; background:#ec4899; color:#fff;
  padding:3px 10px; border-radius:20px;
  box-shadow:0 3px 10px rgba(236,72,153,.5);
}

/* ─── Card body ─────────────────────────────────────────── */
.sc-card__body {
  flex:1; padding:28px 24px 24px;
  display:flex; flex-direction:column;
  min-height:260px;
}

/* ─── Meta row — tag + ordinal number ──────────────────── */
.sc-card__meta {
  display:flex; align-items:center;
  justify-content:space-between;
  margin-bottom:4px;
}

/* Service category tag */
.sc-card__tag {
  display:inline-block; font-size:12px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--accent); background:rgba(var(--accent-rgb),.1);
  border:1px solid rgba(var(--accent-rgb),.2);
  padding:4px 10px; border-radius:20px;
  transition:background .25s, border-color .25s;
}
.sc-card:hover .sc-card__tag {
  background:rgba(var(--accent-rgb),.18);
  border-color:rgba(var(--accent-rgb),.35);
}

/* Decorative ordinal number */
.sc-card__num {
  font-size:32px; font-weight:900; line-height:1;
  color:rgba(var(--accent-rgb),.15);
  font-family:'Arial Black',Arial,sans-serif;
  transition:color .3s ease, transform .3s ease;
}
.sc-card:hover .sc-card__num {
  color:rgba(var(--accent-rgb),.3);
  transform:scale(1.08);
}

/* Coloured icon box */
.sc-card__icon-wrap {
  width:50px; height:50px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff; margin:16px 0 14px;
  box-shadow:0 4px 14px rgba(var(--accent-rgb),.35);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),
             box-shadow .3s ease;
}
.sc-card:hover .sc-card__icon-wrap {
  transform:scale(1.12);
  box-shadow:0 8px 24px rgba(var(--accent-rgb),.55);
}

/* Title */
.sc-card__title {
  font-size:20px; font-weight:700; color:#111827;
  line-height:1.25; margin:0 0 10px;
  transition:color .2s ease;
}
.sc-card:hover .sc-card__title { color:var(--accent); }

/* Description */
.sc-card__desc {
  font-size:15px; color:#6b7280; line-height:1.65;
  margin:0 0 18px; flex:1;
}

/* CTA */
.sc-card__cta {
  display:inline-flex; align-items:center; gap:6px;
  font-size:14.5px; font-weight:700; color:#9ca3af;
  align-self:flex-start;
  transition:color .2s ease, gap .2s ease;
}
.sc-card:hover .sc-card__cta { color:var(--accent); gap:9px; }

/* Ambient glow — accent light bloom on hover */
.sc-card__glow {
  position:absolute; bottom:-50px; right:-50px;
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.28),transparent 70%);
  filter:blur(35px); pointer-events:none; z-index:0;
  opacity:0;
  transition:opacity .45s ease, transform .45s ease;
}
.sc-card:hover .sc-card__glow { opacity:1; transform:scale(1.25); }

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width:991px) {
  .sc-section { padding:60px 0 70px; }
  .sc-heading { text-align:center; }
  /* Stack cards on tablet/mobile */
  .sc-card { flex-direction:column; }
  .sc-card__thumb { width:100%; height:220px; }
  .sc-card__body { min-height:unset; }
}
@media (max-width:575px) {
  .sc-section { padding:48px 0 56px; }
  .sc-title { font-size:26px; }
  .sc-card__thumb { height:180px; }
}