/* Блоки листинга: полоска живых показателей и общие пояснения о каталоге.

   Отдельный файл по той же причине, что card-features.css: Tailwind в теме
   собран заранее (assets/css/output.css), а content-скан в tailwind.config.js
   проходит по *.php только во время сборки. Компоненты созданы позже, и ни
   одного их класса в собранном CSS нет.

   Оформление повторяет язык сайта, а не вводит свой:
     акцент          #FE4365   (цена в карточке анкеты, ховеры пагинации)
     заголовки       #0F0F0F   24px для раздела, как у «VIP escort profiles»
     рамки           #e5e7eb   (gray-200, как у select сортировки)
     подложки        #ffffff на #f9f9f9
     радиус          8px       (rounded-lg)
     приглушённый    #6b7280 текст, #9ca3af подписи
*/

/* ── Полоска живых показателей ────────────────────────────────────────────
   components/listing_facts.php. Числа листинга меняются каждый день, поэтому
   выводятся здесь, а не вписаны в SEO-текст. */

.proj1-lf {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 0 26px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.proj1-lf__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 14px 22px;
  min-width: 0;
}

/* Разделители между показателями — та же волосяная линия, что внутри
   карточки анкеты (border-t border-[#f0f0f0]), только вертикальная. */
.proj1-lf__item + .proj1-lf__item {
  border-left: 1px solid #f0f0f0;
}

.proj1-lf__num {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  color: #0F0F0F;
  white-space: nowrap;
}

/* Цены — розовым, как цена в карточке анкеты и в карусели. */
.proj1-lf__num--accent {
  color: #FE4365;
}

.proj1-lf__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9ca3af;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .proj1-lf {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .proj1-lf__item {
    padding: 12px 14px;
  }
  .proj1-lf__item + .proj1-lf__item {
    border-left: none;
  }
  /* На сетке рисуем линии по краям ячеек, иначе они рвутся при переносе. */
  .proj1-lf__item:nth-child(odd)  { border-right: 1px solid #f0f0f0; }
  .proj1-lf__item:nth-child(n+3)  { border-top: 1px solid #f0f0f0; }
  .proj1-lf__num { font-size: 17px; }
}

/* ── Общие пояснения о каталоге ───────────────────────────────────────────
   components/listing_notes.php. Одинаковы на всех листингах, поэтому
   выводятся шаблоном, а не копируются в текст каждой страницы. */

.proj1-notes {
  margin: 34px 0 0;
  padding-top: 30px;
  border-top: 1px solid #e5e7eb;
}

.proj1-notes__title {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  color: #0F0F0F;
}

@media (max-width: 640px) {
  .proj1-notes__title { font-size: 20px; }
}

.proj1-notes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1000px) {
  .proj1-notes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .proj1-notes__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

.proj1-notes__card {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: border-color .18s ease;
}

.proj1-notes__card:hover {
  border-color: #FE4365;
}

/* Розовая засечка перед заголовком карточки — тот же акцент, что у заголовка
   блока статей, только меньше. */
.proj1-notes__q {
  position: relative;
  margin: 0 0 7px;
  padding-left: 11px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #0F0F0F;
}

.proj1-notes__q::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 3px;
  height: 13px;
  background: #FE4365;
  border-radius: 2px;
}

.proj1-notes__a {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #6b7280;
}