/* Листинг «Разделы с фото» (listing.layout = sections; components/z1/pages/ListingPage.astro). Макет Figma «Аппаратная косметология в Belle Vie»,
   узлы 4884:3594 (1440), 4900:4187 (768), 4900:4491 (380), 22.10.2026. Сетка и брейкпоинты – как у темы: контейнер 1170 / 660 (≤992) / поля 30 (≤599). */

/* низ – без отступа: следующая секция (profile / questions) даёт свои 70px сверху */
.ls {
  padding: 1.25rem 0 0;
}

.ls__h1 {
  margin: 0;
}

.ls__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.ls__chip {
  padding: 0.6875rem 0.9375rem;
  border: 1px solid #e2e0e3;
  border-radius: 0.25rem;
  color: #706a70;
  font-size: 1rem;
  line-height: 1.3;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.ls__chip:hover,
.ls__chip:focus-visible {
  border-color: #a13067;
  color: #a13067;
}

.ls__section {
  display: grid;
  grid-template-columns: minmax(0, 770fr) minmax(0, 370fr);
  gap: 1.875rem;
  margin-top: 3.75rem;
  /* переход по кнопке-якорю: раздел ниже липкой шапки (≥993 – 137 px после прокрутки, ≤992 – 84, ≤599 – 67) + 30 px */
  scroll-margin-top: 10.5rem;
}

.ls__section--noimg {
  grid-template-columns: minmax(0, 1fr);
}

.ls__body {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #e2e0e3;
}

.ls__title {
  margin: 0;
}

.ls__title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color 0.3s ease;
}

.ls__title a:hover {
  color: #a13067;
}

.ls__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 1.875rem;
  margin: 1.875rem 0 0;
  padding: 0;
  list-style: none;
}

.ls__section--noimg .ls__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ls__item {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  color: #282328;
  font-size: 1.125rem;
  line-height: 1.625rem;
  transition: color 0.3s ease;
}

.ls__item:hover {
  color: #a13067;
}

.ls__name {
  flex: 0 1 auto;
  max-width: calc(100% - 3rem);
}

/* пунктир-«лидер» до стрелки: на уровне первой строки названия */
.ls__dots {
  flex: 1 1 0.625rem;
  min-width: 0.625rem;
  height: 1.1875rem;
  border-bottom: 1px dotted #a69fa6;
}

.ls__arrow {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
}

.ls__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 32.1875rem;
  border-radius: 1.25rem;
  object-fit: cover;
}

@media (max-width: 992px) {
  .ls__chips {
    gap: 0.5rem;
  }

  .ls__chip {
    padding: 0.5625rem 0.8125rem;
  }

  .ls__section,
  .ls__section--noimg {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin-top: 2.5rem;
    scroll-margin-top: 7.125rem;
  }

  /* фото над списком широкой полосой */
  .ls__img {
    order: -1;
    height: 22.5rem;
    min-height: 0;
  }

  .ls__body {
    padding-bottom: 1.25rem;
  }

  .ls__title {
    font-size: 1.625rem;
  }

  .ls__list,
  .ls__section--noimg .ls__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
    margin-top: 1rem;
  }

  .ls__item {
    font-size: 1rem;
    line-height: 1.375rem;
  }

  .ls__dots {
    height: 1.0625rem;
  }

  .ls__arrow {
    width: 1.125rem;
    height: 1.125rem;
  }
}

@media (max-width: 599px) {
  .ls__chip {
    max-width: 100%;
  }

  .ls__section,
  .ls__section--noimg {
    scroll-margin-top: 6.125rem;
  }

  .ls__list,
  .ls__section--noimg .ls__list {
    grid-template-columns: minmax(0, 1fr);
  }
}