/* ==========================================================================
   kinouroki-adaptive.css — улучшения адаптивности ЛК «Киноуроки»
   Подключается ПОСЛЕ боевого /css/app.css. Ничего в app.css не меняет.
   Перенос в боевой проект: положить файл в public/css/ и добавить <link>
   в layouts/app.blade.php сразу после app.css (или импортировать в app.scss).
   Классы с префиксом ka- — новые; остальное — точечные переопределения прода.
   ========================================================================== */

/* ---------- 0. [KA-000] Плашка копии (в боевой проект НЕ переносить) ---------- */
.ka-demo-bar { background: #fff8e1; color: #6b5316; font-size: 13px; text-align: center; padding: 4px 12px; }
.ka-avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #223d9d; font-weight: 500; }

/* ---------- 1. [KA-002] Сетка фильмов ----------
   Прод: .film-card { width: 24%; flex: 0 0 auto } на ЛЮБОЙ ширине экрана →
   на телефоне 3 карточки по ~100px с обрезанными названиями «Ста…».
   Решение: CSS Grid с автоподбором колонок (1 → 2 → 3 → 4). */
.films {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px !important;
  margin: 0 !important;
}
.films > .film-card { width: auto !important; max-width: none; margin: 0 !important; padding: 0 !important; }
@media (max-width: 575.98px) {
  .films { grid-template-columns: 1fr; gap: 14px !important; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .films { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 2. [KA-003] Карточка фильма (компонент x-film-card) ---------- */
.ka-film-card { display: flex; flex-direction: column; height: 100%; color: #222f3e; }
.ka-film-card:hover { color: #222f3e; }
.ka-poster { position: relative; aspect-ratio: 16 / 9; background: #e9ecef; overflow: hidden; }
.ka-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ka-quality {
  position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px);
  background: rgba(255, 255, 255, .95); color: #223d9d; border-radius: 999px;
  font-size: 12px; line-height: 1.2; padding: 4px 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ka-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ka-title {
  font-size: 1rem; font-weight: 400; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ka-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ka-meta .badge { font-size: 11px; }

/* ---------- 3. [KA-004] Панель фильтров каталога ---------- */
.ka-filters .form-control, .ka-filters .form-select { font-size: 16px; } /* 16px — чтобы iOS не зумил поле */
.ka-stages { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 575.98px) {
  .ka-stages { flex-wrap: nowrap; overflow-x: auto; margin: 0 -1rem; padding: 0 1rem 4px; scrollbar-width: none; }
  .ka-stages .btn { flex: none; white-space: nowrap; }
}
[data-ka-grid] > .film-card[hidden] { display: none !important; }

/* ---------- 4. [KA-008][KA-009][KA-010] Страница фильма ---------- */
/* Описание вставлено из Word/TinyMCE с инлайн-стилями: font-size 14pt, text-align: justify,
   чужие шрифты. На телефоне justify даёт «реки» пробелов. Приводим к одному виду. */
.ka-film-body { font-size: 1rem; line-height: 1.55; }
.ka-film-body [style] {
  font-size: inherit !important; font-family: inherit !important;
  background-color: transparent !important; color: inherit !important;
}
.ka-film-body h3, .ka-film-body h3 span { font-size: 1.15rem !important; font-weight: 500; margin: 1rem 0 .5rem; }
.ka-film-body .btn { white-space: normal; text-align: left; }
@media (max-width: 991.98px) {
  .ka-film-body [style] { text-align: left !important; }
}

/* Вкладки: на узком экране — горизонтальная прокрутка вместо переноса строк */
.ka-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.ka-tabs::-webkit-scrollbar { display: none; }
.ka-tabs .nav-link { white-space: nowrap; }
@media (max-width: 575.98px) {
  #nav-tabContent .p-3 { padding: .5rem !important; }
  #nav-tabContent .card-body { padding: 0; }
}

/* Ленивый плеер: обложка с кнопкой, iframe создаётся по клику */
.ka-player { background: #0f1422; }
.ka-player-cover { all: unset; cursor: pointer; display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.ka-player-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.ka-player-cover::after {
  content: "▶"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: #223d9d;
  display: grid; place-items: center; font-size: 26px; box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
}
.ka-player-cover:focus-visible { outline: 3px solid #4582ec; outline-offset: 2px; }
.ka-player iframe, .ka-player video { width: 100%; height: 100%; border: 0; }

/* ---------- 5. [KA-013] Общее для телефона ---------- */
@media (max-width: 575.98px) {
  .main_auth > .d-flex > .container { padding: .75rem !important; }
  .font-size-28 { font-size: 1.4rem !important; }
}
.ka-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ==========================================================================
   6. Страницы кабинета: профиль, социальные практики, киноуроки, статистика
   ========================================================================== */

/* [KA-016][KA-019] Длинные строки без пробелов (имена файлов «МР_…_фильм_….pdf», адреса, ссылки)
   на проде выходят за край экрана. */
.ka-break { overflow-wrap: anywhere; word-break: break-word; }
.main_auth .container { overflow-wrap: break-word; }

/* Текст в 2 строки с многоточием — вместо text-truncate в одну строку */
.ka-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* [KA-014] Кнопка «Смотреть все новости...»: на проде col-lg-2 — на телефоне на всю ширину и с переносом */
.ka-btn-auto { white-space: normal; }
@media (max-width: 575.98px) { .ka-btn-auto { width: 100%; } }

/* [KA-014] Точка «в сети» у фото профиля: на проде — абсолютные отступы 120px/-50px, при другом размере фото уезжает */
.ka-online-dot { position: absolute; right: 18px; bottom: 6px; }

/* [KA-015] Метки качества («Ответственность за свои поступки перед другими людьми») — перенос вместо вылета за карточку */
.ka-pill-wrap { white-space: normal; text-align: left; max-width: 100%; }

/* Длинные пункты выпадающего списка «Название | Качество» */
.ka-select-wrap { text-overflow: ellipsis; }

/* Карточка практики: на проде внутри каждой карточки свой <style>; стили здесь */
.practice-card h4 { font-weight: 400; margin-bottom: .25rem; }
.practies .card { transition: .2s; }
.practies .card:hover { box-shadow: 0 0 .3125rem rgba(173, 181, 189, .5) !important; }

/* [KA-021] Фильтр практик: на телефоне свёрнут под кнопку, на компьютере всегда открыт */
.ka-filter-details > summary { list-style: none; }
.ka-filter-details > summary::-webkit-details-marker { display: none; }
@media (min-width: 768px) { .ka-filter-details > summary { display: none; } }

/* [KA-030] Пагинация: на узком экране прячем дальние номера, чтобы строка не шире экрана */
@media (max-width: 575.98px) {
  .ka-pagination .ka-page-far:nth-child(n+5) { display: none; }
  .ka-pagination .page-link { padding: .375rem .6rem; }
}

/* [KA-023] Пустые списки */
.ka-empty-state { max-width: 560px; }

/* [KA-018] Таблицы статистики — горизонтальная прокрутка внутри блока, а не обрезка */
.ka-table { min-width: 640px; }
.ka-table th { white-space: nowrap; font-weight: 500; }
@media (max-width: 575.98px) {
  .statistics-section .font-size-36 { font-size: 1.75rem !important; }
  .statistics-section .font-size-24 { font-size: 1.15rem !important; }
}

/* ==========================================================================
   7. Практики, поиск, навигация, доступность (KA-021…KA-037, см. CHANGELOG.md)
   ========================================================================== */

/* [KA-026] одинаковая пропорция фото практики */
.practies .card-img-top.ka-cover { aspect-ratio: 16 / 10; object-fit: cover; }
/* отметка «проверено экспертом» вместо аватара модератора размером 20px */
.ka-check { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #14ad75; color: #fff; font-size: 12px; }

/* [KA-034] затемнение фона под открытым мобильным меню, страница под меню не прокручивается */
.ka-shade { display: none; }
@media (max-width: 800px) {
  body.ka-menu-open { overflow: hidden; }
  body.ka-menu-open .ka-shade { display: block; position: fixed; inset: 0; background: rgba(15, 20, 34, .45); z-index: 998; }
}

/* [KA-035] кнопка «Наверх» */
.ka-to-top {
  position: fixed; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 900;
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: #223d9d; color: #fff;
  font-size: 20px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* [KA-036] видимый фокус при работе с клавиатуры (на проде фокус почти не виден) */
.main_auth a:focus-visible, .main_auth button:focus-visible, .main_auth .form-control:focus-visible,
.main_auth .form-select:focus-visible, #side-menu a:focus-visible {
  outline: 3px solid #ffbf47; outline-offset: 2px; box-shadow: none;
}

/* [KA-037] уважать настройку «уменьшить движение»: без масштабирования карточек */
@media (prefers-reduced-motion: reduce) {
  .film-card, .film-card:hover, .film-card:active, .practies .card { transition: none !important; transform: none !important; }
}

/* [KA-024] поиск по странице */
.ka-live-search .form-control { font-size: 16px; }

/* ==========================================================================
   8. Второй круг аудита 25.09.2026 (KA-039…KA-047)
   ========================================================================== */

/* [KA-039] Карточка практики на телефоне и планшете.
   Прод (app.css): .practice-card position:absolute поверх фото, карточка 300px, overflow:hidden —
   автор, школа, фильм, качество и оценки появляются ТОЛЬКО при наведении мыши.
   На сенсорном экране наведения нет: педагог видит одно фото и название.
   Решение: без мыши (hover:none) или на узком экране текст идёт под фото, фото ниже. */
@media (hover: none), (max-width: 767.98px) {
  .practies .card { height: auto !important; overflow: visible !important; }
  .practies .card .practice-card { position: static !important; height: auto !important; transform: none !important; opacity: 1 !important; background: #fff; }
  .practies .card-img-top.ka-cover { height: auto !important; max-height: 190px; }
}

/* [KA-040] Таблицы статистики: первая колонка закреплена при прокрутке вбок,
   тень справа подсказывает, что таблица шире экрана */
.table-responsive { position: relative; background:
  linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat local,
  linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), transparent) left center / 10px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), transparent) right center / 10px 100% no-repeat scroll; }
@media (max-width: 767.98px) {
  .ka-table th:first-child, .ka-table td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 #dee2e6; }
  .ka-table th, .ka-table td { white-space: nowrap; }
  .ka-table td:first-child { white-space: normal; min-width: 130px; }
}

/* [KA-041] Строки, которые листаются вбок (вкладки статистики, ступени, вкладки фильма):
   затухание у правого края — видно, что дальше есть ещё пункты */
@media (max-width: 767.98px) {
  .ka-tabs, .ka-stages, .ka-hscroll {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}

/* [KA-042] Мелкий текст на телефоне: на проде кнопки btn-sm и значки ~11px — трудно читать.
   Минимум 13px, высота кнопки не меньше 36px. */
@media (max-width: 575.98px) {
  .main_auth .btn-sm { font-size: 13px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
  .main_auth .badge, .ka-meta .badge { font-size: 12px; }
  .main_auth .small, .main_auth small { font-size: 13px; }
}

/* [KA-044] Меню на телефоне: пункты и контакты — не меньше 44px по высоте (рекомендация для пальца) */
@media (max-width: 800px) {
  #side-menu .nav-link, #side-menu a[href^="tel:"], #side-menu a[href^="mailto:"] { min-height: 44px; display: flex; align-items: center; }
}

/* [KA-046] Метка качества в списке киноуроков: белый текст на светло-голубом (disabled) — контраст ниже 3:1 */
.ka-pill-contrast.disabled, .ka-pill-contrast:disabled { opacity: 1 !important; background: #e8efff !important; border-color: #c9d8fb !important; color: #223d9d !important; }

/* [KA-048] Заголовки страниц стали h1 (для экранных дикторов и поисковиков) — вид как у прежнего div */
.ka-h1 { font-weight: 300; line-height: 1.2; margin-top: 0; }
h1.ka-h1.font-size-28, h2.ka-h1.font-size-28 { font-size: 1.75rem; }
h1.ka-h1.font-size-36 { font-size: 2.25rem; }
@media (max-width: 575.98px) {
  h1.ka-h1.font-size-28, h2.ka-h1.font-size-28 { font-size: 1.4rem; }
  h1.ka-h1.font-size-36 { font-size: 1.75rem; }
}

/* [KA-049] Галочки фильтра крупнее (на проде 17 px), подпись нажимается вместе с галочкой (KA-033) */
.ka-filter-details .form-check-input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; }
.ka-filter-details .form-check { min-height: 32px; display: flex; gap: .5rem; align-items: flex-start; }

/* [KA-050] Кнопка-подсказка «?» в статистике: зона нажатия 44×44 вместо 27 px */
.statistics-section .btn-link.p-0[data-bs-toggle="modal"] { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }

/* [KA-051] Самый мелкий текст (12 px): роль в профиле, контакты под меню — до 13 px на телефоне */
@media (max-width: 575.98px) {
  .main_auth .font-size-12, #side-menu .font-size-12 { font-size: 13px !important; }
}

/* [KA-052] Описание фильма на широком экране: строки по 900+ px (около 150 знаков) тяжело читать.
   Ограничиваем ширину абзаца ~75 знаками; картинки и кнопки не трогаем. */
@media (min-width: 992px) {
  .ka-film-body p, .ka-film-body li, .ka-film-body h3 { max-width: 75ch; }
}

/* [KA-053] Пока постер грузится (или если не загрузился) — название фильма на фирменном фоне вместо серого прямоугольника */
.ka-poster { background: linear-gradient(135deg, #223d9d, #4582ec); }
.ka-poster::before {
  content: attr(data-ka-poster-title); position: absolute; inset: 0; display: grid; place-items: center;
  padding: 12px 16px; color: rgba(255,255,255,.92); font-size: 1.1rem; line-height: 1.25; text-align: center;
}
.ka-poster img { position: relative; z-index: 1; }
.ka-poster .ka-quality { z-index: 2; }