/* ===========================
   KITTENS.CSS — только для:
   - kittens.html (листинг)
   - kitten-*.html (персоналки)
   =========================== */

/* ---- Дизайн‑система (локальная) ---- */
:root{
  --bg:#fcfcfd; --surface:#ffffff; --text:#0f172a; --muted:#4b5563; --border:#e5e7eb;
  --brand:#2563eb; --brand-ink:#1d4ed8; --ring:rgba(37,99,235,.35);
  --ok:#059669; --warn:#d97706;
  --shadow:0 8px 30px rgba(2,8,23,.06);
  --container:1128px; --radius:16px;

  --step--1: clamp(.98rem,.94rem + .2vw,1.05rem);
  --step-0:  clamp(1.125rem,1.02rem + .5vw,1.25rem);
  --step-1:  clamp(1.35rem,1.2rem + .9vw,1.7rem);
  --step-2:  clamp(1.6rem,1.32rem + 1.4vw,2.1rem);
  --step-3:  clamp(2rem,1.7rem + 2vw,2.6rem);
  --step-4:  clamp(2.4rem,2.1rem + 2.6vw,3.2rem);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --surface:#0f172a; --text:#f8fafc; --muted:#94a3b8; --border:#1f2937;
    --brand:#60a5fa; --brand-ink:#93c5fd; --ring:rgba(96,165,250,.4); --shadow:0 8px 30px rgba(0,0,0,.4);
  }
}
/* ручное переопределение темы (та же логика что на сайте, для совместности) */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#fcfcfd; --surface:#fff; --text:#0f172a; --muted:#4b5563; --border:#e5e7eb;
  --brand:#2563eb; --brand-ink:#1d4ed8; --ring:rgba(37,99,235,.35); --shadow:0 8px 30px rgba(2,8,23,.06);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1220; --surface:#0f172a; --text:#f8fafc; --muted:#94a3b8; --border:#1f2937;
  --brand:#60a5fa; --brand-ink:#93c5fd; --ring:rgba(96,165,250,.4); --shadow:0 8px 30px rgba(0,0,0,.4);
}

/* ---- База ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--text); background:var(--bg);
  font:500 16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; height:auto; display:block; }
.container{ max-width:var(--container); margin-inline:auto; padding:20px; }
.visually-hidden{ position:absolute!important; clip:rect(1px,1px,1px,1px); padding:0;border:0;height:1px;width:1px; overflow:hidden; }
:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:8px; }

/* ---- Мини‑хедер (как на листинге/персоналках) ---- */
header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(160%) blur(8px);
  background: color-mix(in oklab, var(--surface), transparent 12%);
  border-bottom:1px solid var(--border);
}
.nav{ display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; }
.brand{ font-weight:900; letter-spacing:.2px; }
.brand a{ color:inherit; text-decoration:none; }
.nav-actions{ display:flex; gap:10px; justify-content:flex-end; align-items:center; }

