/* Каталог услуг — services_index_page */

@layer components {
  .services-catalog-hero,
  .services-catalog-main {
    --sc-card-image-height: 240px;
  }

  .services-catalog-hero {
    @apply relative overflow-hidden py-16 text-center text-white md:py-24;
    background: linear-gradient(
      135deg,
      theme('colors.brand-blue') 0%,
      theme('colors.sirius-blue-700') 100%
    );
  }

  .services-catalog-hero::before {
    @apply pointer-events-none absolute right-0 top-0 h-96 w-96 rounded-full;
    content: '';
    background: color-mix(in srgb, theme('colors.white') 5%, transparent);
    transform: translate(30%, -50%);
    filter: blur(3rem);
  }

  .services-catalog-hero__inner {
    @apply relative z-[2];
  }

  .services-catalog-hero .hero-breadcrumbs-slot,
  .services-catalog-hero .hero-breadcrumbs-slot nav,
  .services-catalog-hero .hero-breadcrumbs-slot .breadcrumbs-trail {
    @apply ml-0 mr-auto justify-start text-left;
  }

  .services-catalog-hero .hero-breadcrumbs-slot {
    @apply text-white/70;
  }

  .services-catalog-hero .hero-breadcrumbs-slot a {
    @apply text-white/70 transition-colors duration-200 hover:text-white;
  }

  .services-catalog-hero__content {
    @apply w-full pt-2;
  }

  .services-catalog-hero__headings {
    @apply mx-auto grid max-w-4xl justify-items-center gap-0;
  }

  .services-catalog-hero__eyebrow {
    @apply m-0 block text-sm font-semibold uppercase tracking-wider text-white/85 leading-tight;
  }

  .services-catalog-hero__eyebrow + .services-catalog-hero__title {
    @apply mt-0.5;
  }

  .services-catalog-hero__title {
    @apply m-0 text-4xl font-bold leading-none tracking-tight md:text-5xl lg:text-6xl;
  }

  .services-catalog-hero__title + .services-catalog-hero__subtitle {
    @apply -mt-3 md:-mt-4 lg:-mt-5;
  }

  .services-catalog-hero__subtitle {
    @apply mx-auto mb-0 max-w-xl text-lg leading-snug text-white/80;
  }

  .services-catalog-hero__subtitle :is(p, div) {
    @apply m-0 p-0;
  }

  .services-catalog-hero .hero-search {
    @apply mt-8 flex w-full flex-col items-center gap-5;
  }

  .services-catalog-hero .hero-search .search-wrapper {
    @apply relative w-full max-w-[500px];
  }

  .services-catalog-hero .hero-search .search-wrapper i {
    @apply pointer-events-none absolute left-5 top-1/2 -translate-y-1/2 text-xl text-slate-500;
  }

  .services-catalog-hero .hero-search .search-input {
    @apply w-full rounded-full border border-transparent bg-white/95 py-3.5 pl-12 pr-5 font-sans text-base text-slate-900 outline-none transition-colors duration-200;
  }

  .services-catalog-hero .hero-search .search-input::placeholder {
    @apply text-slate-400;
  }

  .services-catalog-hero .hero-search .search-input:focus {
    @apply border-sirius-azure bg-white;
  }

  .services-catalog-hero .filter-chips {
    @apply flex flex-wrap justify-center gap-3.5;
  }

  .services-catalog-hero .chip {
    @apply cursor-pointer rounded-full border border-white/40 bg-white/10 px-5 py-2 font-sans text-sm font-medium text-white backdrop-blur-sm transition-all duration-200;
  }

  .services-catalog-hero .chip:hover {
    @apply bg-white/25;
  }

  .services-catalog-hero .chip.active,
  .services-catalog-hero .chip.is-active {
    @apply border-white bg-white text-brand-blue;
  }

  .services-catalog-main {
    @apply bg-slate-50 py-16 dark:bg-slate-900;
  }

  .services-catalog-grid {
    @apply grid grid-cols-1 items-stretch gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8;
  }

  .services-catalog-card {
    @apply relative flex h-full flex-col overflow-hidden rounded-xl border-0 bg-white p-0 text-center opacity-100 shadow-lg transition-all duration-500 will-change-transform;
    box-shadow: 0 8px 16px -6px color-mix(in srgb, theme('colors.black') 10%, transparent),
      0 4px 8px -4px color-mix(in srgb, theme('colors.black') 6%, transparent);
  }

  .dark .services-catalog-card {
    @apply bg-slate-800;
    box-shadow: 0 8px 16px -6px color-mix(in srgb, theme('colors.black') 35%, transparent);
  }

  .services-catalog-card.hidden {
    display: none;
  }

  @keyframes servicesCatalogFadeInUp {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .services-catalog-card.anim-enter {
    animation: servicesCatalogFadeInUp 0.4s ease forwards;
  }

  .services-catalog-card:hover {
    @apply z-[5] scale-[1.03];
    box-shadow: 0 20px 30px -10px color-mix(in srgb, theme('colors.black') 15%, transparent),
      0 10px 20px -10px color-mix(in srgb, theme('colors.black') 8%, transparent);
  }

  .services-catalog-card__image-wrapper {
    @apply px-5 pb-2 pt-5;
  }

  .services-catalog-card__image {
    @apply overflow-hidden rounded-lg bg-slate-50 dark:bg-slate-900;
    height: var(--sc-card-image-height);
  }

  .services-catalog-card__image img {
    @apply block h-full w-full object-cover transition-transform duration-500;
  }

  .services-catalog-card__image--empty {
    background: linear-gradient(
      135deg,
      theme('colors.slate.200') 0%,
      theme('colors.slate.300') 100%
    );
  }

  .dark .services-catalog-card__image--empty {
    background: linear-gradient(
      135deg,
      theme('colors.slate.800') 0%,
      theme('colors.slate.700') 100%
    );
  }

  .services-catalog-card:hover .services-catalog-card__image img {
    @apply scale-110;
  }

  .services-catalog-card__body {
    @apply flex flex-1 flex-col px-5 pb-6 pt-3;
  }

  .services-catalog-card__title {
    @apply mb-2 text-base font-semibold leading-snug text-slate-900 dark:text-slate-50;
  }

  .services-catalog-card__desc {
    @apply m-0 flex-grow text-sm leading-normal text-slate-500 dark:text-slate-400;
  }

  .services-catalog-card__link {
    @apply absolute inset-0 z-10 overflow-hidden indent-[-9999px];
  }

  .services-catalog-pagination {
    @apply mt-10 flex flex-wrap items-center justify-center gap-2;
  }

  .services-catalog-page-btn {
    @apply flex h-10 w-10 cursor-pointer items-center justify-center rounded-lg border border-slate-200 bg-white font-sans text-sm font-medium text-slate-900 transition-all duration-200 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100;
  }

  .services-catalog-page-btn:hover {
    @apply bg-slate-100 dark:bg-slate-700;
  }

  .services-catalog-page-btn.is-active,
  .services-catalog-page-btn.active {
    @apply border-sirius-azure bg-sirius-azure text-white;
  }

  .services-catalog-page-btn:disabled {
    @apply pointer-events-none opacity-40;
  }

  .services-catalog-cta {
    @apply mt-12 rounded-2xl bg-white px-6 py-10 text-center shadow-lg dark:bg-slate-800;
    box-shadow: 0 8px 16px -6px color-mix(in srgb, theme('colors.black') 10%, transparent),
      0 4px 8px -4px color-mix(in srgb, theme('colors.black') 6%, transparent);
  }

  .services-catalog-cta__title {
    @apply mb-3 text-2xl font-bold text-slate-900 dark:text-slate-50;
  }

  .services-catalog-cta__text {
    @apply mx-auto mb-6 max-w-lg leading-relaxed text-slate-500;
  }

  .services-catalog-cta__btn {
    @apply inline-flex items-center rounded-lg bg-sirius-azure px-8 py-3 text-base font-medium text-white no-underline shadow-md transition-all duration-200 hover:bg-blue-500 hover:text-white;
    box-shadow: 0 4px 6px -1px color-mix(in srgb, theme('colors.black') 10%, transparent);
  }

  .services-catalog-cta__btn:hover {
    box-shadow: 0 10px 15px -3px color-mix(in srgb, theme('colors.black') 10%, transparent);
  }

  .services-catalog-cta__btn svg {
    @apply ml-2 h-5 w-5;
  }

  .services-catalog-empty {
    @apply col-span-full px-6 py-12 text-center text-lg text-slate-500;
  }
}