/* ============================================================
 * MOBILE HOTFIX 2026-05-06
 * Универсальный фикс мобильной адаптивности для всех сайтов
 * Применяется на kinotrip.top, turkplay.ru, turkishtvseries.ru
 * ============================================================ */

/* === БАЗА: запретить любой горизонтальный оверфлоу === */
@media (max-width: 1199px) {
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* === Container: всегда влезает в viewport === */
.container {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
}

}

/* === Mobile-only фиксы (≤767px) === */
@media (max-width: 767px) {
    /* Все блоки с word-wrap */
    h1, h2, h3, h4 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        max-width: 100%;
    }
    h1 { font-size: 22px !important; line-height: 1.25 !important; }
    h2 { font-size: 19px !important; line-height: 1.3 !important; }
    h3 { font-size: 17px !important; line-height: 1.3 !important; }
    
    /* Movie title в детали */
    .movie-title, .article h1 {
        font-size: 22px !important;
        line-height: 1.25 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Хлебные крошки — перенос */
    .breadcrumbs, ul.breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        font-size: 12px !important;
        gap: 4px;
        padding-left: 0 !important;
        list-style: none;
    }
    .breadcrumbs li {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .breadcrumbs li:not(:last-child)::after {
        content: " / ";
        margin: 0 4px;
        opacity: 0.5;
    }
    
    /* Контейнер всех секций */
    .section, .container, .row {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Карточки в обычной сетке: 2 колонки строго */
    .row--grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin: 0 !important;
    }
    .row--grid .col-6, .row--grid .col-12, .row--grid > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        flex: none !important;
    }
    .card {
        margin-top: 0 !important;
        max-width: 100% !important;
    }
    .card__cover {
        width: 100% !important;
    }
    .card__cover img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 2/3 !important;
        object-fit: cover !important;
        display: block !important;
    }
    .card__title {
        font-size: 14px !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        margin-top: 8px !important;
    }
    
    /* Owl carousel: 1 элемент в ряд (не пытаться запихнуть несколько) */
    .owl-carousel .owl-stage { display: flex !important; }
    .owl-carousel .owl-item {
        width: auto !important;
        max-width: 100vw !important;
    }
    .home__card {
        width: calc(100vw - 30px) !important;
        max-width: calc(100vw - 30px) !important;
        margin: 0 auto !important;
    }
    .home__card img {
        width: 100% !important;
        height: auto !important;
    }
    .home__card div h2 {
        font-size: 18px !important;
        line-height: 1.2 !important;
    }
    
    /* Header: меньше отступов */
    .header__content {
        padding: 0 12px !important;
    }
    .header__logo {
        margin-left: 0 !important;
    }
    
    /* Player iframe: 16:9 fully responsive */
    iframe, .player iframe, #player iframe, video {
        max-width: 100% !important;
        width: 100% !important;
    }
    .player, #player, .player-col {
        max-width: 100% !important;
        overflow: hidden;
    }
    .player-col, .col-12.player-col {
        padding: 0 !important;
    }
    
    /* Кнопки навигации эпизода: 1 столбец */
    .tp-ep-nav {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 16px 0 !important;
    }
    .tp-ep-nav a, .tp-ep-nav button {
        min-height: 44px !important;
        font-size: 14px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Episode picker tiles */
    .tp-ep-picker {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important;
        gap: 6px !important;
    }
    .tp-ep-picker a {
        min-height: 44px;
        min-width: 44px;
        font-size: 13px;
    }
    
    /* Smart picks: 2 колонки */
    .smart-picks__grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    
    /* Footer: stack columns */
    footer .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 12px !important;
    }
    
    /* Movie poster и meta: stack */
    .movie-top, .article .row.movie-top {
        flex-direction: column !important;
    }
    .movie-poster {
        width: 100% !important;
        max-width: 220px !important;
        margin: 0 auto 16px !important;
    }
    
    /* Movie meta — readable size */
    .movie-meta__key, .movie-meta__val {
        font-size: 13px !important;
    }
    
    /* Описание и текст */
    p, .section__text, .article p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        max-width: 100% !important;
        word-wrap: break-word;
    }
    
    /* Любые таблицы — горизонтальный scroll */
    table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
    
    /* Всё что вышло на ширину: ограничим */
    img:not([width]), video {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Disclaimer */
    .footer__disclaimer {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
}

/* Tablet (768-1024) */
@media (min-width: 768px) and (max-width: 1024px) {
    .row--grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

/* === Episode page (turkplay/turkishtv) === */
@media (max-width: 767px) {
    /* tp-ep-nav: всегда 1 колонка */
    .tp-ep-nav,
    .tp-ep-nav .row,
    .tp-ep-nav__row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .tp-ep-nav__arrow,
    .tp-ep-nav [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
    }
    .tp-ep-nav a, .tp-ep-nav__arrow a {
        display: flex !important;
        justify-content: center;
        align-items: center;
        min-height: 48px;
        text-align: center;
        font-size: 14px !important;
        white-space: normal !important;
        line-height: 1.2;
    }
    
    /* tp-ep-picker — мелкие квадраты */
    .tp-ep-picker__grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important;
        gap: 6px !important;
    }
    .tp-ep-picker__grid a {
        min-height: 44px;
        font-size: 13px;
    }
    
    /* tp-ep-info: 1 колонка */
    .tp-ep-info,
    .tp-ep-info .row {
        display: flex !important;
        flex-direction: column !important;
    }
    .tp-ep-info [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px;
    }
    
    /* tp-seasons-row: горизонтальный скролл pills */
    .tp-seasons-row {
        display: flex !important;
        overflow-x: auto !important;
        gap: 8px;
        padding-bottom: 8px;
    }
    .tp-season-pill {
        flex-shrink: 0 !important;
    }
    
    /* tp-h1: уменьшить шрифт */
    .tp-h1 {
        font-size: 20px !important;
        line-height: 1.25 !important;
        word-wrap: break-word;
    }
    
    /* Player wrapper — точно 16:9 */
    .tp-player-wrap {
        position: relative;
        padding-bottom: 56.25% !important;
        height: 0 !important;
        max-width: 100% !important;
        overflow: hidden;
    }
    .tp-player-wrap iframe {
        position: absolute !important;
        top: 0; left: 0;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* turkplay/turkishtv: home owl carousel — фикс carousel item */
    body .owl-carousel {
        max-width: 100vw;
        overflow-x: hidden;
    }
    body .owl-stage-outer {
        overflow: hidden !important;
        max-width: 100vw;
    }
}

/* === ULTIMATE OVERRIDE для episode page === */
@media (max-width: 767px) {
    /* tp-ep-nav __arrow: НЕ col-6 а col-12 на мобильном */
    .tp-ep-nav .col-6,
    .tp-ep-nav .col-md-3,
    .tp-ep-nav__arrow.col-6,
    [class*="tp-ep-nav"] [class*="col-"],
    .tp-ep-nav__arrow {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Всё что .row внутри tp-ep — flex column */
    .tp-ep-nav .row,
    .tp-ep-info .row {
        margin: 0 !important;
    }
    
    /* Catalog page: убрать любые горизонтальные паддинги, наследуемые от десктопа */
    .catalog,
    .catalog--page,
    .catalog .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100vw !important;
        overflow-x: hidden;
    }
    
    /* tp-ep-info постер */
    .tp-ep-info__poster img {
        max-width: 180px !important;
        margin: 0 auto;
        display: block;
    }
    
    /* Любая кнопка на episode странице — широкая */
    .tp-btn, .tp-btn-primary, .tp-ep-nav button, .tp-ep-nav a {
        width: 100% !important;
        box-sizing: border-box;
    }
}
/* MOBILE NUKE — последнее переопределение для episode и сложных страниц */
@media (max-width: 767px) {
    /* Все col-* на мобильном — на всю ширину */
    [class*="col-"]:not(.col-md-cta) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    
    /* Row на мобильном flex-column */
    .catalog .row,
    .article .row,
    .tp-ep-info .row,
    .tp-ep-nav.row,
    .row:not(.kt-mega__col-row):not(.row--grid):not(.movie-top-row) {
        flex-direction: column !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* row--grid — 2 колонки сохраняем */
    .row--grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .row--grid > [class*="col-"] {
        flex: none !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    /* ВСЁ что иногда лезет за viewport */
    body, html, .container, .row, .col-12, .col-6, .article, .catalog,
    .section, .fullstory, .tp-ep-nav, .tp-ep-info, .tp-seasons-row,
    .home, .header {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* Всё что float (legacy) */
    .pull-left, .pull-right, .float-left, .float-right {
        float: none !important;
        width: 100% !important;
    }
    
    /* Любой word-break для всех текстовых блоков */
    h1, h2, h3, h4, p, .tp-h1, .tp-section-title, .tp-section-subtitle {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    
    /* tp-ep-nav специально — кнопки в колонку */
    .tp-ep-nav,
    .tp-ep-nav.row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .tp-ep-nav__arrow {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 !important;
    }
    
    /* tp-ep-picker grid */
    .tp-ep-picker__grid {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 6px !important;
    }
    .tp-ep-picker__grid a {
        min-height: 44px !important;
        font-size: 13px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    /* tp-seasons-row горизонтальный scroll */
    .tp-seasons-row {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 6px;
        padding-bottom: 6px;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }
    .tp-season-pill {
        flex: 0 0 auto !important;
        white-space: nowrap;
    }
}

/* === Episode/season page: row--grid в одну колонку === */
@media (max-width: 767px) {
    /* Если есть .tp-ep-nav или .tp-player-wrap внутри row--grid — это episode page → 1 колонка */
    .row--grid:has(.tp-ep-nav),
    .row--grid:has(.tp-player-wrap),
    .row--grid:has(.tp-h1) {
        grid-template-columns: 1fr !important;
    }
}

/* Episode nav buttons: text overflow fix */
@media (max-width: 767px) {
    .tp-ep-nav__btn,
    .tp-ep-nav__btn--next,
    .tp-ep-nav__btn--prev,
    .tp-ep-nav__btn--home {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        white-space: normal !important;
        text-align: center;
        line-height: 1.2;
        padding: 12px 8px !important;
        font-size: 14px !important;
        overflow: visible !important;
    }
    /* Стрелка не отдельно отображается */
    .tp-ep-nav__btn .tp-ep-nav__arrow {
        flex-shrink: 0;
    }
}

/* Slider section overflow fix */
@media (max-width: 767px) {
    .kt-slider-section,
    .owl-stage-outer {
        max-width: 100vw !important;
        overflow: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .home__carousel {
        padding-left: 12px !important;
    }
}

/* Section overflow nuke */
@media (max-width: 767px) {
    section, .section,
    .kt-slider-section, .kt-home-cat,
    .home, .home--title {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    /* Container внутри section */
    .container {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* CRITICAL: row--grid 2 равных колонки на mobile */
@media (max-width: 767px) {
    body .row--grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body .row--grid > * {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body .row--grid .card,
    body .row--grid .card__cover {
        width: 100% !important;
        max-width: 100% !important;
    }
    body .row--grid .card__cover img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 2/3 !important;
        object-fit: cover !important;
    }
    /* НО на episode page — 1 колонка */
    body .row--grid:has(.tp-ep-nav),
    body .row--grid:has(.tp-player-wrap),
    body .row--grid:has(.tp-h1) {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
 * MOBILE MENU + SLIDER FIX (2026-05-06 16:15)
 * ============================================================ */
@media (max-width: 1199px) {
    /* Меню-гармошка: НИЧЕГО не наследуется от desktop */
    .header__nav {
        display: none !important;
    }
    .header__nav.is-open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100vh - 60px) !important;
        background: #131720 !important;
        padding: 16px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 999 !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    }
    
    /* Каждый пункт меню — отдельная строка */
    .header__nav-item {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
        padding: 14px 12px !important;
        border-bottom: 1px solid #1f2839 !important;
        flex: none !important;
    }
    
    .header__nav-link {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100% !important;
        font-size: 16px !important;
        color: #fff !important;
        font-weight: 500;
    }
    
    /* Мега-меню (Жанры) внутри пункта — СВЁРНУТО на мобиле, открывается по клику */
    .kt-nav-item--mega .kt-mega,
    .header__nav-item .header__nav-menu,
    .kt-mega {
        display: none !important;
    }
    
    /* Когда .kt-nav-item--mega имеет .open или .active — показываем */
    .kt-nav-item--mega.open .kt-mega,
    .kt-nav-item--mega.active .kt-mega,
    .header__nav-item.open .header__nav-menu {
        display: block !important;
        position: static !important;
        width: 100% !important;
        background: #1a2332 !important;
        padding: 12px !important;
        margin-top: 8px !important;
        border-radius: 8px;
        max-height: 300px;
        overflow-y: auto;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }
    .kt-mega__col {
        display: block !important;
        width: 100% !important;
        margin-bottom: 12px;
    }
    .kt-mega__col h4 {
        font-size: 13px !important;
        color: #e30a17 !important;
        margin-bottom: 6px;
    }
    .kt-mega__col a {
        display: block !important;
        padding: 6px 0 !important;
        font-size: 14px !important;
        color: #ccc !important;
    }
}

/* Mobile only: slider section полностью скрыть оверфлоу */
@media (max-width: 767px) {
    .kt-slider-section,
    .kt-slider-section .container,
    .home,
    .home--title {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Owl carousel — фикс позиционирования */
    .owl-carousel {
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    .owl-carousel .owl-stage-outer {
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    
    /* Главный карточный слайдер — фикс ширины первой карточки */
    .home__carousel .home__card,
    .owl-carousel .owl-item .home__card {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }
    .home__carousel .home__card img {
        width: 100% !important;
        height: auto !important;
    }
}

/* Mega menu titles — белый цвет на тёмном фоне */
@media (max-width: 1199px) {
    .kt-mega__title,
    .kt-mega__col h4,
    .kt-mega__col-title {
        color: #e30a17 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(227,10,23,0.2) !important;
        padding-bottom: 6px !important;
    }
    
    /* Списки жанров/годов — 2 колонки */
    .kt-mega__col ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px 12px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .kt-mega__col ul li {
        list-style: none;
        margin: 0 !important;
    }
    .kt-mega__col ul li a {
        display: block !important;
        padding: 8px 0 !important;
        font-size: 14px !important;
        color: #e0e0e0 !important;
        text-decoration: none !important;
    }
    .kt-mega__col ul li a:hover,
    .kt-mega__col ul li a:active {
        color: #e30a17 !important;
    }
}

/* CRITICAL: на странице фильма/сериала (.article) row--grid должен быть 1 колонкой */
@media (max-width: 767px) {
    body .row--grid:has(.article),
    body .row--grid:has(.movie-top),
    body .row--grid:has(.movie-poster),
    body .row--grid:has(.fullstory) {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
 * CRITICAL: убрать паддинги из вложенных контейнеров
 * чтобы контент не сжимался от 375 до 231px
 * ============================================================ */
@media (max-width: 767px) {
    /* Внешний контейнер catalog получает паддинг */
    .catalog,
    .catalog--page {
        padding: 0 12px !important;
    }
    .catalog .container,
    .catalog--page .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }
    .catalog .row,
    .catalog--page .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .catalog .col-12,
    .catalog--page .col-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .catalog section.fullstory,
    .catalog .section--head,
    .catalog--page section.fullstory {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .catalog section.fullstory .container,
    .catalog .section--head .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .article {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    /* Убираем повторяющийся padding в фуллстори */
    .fullstory > .container,
    .fullstory .container {
        padding: 0 !important;
    }
}

/* Last padding fix */
@media (max-width: 767px) {
    .catalog > .container,
    .catalog--page > .container {
        padding: 0 !important;
        margin: 0 !important;
    }
    .catalog > .container > .row,
    .catalog--page > .container > .row {
        margin: 0 !important;
        padding: 0 !important;
        --bs-gutter-x: 0 !important;
        flex-wrap: wrap;
    }
    /* Bootstrap row negative margin */
    .row {
        --bs-gutter-x: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* DESKTOP: разрешить overflow на header чтобы мега-меню видно */
@media (min-width: 1200px) {
    .header,
    .header__content,
    .header__nav,
    .header__nav-item,
    .kt-nav-item--mega {
        overflow: visible !important;
    }
    /* z-index: header выше всего */
    .header {
        z-index: 1000 !important;
    }
    /* Мега-меню над всем */
    .kt-mega {
        z-index: 9999 !important;
    }
    /* НЕ скрывать мега-меню overflow секциями ниже */
    .header ~ .section:first-of-type,
    .header + section,
    .header + .section,
    body > .section:first-of-type {
        position: relative;
    }
}