/* SaraFilm — telefon uchun mustahkamlash (oxirgi bo'lib yuklanadi).
   ------------------------------------------------------------------
   Asosiy muammo: iPhone (Safari) da kengligi belgilanmagan grid ustuni ichidagi
   gorizontal aylanadigan qator (masalan katalogdagi "Hammasi / Filmlar / ..." tugmalari)
   o'zining to'liq kengligini talab qiladi. Ustun ekrandan kengayib ketadi va Safari
   butun sahifani kichraytirib ko'rsatadi. Bu faylda shunday joylarning hammasi
   "ekrandan keng bo'lolmaydi" deb belgilanadi. */

/* ------------------------------------------------------------------ 1. sahifa hech qachon yon tomonga surilmasin */
/* body'dagi `overflow-x: clip` eski iOS (16 dan oldin) da ishlamaydi — ildizda ham to'siq turadi. */
html { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }
body { max-width: 100%; }
main, .wrap, .site-footer, .site-header { min-width: 0; }

/* ------------------------------------------------------------------ 2. bitta ustunli gridlar: ustun ichidagi kontentdan keng bo'lmaydi */
.filters { grid-template-columns: minmax(0, 1fr); }
/* :where — o'ziga xoslik nol: boshqa joyda aniq ustunlar berilgan bo'lsa, o'sha qoida ustun turadi. */
:where(.panel, .field, .auth-form, .tg-login, .genre-index, .order-form, .order-facts, .order-list, .session-list,
       .meta-form, .art-grid, .art-info, .plan, .video-main, .upload-row, .found, .video-list, .table-list,
       .ep-upload, .mini-list, .toggles, .dialog-danger, .studio-dialog-body, .step-body, .play-under,
       .billing-block, .trivia) { grid-template-columns: minmax(0, 1fr); }
:where(.upload-row > div, .table-list li > div, .order-list li div, .session-list li > div) { min-width: 0; }

