/* ============================================================
   YPONTON.RU — брендовый редизайн страницы «О компании» /about/ (page-id 1997).
   Scope: body.yp-about (класс добавляет inc/yp-static-pages.php).
   CSS-first, контент (Gutenberg-блоки) НЕ трогаем — только оформление.
   Самодостаточный файл (НЕ зависит от static-pages.css), т.к. у about есть
   cover-хиро с БЕЛЫМ текстом на тёмном фоне — базовые правила статических
   страниц красят абзацы в тёмный и сломали бы hero.
   Токены: navy #11233f / #001f3f, orange #f78e1f, muted #6a7588,
   bg #f4f6fa, border #e3e8f0, шрифт Onest. Кнопки — плоские, без теней.
   ============================================================ */

/* ---------- Хлебные крошки — СЛЕВА (как на /blog/, /oplata/) ---------- */
body.yp-about .article-meta { text-align: left !important; margin: 0 0 4px; }
body.yp-about .breadcrumb {
  justify-content: flex-start !important; text-align: left !important;
  margin: 0 !important; padding: 0 !important;
  font-family: 'Onest', system-ui, sans-serif; font-size: 13px; color: #91a6ba;
}
body.yp-about .breadcrumb a { color: #f78e1f; text-decoration: none; }
body.yp-about .breadcrumb a:hover { text-decoration: underline; }

/* ---------- Заголовок страницы — СЛЕВА, бренд ---------- */
body.yp-about .page-title {
  text-align: left !important;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 800; font-size: 34px; line-height: 1.15; color: #11233f;
  margin: 6px 0 26px !important;
}

/* ---------- Контентная колонка ---------- */
body.yp-about .entry-content {
  max-width: 1140px; margin-left: 0 !important; margin-right: auto !important;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 16px; line-height: 1.7; color: #3a4453;
}
body.yp-about .entry-content p { margin: 0 0 16px; }
body.yp-about .entry-content strong { color: #11233f; font-weight: 700; }

/* ---------- Заголовки секций ---------- */
body.yp-about .entry-content h2,
body.yp-about .entry-content .wp-block-heading {
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 700; font-size: 26px; line-height: 1.25; color: #11233f;
  margin: 48px 0 18px;
}
body.yp-about .entry-content h3 {
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 700; font-size: 20px; color: #11233f; margin: 30px 0 14px;
}

/* ---------- HERO (wp-block-cover: интро «О YPonton») ---------- */
body.yp-about .entry-content .wp-block-cover {
  min-height: 340px; border-radius: 18px; overflow: hidden;
  padding: 48px 52px; margin: 8px 0 40px; align-items: center;
}
/* фирменный navy-тон поверх фото вместо чёрного дым-слоя */
body.yp-about .wp-block-cover .wp-block-cover__background {
  background-color: #001f3f !important; opacity: .66 !important;
}
body.yp-about .wp-block-cover .wp-block-cover__inner-container { max-width: 760px; }
body.yp-about .wp-block-cover p {
  color: #ffffff !important; font-size: 18px; line-height: 1.65;
}
body.yp-about .wp-block-cover p:last-child { margin-bottom: 0; }
body.yp-about .wp-block-cover strong { color: #ffffff; }

/* ---------- КАРТОЧКИ КАТЕГОРИЙ (columns с списками товаров) ---------- */
/* второй columns-блок: колонки со списками. cover-columns списков не содержат. */
body.yp-about .entry-content .wp-block-columns:has(.wp-block-list) {
  gap: 16px; margin: 0 0 12px;
}
body.yp-about .wp-block-columns:has(.wp-block-list) .wp-block-column {
  background: #f4f6fa; border: 1px solid #e3e8f0; border-radius: 14px;
  padding: 22px 24px; margin: 0;
}
body.yp-about .wp-block-columns:has(.wp-block-list) .wp-block-list {
  margin: 0; padding: 0; list-style: none;
}
body.yp-about .wp-block-columns:has(.wp-block-list) .wp-block-list li {
  position: relative; padding: 8px 0 8px 26px;
  border-bottom: 1px solid #e7ecf3; color: #26344d; font-weight: 500;
}
body.yp-about .wp-block-columns:has(.wp-block-list) .wp-block-list li:last-child { border-bottom: 0; }
body.yp-about .wp-block-columns:has(.wp-block-list) .wp-block-list li::before {
  content: ""; position: absolute; left: 4px; top: 15px;
  width: 8px; height: 8px; border-radius: 50%; background: #f78e1f;
}

/* ---------- «ПЯТЬ АРГУМЕНТОВ ЗА» — простой нумерованный список ----------
   Без карточек: пронумерованные строки, оранжевый номер-бейдж, жирный зачин.
   Единственный список — ПРЯМОЙ потомок entry-content (категории — в columns). */
body.yp-about .entry-content > .wp-block-list {
  list-style: none; counter-reset: yp-arg;
  margin: 0 0 28px; padding: 0;
}
body.yp-about .entry-content > .wp-block-list li {
  counter-increment: yp-arg; position: relative;
  margin: 0 0 18px; padding: 0 0 0 62px;
  color: #3a4453; font-size: 16.5px; line-height: 1.6;
}
body.yp-about .entry-content > .wp-block-list li:last-child { margin-bottom: 0; }
/* Бейдж крупнее (~1.5×); ВЕРХ бейджа выровнен по верху первой строки:
   у строки line-height 1.6 верх текста ≈ (1.6em−1em)/2 = 0.3em от верха строки. */
body.yp-about .entry-content > .wp-block-list li::before {
  content: counter(yp-arg); position: absolute; left: 0;
  top: 0.3em;
  width: 44px; height: 44px; border-radius: 10px;
  background: #f78e1f; color: #fff;
  font-family: 'Onest', system-ui, sans-serif; font-weight: 800; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
body.yp-about .entry-content > .wp-block-list li strong {
  color: #11233f; font-weight: 700;
}

/* ---------- ГАЛЕРЕЯ ПРОЕКТОВ ---------- */
body.yp-about .entry-content .wp-block-gallery {
  display: grid !important; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin: 8px 0 24px;
}
body.yp-about .wp-block-gallery .wp-block-image {
  /* тема задаёт фигуре явную мелкую width → в grid элемент не тянется;
     форсим на всю колонку */
  width: 100% !important; max-width: 100% !important; flex: none !important;
  margin: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid #e3e8f0; background: #f4f6fa;
  aspect-ratio: 1 / 1;
}
/* цепочка figure > a > span > img — тема оставляет a/span inline,
   растягиваем всю цепочку, иначе картинка схлопывается в миниатюру */
body.yp-about .wp-block-gallery .wp-block-image a,
body.yp-about .wp-block-gallery .wp-block-image span,
body.yp-about .wp-block-gallery .wp-block-image picture {
  display: block; width: 100%; height: 100%;
}
body.yp-about .wp-block-gallery .wp-block-image img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
body.yp-about .wp-block-gallery .wp-block-image:hover img { transform: scale(1.05); }

/* ---------- Адаптив ---------- */
@media (max-width: 860px) {
  body.yp-about .page-title { font-size: 27px; }
  body.yp-about .entry-content h2,
  body.yp-about .entry-content .wp-block-heading { font-size: 22px; margin-top: 36px; }
  body.yp-about .entry-content .wp-block-cover { padding: 32px 24px; min-height: 260px; }
  body.yp-about .wp-block-cover p { font-size: 16px; }
  body.yp-about .entry-content > .wp-block-list { grid-template-columns: 1fr; }
  body.yp-about .entry-content .wp-block-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  body.yp-about .entry-content .wp-block-gallery { grid-template-columns: 1fr; }
}

/* ============================================================
   БЛОК КАТЕГОРИЙ КАТАЛОГА (заменяет текстовый список).
   Рендер — inc/yp-about-cats.php из ACF yp_catalog_sections.
   Основной раздел (заголовок-ссылка) → мини-карточки подкатегорий.
   ============================================================ */
body.yp-about .yp-cat-showcase { margin: 8px 0 8px; }
body.yp-about .yp-cat-block { margin: 0 0 34px; }

/* Заголовок раздела */
body.yp-about .yp-cat-block__head {
  display: flex; align-items: baseline; gap: 14px;
  text-decoration: none; margin: 0 0 16px;
  padding-bottom: 10px; border-bottom: 2px solid #eef1f6;
}
body.yp-about .yp-cat-block__title {
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 700; font-size: 21px; line-height: 1.2; color: #11233f;
}
body.yp-about a.yp-cat-block__head:hover .yp-cat-block__title { color: #f78e1f; }
body.yp-about .yp-cat-block__all {
  margin-left: auto; white-space: nowrap;
  font-family: 'Onest', system-ui, sans-serif; font-size: 13px; font-weight: 600;
  color: #f78e1f;
}
body.yp-about .yp-cat-block__all::after { content: " →"; }

/* Сетка мини-карточек */
/* максимум 4 карточки в строке (контентная колонка ~820px) */
body.yp-about .yp-cat-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
body.yp-about .yp-cat-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e3e8f0; border-radius: 12px;
  overflow: hidden; text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
body.yp-about a.yp-cat-card:hover {
  border-color: #f78e1f; transform: translateY(-3px);
}
body.yp-about .yp-cat-card__img {
  display: block; width: 100%; aspect-ratio: 2 / 1;
  background: #f4f6fa; overflow: hidden;
}
body.yp-about .yp-cat-card__img img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
body.yp-about a.yp-cat-card:hover .yp-cat-card__img img { transform: scale(1.06); }
body.yp-about .yp-cat-card__name {
  padding: 11px 12px 13px;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 14px; line-height: 1.3; font-weight: 600; color: #26344d;
}
body.yp-about a.yp-cat-card:hover .yp-cat-card__name { color: #11233f; }

@media (max-width: 860px) {
  body.yp-about .yp-cat-cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  body.yp-about .yp-cat-block__title { font-size: 19px; }
}
@media (max-width: 420px) {
  body.yp-about .yp-cat-cards { grid-template-columns: repeat(2, 1fr); }
}