/* ════════════════════════════════════════════════════════════════════
   ARCHIVE USLUGA — ENHANCED (Emil Kowalski design eng philosophy)
   Custom easings, scale-on-press, stagger entrance, taste-first details
   ════════════════════════════════════════════════════════════════════ */

:root {
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════ 1. PAGE HEADER — refined ═══════ */
.page-header {
  padding: clamp(72px, 9vw, 120px) var(--px) clamp(56px, 7vw, 88px) !important;
  background: linear-gradient(180deg, var(--white) 0%, var(--mag-w) 100%) !important;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.ph-blob {
  width: 600px !important; height: 600px !important;
  top: -200px !important; right: -150px !important;
  background: radial-gradient(circle, rgba(223,59,163,.08) 0%, transparent 60%) !important;
}
.page-header::after {
  content: '';
  position: absolute;
  bottom: -150px; left: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(12,184,182,.06) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.ph-title {
  margin-bottom: 20px !important;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.ph-desc {
  font-size: clamp(16px, 1.7vw, 19px) !important;
  line-height: 1.65 !important;
  color: var(--gray) !important;
  max-width: 640px !important;
}

/* ═══════ 2. FILTERS — instant feedback, no animation overhead ═══════ */
.filters-wrapper {
  border-bottom: 1px solid rgba(0,0,0,.04) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) !important;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.96) !important;
}
.f-btn {
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  /* Frequent action — fast transitions only */
  transition: background 120ms var(--ease-out-strong), color 120ms var(--ease-out-strong), border-color 120ms var(--ease-out-strong), transform 100ms var(--ease-out-strong) !important;
}
.f-btn:active {
  transform: scale(0.97);
}
.f-btn.active {
  box-shadow: 0 4px 14px rgba(223,59,163,.3) !important;
}

/* ═══════ 3. GRID + STAGGER ENTRANCE ═══════ */
.services-main {
  padding: clamp(56px, 7vw, 88px) var(--px) !important;
}
.s-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 24px !important;
}

.s-card {
  opacity: 0;
  transform: translateY(12px);
  animation: cardEnter 500ms var(--ease-out-strong) forwards;
}
@keyframes cardEnter {
  to { opacity: 1; transform: translateY(0); }
}
.s-card:nth-child(1) { animation-delay: 0ms; }
.s-card:nth-child(2) { animation-delay: 40ms; }
.s-card:nth-child(3) { animation-delay: 80ms; }
.s-card:nth-child(4) { animation-delay: 120ms; }
.s-card:nth-child(5) { animation-delay: 160ms; }
.s-card:nth-child(6) { animation-delay: 200ms; }
.s-card:nth-child(7) { animation-delay: 240ms; }
.s-card:nth-child(8) { animation-delay: 280ms; }
.s-card:nth-child(9) { animation-delay: 320ms; }
.s-card:nth-child(10) { animation-delay: 360ms; }
.s-card:nth-child(11) { animation-delay: 400ms; }
.s-card:nth-child(12) { animation-delay: 440ms; }
.s-card:nth-child(n+13) { animation-delay: 480ms; }

/* ═══════ 4. CARD — hover lift + active press ═══════ */
.s-card {
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  background: var(--white) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.02);
  transition:
    transform 220ms var(--ease-out-strong),
    box-shadow 220ms var(--ease-out-strong),
    border-color 220ms var(--ease-out-strong) !important;
  cursor: pointer;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .s-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.08), 0 0 0 1px rgba(223,59,163,.08) !important;
    border-color: rgba(223,59,163,.15) !important;
  }
}

.s-card:active {
  transform: translateY(-2px) scale(0.99) !important;
  transition:
    transform 140ms var(--ease-out-strong),
    box-shadow 140ms var(--ease-out-strong) !important;
}

