/* ============================================================
   SERVICES.CSS
   Services section — three-column card grid with individual
   card layout rules and their background compositions.
   ============================================================ */


/* ------------------------------------------------------------
   1. SECTION WRAPPER
   ------------------------------------------------------------ */
.services {
  padding: var(--sp-4) 0 0;
  width: 100%;
}


/* ------------------------------------------------------------
   2. GRID  (3-column flex layout)
   [Card 1 — large] [Card 2 — medium] [Column 3 — stack]
   ------------------------------------------------------------ */
.services__grid {
  display: flex;
  gap: 22px;
  align-items: stretch;
  width: 100%;
}


/* ------------------------------------------------------------
   3. CARD 1 — Digital Product Engineering
   Darkest card, wave texture, overlapping app mockups
   ------------------------------------------------------------ */
.svc-card--engineering {
  width: 47%;
  height: 421px;        /* Figma: 420.75px — explicit so mockups clip at correct edge */
  background: var(--clr-card-dark);
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   BACKGROUND LAYER STACK  (bottom → top inside card-bg)
   Layer order matches Figma stacking exactly:
     1. card-bg__glow   — subtle purple/blue radial glow
     2. card-bg__wave   — oversized cosmic-particle texture
     3. card-bg__dim    — 20% black dim overlay

   Percentages derived from Figma's fixed canvas (646.5 × 421 px):
     Wave  : left -405.88 / 646.5 = -62.78%
             top  -169.5  / 421   = -40.26%
             w     1328   / 646.5 = 205.41%
             h      747   / 421   = 177.43%
     Glow  : left   55.38 / 646.5 =   8.57%
             top   161.25 / 421   =  38.30%
             w     390.75 / 646.5 =  60.47%
             h      360   / 421   =  85.51%
   ---------------------------------------------------------- */

/* Glow ellipse — sits BEHIND the wave (rendered first) */
.svc-card--engineering .card-bg__glow {
  position: absolute;
  inset: auto;          /* override inset:0 from components.css */
  left: 8.57%;
  top: 38.3%;
  width: 60.47%;
  height: 85.51%;
  object-fit: contain;
  max-width: none;
}

/* Wave texture — oversized & offset, clips via card overflow:hidden */
.svc-card--engineering .card-bg__wave {
  position: absolute;
  inset: auto;          /* override inset:0 from components.css */
  left: -62.78%;
  top: -40.26%;
  width: 205.41%;
  height: 177.43%;
  object-fit: cover;
  max-width: none;
}

/* Content padding */
.svc-card--engineering .card-body {
  position: relative;
  z-index: var(--z-content);
  padding: 36px 43px 60px;
}

.svc-card--engineering .card-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 437px;
}

/* --- Overlapping mockup screenshots ---
   Figma grid (col-1 / row-1, both images overlap):
     Desktop (image 73): ml 57.75px, mt 0,     w 466.72px, h 211.5px  → BEHIND
     Mobile  (image 72): ml 0,       mt 40.5px, w 133.37px, h 277.5px → IN FRONT
   Total stack height: 40.5 + 277.5 = 318px
   ---------------------------------------- */
.mockup-stack {
  position: relative;
  margin-top: 34px;
  /* 318px matches the mobile phone bottom edge in Figma;
     content overflows card bottom — clipped by card overflow:hidden */
  height: 318px;
}

/* Desktop screenshot — shifted right, BEHIND mobile phone */
.mockup-stack__desktop {
  position: absolute;
  left: 58px;           /* Figma: ml 57.75px */
  top: 0;
  width: calc(100% - 58px);
  max-width: 467px;
  height: 212px;
  object-fit: cover;
  border-radius: 17px;
  border: 7px solid #000;
  box-shadow: var(--shadow-mockup);
  z-index: 1;           /* behind mobile */
}

/* Mobile phone screenshot — left-aligned, IN FRONT of desktop */
.mockup-stack__mobile {
  position: absolute;
  left: 0;
  top: 40px;            /* Figma: mt 40.5px */
  width: 133px;
  height: 278px;
  object-fit: cover;
  border-radius: 17px;
  z-index: 2;           /* in front of desktop */
}


/* ------------------------------------------------------------
   4. CARD 2 — Intelligent Data & AI Solutions
   Deep navy, binary overlay, AI hand visual lower-right
   ------------------------------------------------------------ */
.svc-card--ai {
  width: 27%;
  height: 421px;        /* Figma: 420.75px — explicit height, matches Card 1 */
  background: var(--clr-card-navy);
  flex-shrink: 0;
}

/* Binary / code texture (mix-blend difference) */
.svc-card--ai .binary-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  z-index: 1;
  overflow: hidden;
  mix-blend-mode: difference;
  opacity: 0.3;
  pointer-events: none;
}

.svc-card--ai .binary-overlay img {
  position: absolute;
  width: 115%;
  left: -8%;
  top: -8%;
  object-fit: cover;
}

/* AI hand visual — anchored to lower-right of card.
   Figma inset on a 370.5 × 421px card:
     top:    174.75px  → kept in px (card height is fixed at 421px)
     right:  -21.75px  → -21.75 / 370.5 = -5.87% of card width
     bottom:  21.75px  → kept in px
     left:   118.5px   → 118.5 / 370.5 = 32% of card width
   Using % for left/right ensures the container scales proportionally
   with the card width so object-fit:cover crops the same way as Figma. */
