/* ==========================================================================
   Section: Services (five sectors)
   Grid: 1 col → 2 cols (tablet, 5th card full width) → 6-col bento (2 large + 3).
   Card motion: staggered reveal, pointer tilt + spotlight (motion.js),
   sheen sweep, image zoom, outlined number lights up.
   ========================================================================== */

.services { overflow: hidden; }

.services__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 45% at 85% 0%, rgba(211,157,53,.09), transparent 70%),
    radial-gradient(35% 40% at 0% 100%, rgba(58,59,65,.45), transparent 70%);
}
.services__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%);
  mask-image: linear-gradient(180deg, #000, transparent 55%);
}
.services > .container { position: relative; }

.services__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block-end: var(--space-12);
}
.services__head .section-head { margin-block-end: 0; }
.services__lead {
  max-width: 520px;
  color: var(--text-secondary);
  line-height: var(--lh-body);
}
@media (min-width: 1024px) {
  .services__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-12); }
  .services__lead { padding-block-end: 6px; }
}

/* ---------- Grid ---------- */
.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services__grid > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .services__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .services__grid > :nth-child(-n+2) { grid-column: span 3; }
  .services__grid > :nth-child(n+3) { grid-column: span 2; }
}

/* ---------- Card ---------- */
.service-card {
  --lift: 0px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-slow) var(--ease-out);
}
.service-card:hover {
  --lift: -6px;
  border-color: rgba(211,157,53,.5);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(211,157,53,.15);
}
/* Resting state is plain 2D; the 3D tilt (vars set by motion.js) only applies while
   hovered — avoids a permanent 3D layer per card (perf + paint reliability) */
.service-card,
.js .service-card[data-reveal].is-revealed { transform: translateY(var(--lift)); }
.service-card:hover,
.js .service-card[data-reveal].is-revealed:hover {
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift));
}
.js .service-card[data-reveal].is-settled {
  transition:
    transform 260ms var(--ease-out),
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-slow) var(--ease-out);
}

/* Pointer spotlight glare */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--spot-x, 50%) var(--spot-y, 0%), rgba(211,157,53,.12), transparent 60%);
  opacity: var(--spot-opacity, 0);
  transition: opacity 400ms var(--ease-standard);
}

/* ---------- Media ---------- */
.service-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--gradient-card);
}
.services__grid > :nth-child(n+3) .service-card__media { aspect-ratio: 16 / 10; }
.service-card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92);
  transition: transform 1100ms var(--ease-out), filter var(--dur-slow) var(--ease-standard);
}
.service-card:hover .service-card__media > img { transform: scale(1.08); filter: saturate(1.05); }
.service-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23,28,33,0) 35%, rgba(23,28,33,.55) 75%, var(--surface-card) 100%);
}

.service-card__num {
  position: absolute;
  z-index: 1;
  inset-block-end: 6px;
  inset-inline-end: 20px;
  font-family: var(--font-display-latin);
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.55);
  transition: -webkit-text-stroke-color var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-standard);
}
.service-card:hover .service-card__num {
  -webkit-text-stroke-color: var(--gold-500);
  color: rgba(211,157,53,.12);
  transform: translateY(-4px);
}

.service-card__icon {
  position: absolute;
  z-index: 1;
  inset-block-start: 16px;
  inset-inline-start: 16px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--gold-500);
  color: var(--ink-900);
  font-size: 19px;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  transition: transform var(--dur-slow) var(--ease-out);
}
.service-card:hover .service-card__icon { transform: rotate(-8deg) scale(1.06); }

/* ---------- Body ---------- */
.service-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6) var(--space-6);
}
.service-card__latin {
  align-self: flex-start;
  font-family: var(--font-display-latin);
  font-size: 10.5px;
  letter-spacing: var(--tracking-latin-caps);
  text-transform: uppercase;
  color: var(--gold-500);
}
.service-card__title {
  font: var(--weight-extra) clamp(19px, 1.8vw, 22px)/1.35 var(--font-arabic);
  color: var(--white);
}
.service-card__desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.service-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block: var(--space-1) var(--space-2);
}
.service-card__list li {
  position: relative;
  padding-inline-start: 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.service-card__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: .62em;
  width: 7px;
  height: 7px;
  background: var(--gold-500);
  transform: rotate(45deg);
  transition: transform var(--dur-slow) var(--ease-out);
}
.service-card:hover .service-card__list li::before { transform: rotate(225deg); }

.service-card__cta {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: auto;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
  color: var(--gold-500);
  font-weight: var(--weight-extra);
  font-size: 15px;
}
.service-card__cta:hover { color: var(--gold-300); }
.service-card__cta:hover .btn__arrow,
.service-card:hover .service-card__cta .btn__arrow { transform: translateX(-6px); }
[dir="ltr"] .service-card__cta:hover .btn__arrow,
[dir="ltr"] .service-card:hover .service-card__cta .btn__arrow { transform: scaleX(-1) translateX(-6px); }
/* Make the whole card clickable through the CTA (keeps one accessible link) */
.service-card__cta::after { content: ""; position: absolute; inset: -1000px; }
.service-card { cursor: pointer; }
.service-card__cta:focus-visible { outline-offset: 6px; }

/* Keep text selectable areas above the stretched link where useful */
.service-card__body > :not(.service-card__cta) { position: relative; z-index: 1; pointer-events: none; }

@media (max-width: 767px) {
  .service-card__body { padding: var(--space-5); }
}

/* Large cards (desktop bento): wider, shorter media */
@media (min-width: 1100px) {
  .services__grid > :nth-child(-n+2) .service-card__media { aspect-ratio: 2 / 1; }
}

/* Tablet: the full-width 5th card lays out horizontally instead of a giant image */
@media (min-width: 768px) and (max-width: 1099px) {
  .services__grid > :last-child { flex-direction: row; }
  .services__grid > :last-child .service-card__media { flex: 0 0 44%; aspect-ratio: auto; min-height: 100%; }
  .services__grid > :last-child .service-card__media::after {
    background: linear-gradient(to left, rgba(23,28,33,0) 40%, var(--surface-card) 100%);
  }
  [dir="ltr"] .services__grid > :last-child .service-card__media::after {
    background: linear-gradient(to right, rgba(23,28,33,0) 40%, var(--surface-card) 100%);
  }
}

/* English: the source's English label duplicates the translated title */
html[lang="en"] .service-card__latin { display: none; }