/* ============================================================
   Penta Tech — services.css  (Figma frame 5:3225 SERVICE)
   ============================================================ */

/* ---------- cards grid ---------- */
.sv-grid {
  width: 102.4375rem;            /* 1639: 141..1780 */
  margin: 9.375rem auto 0;       /* 784-634 = 150 */
  display: grid;
  grid-template-columns: repeat(2, 49.3125rem);   /* 789 */
  column-gap: 3.75rem;           /* 990-930 = 60 */
  row-gap: 4.5625rem;            /* 1719-1646 = 73 */
}
.sv-card {
  display: block;
  color: inherit;
  text-decoration: none;
  position: relative;
  width: 49.3125rem;             /* 789 */
  height: 53.875rem;             /* 862 */
}
.sv-card__badge { transition: transform 0.3s ease; }
.sv-card:hover .sv-card__badge { transform: scale(1.12) rotate(-8deg); }
.sv-card__photo {
  position: relative;
  width: 49.3125rem;             /* 789 */
  height: 41.4375rem;            /* 663 */
  border-radius: 1.25rem;        /* 20 */
  overflow: hidden;
  background: #d9d9d9;
}
.sv-card__photo img {
  width: 100%;
  height: 102%;                  /* photo overshoots frame slightly in Figma */
  object-fit: cover;
  transition: transform 0.4s ease;
}
.sv-card:hover .sv-card__photo img { transform: scale(1.08); }
.sv-card__panel {
  position: absolute;
  left: 3.5625rem;               /* 57 */
  top: 31.375rem;                /* 1286-784 = 502 */
  width: 42.1875rem;             /* 675 */
  height: 22.5rem;               /* 360 */
  background: #fff;
  border: 1px solid var(--green-light);
  border-radius: 1.25rem;        /* 20 */
  box-shadow: 0 0.25rem 0.25rem 0 rgba(74, 173, 151, 0.19);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sv-card:hover .sv-card__panel {
  transform: translateY(-0.5rem);
  box-shadow: 0 0.75rem 1.875rem 0 rgba(74, 173, 151, 0.35);
}
.sv-card__kicker {
  margin: 3.6875rem 0 0 2.5rem;  /* y1346-1286=60; x 97-57=40 */
  font-size: 1.25rem;            /* 20 */
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--green-light);
}
.sv-card__title {
  margin: 1.9375rem 0 0 2.5rem;  /* 1397: kicker ends 1366 → +31 */
  font-size: 2.125rem;           /* 34 */
  line-height: 3.125rem;         /* 50 */
  font-weight: 500;
  color: var(--text-dark);
  white-space: nowrap;
}
.sv-card__desc {
  margin: 0.9375rem 0 0 2.5rem;  /* 1462: title ends 1447 → +15 */
  width: 37.1875rem;             /* 595 */
  font-size: 1.25rem;            /* 20 */
  line-height: 2.5rem;           /* 40 */
  font-weight: 500;
  color: #999;
}
.sv-card__more {
  position: absolute;
  left: 2.5rem;                  /* 40 */
  top: 17.5rem;                  /* 1566-1286 = 280 */
  display: flex;
  align-items: center;
  gap: 0.9375rem;                /* 15 */
  font-size: 1.125rem;           /* 18 — Figma "View Details" */
  line-height: 2.5rem;           /* 40 */
  font-weight: 500;
  color: var(--green-panel);
  transition: color 0.3s ease, transform 0.3s ease;
}
.sv-card__more img {
  width: 1.5625rem;              /* 25 */
  height: 1.5625rem;
  transform: rotate(90deg);      /* arrow-up source icon -> point right */
}
.sv-card__more:hover { color: var(--green-mid); transform: translateX(0.5rem); }
.sv-card__badge {
  position: absolute;
  right: 2.5rem;                 /* 40 — 40px inset from panel's right edge (matches Figma) */
  top: 2.5rem;                   /* 1326-1286 = 40 */
  width: 3.75rem; height: 3.75rem;    /* 60 */
}
.sv-card__circle {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.sv-card__icon {
  position: absolute;
  left: 0.875rem;                /* 14 */
  top: 0.875rem;
  width: 2rem; height: 2rem;     /* 32 */
  filter: brightness(0) invert(1); /* uploaded icon colours -> white on green disc */
}
/* QuickBooks badge: green disc + white icon (as in Figma) */
.sv-card__badge--qb {
  background: var(--green-light);
  border-radius: 50%;
}

/* ---------- footer offset ---------- */
.sv-footer { margin-top: 9.375rem; }   /* 2731-2581 = 150 */

/* ============================================================
   RESPONSIVE — tablet & mobile
   ============================================================ */
@media (max-width: 1024px) {
  /* two service cards per row on tablet */
  .sv-grid {
    width: 100%;
    padding: 0 24px 12px;
    margin-top: 48px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;         /* cards in a row match the taller one — no fixed empty gap */
    gap: 20px;
  }
  .sv-card {
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
    max-width: none;
    height: auto;
    padding-bottom: 32px;
    display: flex;
    flex-direction: column;       /* photo + panel stack so the panel can grow to fill */
  }
  .sv-card__photo { width: 100%; height: auto; aspect-ratio: 789/500; flex: 0 0 auto; }
  .sv-card__panel {
    position: relative;
    left: 0; top: 0;
    width: calc(100% - 24px);
    height: auto;
    flex: 1 1 auto;               /* fill the card's height so row-mates end level */
    display: flex;
    flex-direction: column;       /* let the CTA anchor to the bottom */
    margin: -120px auto 0;
    padding-bottom: 24px;
  }
  .sv-card__kicker { margin: 28px 0 0 24px; }
  .sv-card__title { margin: 12px 0 0 24px; width: calc(100% - 106px); font-size: 24px; line-height: 34px; white-space: normal; }
  .sv-card__desc { margin: 10px 0 0 24px; width: calc(100% - 110px); font-size: 16px; line-height: 28px; }
  .sv-card__more { position: static; margin: 16px 0 0 24px; margin-top: auto; }   /* pin CTA to panel bottom, gap sits above it */
  .sv-card__badge { top: 24px; right: 20px; width: 52px; height: 52px; }
  .sv-card__icon { width: 28px; height: 28px; left: 12px; top: 12px; }
  .sv-footer { margin-top: 40px; }
}

@media (max-width: 767px) {
  .sv-grid { padding: 0 16px 12px; margin-top: 34px; gap: 14px; }
  .sv-card { flex-basis: auto; width: 100%; max-width: 460px; padding-bottom: 22px; }
  .sv-card__photo { aspect-ratio: 789/560; border-radius: 14px; }
  .sv-card__panel {
    width: calc(100% - 16px);
    min-height: 0;                /* single-column on mobile: let content size the box (no forced gap) */
    margin-top: -48px;
    border-radius: 14px;
    padding-bottom: 18px;
  }
  .sv-card__kicker { margin: 18px 0 0 18px; font-size: 12px; line-height: 16px; }
  .sv-card__title { margin: 8px 0 0 18px; width: calc(100% - 90px); font-size: 16px; line-height: 22px; }
  .sv-card__desc {
    margin-left: 18px;
    width: calc(100% - 38px);
    font-size: 12px;
    line-height: 19px;
    font-weight: 400;
  }
  .sv-card__more {
    margin: 12px 0 0 18px;
    font-size: 12px;
    line-height: 18px;
  }
  .sv-card__more img { width: 18px; height: 18px; }
  .sv-card__badge { width: 38px; height: 38px; top: 18px; right: 16px; }
  .sv-card__icon { width: 20px; height: 20px; left: 9px; top: 9px; }
}

/* Responsive type and spacing polish */
@media (max-width: 1024px) {
  .sv-card__kicker {
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
  }
  .sv-card__title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
  }
  .sv-card__desc {
    font-size: 14px;
    line-height: 23px;
    font-weight: 400;
  }
  .sv-card__more {
    font-size: 14px;
    line-height: 20px;
  }
}

@media (max-width: 767px) {
  .sv-card__kicker {
    font-size: 12px;
    line-height: 16px;
  }
  .sv-card__title {
    font-size: 15px;
    line-height: 20px;
  }
  .sv-card__desc {
    font-size: 12px;
    line-height: 19px;
  }
  .sv-card__more {
    font-size: 12px;
    line-height: 17px;
  }
}