/* Сторис «Фактов дня»: карточка слайда, полоса-кружки и окно просмотра.

   Карточка одна и та же в ленте /fakty и в окне поверх любой страницы,
   поэтому её стили живут отдельно от раскладки ленты (pages/fakty.css).
   Высоту слайда задаёт контейнер через --slide-h: лента — экран минус
   шапка, окно просмотра — весь экран. */

/* ---------- Слайд ---------- */
.fk-slide{
  height:var(--slide-h);
  scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; align-items:stretch; justify-content:center;
  padding:12px 12px 14px;
}
.fk-card{
  --c-bg:var(--accent); --c-ink:#fff; --c-soft:rgba(255,255,255,.74); --c-line:rgba(255,255,255,.4);
  --c-btn:#fff; --c-btn-ink:var(--accent-deep);
  position:relative; overflow:hidden;
  width:100%; max-width:480px;
  display:flex; flex-direction:column; gap:14px;
  padding:16px 20px 20px;
  border-radius:24px;
  background:var(--c-bg); color:var(--c-ink);
}
/* Полоска текущего слайда «проявляется», когда слайд встал на место.
   Без таймера: заполненная по времени полоска обещала бы автоперелистывание. */
.fk-bars i.now{ transition:opacity .4s ease; }
.fk-slide:not(.is-active) .fk-bars i.now{ opacity:.45; }

/* Оформление по виду факта. Цвета — из палитры сайта, без новых оттенков. */
.fk--memorial .fk-card{
  --c-bg:var(--ink); --c-btn-ink:var(--ink);
}
.fk--history .fk-card{
  --c-bg:var(--clay-deep); --c-btn-ink:#6b2f10; --c-soft:rgba(255,255,255,.9);
}
.fk--family .fk-card, .fk--surname .fk-card, .fk-end .fk-card{
  --c-bg:var(--accent-soft); --c-ink:var(--ink); --c-soft:var(--ink-soft); --c-line:rgba(14,77,64,.16);
  --c-btn:var(--accent); --c-btn-ink:#fff;
}
.fk--name .fk-card{
  --c-bg:var(--clay-soft); --c-ink:var(--ink); --c-soft:var(--ink-soft); --c-line:rgba(160,73,28,.28);
  --c-btn:var(--clay-deep); --c-btn-ink:#fff;
}

/* Фокус: общий зелёный контур сливается с зелёной карточкой. */
.fk-card :focus-visible{ outline-color:var(--c-ink); outline-offset:2px; }
.fk-slide:focus-visible{ outline:none; }
.fk-slide:target .fk-card{ outline:none; }
.fk-slide:focus-visible .fk-card{ outline:2px solid var(--accent); outline-offset:3px; }

/* Полоски прогресса дня, как у историй. */
.fk-bars{ display:flex; gap:4px; }
.fk-bars i{ flex:1; height:3px; border-radius:2px; background:var(--c-line); }
.fk-bars i.on{ background:var(--c-ink); opacity:.9; }

.fk-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:-4px; }
.fk-date{ font-size:14px; font-weight:600; color:var(--c-soft); }
.fk-share{
  width:44px; height:44px; margin-right:-10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:transparent; color:var(--c-ink); cursor:pointer;
}
.fk-share:hover{ background:var(--c-line); }

/* ---------- Иллюстрация ----------
   Иллюстрация забирает высоту, оставшуюся от текста, и подстраивается под
   неё через единицы контейнера: длинный текст сжимает картинку, а не
   наезжает на неё. На совсем низком остатке подпись под картинкой уходит. */
.fk-visual{
  flex:1 1 0; min-height:0; overflow:hidden;
  container-type:size;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.fk-mono{
  width:min(168px,72cqh); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1.5px solid var(--c-line);
  font-family:var(--f-head); font-weight:600; letter-spacing:-.02em;
  font-size:min(62px,26cqh);
}
.fk-years{ font-size:15px; font-weight:600; color:var(--c-soft); }
.fk-year{
  font-family:var(--f-head); font-weight:600; letter-spacing:-.04em; line-height:1;
  font-size:min(128px,56cqh,22cqw);
}
.fk-ago{ font-size:15px; font-weight:600; color:var(--c-soft); }
.fk-visual-arms svg{ height:min(230px,80cqh); width:auto; }
@container (max-height:72px){
  .fk-visual > *{ display:none; }
}
@container (max-height:120px){
  .fk-years, .fk-ago, .fk-arms-note{ display:none; }
  .fk-mono{ width:90cqh; font-size:34cqh; }
  .fk-visual-arms svg{ height:96cqh; }
}
.fk-arms-note{ font-size:12.5px; color:var(--c-soft); letter-spacing:.01em; }
.fk-sheet{
  display:flex; flex-direction:column; align-items:center;
  padding:14px 26px 12px; border-radius:16px;
  background:var(--bg); color:var(--ink); border:1px solid var(--c-line);
}
.fk-sheet b{ font-family:var(--f-head); font-weight:600; font-size:min(96px,48cqh); line-height:1; }
.fk-sheet i{ font-style:normal; font-weight:600; color:var(--clay-deep); }

/* ---------- Текст ---------- */
.fk-text{ display:flex; flex-direction:column; gap:8px; }
.fk-kicker{
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-soft);
}
.fk-title{
  color:inherit;
  font-family:var(--f-head); font-weight:600; letter-spacing:-.015em;
  font-size:clamp(21px,3.1svh,27px); line-height:1.2;
}
.fk-body{ font-size:16px; line-height:1.55; color:var(--c-soft); }

