/* ============================================================
   PROPERTY SERVICES INTELLIGENCE GRID
   Asymmetric visual hierarchy — Hero + Secondary + Supporting
   Brand: #155945 (primary) / #d7b39a (warm accent)
   ============================================================ */

/* ── FA7: иконки (CSS custom property) ── */
.fa-bullhorn         { --fa: "\f0a1" }
.fa-magnifying-glass { --fa: "\f002" }
.fa-comments         { --fa: "\f086" }

/* ── Section wrapper ── */
.services-section {
  background: var(--color-bg-light, #fff5f0);
  padding: 80px 0 64px;
  position: relative;
}

/* ══════════════════════════════════════════════════════════
   INTELLIGENCE GRID — асимметричная 3-колоночная сетка
   Row 1-2: [HERO 2×2] [Secondary] [Secondary]
   Row 3:   [Support]  [Support]   [Support]
   ══════════════════════════════════════════════════════════ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: 20px;
  margin-top: 44px;
}

/* ── Explicit card placement ── */
.svc-card:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }         /* Hero — 2×2  */
.svc-card:nth-child(2) { grid-column: 3; grid-row: 1; align-self: start; } /* Sec         */
.svc-card:nth-child(3) { grid-column: 3; grid-row: 2; align-self: start; } /* Sec         */
.svc-card:nth-child(4) { grid-column: 1; grid-row: 3; }                  /* Supp        */
.svc-card:nth-child(5) { grid-column: 2; grid-row: 3; }                  /* Supp        */
.svc-card:nth-child(6) { grid-column: 3; grid-row: 3; }                  /* Supp        */

/* ══════════════════════════════════════════════════════════
   BASE CARD SHELL
   ══════════════════════════════════════════════════════════ */
.svc-card {
  background: #ffffff;
  border: 1px solid rgba(21,89,69,.12);
  border-radius: 20px;
  padding: 28px 26px 26px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform .30s cubic-bezier(.22, .61, .36, 1),
    box-shadow .30s ease,
    border-color .30s ease;
}

/* Subtle depth on hover */
.svc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(21,89,69,.12);
  border-color: rgba(21,89,69,.26);
}

/* Decorative circle — bottom-right */
.svc-card::after {
  content: "";
  position: absolute;
  bottom: -24px;
  right: -24px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(21,89,69,.045);
  pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
}
.svc-card:hover::after {
  transform: scale(1.55);
  opacity: .7;
}

/* ══════════════════════════════════════════════════════════
   HERO CARD — карточка #1, занимает 2×2 ячейки
   ══════════════════════════════════════════════════════════ */
.svc-card:nth-child(1) {
  padding: 38px 40px 36px;
  border-color: rgba(21,89,69,.18);
  background: #fff;
}

/* Left accent bar */
.svc-card:nth-child(1)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #155945 0%, rgba(21,89,69,.35) 100%);
  border-radius: 20px 20px 0 0;
}

/* Hero decorative circle — bigger + warmer */
.svc-card:nth-child(1)::after {
  width: 200px;
  height: 200px;
  bottom: -50px;
  right: -50px;
  background: rgba(215,179,154,.12);
}

.svc-card:nth-child(1):hover::after {
  transform: scale(1.3);
  opacity: .85;
}

/* Hero: top row */
.svc-card:nth-child(1) .svc-card__top {
  margin-bottom: 28px;
  align-items: center;
}

/* Hero number badge */
.svc-card:nth-child(1) .svc-card__num {
  font-size: 11px;
  background: rgba(21,89,69,.1);
  border-color: rgba(21,89,69,.22);
}

/* Hero icon — enlarged, solid green background */
.svc-card:nth-child(1) .svc-card__icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: #155945;
  border-color: #155945;
  box-shadow: 0 6px 20px rgba(21,89,69,.25);
  transition: transform .28s ease, box-shadow .28s ease;
}

.svc-card:nth-child(1):hover .svc-card__icon {
  transform: scale(1.07);
  box-shadow: 0 10px 28px rgba(21,89,69,.32);
}

