/* ============================================================
   SERVICES SECTION — Premium Industrial Engineering Cards
   Grid: 1col mobile → 2col tablet → 4col desktop
   Left amber accent. Technical icon container. Deep depth.
   ============================================================ */

.services {
  background: var(--c-bg-section);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent, transparent 40px,
      rgba(31, 41, 51, 0.028) 40px,
      rgba(31, 41, 51, 0.028) 41px
    ),
    repeating-linear-gradient(
      90deg,
      transparent, transparent 40px,
      rgba(31, 41, 51, 0.028) 40px,
      rgba(31, 41, 51, 0.028) 41px
    );
  padding: var(--section-py-sm) 0;
}

.services__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}


/* ── Grid ── */

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}


/* ════════════════════════════════════════
   CARD — Base
   ════════════════════════════════════════ */

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-8);
  background: var(--c-white);
  /*
    Border: slightly stronger than hero/header – gives depth without weight.
    Inset top highlight: technical surface feel, raises card off the grid.
  */
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.06),
    0 10px 28px rgba(15, 23, 42, 0.03);
  overflow: hidden;
  transition:
    box-shadow 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform  0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.28s ease;
}

/* Left amber accent line — gradient, slightly tapered */
.service-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  background: linear-gradient(
    180deg,
    rgba(217, 119, 6, 0.34) 0%,
    rgba(217, 119, 6, 0.16) 100%
  );
  border-radius: 0 2px 2px 0;
  transition:
    background  0.28s ease,
    top         0.28s ease,
    bottom      0.28s ease;
}

/* Hover — lift + amber warmth */
.service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(217, 119, 6, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 2px 6px rgba(15, 23, 42, 0.05),
    0 12px 32px rgba(15, 23, 42, 0.10),
    0 20px 52px rgba(15, 23, 42, 0.05),
    0 0 0 1px rgba(217, 119, 6, 0.06),
    0 6px 24px rgba(217, 119, 6, 0.10);
}

.service-card:hover::before {
  background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);
  top: 10%;
  bottom: 10%;
}

/* Tap / press state — tactile mobile feedback */
.service-card:active {
  transform: translateY(-1px) scale(0.994);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 2px 8px rgba(15, 23, 42, 0.07),
    0 0 0 2px rgba(217, 119, 6, 0.09);
  transition-duration: 0.08s;
}


/* ════════════════════════════════════════
   FEATURED CARD — First card, more weight
   ════════════════════════════════════════ */

