/* Цвет основного текста статьи — одна переменная на обе темы.
   Раньше был жёстко задан rgba(250,250,250,.82): в светлой теме такой текст
   становился почти невидимым на бежевом фоне. */
:root { --content-text: rgba(250,250,250,.82); --content-dots: rgba(255,255,255,.15); }
[data-theme="light"] { --content-text: #3A342C; --content-dots: rgba(33,28,22,.22); }

/* content.css — типографика журнала и посадочных.
   Только токены из main-*.css, ни одного нового цвета. Подключается отдельным
   файлом, потому что main-*.css — минифицированный билд без исходников. */

/* --- сетка карточек журнала --- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
@media (max-width: 1024px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .post-grid { grid-template-columns: 1fr; } }

.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { padding: var(--space-lg); display: flex; flex-direction: column; flex: 1; }
.post-card__meta { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xs);
  color: var(--color-text-muted); margin-top: auto; padding-top: var(--space-md); }
.post-card__meta time { font-family: var(--font-mono); }

/* --- фильтр по рубрикам --- */
.cat-bar { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.cat-chip { display: inline-flex; align-items: center; padding: .5rem 1.125rem; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted);
  transition: all var(--duration-fast) var(--ease-out); }
.cat-chip:hover { color: var(--color-text-light); border-color: rgba(232,168,73,.4); }
.cat-chip.active { background: var(--gradient-accent); color: var(--color-bg-dark); border-color: transparent; font-weight: 500; }

/* --- тело статьи --- */
.article { max-width: 74ch; margin: 0 auto; font-size: var(--text-lg); line-height: 1.78; }
.article > * + * { margin-top: var(--space-lg); }
.article h2 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 500;
  line-height: 1.2; letter-spacing: -.02em; margin-top: var(--space-3xl); text-wrap: balance; }
.article h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500;
  line-height: 1.3; margin-top: var(--space-2xl); }
.article p { color: var(--content-text); }
.article strong { color: var(--color-text-light); font-weight: 600; }
.article a { color: var(--color-accent); border-bottom: 1px solid rgba(232,168,73,.3); }
.article a:hover { border-bottom-color: var(--color-accent); }

.article ul, .article ol { padding-left: 1.35rem; display: flex; flex-direction: column; gap: var(--space-sm); }
.article ul li { position: relative; list-style: none; color: var(--content-text); }
.article ul li::before { content: ""; position: absolute; left: -1.35rem; top: .7em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.article ol { list-style: decimal; }
.article ol li { color: var(--content-text); }
.article ol li::marker { color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-sm); }

/* --- прямой ответ (GEO-блок, вырезается ИИ первым) --- */
/* Без рамки и без акцентной полосы слева: блок и так выделен фоном и кеглем,
 * а обводка с полоской спорила с остальными карточками страницы. */
.answer { padding: var(--space-xl); background: var(--color-bg-card);
  border: none;
  border-radius: var(--radius-md); font-size: var(--text-xl); line-height: 1.65; }
.answer p { color: var(--color-text-light); }
.answer p + p { margin-top: var(--space-md); }

/* --- таблицы (сметы, тайминги) ---
 * Таблица должна быть видна целиком, без перетаскивания вбок. Раньше её
 * распирали два правила: min-width 34rem и white-space:nowrap на заголовках —
 * шапка вроде «САМИ + КООРДИНАТОР НА ДЕНЬ» не переносилась и растягивала колонку
 * далеко за 74ch текста. Теперь заголовки переносятся, min-width снят, а на
 * десктопе таблица выходит за узкую колонку статьи ровно настолько, сколько
 * нужно столбцам. overflow-x:auto оставлен только как страховка для очень
 * широких таблиц на узких экранах. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.article table { width: 100%; border-collapse: collapse; font-size: var(--text-base);
  min-width: 0; table-layout: auto; }
.article th, .article td { padding: .875rem 1.125rem; text-align: left;
  border-bottom: 1px solid var(--color-border); overflow-wrap: break-word; hyphens: auto; }
.article th { background: var(--color-bg-card); font-weight: 600; color: var(--color-text-light);
  font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em;
  white-space: normal; line-height: 1.3; }

/* Десктоп: таблица шире колонки текста — «расширяем по столбцам сколько нужно».
 * Ширина ограничена контейнером страницы, по центру относительно статьи.      */