.svc-card:nth-child(1) .svc-card__icon i {
  font-size: 22px;
  color: #fff;
}

/* Hero title — larger, stronger */
.svc-card:nth-child(1) .svc-card__title {
  font-size: clamp(1rem, 0.8rem + 0.89vw, 1.375rem); /* 16→22px */
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.025em;
  margin-bottom: 14px;
  color: #111;
}

/* Hero description — more readable */
.svc-card:nth-child(1) .svc-card__text {
  font-size: clamp(0.8125rem, 0.77rem + 0.18vw, 0.9375rem); /* 13→15px */
  line-height: 1.7;
  color: rgba(30,30,30,.65);
  margin-bottom: 28px;
}

/* ── Hero stats strip ── */
.svc-card__stats {
  display: flex;
  gap: 0;
  border: 1px solid rgba(21,89,69,.13);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  background: rgba(21,89,69,.03);
}

.svc-card__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  text-align: center;
  position: relative;
}

.svc-card__stat + .svc-card__stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  height: 64%;
  width: 1px;
  background: rgba(21,89,69,.13);
}

.svc-card__stat-val {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.75rem, 0.67rem + 0.36vw, 0.9375rem); /* 12→15px */
  font-weight: 800;
  color: #155945;
  line-height: 1.2;
  letter-spacing: -.02em;
  display: block;
  margin-bottom: 3px;
}

/* ── Stats strip: scroll-triggered animation ── */
#svc-hero-stats.svc-stats-ready .svc-card__stat-val {
  opacity: 0;
  transform: translateY(10px) scale(0.82);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#svc-hero-stats.svc-stats-ready .svc-card__stat-val.svc-stat-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.svc-card__stat-lbl {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  color: rgba(30,30,30,.52);
  line-height: 1.3;
  display: block;
}

/* ── Hero checklist ── */
.svc-card__checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.svc-card__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: rgba(30,30,30,.7);
  line-height: 1.5;
}

