/* ============================================================
   OLYMPIA — SERVICE CARDS  ·  Single Authoritative Source
   All other card CSS has been removed from the codebase.
   This file loads last and owns all .svc-photo-card rules.
   ============================================================ */

/* ── SECTION ─────────────────────────────────────────────── */
.services-overview {
  padding: 100px 0 110px;
  background: var(--black);
}
.services-overview .section-header {
  margin-bottom: 56px;
}

/* ── GRID ─────────────────────────────────────────────────── */
/* Desktop: 3 columns  |  Tablet: 2 columns  |  Mobile: 1 column */
.svc-photo-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
  width: 100% !important;
}

@media (max-width: 1024px) {
  .svc-photo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
}

@media (max-width: 600px) {
  .svc-photo-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── BASE CARD ────────────────────────────────────────────── */
.svc-photo-card {
  display: flex !important;
  flex-direction: column !important;
  background: #131313 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(201,168,76,0.15) !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.55) !important;
  /* CRITICAL: no opacity or transform dimming — cards always visible */
  opacity: 1 !important;
  transform: none !important;
  transition:
    transform 0.4s cubic-bezier(0.22,1,0.36,1),
    border-color 0.4s ease,
    box-shadow 0.4s ease !important;
  will-change: transform !important;
}

/* Top gold hair-line — appears on hover/active */
.svc-photo-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 16px !important;
  right: 16px !important;
  height: 1px !important;
  background: linear-gradient(90deg,transparent,rgba(201,168,76,0.5),transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.35s ease !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* Gold sweep shimmer — appears on hover */
.svc-photo-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    115deg,
    transparent 25%,
    rgba(201,168,76,0.05) 50%,
    transparent 75%
  ) !important;
  transform: translateX(-120%) skewX(-12deg) !important;
  transition: transform 0.7s ease !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

/* ── IMAGE AREA ───────────────────────────────────────────── */
.svc-photo-img-wrap {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 16 / 10 !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.svc-photo-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter: brightness(0.78) saturate(0.88) !important;
  transform: scale(1) !important;
  transition:
    transform 0.7s cubic-bezier(0.22,1,0.36,1),
    filter 0.5s ease !important;
}

.svc-photo-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to top,
    rgba(10,9,7,0.75) 0%,
    rgba(10,9,7,0.15) 50%,
    transparent 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Gold bottom-bar — draws in on hover */
.svc-photo-img-wrap::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--gold), var(--gold-light)) !important;
  transition: width 0.55s cubic-bezier(0.22,1,0.36,1) !important;
  z-index: 3 !important;
}

/* Service number */
.svc-num {
  position: absolute !important;
  top: 10px !important;
  left: 13px !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 300 !important;
  color: rgba(201,168,76,0.30) !important;
  line-height: 1 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  letter-spacing: 0.02em !important;
  transition: color 0.4s ease !important;
}

/* ── CARD BODY ────────────────────────────────────────────── */
.svc-photo-body {
  padding: 22px 22px 20px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(
    180deg,
    rgba(201,168,76,0.04) 0%,
    #141414 8%,
    #111111 100%
  ) !important;
  border-top: 1px solid rgba(201,168,76,0.08) !important;
}

.svc-photo-body h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.3rem !important;
  font-weight: 500 !important;
  color: #f0ece4 !important;
  margin-bottom: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  transition: color 0.3s ease !important;
}

.svc-photo-body p {
  font-size: 0.84rem !important;
  color: #888 !important;
  line-height: 1.7 !important;
  flex: 1 !important;
  margin-bottom: 16px !important;
  display: block !important;
}

.svc-learn-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(201,168,76,0.50) !important;
  text-decoration: none !important;
  transition: color 0.3s ease, gap 0.3s ease !important;
  margin-top: auto !important;
}