.service-card:first-child {
  /*
    Slightly warmer border, stronger shadow depth.
    Accent line already "open" (not waiting for hover).
  */
  border-color: rgba(217, 119, 6, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 8px 24px rgba(15, 23, 42, 0.08),
    0 18px 44px rgba(15, 23, 42, 0.04),
    0 0 0 1px rgba(217, 119, 6, 0.04);
}

/* Featured: accent line already bright and taller */
.service-card:first-child::before {
  background: linear-gradient(180deg, #F59E0B 0%, rgba(217, 119, 6, 0.55) 100%);
  top: 12%;
  bottom: 12%;
}

/* Featured: icon container slightly more amber */
.service-card:first-child .service-card__icon {
  background: rgba(217, 119, 6, 0.09);
  border-color: rgba(217, 119, 6, 0.24);
}

.service-card:first-child:hover {
  border-color: rgba(217, 119, 6, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 4px 8px rgba(15, 23, 42, 0.06),
    0 16px 40px rgba(15, 23, 42, 0.12),
    0 24px 60px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(217, 119, 6, 0.10),
    0 8px 32px rgba(217, 119, 6, 0.14);
}


/* ════════════════════════════════════════
   ICON — Technical square container
   ════════════════════════════════════════ */

.service-card__icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /*
    Technical amber container:
    Warm tinted bg + amber border + inset highlight.
    Reads as an engineering UI element, not a generic icon.
  */
  background: rgba(217, 119, 6, 0.055);
  border: 1px solid rgba(217, 119, 6, 0.16);
  border-radius: 10px;
  color: #D97706;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition:
    background    0.28s ease,
    border-color  0.28s ease;
}

.service-card__icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.6;
}

.service-card:hover .service-card__icon {
  background: rgba(217, 119, 6, 0.10);
  border-color: rgba(217, 119, 6, 0.28);
}


/* ════════════════════════════════════════
   CARD BODY
   ════════════════════════════════════════ */

.service-card__title {
  font-size: var(--text-md);
  font-weight: 700;
  /* Slightly darker than shared graphite — more decisive */
  color: #0C1520;
  line-height: 1.22;
  letter-spacing: -0.012em;
}

.service-card__desc {
  font-size: var(--text-sm);
  /* Muted — clearly subordinate to title */
  color: rgba(30, 41, 59, 0.60);
  line-height: 1.60;
}


/* ════════════════════════════════════════
   REVEAL ANIMATIONS
   ════════════════════════════════════════ */

.services__header[data-reveal],
.services__grid[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.services__header[data-reveal].is-visible,
.services__grid[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .services__header[data-reveal],
  .services__grid[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ════════════════════════════════════════
   MOBILE (max 767px)
   ════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Tighter header — less gap between section title and cards */
  .services__header {
    margin-bottom: 28px;
  }

  /*
    Horizontal icon + title row via CSS Grid.
    Col 1: fixed 52px icon track. Col 2: title + desc stack.
    Left padding reduced to 14px — accent line, icon and title
    form a single connected visual system, no orphaned gutter.
  */
  .service-card {
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto;
    column-gap: 13px;
    row-gap: 0;
    padding: 20px 18px 20px 14px;
    border-radius: 12px;
    align-items: center;
  }

  /*
    Accent line — left edge, same position as desktop.
    Override only top/bottom for compact mobile card proportions.
    width: 3px retained (same as desktop base) for consistent weight.
  */
  .service-card::before {
    left: 0;
    width: 3px;
    top: 20%;
    bottom: 20%;
  }

  /* Featured card: slightly taller line, already bright gradient */
  .service-card:first-child::before {
    left: 0;
    width: 3px;
    top: 14%;
    bottom: 14%;
  }

  /*
    Bottom amber rule — mobile only.
    Inset 1px from bottom edge to avoid border-radius clip.
    Opacity lifted so it reads clearly on white card background.
  */
  .service-card::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 14px;
    right: 18px;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(217, 119, 6, 0.55) 0%,
      rgba(217, 119, 6, 0.22) 55%,
      transparent 88%
    );
  }

  /* Featured first card: stronger bottom rule matches brighter left line */
  .service-card:first-child::after {
    background: linear-gradient(
      90deg,
      rgba(217, 119, 6, 0.70) 0%,
      rgba(217, 119, 6, 0.28) 55%,
      transparent 88%
    );
  }

  /* Icon — col 1, row 1. Visual anchor */
  .service-card__icon {
    grid-column: 1;
    grid-row: 1;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    align-self: center;
    flex-shrink: 0;
  }

  .service-card__icon svg {
    width: 22px;
    height: 22px;
  }

  /* Title — col 2, row 1. Heavy industrial type */
  .service-card__title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.20;
    letter-spacing: -0.018em;
  }

  /*
    Desc — full width, row 2.
    padding-left: 26px = half of icon width (52px / 2).
    Text starts at the visual center of the icon column.
  */
  .service-card__desc {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    padding-left: 26px;
    margin-top: 7px;
    font-size: 13.5px;
    line-height: 1.54;
    color: rgba(30, 41, 59, 0.58);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* ════════════════════════════════════════
   TABLET (768px+)
   ════════════════════════════════════════ */

@media (min-width: 768px) {
  .services {
    padding: var(--section-py-md) 0;
  }

  /* Slightly tighter than shared default (48px → 36px) */
  .services__header {
    margin-bottom: 36px;
  }

  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-md);
  }
}


/* ════════════════════════════════════════
   DESKTOP (1024px+)
   ════════════════════════════════════════ */

@media (min-width: 1024px) {
  .services {
    padding: var(--section-py-lg) 0;
  }

  .services__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-md);
  }

  .service-card {
    padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-8);
  }

  /* Full description on desktop — no clamp */
  .service-card__desc {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }
}


/* ════════════════════════════════════════
   LARGE DESKTOP (1280px+)
   ════════════════════════════════════════ */

@media (min-width: 1280px) {
  .service-card {
    padding: var(--sp-8);
  }
}