@media (min-width: 1024px) {
  .table-wrap {
    width: min(1120px, calc(100vw - 6rem));
    margin-left: 50%;
    transform: translateX(-50%);
    overflow-x: visible;
  }
}

/* Узкие экраны: ужимаем кегль и отступы, чтобы таблица влезала без таскания. */
@media (max-width: 700px) {
  .article table { font-size: var(--text-sm); }
  .article th, .article td { padding: .625rem .625rem; }
  .article th { font-size: .6875rem; letter-spacing: .03em; }
}
.article td { color: var(--content-text); }
.article tbody tr:last-child td { border-bottom: none; }
.article tbody tr:hover td { background: rgba(232,168,73,.04); }
.article caption { caption-side: bottom; padding: var(--space-sm) var(--space-md);
  font-size: var(--text-xs); color: var(--color-text-muted); text-align: left; }

/* --- врезка «важно» --- */
.callout { padding: var(--space-lg) var(--space-xl); background: rgba(232,168,73,.06);
  border: 1px solid rgba(232,168,73,.18); border-radius: var(--radius-md); font-size: var(--text-base); }
.callout__title { display: block; font-weight: 600; color: var(--color-accent);
  font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-sm); }

/* --- плюсы / минусы --- */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
@media (max-width: 640px) { .pros-cons { grid-template-columns: 1fr; } }
.pros-cons > div { padding: var(--space-lg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-bg-card); }
.pros-cons h4 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: var(--space-md); font-weight: 600; }
.pros-cons .pros h4 { color: #6fbf73; }
.pros-cons .cons h4 { color: var(--color-accent-dark); }
.pros-cons ul { margin: 0; }

/* --- FAQ --- */
.faq { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary { display: flex; align-items: flex-start; gap: var(--space-md); cursor: pointer;
  padding: var(--space-lg) 0; font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 500; line-height: 1.4; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--color-accent);
  font-size: var(--text-2xl); line-height: 1; flex-shrink: 0; transition: transform var(--duration-fast) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: var(--space-lg); color: var(--content-text); line-height: 1.75; }
.faq details > div > * + * { margin-top: var(--space-md); }

/* --- блок «Мнение Sochi Event Agency» --- */
.opinion { padding: var(--space-2xl); border: 1px solid rgba(232,168,73,.22);
  border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(232,168,73,.05), transparent 60%); }
.opinion h2 { margin-top: 0; }
.opinion__verdict { font-size: var(--text-xl); line-height: 1.6; color: var(--color-text-light); }
.opinion__sign { display: flex; align-items: center; gap: var(--space-md);
  margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border);
  font-size: var(--text-sm); color: var(--color-text-muted); }
.opinion__sign strong { color: var(--color-text-light); }

/* --- метаданные статьи --- */
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
  font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-lg); }
.article-meta__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-text-muted); }
.article-meta time { font-family: var(--font-mono); }

/* --- перелинковка --- */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
@media (max-width: 900px) { .related { grid-template-columns: 1fr; } }
.related a { display: block; padding: var(--space-lg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-bg-card);
  transition: all var(--duration-normal) var(--ease-out); }
.related a:hover { border-color: rgba(232,168,73,.35); transform: translateY(-3px); }
.related__tag { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--color-accent); }
.related__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500;
  line-height: 1.35; margin-top: var(--space-sm); }

/* --- обложка статьи --- */
.article-cover { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius-lg); }
@media (max-width: 640px) { .article-cover { aspect-ratio: 4 / 3; } }
.article-cover__caption { font-size: var(--text-xs); color: var(--color-text-muted);
  margin-top: var(--space-sm); text-align: center; }

/* --- блок «Статьи по теме» на посадочных (маркеры генератора) --- */
.svc-articles { margin-top: var(--space-3xl); }

/* --- прайс-строки на посадочных --- */
.price-list { display: flex; flex-direction: column; gap: var(--space-md); }
.price-row { display: flex; align-items: baseline; gap: var(--space-md);
  padding-bottom: var(--space-md); border-bottom: 1px dashed var(--color-border); }
.price-row__name { color: var(--content-text); }
.price-row__dots { flex: 1; border-bottom: 1px dotted var(--content-dots); }
.price-row__value { font-family: var(--font-mono); color: var(--color-accent); white-space: nowrap; font-size: var(--text-sm); }