/* ============================================================
   Раздел статей «10 фактов о…».
   Токены и общие детали (карточка витрины, кнопки, стартовый экран) берутся из
   games.css — он подключается на этих страницах первым. Здесь только своё.
   ============================================================ */

/* ---------- Обложка карточки на витрине ---------- */
.art-cover{display:flex;align-items:center;justify-content:center;gap:18px}
.art-ten{font-family:var(--g-font);font-size:64px;font-weight:700;letter-spacing:-.05em;
  color:var(--ink);line-height:1}
.art-lines{display:flex;flex-direction:column;gap:9px;width:104px}
.art-lines i{display:block;height:9px;border-radius:999px;background:#fff;
  box-shadow:0 6px 16px -12px rgba(17,24,39,.5)}
.art-lines i.short{width:62%}

/* ---------- Обложка статьи ---------- */
/* Первый экран трафика с рекламной сети: законченная карточка, а не оверлей.
   Ширина уже читалки — на обложке нет длинного текста, и растянутая карточка
   выглядела бы пустой. */
.art-cover-card{width:100%;max-width:680px;margin:0 auto;background:var(--card);
  border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.art-cover-img{aspect-ratio:16/9;background:var(--g-felt)}
.art-cover-img img{width:100%;height:100%;object-fit:cover;display:block}
.art-cover-body{padding:26px clamp(18px,4vw,34px) 28px;text-align:center;font-family:var(--g-font)}
.art-cover-body .game-tag{margin-bottom:12px}
.art-cover-title{margin:0;font-size:clamp(1.6rem,4.6vw,2.15rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.15;color:var(--ink);text-wrap:balance}
.art-cover-lead{margin:14px 0 24px;font-size:1.05rem;line-height:1.65;color:var(--g-ink-2)}

/* ---------- Читалка ---------- */
/* .page из style.css — flex-строка по центру. Здесь детей несколько (обложка,
   читалка, ссылка назад), и в строке они встали бы рядом, а не друг под другом. */
.art-page{flex-direction:column;align-items:center;padding-top:clamp(16px,3vw,40px)}
/* Мера строки — главный параметр читалки: на этой ширине абзац читается,
   а картинка 16/9 не превращается в баннер во весь экран. */
.art-reader{width:100%;max-width:700px;margin:0 auto;background:var(--card);
  border-radius:24px;box-shadow:var(--shadow);padding:18px clamp(16px,3.5vw,28px) 24px;
  font-family:var(--g-font)}

.art-count{margin:0 0 14px;text-align:center;font-size:13px;font-weight:700;
  letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums}

.art-img{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--g-felt)}
.art-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Текста на странице много — это и есть формат. Центрирование и увеличенный
   интерлиньяж держат длинный абзац читаемым на телефоне. */
.art-text{margin:20px 0 0;text-align:center;font-size:1.06rem;line-height:1.72;color:var(--g-ink-2)}

/* Кнопка во всю ширину: это единственное действие на экране, и пальцем в неё
   попадаешь не целясь. */
.art-nav{margin-top:26px}
.art-next{display:block;width:100%;padding:15px 24px;font-size:1.02rem}

.art-done{margin-top:26px;text-align:center}
.art-done h2{margin:0;font-size:1.6rem;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.art-done p{margin:8px 0 0;color:var(--muted)}
.art-done-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.art-done-btns .sol-btn{text-decoration:none}

/* Возврат в раздел — под карточкой, а не в шапке: на первом экране он только
   уводил бы с лендинга. */
.art-back{display:block;width:100%;max-width:700px;margin:18px auto 0;text-align:center;
  font-family:var(--g-font);font-size:13px;color:var(--muted);text-decoration:none}
.art-back:hover{color:var(--ink)}

@media (max-width:640px){
  .art-page{padding-left:14px;padding-right:14px}
  .art-reader,.art-cover-card{border-radius:20px}
  .art-text{font-size:1.02rem;text-align:left}
  .art-done-btns .sol-btn{width:100%}
}

/* Сгенерированная обложка вместо нарисованной «10» */
.art-cover.has-img{padding:0;overflow:hidden}
.art-cover.has-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   ТРИ ДИЗАЙНА ЧИТАЛКИ (сплит, см. App\Articles::pickDesign)

   Аудитория раздела — 40+. Для неё разница между вариантами не косметическая:
   кегль, межстрочное и высота кнопки решают, дочитают страницу или уйдут.
   Поэтому базовые значения выше обычных веб-дефолтов во всех трёх, а
   различаются варианты тем, ЧЕМ именно берут читателя.

   Общее для всех: кнопка не ниже 56px (попасть пальцем не целясь), текст не
   мельче 18px, контраст текста к фону не ниже 7:1.
   ============================================================ */
.art-page .art-next{min-height:56px;font-weight:700}
.art-page .art-text{color:var(--ink)}

/* ---------- d1 «Крупный» — та же сетка, но читаемая ----------
   Самый близкий к исходному: ничего не переосмысляем, просто доводим размеры
   до нормальных для возраста. Контрольный вариант сплита. */
[data-design="d1"] .art-reader{max-width:720px;padding:22px clamp(18px,4vw,32px) 28px}
[data-design="d1"] .art-count{font-size:15px;letter-spacing:.06em}
[data-design="d1"] .art-text{font-size:1.22rem;line-height:1.75}
[data-design="d1"] .art-img{border-radius:18px}
[data-design="d1"] .art-next{font-size:1.15rem;padding:17px 24px;border-radius:14px}
[data-design="d1"] .art-cover-title{font-size:clamp(1.9rem,5vw,2.4rem)}
[data-design="d1"] .art-cover-lead{font-size:1.15rem;line-height:1.7}

/* ---------- d2 «Газета» — серифный текст, лево, широкая мера ----------
   Поколению, выросшему на бумаге, серифный текст в столбце читается быстрее
   центрованного санса: глазу есть за что цепляться, строка не «плывёт».
   Выравнивание по левому краю — по той же причине: рваный правый край держит
   точку возврата, центр её теряет на каждой строке. */
[data-design="d2"]{background:#faf7f2}
[data-design="d2"] .art-reader,[data-design="d2"] .art-cover-card{background:#fffdf9;border:1px solid #e7ded0;box-shadow:none}
[data-design="d2"] .art-reader{max-width:760px;padding:24px clamp(20px,4.5vw,40px) 30px}
[data-design="d2"] .art-text{font-family:'Lora',Georgia,'Times New Roman',serif;
  font-size:1.3rem;line-height:1.8;text-align:left;color:#241f19}
[data-design="d2"] .art-cover-title,[data-design="d2"] .art-done h2{
  font-family:'Lora',Georgia,serif;font-size:clamp(2rem,5.2vw,2.6rem);line-height:1.2;color:#1b1713}
[data-design="d2"] .art-cover-lead{font-family:'Lora',Georgia,serif;font-size:1.2rem;line-height:1.75;text-align:left;color:#3a332a}
[data-design="d2"] .art-cover-body{text-align:left}
[data-design="d2"] .art-count{font-size:15px;color:#8a7c68;letter-spacing:.1em}
[data-design="d2"] .art-img{border-radius:6px}
[data-design="d2"] .art-next{background:#2f6f4e;border-color:#2f6f4e;color:#fff;
  font-size:1.18rem;padding:18px 24px;border-radius:6px;letter-spacing:.01em}

/* ---------- d3 «Крупные карточки» — максимальный кегль ----------
   Ставка на предельную разборчивость: текст ещё крупнее, воздуха больше,
   кнопка со стрелкой во всю ширину и заметно выше. Для тех, кому и 20px мелко. */
[data-design="d3"] .art-reader{max-width:700px;padding:26px clamp(18px,4vw,30px) 30px;border-radius:28px}
[data-design="d3"] .art-count{font-size:16px;font-weight:800;color:var(--ink)}
[data-design="d3"] .art-text{font-size:1.42rem;line-height:1.72;letter-spacing:-.005em}
[data-design="d3"] .art-img{border-radius:22px}
[data-design="d3"] .art-nav{margin-top:32px}
[data-design="d3"] .art-next{font-size:1.3rem;padding:22px 24px;border-radius:18px;min-height:68px}
[data-design="d3"] .art-next::after{content:" →"}
[data-design="d3"] .art-cover-card{border-radius:28px}
[data-design="d3"] .art-cover-title{font-size:clamp(2.1rem,5.6vw,2.8rem);line-height:1.12}
[data-design="d3"] .art-cover-lead{font-size:1.25rem;line-height:1.7}
[data-design="d3"] .art-done h2{font-size:1.9rem}

@media (max-width:640px){
  /* На телефоне длинный абзац по центру нечитаем в любом варианте. */
  [data-design="d1"] .art-text,[data-design="d3"] .art-text{text-align:left}
  [data-design="d1"] .art-text{font-size:1.16rem}
  [data-design="d2"] .art-text{font-size:1.22rem}
  [data-design="d3"] .art-text{font-size:1.3rem}
}