/* ==========================================================================
   БиоПокров® — общий сайт, content.css (15.10.2026): документы (/politika-konfidenczialnosti.html, /cookies.html; R-94 В,
   R-150 — у документов без разделов оглавление не строится), список статей /stati/ (карточки .acard, как у Геля и Лака:
   статьи живут на сайтах продуктов, ссылки ведут туда) и 404 (R-151). Поверх styles.css главной: токены ноты «Белый и синий»,
   шапка (без навигации, R-198), подвал R-106, cookie R-144.
   ========================================================================== */
.doc { padding-top: calc(var(--header-h) + 4px); }
.doc-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 8px; font: 600 15px / 1 var(--font); color: var(--accent-deep); text-decoration: none; }
.doc-back:hover { color: var(--accent-hover); }
.doc-back svg { width: 18px; height: 18px; transform: rotate(180deg); fill: none; stroke: currentColor; stroke-width: 1.75; }
.doc-title { max-width: 22ch; margin-bottom: 20px; font: 600 28px / 1.18 var(--font); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.doc-body { font-size: 16px; line-height: 1.6; color: var(--ink-muted); overflow-wrap: break-word; }
.doc-body > * + * { margin-top: 12px; }
.doc-body h2, .doc-body h3 { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-accent); font: 600 20px / 1.3 var(--font); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.doc-body > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-body a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.doc-body a:hover { color: var(--accent-hover); }
.doc-body ul { padding-left: 22px; list-style: disc; }
.doc-body li + li { margin-top: 6px; }
.doc-body li::marker { color: var(--accent); }
.footer__docs [aria-current], .footer__list [aria-current] { color: var(--accent-deep); }

/* ---------- Список статей /stati/: две группы (Гель, Лак), карточки — ссылки на статьи сайтов продуктов ---------- */
.arts { background: linear-gradient(180deg, var(--sage-soft) 0, var(--canvas) 400px); }
.crumbs { padding-top: calc(var(--header-h) + 4px); }
.crumbs__list { display: flex; align-items: center; min-width: 0; font: 500 14px / 1.3 var(--font); color: var(--ink-muted); }
.crumbs__item { display: flex; flex: none; align-items: center; min-width: 0; }
.crumbs__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-deep); text-decoration: none; }
.crumbs__link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.crumbs__sep { flex: none; width: 16px; height: 16px; margin: 0 6px; fill: none; stroke: var(--ink-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; transform: rotate(-90deg); }
.crumbs__current { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.arts__inner { display: grid; gap: 32px; }
.arts .crumbs { margin-bottom: -20px; }
.arts__head { display: grid; gap: var(--h1-gap); justify-items: start; }
.art__title { font: 600 30px / 1.15 var(--font); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.art__lead { max-width: 60ch; font: 500 17px / 1.5 var(--font); color: var(--ink-muted); }
.arts__group { display: grid; gap: var(--head-gap); }
.arts__h2 { font: 600 var(--title-size) / 1.2 var(--font); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.arts__grid { display: grid; gap: 16px; }
.cov { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--sage-soft); }
.cov img { display: block; width: 100%; height: 100%; object-fit: cover; }
.acard { position: relative; display: grid; grid-template-rows: auto auto 1fr; padding: 8px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow); transition: transform var(--duration-medium) var(--ease-standard), box-shadow var(--duration-medium) var(--ease-standard); }
.acard__cov { border-radius: var(--radius-photo); }
.acard__head { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; column-gap: 16px; padding: 16px 12px 0; max-width: none; }
.acard__link { font: 600 19px / 1.3 var(--font); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; text-wrap: balance; transition: color var(--duration-fast) var(--ease-standard); }
.acard__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-card); }
.acard__link:focus-visible { outline: none; }
.acard:has(.acard__link:focus-visible) { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.acard__btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--accent-deep); color: #fff; transition: background-color var(--duration-fast) var(--ease-standard); }
.acard__btn svg { width: 20px; height: 20px; transition: transform var(--duration-medium) var(--ease-standard); }
.acard__lead { padding: 8px 12px 12px; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
@media (hover: hover) {
  .acard:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }
  .acard:hover .acard__link { color: var(--accent-deep); }
  .acard:hover .acard__btn { background: var(--accent-hover); }
  .acard:hover .acard__btn svg { transform: translateX(3px); }
}
.acard:active { transform: translateY(0) scale(0.99); }