/* ------------------------------------------------------------------ 3. gorizontal aylanadigan qatorlar */
.segmented { min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tabs, .chips-scroll, .rail-track { min-width: 0; -webkit-overflow-scrolling: touch; }
.tabs, .chips-scroll { overscroll-behavior-x: contain; }
.rail, .section, .title-body, .tab-panel { min-width: 0; }

/* ------------------------------------------------------------------ 4. flex qatorlarda matn siqila olsin */
.page-head > *, .section-head > h2, .season-bar > *, .closing > div, .studio-title > div, .draft-note > p { min-width: 0; }
.section-head h2 a { min-width: 0; overflow-wrap: anywhere; }
.facts dd, .order-facts dd, .pairs b { min-width: 0; overflow-wrap: anywhere; }
.title-original, .title-meta, .hero-meta, .card-meta, .genre-desc, .plot, .bio, .episode-plot, .inline-list { overflow-wrap: anywhere; }
img, video, canvas, svg { max-width: 100%; }

@media (max-width: 1020px) {
    .overview, .details-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    /* ---------------------------------------------------------------- 5. telefon: bitta ustun — qat'iy ekran kengligida */
    .title-head, .genre-row, .profile-grid, .auth, .bulk-list li, .step.is-danger .step-body { grid-template-columns: minmax(0, 1fr); }
    .filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-row .select, .filter-row .input { min-width: 0; }
    .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ep-progress { max-width: 100%; white-space: normal; }
    .award-stats { gap: 24px; flex-wrap: wrap; }
    .money { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
    .facts-inline { grid-template-columns: minmax(0, 1fr); }
    .videos { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
    .crew-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
    .plans { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
    .studio-list-head .input, .studio-search { max-width: none; }
    .field-inline .select { width: 100%; }
    .genre-list-head { flex-wrap: wrap; }
    .search-page-form .btn { width: 100%; }

    /* ---------------------------------------------------------------- 6. barmoq uchun qulay o'lchamlar (kamida ~44px) */
    .footer-nav { gap: 2px; }
    .footer-nav a { min-height: 44px; }
    .footer-nav h2 { margin-bottom: 2px; }
    .section-head .more { min-height: 44px; padding-bottom: 0; }
    .section-head h2 a { min-height: 44px; }
    .text-link { padding-block: 10px; }
    button.text-link { min-height: 44px; }
    .form-alert .text-link { padding-block: 0; min-height: 0; }
    .brand { min-height: 44px; }
    .segmented button { min-height: 44px; }
    .chip { min-height: 40px; }
    .tab { min-height: 48px; }
    .menu-item { min-height: 48px; }
    .card-save { width: 40px; height: 40px; }
    .icon-btn { width: 44px; height: 44px; }
    .hero-dots { gap: 4px; }
    .hero-dot { position: relative; }
    .hero-dot::after { content: ''; position: absolute; inset: -14px -4px; }
    .check { min-height: 44px; align-items: center; }
    .row-actions .btn, .video-flags .btn { min-height: 44px; }

    /* ---------------------------------------------------------------- 7. iPhone: 16px dan kichik maydonga bosilganda sahifa kattalashib ketmasin */
    input, select, textarea, .input, .select { font-size: 16px; }

    /* ---------------------------------------------------------------- 8. oynalar ekranga sig'sin, klaviatura ochilganda ham */
    .search-dialog { width: calc(100vw - 16px); max-width: calc(100% - 16px); margin-top: max(8px, env(safe-area-inset-top)); }
    .search-results { max-height: min(62vh, 560px); max-height: min(60dvh, 560px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .rate-dialog { width: calc(100vw - 16px); max-width: calc(100% - 16px); padding: 22px 16px; }
    .rate-stars button { padding: 8px 1px; }
    .studio-dialog { width: calc(100vw - 16px); max-width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
    .studio-dialog header { padding: 14px 10px 12px 16px; }
    .studio-dialog-body { padding: 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .menu-panel { max-width: calc(100vw - 24px); min-width: min(240px, calc(100vw - 24px)); }
    .lightbox-inner { padding: 60px 8px; }
    .lightbox .icon-btn { width: 44px; height: 44px; }
    .lightbox [data-lb='prev'] { left: 8px; }
    .lightbox [data-lb='next'] { right: 8px; }
    .toasts { width: calc(100vw - 24px); }
    .toast { max-width: 100%; }

    /* ---------------------------------------------------------------- 9. chetki xavfsiz zonalar (o'yiqli ekran, yotiq holat) */
    .wrap { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
    .site-header { padding-top: env(safe-area-inset-top); height: calc(var(--header-h) + env(safe-area-inset-top)); }
    #app:not(.has-hero) { padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 8px); }
}

/* ------------------------------------------------------------------ 10. tor telefonlar (iPhone SE, 360px va undan kichik) */
@media (max-width: 380px) {
    .header-inner { gap: 8px; }
    .header-actions { gap: 6px; }
    .brand-word { font-size: 1.45rem; }
    .brand-mark { width: 28px; height: 28px; }
    .brand { gap: 8px; }
    .square-btn { width: 42px; height: 42px; }
    .avatar { width: 42px; height: 42px; }
    .tabbar a, .tabbar button { font-size: 0.62rem; }
    .grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 18px 10px; }
    .page-head h1 { font-size: 1.7rem; }
    .title-actions .btn:not(.btn-primary):not(.btn-soon) { font-size: 0.64rem; }
    .episode { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; }
    .studio-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .art-slot { grid-template-columns: 88px minmax(0, 1fr); }
}

/* Sichqonchasiz qurilmada "ustiga olib borish" effekti bosilgandan keyin yopishib qolmasin. */
@media (hover: none) {
    .btn:hover { --btn-bg: var(--bg-2); }
    .btn-primary:hover { --btn-bg: var(--amber); }
    .btn-ghost:hover { --btn-bg: transparent; }
    .btn-tg:hover { --btn-bg: oklch(0.68 0.14 235); }
    .btn.is-on:hover { --btn-bg: var(--amber-soft); }
    .btn-danger:hover { --btn-bg: oklch(0.63 0.21 20 / 0.14); }
    .btn:active { --btn-bg: var(--bg-4); }
    .btn-primary:active { --btn-bg: var(--amber-hi); }
    .square-btn:hover { background: var(--bg-2); }
    .square-btn:active { background: var(--bg-4); }
    a.chip:hover, button.chip:hover { background: var(--bg-2); }
    a.chip:active, button.chip:active { background: var(--bg-4); }
}