/* ---- Кнопки ---- */
.btn,.cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-weight:700; text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
}
.cta--primary{ background:var(--brand); color:#fff; border-color: color-mix(in oklab, var(--brand), black 12%); }
.cta--primary:hover{ filter:brightness(1.05); text-decoration:none; }
.btn-icon{ width:40px; height:40px; display:inline-grid; place-items:center; }

/* ---- Тема: кнопка ---- */
.themeBtn{
  width:38px; height:38px; border-radius:999px; cursor:pointer;
  border:1px dashed color-mix(in oklab, var(--brand), transparent 40%);
  background: color-mix(in oklab, var(--surface), var(--brand) 6%);
  box-shadow:0 4px 14px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6);
  display:inline-grid; place-items:center;
}
.themeBtn .sun{
  width:18px; height:18px; border-radius:999px; display:inline-block;
  background: radial-gradient(circle at center, #fcd34d 45%, #f59e0b 46% 100%);
  box-shadow:0 0 0 3px rgba(245,158,11,.15), 0 0 0 6px rgba(245,158,11,.08);
}
html[data-theme="dark"] .themeBtn .sun{
  background: radial-gradient(circle at center, #93c5fd 45%, #60a5fa 46% 100%);
  box-shadow:0 0 0 3px rgba(147,197,253,.15), 0 0 0 6px rgba(147,197,253,.08);
}

/* ---- Заголовки и тексты ---- */
h1{ font-size:var(--step-4); line-height:1.1; margin:.2em 0 .4em; letter-spacing:-.01em; }
h2{ font-size:var(--step-3); line-height:1.15; margin:0 0 18px; letter-spacing:-.01em; text-align:center; }
h3{ font-size:var(--step-1); margin:.4em 0 .2em; }
.lead{ font-size:var(--step-0); color:var(--muted); }
.prose{ max-width:70ch; }
.prose p{ text-indent:1.35em; margin:.6em 0; }
.prose p:first-child{ text-indent:0; }

/* ---- Сетки/карточки: листинг ---- */
.grid{ display:grid; gap:18px; }
.kittens-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width: 960px){ .kittens-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px){ .kittens-grid{ grid-template-columns:1fr; } }

.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
}
.kitten-card{ display:grid; gap:12px; }
.kitten-media{
  aspect-ratio:4/3; border-radius: calc(var(--radius) - 6px);
  overflow:hidden; background:#eef2ff; border:1px solid var(--border);
}
.kitten-media img{ width:100%; height:100%; object-fit:cover; }
.kitten-title{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.kitten-desc{ color:var(--muted); }
.clamp-4{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- Галерея: персональная страница ---- */
.gallery{ display:grid; gap:10px; grid-template-columns:repeat(4,1fr); }
@media (max-width: 960px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 640px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
.gallery .item{
  aspect-ratio:1/1; border-radius:12px; overflow:hidden;
  border:1px solid var(--border); background:#eef2ff; cursor:zoom-in;
}
.gallery .item img{ width:100%; height:100%; object-fit:cover; }

/* ---- Лайтбокс ---- */
.lightbox{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.75); z-index:1000; padding:20px;
}
.lightbox[aria-hidden="false"]{ display:grid; }
.lightbox__inner{
  position:relative; width:min(96vw,1100px); height:min(92vh,90vw);
  display:grid; place-items:center;
}
.lightbox__img{ width:100%; height:100%; object-fit:contain; border-radius:12px; background:#000; }
.lightbox__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; background:rgba(255,255,255,.88); color:#111;
  width:44px; height:44px; border-radius:999px; cursor:pointer; font-weight:900;
}
.lightbox__btn--prev{ left:6px; } .lightbox__btn--next{ right:6px; }
.lightbox__close{ position:absolute; top:8px; right:8px; border:0; background:rgba(255,255,255,.88); width:40px; height:40px; border-radius:999px; cursor:pointer; font-weight:900; }

/* ---- Футер ---- */
footer{ color:var(--muted); border-top:1px dashed var(--border); margin-top:8px; }
.footer-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }

/* ---- Reduce motion ---- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
}
/* Центровка описания на персональной странице котёнка */
.kdetail-info {
  max-width: 720px;        /* ограничиваем ширину, чтобы текст не растягивался */
  margin: 20px auto;       /* центрируем блок */
  text-align: left;        /* сам текст остаётся по левому краю для удобства чтения */
}

/* Центровка кнопок под описанием */
.kdetail-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}