.svc-card--ai .ai-visual {
  position: absolute;
  top: 175px;
  right: -5.87%;
  bottom: 22px;
  left: 32%;
  z-index: 3;
  border-radius: 19px;
  overflow: hidden;
}

.svc-card--ai .ai-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 19px;
}

.svc-card--ai .card-body {
  position: relative;
  z-index: var(--z-content);
  padding: 25px 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.svc-card--ai .card-header {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Override shared desc colour for this card */
.svc-card--ai .svc-desc {
  color: var(--clr-white);
  font-weight: var(--fw-medium);
}


/* ------------------------------------------------------------
   5. COLUMN 3  (right-hand stack)
   Contains two vertically stacked cards
   ------------------------------------------------------------ */
.services__col-right {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 25px;
  min-width: 0;
}


/* ------------------------------------------------------------
   5a. CARD 3 — Cloud & DevOps
   ------------------------------------------------------------ */
.svc-card--cloud {
  flex: 1;
  min-height: 261px;    /* Figma: 260.798px — fills col-right after 135px all-services + 25px gap */
  background: var(--clr-card-blue);
}

.svc-card--cloud .card-body {
  position: relative;
  z-index: var(--z-content);
  padding: 48px 30px 36px;
  display: flex;
  flex-direction: column;
  gap: 38px;
}

/* Override shared desc colour */
.svc-card--cloud .svc-desc {
  color: var(--clr-text-dim);
  max-width: 192px;
}


/* ------------------------------------------------------------
   5b. CARD 4 — "All Services" CTA
   ------------------------------------------------------------ */
.svc-card--all {
  height: 135px;
  background: var(--clr-card-black);
  /* All children are absolutely positioned — no flex needed */
}

/* Second background image — plain stack, no blend mode (Figma: overflow-hidden wrapper) */
.svc-card--all .card-bg__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100.27%;
  max-width: none;
  object-fit: cover;
  z-index: 1;
}

/* Blurred texture layer (Figma: blur-[7.5px], left=-35.33px, top=-41.04px, 386×217.5px) */
.svc-card--all .blur-layer {
  position: absolute;
  left: -35.33px;
  top: -41.04px;
  width: 386.667px;
  height: 217.5px;
  filter: blur(7.5px);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.svc-card--all .blur-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-card--all .card-bg__dim {
  z-index: 1;
}

/* 3D logo — bleeds out top-left per Figma (left=-79.58px, top=-51.54px, size=235.5px) */
.all-services__logo {
  position: absolute;
  left: -79.58px;
  top: -51.54px;
  width: 235.5px;
  height: 235.5px;
  object-fit: cover;
  pointer-events: none;
  z-index: 2;
}

/* Ghost "All" — ExtraBold, transparent fill, white stroke
   Figma: left=calc(50%+28.42px), top=33.96px, w=321px, fs=72.318px */
.all-services__ghost {
  position: absolute;
  left: calc(50% + 28.42px);
  top: 33.96px;
  transform: translateX(-50%);
  width: 321px;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 800;              /* ExtraBold — matches Figma font-extrabold */
  font-size: 72.318px;
  line-height: 35.568px;
  letter-spacing: -1.067px;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85);
  text-align: center;
  user-select: none;
  pointer-events: none;
  z-index: 3;
}

/* "Services" label — same horizontal shift as "All", vertically at 50%+27.86px */
.all-services__label {
  position: absolute;
  left: calc(50% + 28.42px);
  top: calc(50% + 27.86px);
  transform: translate(-50%, -50%);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 16px;
  color: #ffffff;
  white-space: nowrap;
  text-align: center;
  z-index: 4;
}

.svc-card--all:hover .all-services__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ------------------------------------------------------------
   6. RESPONSIVE
   ------------------------------------------------------------ */

/* Tablet (≤ 1100px) — Card 1 goes full-width; 2 & 3 split 50/50 */
@media (max-width: 1100px) {
  .services__grid {
    flex-wrap: wrap;
  }

  .svc-card--engineering {
    width: 100%;
    height: auto;         /* let content breathe when full-width */
    min-height: 360px;
  }

  .svc-card--ai {
    width: calc(50% - 11px);
    height: auto;
    min-height: 421px;
  }

  .services__col-right {
    flex: 0 0 calc(50% - 11px);
    width: calc(50% - 11px);
  }
}

/* Mobile (≤ 767px) — single column stack */
@media (max-width: 767px) {
  .services__grid {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .svc-card--engineering,
  .svc-card--ai {
    width: 100%;
    height: auto;
    min-height: 360px;
  }

  .services__col-right {
    flex: unset;
    width: 100%;
  }

  .svc-card--cloud {
    min-height: 220px;
  }

  .mockup-stack {
    height: 200px;
  }

  .mockup-stack__desktop {
    max-width: 100%;
    height: 160px;
  }

  .mockup-stack__mobile {
    width: 90px;
    height: 190px;
  }

  .svc-card--ai .ai-visual {
    top: 200px;
    left: 22%;   /* ~80px on a typical mobile card width */
  }

  .all-services__ghost {
    font-size: 52px;
    line-height: 26px;
    width: 240px;
  }
}

/* Small mobile (≤ 480px) */
@media (max-width: 480px) {
  .svc-card--engineering .card-body,
  .svc-card--ai .card-body,
  .svc-card--cloud .card-body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .svc-card--engineering .card-header {
    max-width: 100%;
  }
}