/* ═══════ 5. CARD ICON — clean white frame, magenta SVG line icon ═══════ */
.sc-icon,
.s-card .sc-icon,
.sc-cat-gin .sc-icon,
.sc-cat-est .sc-icon,
.sc-cat-hpv .sc-icon,
.sc-cat-nie .sc-icon,
.sc-cat-cia .sc-icon {
  position: relative;
  width: 96px !important;
  height: 96px !important;
  border-radius: 24px !important;
  margin: 28px 28px 18px !important;
  background: #fdf2f9 !important;
  color: var(--mag, #DF3BA3) !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: none !important;
}

/* IKONA: inline SVG, statyczna, dziedziczy color */
.sc-icon .usluga-icon-svg,
.sc-icon svg.usluga-icon-svg {
  width: 60% !important;
  height: 60% !important;
  display: block;
  color: var(--mag, #DF3BA3);
  stroke: currentColor;
}

/* Fallback dla <i> RemixIcon */
.sc-icon i {
  font-size: 36px;
  color: var(--mag, #DF3BA3);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sc-icon,
  .sc-icon::before,
  .sc-icon img.usluga-icon,
  .sc-icon .sc-icon-svg {
    transition: box-shadow 220ms ease !important;
    transform: none !important;
  }
}

/* ═══════ 6. CARD TYPO — better hierarchy ═══════ */
.s-card > .sc-title,
.s-card > .sc-desc,
.s-card > .sc-bot {
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.s-card > .sc-title { padding-top: 4px !important; }
.s-card > .sc-bot { padding-bottom: 24px !important; }

.sc-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
}

.sc-desc {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: var(--gray) !important;
  margin-bottom: 22px !important;
}

/* ═══════ 7. CARD LINK — arrow translate ═══════ */
.sc-link {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  color: var(--mag-dim) !important;
  transition: gap 200ms var(--ease-out-strong), color 200ms var(--ease-out-strong) !important;
}
.sc-link i {
  transition: transform 200ms var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
  .s-card:hover .sc-link {
    color: var(--mag) !important;
    gap: 10px !important;
  }
  .s-card:hover .sc-link i {
    transform: translateX(2px);
  }
}

/* ═══════ 8. NFZ BADGE — refined ═══════ */
.bdg-nfz {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  padding: 4px 10px !important;
  box-shadow: 0 2px 6px rgba(22,163,74,.25);
}

/* ═══════ 9. CATEGORY HEADERS ═══════ */
.us-cat-section {
  margin-bottom: clamp(56px, 7vw, 96px) !important;
}
.us-cat-head {
  padding-bottom: 28px !important;
  margin-bottom: 36px !important;
  border-bottom: 1px solid rgba(0,0,0,.05) !important;
  gap: 24px !important;
}
.us-cat-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.us-cat-title {
  font-size: clamp(26px, 2.8vw, 36px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 8px !important;
}
.us-cat-desc {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--gray) !important;
}

/* ═══════ 10. BACK BAR ═══════ */
.back-bar {
  background: var(--white) !important;
  border-bottom: 1px solid rgba(0,0,0,.05) !important;
  backdrop-filter: blur(8px);
}
.back-all-btn {
  padding: 9px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  transition: background 160ms var(--ease-out-strong), color 160ms var(--ease-out-strong), border-color 160ms var(--ease-out-strong), transform 120ms var(--ease-out-strong) !important;
}
.back-all-btn:active {
  transform: scale(0.97);
}

/* ═══════ 11. NO RESULTS — refined ═══════ */
.s-no-results h3 {
  font-family: var(--f-serif) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
}

/* ═══════ 12. CARD HIDE ═══════ */
.s-card.hide { display: none !important; }

/* ═══════ 13. ACCESSIBILITY ═══════ */
@media (prefers-reduced-motion: reduce) {
  .s-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .s-card:hover { transform: none !important; }
  .s-card:hover .sc-icon { transform: none !important; }
  .sc-icon { transition: box-shadow 220ms ease !important; }
}

.s-card:focus-visible {
  outline: 2px solid var(--mag);
  outline-offset: 4px;
  border-radius: 16px;
}
.f-btn:focus-visible,
.back-all-btn:focus-visible {
  outline: 2px solid var(--mag);
  outline-offset: 3px;
}

/* ═══════ 14. RESPONSIVE ═══════ */
@media (max-width: 640px) {
  .s-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .sc-icon,
  .s-card .sc-icon,
  .sc-cat-gin .sc-icon,
  .sc-cat-est .sc-icon,
  .sc-cat-hpv .sc-icon,
  .sc-cat-nie .sc-icon,
  .sc-cat-cia .sc-icon {
    width: 80px !important;
    height: 80px !important;
    margin: 22px 22px 14px !important;
    border-radius: 20px !important;
  }
  .s-card > .sc-title,
  .s-card > .sc-desc,
  .s-card > .sc-bot {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  .s-card { animation-duration: 350ms !important; }
}