@layer sections {
  .catalog {
    padding-block: var(--sp-120);
    background: var(--surface-primary);
  }

  .catalog .section-head { margin-block-end: var(--sp-56); }
  .catalog .section-head__title {
    max-width: 792px;
    margin-block-start: var(--sp-16);
  }
  .catalog .section-head__text {
    max-width: 738px;
    margin-block-start: var(--sp-24);
    /* Google Fonts' static Inter is ~1px wider across this full sentence than
       the Figma build; this keeps the specified 738px frame on two lines. */
    letter-spacing: -.02px;
  }

  .catalog__groups {
    display: grid;
    gap: var(--sp-12);
  }

  /* 792 + 12 + 396 = 1200, як у desktop-фреймі Figma. */
  .catalog__row {
    display: grid;
    grid-template-columns: 792fr 396fr;
    gap: var(--sp-12);
    align-items: stretch;
  }

  .catalog-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
    min-width: 0;
    padding: var(--sp-12);
    border-radius: var(--r-20);
    background: var(--surface-secondary);
  }

  .catalog-group[data-style="gray"] { background: var(--surface-tertiary); }

  .catalog-group[data-style="blue"] {
    background:
      radial-gradient(circle at 88% 8%, #00fdff33, transparent 34%),
      linear-gradient(155deg, #0078bd 0%, #246bd4 52%, #8b82db 100%);
  }

  .catalog-group__title {
    padding-block-start: var(--sp-12);
    padding-inline-start: var(--sp-16);
    font-size: var(--fs-h3);
  }

  .catalog-group__cards {
    display: grid;
    grid-template-columns: var(--cat-cols, 1fr);
    grid-auto-rows: var(--cat-row-h, 266px);
    grid-auto-flow: row dense;
    gap: var(--sp-8);
    min-height: 0;
  }

  /* У нижніх групах Figma ділить 481px на рядки 236px і 237px. */
  .catalog-group:not([data-width="full"]) .catalog-group__cards {
    grid-template-rows: var(--cat-row-h, 236px) calc(var(--cat-row-h, 236px) + 1px);
  }

  .card-service {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    border-radius: var(--r-8);
    background: var(--surface-glass-1);
    isolation: isolate;
  }

  .card-service::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: var(--surface-scrim);
    pointer-events: none;
  }

  .card-service[data-size="featured"] {
    grid-row: 1 / span 2;
    grid-column: var(--cat-featured-col, 1);
  }

  .card-service[data-size="wide"] {
    grid-column: span var(--cat-wide-span, 1);
  }

  .card-service[data-style="blue"]::after { display: none; }
  .card-service[data-style="blue"] .card-service__media { background: transparent; }

  .card-service__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-8);
    width: 100%;
    padding: var(--sp-20);
    overflow: hidden;
    border: .5px solid var(--surface-separator);
    border-radius: var(--r-8);
    background: var(--surface-glass-1);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
  }

  .card-service[data-size="wide"] .card-service__body {
    width: min(48%, 260px);
    height: 100%;
  }

  /* У двох горизонтальних картках темної групи `small` описує span у
     bento-сітці, а не внутрішню композицію: Figma лишає panel 240px зліва. */
  .card-service[data-style="dark"]:not([data-size="featured"]) .card-service__body {
    width: 240px;
    height: 100%;
  }

  .card-service__title {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-h5);
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: -.01em;
  }

  .card-service__title::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin-block-start: var(--sp-8);
    border-radius: var(--r-full);
    background: var(--accent-secondary);
  }

  .card-service__link {
    position: absolute;
    z-index: 4;
    inset: 0;
    text-decoration: none;
  }

  .card-service__text {
    width: 100%;
    color: var(--label-primary);
  }

  .card-service__media {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: linear-gradient(160deg, #3a4550 0%, #232a32 100%);
  }

  .card-service__image {
    position: absolute;
    inset-block-start: var(--card-img-y, 0%);
    inset-inline-start: var(--card-img-x, 0%);
    width: var(--card-img-w, 100%);
    height: var(--card-img-h, 100%);
    max-width: none;
    object-fit: cover;
    object-position: center;
  }

  .card-service__more {
    position: absolute;
    z-index: 5;
    inset-block-end: var(--sp-16);
    inset-inline-end: var(--sp-16);
    min-height: 40px;
    padding-block: var(--sp-8);
    background: #14161acc;
    opacity: 0;
    translate: 0 var(--sp-8);
    transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
  }

  .card-service:hover .card-service__more,
  .card-service:focus-within .card-service__more {
    opacity: 1;
    translate: 0;
  }

  .catalog__note {
    max-width: 690px;
    margin-block-start: var(--sp-24);
    color: var(--label-quaternary);
  }

  @media (max-width: 1000px) {
    .catalog__row { grid-template-columns: 1fr; }
  }

  @media (max-width: 760px) {
    .catalog { padding-block: var(--sp-96); }

    .catalog .section-head__text {
      font-size: var(--fs-body-1);
      line-height: 1.3125;
    }

    .catalog-group__cards {
      grid-template-columns: 1fr;
      grid-template-rows: none;
      grid-auto-rows: auto;
    }

    .catalog-group:not([data-width="full"]) .catalog-group__cards {
      grid-template-rows: none;
    }

    .card-service,
    .card-service[data-size="featured"],
    .card-service[data-size="wide"] {
      grid-column: auto;
      grid-row: auto;
      width: 100%;
      height: 266px;
    }

    .catalog-group[data-width="full"] .card-service[data-size="featured"] {
      height: 540px;
    }

    .catalog-group[data-style="blue"] .card-service { height: 236px; }

    .card-service[data-size="wide"] .card-service__body {
      width: 100%;
      height: auto;
    }

    .card-service[data-style="dark"]:not([data-size="featured"]) .card-service__body {
      width: 100%;
      height: auto;
    }

    .card-service__more { display: none; }

    .card-service__image {
      inset-block-start: var(--card-img-mobile-y, var(--card-img-y, 0%));
      inset-inline-start: var(--card-img-mobile-x, var(--card-img-x, 0%));
      width: var(--card-img-mobile-w, var(--card-img-w, 100%));
      height: var(--card-img-mobile-h, var(--card-img-h, 100%));
    }
  }

  @media (max-width: 480px) {
    .catalog { padding-block: var(--sp-64); }

    .catalog .section-head__title {
      font-size: 32px;
      line-height: 1.12;
    }

    .card-service,
    .card-service[data-size="wide"],
    .card-service[data-size="featured"] { height: 360px; }

    .catalog-group[data-width="full"] .card-service[data-size="featured"] { height: 540px; }
    .catalog-group[data-style="blue"] .card-service { height: 240px; }
  }
}

@layer sections {
  /* Фонове фото картки підростає на 10% під курсором — так у прототипі
     позначається активний стан (дзвінок 04.09, 00:30). Сама картка не
     рухається, росте лише зображення всередині обрізаного контейнера. */
  .card-service__media img {
    transition: scale var(--dur) var(--ease);
  }

  .card-service:hover .card-service__media img,
  .card-service:focus-within .card-service__media img {
    scale: 1.1;
  }

  @media (prefers-reduced-motion: reduce) {
    .card-service__media img { transition: none; }
    .card-service:hover .card-service__media img,
    .card-service:focus-within .card-service__media img { scale: 1; }
  }
}