/* Базовые (оставляем как есть из твоей версии) */
.lightbox{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.85); z-index:1000; }
.lightbox[aria-hidden="false"]{ display:grid; }
.lightbox__inner{ position:relative; width:100vw; height:100vh; display:grid; place-items:center; padding:0 56px; }
.lightbox__img{ max-width:95vw; max-height:90vh; width:auto; height:auto; object-fit:contain; border-radius:12px; background:#000; }
.lightbox__btn{ position:absolute; top:50%; transform:translateY(-50%); border:0; background:rgba(255,255,255,.9); color:#111; width:44px; height:44px; border-radius:999px; cursor:pointer; font-weight:900; }
.lightbox__btn--prev{ left:8px; } .lightbox__btn--next{ right:8px; }
.lightbox__close{ position:absolute; top:10px; right:10px; border:0; background:rgba(255,255,255,.9); width:40px; height:40px; border-radius:999px; cursor:pointer; font-weight:900; }

/* --- МОБИЛЬНЫЙ ПРЕСЕТ --- */
@media (max-width: 640px){
  .lightbox{ background: rgba(0,0,0,.9); }                /* чуть темнее фон */
  .lightbox__inner{ padding: 0 16px; }                    /* меньше боковых полей */
  .lightbox__img{
    max-width: calc(100vw - 24px);                        /* почти на всю ширину */
    max-height: calc(100vh - 140px);                      /* оставляем место под кнопки/жесты */
    border-radius: 10px;
  }
  .lightbox__btn{
    width: 36px; height: 36px;                            /* компактные стрелки */
    background: rgba(255,255,255,.85);
  }
  .lightbox__btn--prev{ left: 6px; }
  .lightbox__btn--next{ right: 6px; }
  .lightbox__close{
    top: 12px; right: 12px; width: 36px; height: 36px;    /* компактный крестик */
    background: rgba(255,255,255,.9);
  }
}
/* === MOBILE FIX для лайтбокса (iOS/Android) === */
@media (max-width: 640px){
  .lightbox{
    background: rgba(0,0,0,.92);
    overscroll-behavior: contain;
  }
  .lightbox__inner{
    /* 100dvh — реальная высота видимой области, с учётом UI браузера */
    width: 100vw;
    height: 100dvh;
    padding-inline: max(10px, env(safe-area-inset-left), 12px)
                    max(10px, env(safe-area-inset-right), 12px);
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
  }
  .lightbox__img{
    /* вписываем фото в реальную видимую область */
    max-width: calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right) + 24px));
    max-height: calc(100dvh - (env(safe-area-inset-top) + env(safe-area-inset-bottom) + 120px));
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 6px 26px rgba(0,0,0,.45);
    background: #000;
  }
  /* компактные стрелки + ближе к краю */
  .lightbox__btn{
    width: 34px; height: 34px;
    background: rgba(255,255,255,.9);
  }
  .lightbox__btn--prev{ left: 4px; }
  .lightbox__btn--next{ right: 4px; }
  /* крестик меньше и ближе к углу, с учётом safe-area */
  .lightbox__close{
    top: calc(env(safe-area-inset-top) + 8px);
    right: calc(env(safe-area-inset-right) + 8px);
    width: 34px; height: 34px;
    background: rgba(255,255,255,.95);
  }
}
/* ==== MOBILE OVERRIDE (фикс сдвига) ==== */
@media (max-width: 640px){
  /* сам оверлей на весь экран и по центру */
  #lightbox{
    display:flex !important;
    align-items:center;
    justify-content:center;
    background: rgba(0,0,0,.92);
  }
  #lightbox .lightbox__inner{
    width:100vw;
    height:100dvh;           /* реальная высота экрана */
    padding:0;               /* убираем внутренние поля */
    display:flex;
    align-items:center;
    justify-content:center;
  }
  /* сама картинка — ровно по центру, вписана в экран */
  #lightboxImg.lightbox__img{
    display:block;
    margin:auto;
    object-fit:contain;
    max-width: calc(100vw - 56px);   /* оставляем место под стрелки */
    max-height: calc(100dvh - 112px);/* и под крестик сверху */
    width:auto; height:auto;
    border-radius:10px;
    background:#000;
  }

  /* стрелки и крестик — фиксируем к краям экрана,
     чтобы НИКОГДА не «толкали» изображение */
  #lbPrev, #lbNext{
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    width:34px; height:34px;
    background:rgba(255,255,255,.9);
    border:0; border-radius:999px;
  }
  #lbPrev{ left:8px; }
  #lbNext{ right:8px; }

  #lbClose{
    position:fixed;
    top:12px; right:12px;
    width:34px; height:34px;
    background:rgba(255,255,255,.95);
    border:0; border-radius:999px;
  }
}