/* "Batafsil" (news_detail.html) sahifasiga xos moslashuvchan qoidalar.
   Umumiy qism responsive-common.css da; bu yerda faqat shu sahifaning
   o'ziga xos "frame-*" to'rlari (thumbnaillar, kartalar qatori) bor. */

@media (max-width: 1279.98px) {
  /* dynamic.css sarlavha/lid/muqova/content-section bloklarini (n-139-9207,
     n-139-8911, n-139-9427) 1920px kadr uchun `margin-left: 180-184px` bilan
     oqimga o'tkazadi (hatto desktopda ham) — tor ekranda kontentni chetga
     surib, ustunni torайтиб qo'yardi (masalan «Bog'liq maqolalar» kartasi
     163px ustunga tushib, 260px minimal grid ustuni bilan chetdan chiqib
     ketardi). Mobil/planshetda nolga tushiriladi. */
  body.is-responsive .page.n-139-8884 > .n-139-9207,
  body.is-responsive .page.n-139-8884 > .n-139-8911,
  body.is-responsive .page.n-139-8884 > .n-139-9427 {
    margin-left: 0 !important;
  }

  body.is-responsive .page .category-container,
  body.is-responsive .page .icon-container {
    display: flex !important;
    align-items: center !important;
  }

  /* «TOP YANGILIKLAR» dizaynda yonma-yon turgan IKKITA 2x2 to'rdan iborat
     (chapda 9431-9434, o'ngda 9441-9444). Tor ekranda ular ustma-ust
     tushganda kartalar «avval chapdagi to'rttasi, keyin o'ngdagilari»
     tartibida chiqib, dizayndagi qator tartibi (0,1 | 2,3 | 4,5 | 6,7)
     buzilardi. To'rlar `display: contents` bilan olib tashlanadi — sakkizala
     karta bitta umumiy to'rga tushadi, tartibni esa `order` beradi. */
  body.is-responsive .page .thumbnail-section {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 16px !important;
  }
  body.is-responsive .page .thumbnails { display: contents !important; }
  body.is-responsive .page .thumbnails > * {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 200px !important;
  }
  body.is-responsive .page .n-139-9431 { order: 1 !important; }
  body.is-responsive .page .n-139-9432 { order: 2 !important; }
  body.is-responsive .page .n-139-9441 { order: 3 !important; }
  body.is-responsive .page .n-139-9442 { order: 4 !important; }
  body.is-responsive .page .n-139-9433 { order: 5 !important; }
  body.is-responsive .page .n-139-9434 { order: 6 !important; }
  body.is-responsive .page .n-139-9443 { order: 7 !important; }
  body.is-responsive .page .n-139-9444 { order: 8 !important; }

  /* «TOP YANGILIKLAR» kartalari ustidagi sarlavha dizaynda 312px lik ustun
     uchun 24px/33.6px qilib chiqarilgan. Tor ekranda ustun 220-240px gacha
     torayadi va o'sha shriftda bir qatorga bittagina so'z sig'ib, matn uch
     qatordan keyin («Kurash: milliy sporti…») kesilib qolardi. Shrift va
     ichki joy ustun eniga moslanadi — qisqartirish mexanizmi (dynamic.css
     dagi `--lines`/line-clamp) o'zgarmaydi. */
  body.is-responsive .page .thumbnails > * { padding: 16px !important; }
  body.is-responsive .page .thumbnails .txt.title {
    font-size: 18px !important;
    line-height: 25px !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }

  body.is-responsive .page .article-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 24px !important;
  }

  /* DOM tartibida tavsiya kartalari (.article-list) tur nishonidan
     («SPORT» kabi .tag-container) OLDIN keladi; desktopda buni absolyut
     joylashuv to'g'irlaydi, tor ekranda esa umumiy `position: static`
     qoidasidan keyin nishon va strelkalar kartalarning TAGIGA tushib
     qolardi. To'liq sahifadagi (toliq-responsive.css) yechim bilan bir xil:
     `order` orqali nishon tepaga chiqariladi, chapga/o'ngga sahifalash
     strelkalari esa tor ekranda umuman ko'rsatilmaydi. */
  body.is-responsive .page .article-section.n-139-9315 {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
  body.is-responsive .page .article-section.n-139-9315 > .tag-container { order: -1 !important; }
  body.is-responsive .page .article-section.n-139-9315 > .article-list { order: 0 !important; }
  body.is-responsive .page .related-pager { display: none !important; }

  /* «Barchasini ko'rish» tugmasi 1920px kadr uchun 180px enlikda qotirilgan.
     `<a>` umumiy "qat'iy o'lcham -> auto" qoidasiga tushmagani, matnga esa
     `white-space: normal` berilgani uchun yozuv ikki qatorga bo'linib, quti
     48px o'rniga 76px ga cho'zilardi. */
  body.is-responsive .page a.button.n-139-9326 {
    width: fit-content !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 9px 16px !important;
    /* Dizayndagi 0.2px lik ichki chegara telefon ekranida ko'rinmay ketadi. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18) !important;
  }
  /* «Ko'proq» tugmasi 360px — u ustun enligidan kengroq edi; endi ustun
     bo'ylab cho'ziladi (`max-width` responsive-common.css da). */
  body.is-responsive .page a.button.n-139-9559 {
    height: auto !important;
    min-height: 0 !important;
    padding: 11px 16px !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18) !important;
  }
  body.is-responsive .page :is(.n-139-9326, .n-139-9559) > .txt {
    white-space: nowrap !important;
    font-size: 16px !important;
    line-height: 24px !important;
  }
}

@media (max-width: 767.98px) {
  body.is-responsive .page .thumbnail-section { grid-template-columns: repeat(2, 1fr) !important; }
  /* Telefonda ikkita ustun ~160px: shrift yana kichrayadi, o'rniga bitta
     qator ko'proq ko'rsatiladi. */
  body.is-responsive .page .thumbnails > * { padding: 12px !important; }
  body.is-responsive .page .thumbnails .txt.title {
    font-size: 14px !important;
    line-height: 19px !important;
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
  }
}