/**
 * /stati/ — те же оболочки и токены, что horeca-content-block (каталог, доставка).
 * Секция: section.horeca-order + белая панель .horeca-surface-panel.
 */

/* Hub/OG cover — не показываем в тексте */
.stati-cover,
figure.stati-cover[hidden] {
  display: none !important;
}

/* ——— Оболочка статьи и хаба ——— */
section.horeca-stati > .horeca-order__inner {
  padding: clamp(1.35rem, 3.5vw, 2.35rem);
}

.stati-article__panel,
.stati-hub__panel {
  box-sizing: border-box;
  width: 100%;
  padding: clamp(1.65rem, 4.5vw, 3rem) clamp(1.5rem, 5vw, 3.25rem) !important;
}

.stati-draft-note {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  font: 600 14px/1.4 var(--hc-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
}

/* ——— Текст статьи ——— */
.stati-article__prose {
  font-family: var(--hc-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--hc-body, #444);
}

.stati-article__prose p {
  margin: 0 0 0.85rem;
}

.stati-article__prose ul,
.stati-article__prose ol {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
}

.stati-article__prose li {
  margin: 0.3rem 0;
}

.stati-article__prose .stati-lede {
  margin: 0 0 0.35rem;
  font-size: 17px;
  line-height: 1.6;
  color: var(--hc-text, #111);
}

/* h2/h3 — как horeca-order__title: по центру, без плашки и без подчёркивания */
body.horeca-stati-page .stati-article__prose h2,
body.horeca-stati-page .bd-tagstyles.stati-article__prose h2,
body.horeca-stati-page .bd-postcontent-10.bd-tagstyles.stati-article__prose h2,
.stati-article__prose h2,
.bd-tagstyles.stati-article__prose h2,
.bd-postcontent-10.bd-tagstyles.stati-article__prose h2 {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center !important;
  margin: 2.1rem 0 1rem !important;
  padding: 0 !important;
  font-family: var(--hc-font, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
  color: var(--hc-text, #111) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.stati-article__prose h3,
.bd-tagstyles.stati-article__prose h3,
.bd-postcontent-10.bd-tagstyles.stati-article__prose h3 {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center !important;
  margin: 1.65rem 0 0.85rem !important;
  padding: 0 !important;
  font-family: var(--hc-font, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
  color: var(--hc-text, #111) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.stati-article__prose h2::before,
.stati-article__prose h2::after,
.stati-article__prose h3::before,
.stati-article__prose h3::after {
  content: none !important;
  display: none !important;
}

.stati-article__prose .stati-lede + h2 {
  margin-top: 1.85rem !important;
}

.stati-article__prose h2 + h3 {
  margin-top: 1.35rem !important;
}

/* Ссылки — жёлтое подчёркивание как на всём сайте */
.stati-article__prose a:not(.stati-shot):not(.horeca-material__card):not(.horeca-order__cta-btn),
.bd-tagstyles.stati-article__prose a:not(.stati-shot):not(.horeca-material__card):not(.horeca-order__cta-btn) {
  color: var(--hc-text, #111);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--hc-accent, #f2e34c);
  text-underline-offset: 2px;
  text-decoration-thickness: 3px;
}

.stati-article__prose a:not(.stati-shot):hover,
.bd-tagstyles.stati-article__prose a:not(.stati-shot):hover {
  color: #333;
}

/* ——— Галереи подразделов ——— */
.stati-hero {
  margin: 0.5rem 0 1.25rem;
  border-radius: var(--hc-radius-panel, 12px);
  overflow: hidden;
  background: #f3f4f6;
}

.stati-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  object-position: center;
  background: #f3f4f6;
}

.stati-grid {
  display: grid;
  gap: 12px;
  margin: 0.95rem 0 1.35rem;
}

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

.stati-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stati-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .stati-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .stati-grid--3,
  .stati-grid--4,
  .stati-grid--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.stati-shot {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--hc-border, #e0e0e0);
  border-radius: var(--hc-radius-panel, 12px);
  overflow: hidden;
  background: #fff;
  text-decoration: none !important;
  color: inherit;
  box-shadow: var(--hc-shadow, 0 2px 12px rgba(0, 0, 0, 0.08));
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.stati-shot:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  border-color: #d5d5d5;
}

.stati-shot img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  background: #f9fafb;
}

.stati-shot figcaption,
.stati-shot span {
  display: block;
  padding: 8px 10px 10px;
  font: 600 13px/1.35 var(--hc-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
  color: var(--hc-text, #374151);
  background: #fff;
  text-align: center;
}

/* ——— «Ещё по теме» ——— */
.stati-related {
  margin-top: 2.25rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--hc-border, #e0e0e0);
}

.stati-related__title {
  margin-bottom: 0.75rem !important;
}

.stati-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.stati-related__list li {
  margin: 0;
}

/* ——— Хаб /stati/ ——— */
.stati-hub__empty {
  margin: 0;
  font: 400 16px/1.55 var(--hc-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
  color: var(--hc-text, #111);
}

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

@media (min-width: 640px) {
  .stati-hub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

.stati-hub__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stati-hub__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none !important;
  color: var(--hc-text, #111) !important;
  background: #fff;
  border: 1px solid var(--hc-border, #e0e0e0);
  border-radius: var(--hc-radius-panel, 12px);
  overflow: hidden;
  box-shadow: var(--hc-shadow, 0 2px 12px rgba(0, 0, 0, 0.08));
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.stati-hub__card:hover,
.stati-hub__card:focus-visible {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  border-color: #d5d5d5;
  transform: translateY(-2px);
  outline: none;
}

.stati-hub__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  background: #f3f4f6;
  overflow: hidden;
  border-bottom: 1px solid var(--hc-border, #e0e0e0);
}

.stati-hub__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.stati-hub__thumb-fallback {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #f3f4f6 0%, #e5e7eb 55%, #d1d5db 100%);
}

.stati-hub__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 1.05rem 1.15rem;
  flex: 1 1 auto;
}

.stati-hub__title {
  display: block;
  font-family: var(--hc-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--hc-text, #111);
  text-decoration: underline;
  text-decoration-color: var(--hc-accent, #f2e34c);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.stati-hub__card:hover .stati-hub__title {
  text-decoration-color: #eab308;
}

.stati-hub__lead {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--hc-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--hc-body, #4b5563);
}

@media (max-width: 479px) {
  .stati-article__panel,
  .stati-hub__panel {
    padding: 1.25rem 1rem !important;
  }
}