/* ── DESKTOP HOVER  (pointer: fine = real mouse) ──────────── */
@media (hover: hover) and (pointer: fine) {
  .svc-photo-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(201,168,76,0.40) !important;
    box-shadow:
      0 14px 48px rgba(0,0,0,0.7),
      0 0 30px rgba(201,168,76,0.09) !important;
  }

  .svc-photo-card:hover::before {
    opacity: 1 !important;
  }

  .svc-photo-card:hover::after {
    transform: translateX(200%) skewX(-12deg) !important;
  }

  .svc-photo-card:hover .svc-photo-img-wrap img {
    transform: scale(1.06) !important;
    filter: brightness(0.90) saturate(1.05) !important;
  }

  .svc-photo-card:hover .svc-photo-img-wrap::after {
    width: 100% !important;
  }

  .svc-photo-card:hover .svc-num {
    color: rgba(201,168,76,0.65) !important;
  }

  .svc-photo-card:hover .svc-photo-body h3 {
    color: #ffffff !important;
  }

  .svc-photo-card:hover .svc-learn-link {
    color: #c9a84c !important;
    gap: 8px !important;
  }
}

/* ── MOBILE SCROLL GLOW (touch device viewport entry) ──────── */
/* Only fires on mobile — desktop uses hover above */
@keyframes svcCardGlow {
  0%   {
    border-color: rgba(201,168,76,0.15);
    box-shadow: 0 4px 24px rgba(0,0,0,0.55);
  }
  35%  {
    border-color: rgba(201,168,76,0.55);
    box-shadow:
      0 8px 32px rgba(0,0,0,0.65),
      0 0 24px rgba(201,168,76,0.18),
      0 0 0 1px rgba(201,168,76,0.28);
  }
  100% {
    border-color: rgba(201,168,76,0.22);
    box-shadow:
      0 6px 28px rgba(0,0,0,0.60),
      0 0 12px rgba(201,168,76,0.08);
  }
}

@media (max-width: 768px) {
  .svc-photo-card.svc-in-view {
    animation: svcCardGlow 0.9s cubic-bezier(0.22,1,0.36,1) forwards !important;
  }

  .svc-photo-card.svc-in-view .svc-learn-link {
    color: rgba(201,168,76,0.75) !important;
  }

  /* Mobile tap feedback */
  .svc-photo-card:active {
    transform: scale(0.985) !important;
  }
}

/* ── STAGGER ANIMATION (JS adds .visible to .stagger-children) */
/* Desktop + tablet only — mobile shows cards immediately */
@media (min-width: 601px) {
  .stagger-children .svc-photo-card {
    opacity: 0 !important;
    transform: translateY(20px) !important;
  }

  .stagger-children.visible .svc-photo-card:nth-child(1)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.04s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(2)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.10s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(3)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.16s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(4)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.22s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(5)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.28s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(6)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.34s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(7)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.40s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(8)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.46s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(9)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.52s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(10) { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.58s both !important; }
}

/* Mobile: no stagger — all cards immediately visible */
@media (max-width: 600px) {
  .stagger-children .svc-photo-card {
    opacity: 1 !important;
    transform: none !important;
  }
  .svc-photo-body {
    padding: 18px 18px 16px !important;
  }
  .svc-photo-body h3 {
    font-size: 1.15rem !important;
  }
  .svc-photo-body p {
    font-size: 0.82rem !important;
  }
}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .svc-photo-card,
  .svc-photo-card.svc-in-view,
  .stagger-children .svc-photo-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── SAFETY: cards always visible after 1s regardless of JS ── */
@media (min-width: 601px) {
  @keyframes forceShow {
    to { opacity: 1 !important; transform: none !important; }
  }
  .stagger-children .svc-photo-card {
    animation: forceShow 0.01s 1s both !important;
  }
  .stagger-children.visible .svc-photo-card:nth-child(1)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.04s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(2)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.10s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(3)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.16s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(4)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.22s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(5)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.28s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(6)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.34s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(7)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.40s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(8)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.46s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(9)  { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.52s both !important; }
  .stagger-children.visible .svc-photo-card:nth-child(10) { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.58s both !important; }
}