/* ---------- 404 (R-151): «404», заголовок, подзаголовок, «На главную»; картинка — плашка в ноте до кадра ---------- */
.e404 { padding-bottom: 8px; }
.e404__inner { display: grid; gap: 28px; padding-top: 16px; }
.e404__copy { display: grid; gap: 12px; justify-items: start; }
.e404__num { font: 700 88px / 1 var(--font); letter-spacing: -0.04em; color: var(--accent-deep); }
.e404__title { font: 600 26px / 1.2 var(--font); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.e404__sub { font-size: 17px; line-height: 1.5; color: var(--ink-muted); }
.e404__copy .btn { margin-top: 12px; }
.e404__stage { aspect-ratio: 5 / 4; border-radius: var(--radius-panel); background: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, var(--sage) 0%, var(--sage-soft) 55%, var(--canvas) 100%); box-shadow: var(--shadow); }

@media (min-width: 640px) {
  .arts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @supports (grid-template-rows: subgrid) { .acard { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; } }
}
/* 640–1023: две колонки, нечётная последняя — во всю ширину строкой (обложка слева) */
@media (min-width: 640px) and (max-width: 1023px) {
  .acard:last-child:nth-child(odd) { grid-column: 1 / -1; grid-row: auto; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; align-content: start; }
  .acard:last-child:nth-child(odd) .acard__cov { grid-column: 1; grid-row: 1 / -1; align-self: start; }
  .acard:last-child:nth-child(odd) .acard__head, .acard:last-child:nth-child(odd) .acard__lead { grid-column: 2; }
}
@media (min-width: 768px) {
  .doc { padding-top: calc(var(--header-h) + 16px); }
  .doc-title { font-size: 40px; }
  .doc-body { font-size: 17px; }
  .crumbs { padding-top: calc(var(--header-h) + 8px); }
  .art__title { font-size: 40px; line-height: 1.12; }
  .art__lead { font-size: 18px; }
  .acard__link { font-size: 20px; }
  .e404__num { font-size: 140px; }
  .e404__title { font-size: 36px; }
}
/* от 1024: шесть дорожек — карточки по 2 (три в ряд); остаток 2 — по 3, остаток 1 — во всю ширину строкой: без пустой ячейки */
@media (min-width: 1024px) {
  .doc-grid.no-toc .doc-body { max-width: 880px; padding: 40px 48px; border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow); }
  .arts__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .acard { grid-column: span 2; padding: 10px; }
  .acard--half { grid-column: span 3; }
  .acard--wide { grid-column: 1 / -1; grid-row: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; }
  .acard--wide .acard__cov { grid-column: 1; grid-row: 1 / -1; }
  .acard--wide .acard__head, .acard--wide .acard__lead { grid-column: 2; }
  .acard__cov { border-radius: 14px; }
  .acard__head { padding: 20px 14px 0; }
  .acard__lead { padding: 8px 14px 14px; }
  .e404__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 48px; padding-top: 32px; }
}
@media (min-width: 1280px) { .art__title { font-size: 44px; } }
@media (prefers-reduced-motion: reduce) { .acard, .acard:hover { transform: none; } }

/* Кнопка-стрелка карточки статьи при наведении — чуть крупнее и тень, как кнопки в styles.css (31.10.2026) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .acard__btn { transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms cubic-bezier(0.2, 0, 0, 1), background-color 160ms cubic-bezier(0.2, 0, 0, 1); }
  .acard:hover .acard__btn { transform: scale(1.05); box-shadow: 0 10px 24px -8px rgba(27, 39, 51, 0.32); }
}
/* Карточки статей при наведении — как на apple.com/iphone (31.10.2026): вся карточка плавно чуть крупнее, 0,3 с */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .acard { transition: transform 300ms cubic-bezier(0, 0, 0.5, 1), box-shadow 300ms cubic-bezier(0, 0, 0.5, 1); }
  .acard:hover { transform: scale(1.02); }
  .acard:active { transform: scale(0.99); }
}

/* Тень карточки статьи при увеличении — как на apple.com/store (31.10.2026) */
@media (hover: hover) {
  .acard:hover { box-shadow: 2px 4px 16px rgba(27, 39, 51, 0.16); }
}