.svc-card__checklist li i {
  font-size: 10px;
  color: #155945;
  margin-top: 3px;
  flex-shrink: 0;
  background: rgba(21,89,69,.1);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero link — more prominent */
.svc-card:nth-child(1) .svc-card__link {
  font-size: 0.88rem;
  font-weight: 700;
  color: #155945;
  border-top-color: rgba(21,89,69,.14);
  padding-top: 20px;
}

/* Hero hover: lift the border color */
.svc-card:nth-child(1):hover {
  border-color: rgba(21,89,69,.3);
  box-shadow: 0 22px 56px rgba(21,89,69,.12);
}

/* ══════════════════════════════════════════════════════════
   SECONDARY CARDS — карточки #2 и #3
   ══════════════════════════════════════════════════════════ */
.svc-card:nth-child(2),
.svc-card:nth-child(3) {
  padding: 24px 22px 22px;
}

.svc-card:nth-child(2) .svc-card__title,
.svc-card:nth-child(3) .svc-card__title {
  font-size: 14.5px;
}

.svc-card:nth-child(2) .svc-card__text,
.svc-card:nth-child(3) .svc-card__text {
  font-size: 13px;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   SUPPORTING CARDS — карточки #4, #5, #6
   Compact; optimised for fast visual scanning
   ══════════════════════════════════════════════════════════ */
.svc-card:nth-child(4),
.svc-card:nth-child(5),
.svc-card:nth-child(6) {
  padding: 22px 20px 20px;
  background: rgba(255,252,249,1);
  border-color: rgba(21,89,69,.1);
}

/* Supporting: tighter top row */
.svc-card:nth-child(4) .svc-card__top,
.svc-card:nth-child(5) .svc-card__top,
.svc-card:nth-child(6) .svc-card__top {
  margin-bottom: 14px;
}

.svc-card:nth-child(4) .svc-card__title,
.svc-card:nth-child(5) .svc-card__title,
.svc-card:nth-child(6) .svc-card__title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

.svc-card:nth-child(4) .svc-card__text,
.svc-card:nth-child(5) .svc-card__text,
.svc-card:nth-child(6) .svc-card__text {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(30,30,30,.58);
  margin-bottom: 14px;
}

/* Supporting: smaller decorative circle */
.svc-card:nth-child(4)::after,
.svc-card:nth-child(5)::after,
.svc-card:nth-child(6)::after {
  width: 64px;
  height: 64px;
  bottom: -16px;
  right: -16px;
}

/* ══════════════════════════════════════════════════════════
   SHARED CARD INTERNALS
   ══════════════════════════════════════════════════════════ */

/* Card top row */
.svc-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* Number badge */
.svc-card__num {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  color: #155945;
  background: rgba(21,89,69,.08);
  border: 1px solid rgba(21,89,69,.16);
  border-radius: 999px;
  padding: 3px 10px;
  line-height: 1.6;
  flex-shrink: 0;
  transition: background .25s ease;
}
.svc-card:hover .svc-card__num {
  background: rgba(21,89,69,.13);
}

/* Icon badge */
.svc-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(21,89,69,.07);
  border: 1px solid rgba(21,89,69,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .25s ease, border-color .25s ease;
}
.svc-card:hover .svc-card__icon {
  background: rgba(21,89,69,.13);
  border-color: rgba(21,89,69,.26);
}
.svc-card__icon i {
  font-size: 17px;
  color: #155945;
}

/* Title */
.svc-card__title {
  font-family: "Montserrat", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
  margin: 0 0 10px;
  letter-spacing: -.01em;
}

/* Description */
.svc-card__text {
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(30,30,30,.62);
  margin: 0 0 20px;
  flex: 1;
}

/* «Подробнее» link */
.svc-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #155945;
  text-decoration: none;
  border-top: 1px solid rgba(21,89,69,.1);
  padding-top: 16px;
  margin-top: auto;
  transition: gap .22s ease, color .22s ease;
  position: relative;
  z-index: 1;
}
.svc-card__link i {
  font-size: 0.68rem;
  transition: transform .22s ease;
}
.svc-card__link:hover {
  color: #0e3d2f;
  gap: 10px;
}
.svc-card__link:hover i {
  transform: translateX(3px);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* ── Laptop (1024–1279px) ── */
@media (max-width: 1279px) {
  .svc-card:nth-child(1) {
    padding: 32px 32px 30px;
  }
}

/* ── Tablet (768–1023px) — Hero full width, затем 2 колонки ── */
@media (max-width: 1023px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 16px;
    margin-top: 36px;
  }

  /* Reset all explicit placements */
  .svc-card:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
  }

  /* Hero: full width on tablet */
  .svc-card:nth-child(1) {
    grid-column: 1 / -1;
  }

  .services-section {
    padding: 64px 0 48px;
  }

  .svc-card:nth-child(1) {
    padding: 28px 26px 26px;
  }

  /* Stats strip: more compact on tablet */
  .svc-card__stats {
    margin-bottom: 16px;
  }
  .svc-card__stat {
    padding: 11px 6px;
  }
}

/* ── Mobile (<768px) — single column ── */
@media (max-width: 767px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 24px;
  }

  .svc-card:nth-child(1) {
    grid-column: auto;
    padding: 22px 18px 20px;
  }

  .svc-card:nth-child(1) .svc-card__icon {
    width: 50px;
    height: 50px;
  }

  .svc-card:nth-child(1) .svc-card__icon i {
    font-size: 18px;
  }

  /* Stats: tighter on mobile */
  .svc-card__stats {
    margin-bottom: 14px;
    border-radius: 11px;
  }
  .svc-card__stat {
    padding: 10px 4px;
  }

  /* Checklist: slightly tighter */
  .svc-card__checklist {
    gap: 7px;
    margin-bottom: 18px;
  }

  /* Supporting cards */
  .svc-card:nth-child(4),
  .svc-card:nth-child(5),
  .svc-card:nth-child(6) {
    padding: 18px 16px 16px;
  }

  .services-section {
    padding: 48px 0 36px;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-card::after,
  .svc-card__link i,
  .svc-card:nth-child(1) .svc-card__icon {
    transition: none !important;
  }
}