/* ---------- Кнопки ---------- */
.fk-actions{ display:flex; flex-wrap:wrap; gap:8px; flex-shrink:0; }
.fk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  min-height:44px; padding:10px 16px; border-radius:var(--r-btn);
  font-size:15px; font-weight:600; line-height:1.15; text-decoration:none;
  color:var(--c-ink); border:1px solid var(--c-line); background:transparent;
  transition:background .15s ease;
}
.fk-btn:hover{ background:var(--c-line); color:var(--c-ink); text-decoration:none; }
.fk-btn-main{ flex:1 1 100%; background:var(--c-btn); color:var(--c-btn-ink); border-color:transparent; }
.fk-btn-main:hover{ background:var(--c-btn); color:var(--c-btn-ink); filter:brightness(.94); }
.fk-btn-main .ic{ margin-right:-4px; }

/* Тизер следующего факта: подпись под кнопками. */
.fk-next{
  margin-top:-4px; font-size:13px; line-height:1.35; color:var(--c-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fk-next span{ font-weight:700; }
.fk-next::after{ content:" ↓"; }


/* ---------- Широкий экран: карточка 9:16 по центру ---------- */
@media (min-width:1100px){
  .fk-slide{ padding:20px 0; }
  .fk-card{
    width:auto; height:100%; max-height:820px; align-self:center;
    aspect-ratio:9 / 16; max-width:none;
    padding:18px 24px 24px;
  }
}
/* Ноутбук: при строгих 9:16 карточка выходила в 380px шириной, кнопки
   вставали в столбик и выдавливали иллюстрацию. Шире и ниже — лучше. */
@media (min-width:1100px){
  .fk-actions .fk-btn:not(.fk-btn-main){ min-height:36px; padding:7px 12px; font-size:14px; }
}
@media (min-width:1100px) and (max-height:940px){
  .fk-card{ aspect-ratio:auto; width:clamp(440px, calc((100svh - var(--hdr) - 40px) * .66), 480px); }
}
@media (min-width:1100px) and (max-height:800px){
  .fk-body{ font-size:15px; line-height:1.5; }
  .fk-card{ gap:12px; }
  .fk-slide{ padding:14px 0; }
}
@media (min-width:1100px) and (max-height:720px){
  .fk-card{ width:500px; }
  .fk-title{ font-size:22px; }
}

/* Низкий экран (iPhone SE в Safari с панелями): вторичные кнопки встают
   в одну прокручиваемую строку, тизер уходит — иначе последняя кнопка
   срезается краем карточки и до неё не дотянуться. */
@media (max-width:1099px) and (max-height:700px){
  .fk-body{ font-size:15px; }
  .fk-actions{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    scroll-snap-type:x proximity;
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  }
  .fk-actions::-webkit-scrollbar{ display:none; }
  .fk-btn{ flex:none; white-space:nowrap; scroll-snap-align:start; }
  .fk-btn-main{ flex:1 0 auto; }
  /* Третья кнопка (обычно герб или редкость) уступает место первым двум. */
  .fk-actions .fk-btn:nth-child(3){ display:none; }
  .fk-next{ display:none; }
}
@media (max-height:600px){
  .fk-card{ gap:10px; padding:14px 18px 16px; }
  .fk-title{ font-size:20px; }
  .fk-body{ font-size:14.5px; line-height:1.45; }
}
/* Телефон боком: карточка растёт по содержимому. */
@media (orientation:landscape) and (max-height:500px){
  .fk-slide{ height:auto; min-height:var(--slide-h); }
  .fk-card{ overflow:visible; }
  .fk-visual{ display:none; }
}
/* Страховка: если текст всё-таки не влез, карточка прокручивается внутри,
   а не теряет кнопки. */
.fk-card{ overflow-y:auto; scrollbar-width:none; }
.fk-card::-webkit-scrollbar{ display:none; }

/* Заголовок слайда ведёт на страницу факта; «Подробнее» — то же явно. */
.fk-title a{ color:inherit; text-decoration:none; }
.fk-title a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.fk-more{
  margin-left:auto; padding:6px 4px;
  font-size:14px; font-weight:600; color:var(--c-ink); text-decoration:underline;
  text-decoration-color:var(--c-line); text-underline-offset:3px;
}
.fk-more:hover{ color:var(--c-ink); text-decoration-color:currentColor; }

/* Полоса во всю ширину между шапкой страницы и контентом. */
.st-band{ padding-top:20px; padding-bottom:4px; }
@media (max-width:609px){ .st-band{ padding-top:16px; } }

/* ---------- Полоса-кружки ----------
   Тонкий ряд, как сторис в мессенджерах: кружок с монограммой, годом или
   гербом и короткая подпись. Кольцо — «не смотрели», серое — смотрели. */
.st{ display:flex; flex-direction:column; gap:10px; }
.st-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.st-title{ font-size:14px; font-weight:700; color:var(--ink-soft); }
.st-title b{ color:var(--ink); }
.st-head a{ font-size:14px; font-weight:600; }
.st-row{
  display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; padding:2px 2px 4px; margin:0 -2px;
  scroll-snap-type:x proximity;
}
.st-row::-webkit-scrollbar{ display:none; }
.st-item{
  flex:none; width:76px; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--ink); text-decoration:none;
}
.st-item:hover{ color:var(--accent); text-decoration:none; }
.st-ring{
  width:68px; height:68px; border-radius:50%; padding:3px;
  background:conic-gradient(from 210deg, var(--accent), var(--clay-deep), var(--accent));
}
.st-item.is-seen .st-ring{ background:var(--line); }
.st-av{
  --c-bg:var(--accent); --c-ink:#fff;
  width:100%; height:100%; border-radius:50%; border:2px solid var(--bg);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--c-bg); color:var(--c-ink);
  font-family:var(--f-head); font-weight:600; font-size:19px; letter-spacing:-.02em; line-height:1;
}
.st-av svg{ width:auto; height:44px; }
.st-av small{ display:block; font-family:var(--f-text); font-size:10px; font-weight:700; letter-spacing:.02em; margin-top:2px; }
.st-av-year{ font-size:15px; }
.fk--memorial .st-av{ --c-bg:var(--ink); }
.fk--history .st-av{ --c-bg:var(--clay-deep); }
.fk--family .st-av, .fk--surname .st-av{ --c-bg:var(--accent-soft); --c-ink:var(--ink); }
.fk--name .st-av{ --c-bg:var(--clay-soft); --c-ink:var(--clay-deep); }
.st-all .st-av{ --c-bg:var(--surface); --c-ink:var(--ink); flex-direction:column; font-size:22px; }
.st-all .st-av small{ color:var(--clay-deep); }
.st-label{
  width:100%; text-align:center; font-size:12.5px; font-weight:600; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.st-item:focus-visible{ outline-offset:2px; border-radius:12px; }

/* ---------- Окно просмотра ----------
   Поверх страницы: тёмная подложка, лента слайдов со своей прокруткой. */
.sv{
  --hdr:0px; --slide-h:100dvh;
  position:fixed; inset:0; z-index:200;
  background:rgba(20,20,15,.94);
}
.sv-scroll{
  height:100%; overflow-y:auto; overscroll-behavior:contain;
  scroll-snap-type:y mandatory; scrollbar-width:none;
}
.sv-scroll::-webkit-scrollbar{ display:none; }
.sv .fk-slide{ height:100dvh; }
.sv-close{
  position:fixed; top:12px; right:12px; z-index:2;
  width:44px; height:44px; border:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); color:#fff; cursor:pointer;
}
.sv-close:hover{ background:rgba(255,255,255,.26); }
.sv-nav{ display:none; }
@media (min-width:1100px){
  .sv-nav{
    position:fixed; right:max(24px, calc(50% - 360px)); top:50%; transform:translateY(-50%); z-index:2;
    display:flex; flex-direction:column; gap:10px;
  }
  .sv-nav button{
    width:48px; height:48px; border:0; border-radius:50%; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.14); color:#fff;
  }
  .sv-nav button:hover{ background:rgba(255,255,255,.26); }
  .sv-up .ic{ transform:rotate(-90deg); }
  .sv-down .ic{ transform:rotate(90deg); }
}
/* На телефоне карточка — во весь экран без полей, как в мессенджерах. */
@media (max-width:1099px){
  .sv .fk-slide{ padding:0; }
  .sv .fk-card{ max-width:none; border-radius:0; padding-top:max(16px, env(safe-area-inset-top)); }
  .sv .fk-top{ padding-right:48px; }
  .sv .fk-bars{ margin-right:52px; }
}
html.sv-open, html.sv-open body{ overflow:hidden; }

.fk-toast{
  position:fixed; left:50%; bottom:24px; z-index:260; transform:translate(-50%,20px);
  padding:10px 16px; border-radius:var(--r-pill);
  background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.fk-toast.is-on{ opacity:1; transform:translate(-50%,0); }