/* ==========================================================================
   Shared service card component — photo with bottom gradient overlay and
   label, whole card clickable. Used on both the homepage (Section 3) and
   the خدمات landing page, loaded by both so there's one source of truth.
   ========================================================================== */

.service-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
}

.service-card img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 20, 28, 0.92) 0%, rgba(18, 20, 28, 0.1) 55%, transparent 100%);
}

.service-card__label {
  position: absolute;
  inset-inline: var(--space-3);
  inset-block-end: var(--space-3);
  z-index: 2;
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--fs-small);
}