/* Figma eksporti bo'lgan barcha "ichki" sahifalar (batafsil, to'liq, podcast va
   hokazo) uchun umumiy moslashuvchan (responsive) qatlam.
   ------------------------------------------------------------------------
   home-responsive.css / cabinet-responsive.css dagi bilan bir xil g'oya:
   dizayn 1920px lik qat'iy Figma kadri, bu fayl o'sha qiymatlarni
   O'ZGARTIRMAYDI — barcha qoidalar `max-width: 1279.98px` media so'rovi
   ichida va faqat `body.is-responsive` bo'lgan sahifada ishlaydi.

   Bu fayldagi qoidalar sahifaga XOS EMAS — header, footer, matn, fon rasm,
   "obuna" banneri kabi barcha ichki sahifalarda AYNAN bir xil markup bilan
   takrorlanadigan bloklar uchun. Sahifaga xos "frame-*" to'rlar (masalan
   thumbnaillar, kartalar qatori) shu sahifaning o'z *-responsive.css faylida
   qo'shiladi. */

@media (max-width: 1279.98px) {

  body.is-responsive { overflow-x: hidden; }

  body.is-responsive .page {
    position: static !important;
    width: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 32px;
    padding: 0 16px !important;
    zoom: 1 !important;
  }

  body.is-responsive .page > .header { order: -1 !important; }
  body.is-responsive .page > .footer {
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* ---- Header (barcha sahifalarda bir xil include) ---- */
  body.is-responsive .header {
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 -16px 4px !important;
    padding: 12px 16px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  body.is-responsive .header > * {
    position: static !important;
    left: auto !important; top: auto !important;
  }
  /* Logo o'z qatorini to'liq egallaydi — bo'limlar va boshqa ikonkalar
     hammasi ikkinchi qatorda, "to'liq menyu" (hamburger) bilan birga
     ko'rinadi (nav-modal.css). */
  body.is-responsive .header > .lnk-img {
    order: 1;
    flex: 1 0 100% !important;
    width: 118px !important;
    height: 40px !important;
    margin: 0 0 4px !important;
  }
  /* Ijtimoiy tarmoqlar bardan chiqarildi — endi "to'liq menyu" modalida
     (nav-modal.css, .nav-modal-social-links) ko'rinadi. */
  body.is-responsive .header > .social-links { display: none !important; }
  /* Bo'limlar qatori endi o'ralmaydi: sig'maganda gorizontal siljiydi,
     hamburger tugmasi orqali esa BARCHASI modalda ko'rinadi. */
  body.is-responsive .header > .nav-menu-row {
    order: 2;
    /* `flex-basis: 0` — bo'lim qatori boshqa header elementlari (til, qidiruv)
       bilan BIR QATORDA joylashishi uchun: `auto` bo'lganda uning "tabiiy"
       eni (barcha bo'limlar siqilmagan holatdagi eni) qatorga sig'maganda
       flexbox uni yolg'iz o'z qatoriga chiqarib yuborardi. */
    flex: 1 1 0% !important;
    min-width: 0;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    /* O'zining ichidagi ikkita bolasi (bo'limlar + hamburger) doim BIR
       QATORDA qolsin — aks holda umumiy `.page :is(div, ...)` qoidasi
       (flex-wrap: wrap, !important siz) uni ikki qatorga bo'lib yuborardi. */
    flex-wrap: nowrap !important;
  }
  body.is-responsive .header > .nav-menu-row > .nav-menu {
    flex: 1 1 auto !important;
    min-width: 0;
    width: auto !important;
    height: auto !important;
    gap: 2px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  body.is-responsive .header > .nav-menu-row > .nav-menu::-webkit-scrollbar { display: none; }
  body.is-responsive .header > .nav-menu-row > .nav-menu > .navigation-item {
    flex: 0 0 auto !important;
    align-self: auto !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }
  body.is-responsive .header > .nav-menu-row > .nav-menu-toggle { display: inline-flex !important; }
  body.is-responsive .header > .language-switcher { order: 3; margin-left: auto !important; gap: 16px !important; }
  /* Obuna narxi va "Qidiruv" matnli tugma bu enlikda sig'may qoladi —
     obuna nishoni yashiriladi, qidiruv esa faqat ikonka bo'lib qoladi. */
  body.is-responsive .header > .duration-badge-container { display: none !important; }
  body.is-responsive .header > .button {
    order: 4;
    flex: none !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 50%;
    justify-content: center !important;
  }
  body.is-responsive .header > .button > .txt.search { display: none !important; }
  body.is-responsive .header > .rule,
  body.is-responsive .header > .hdr-filters { display: none !important; }

  /* ---- Umumiy: qat'iy o'lchamli tuzilma qutilari -> moslashuvchan ----
     Figma eksporti har bir "freym"ni `.page`ga (yoki bir-biriga) nisbatan
     `position:absolute;left:...;top:...` bilan joylashtiradi. `.page`
     yuqorida `position:static`ga o'tkazilgani uchun, agar bu freymlar
     ham `static`ga qaytarilmasa, ular butun HUJJAT (viewport) ga nisbatan
     joylashib qoladi — bu esa sahifani 1000px+ ga cho'zib yuborardi va
     shu bilan `window.innerWidth`/qattiq joylashgan elementlarning
     hisoblash asosini (containing block) buzardi. Shu sabab `position`
     ham shu yerda tiklanadi; `.banner`, `.has-img`, `.image` esa o'z ichidagi
     absolyut bolasini (narx yorlig'i, fon rasm) ushlab turishi uchun
     istisno qilingan. */
  /* Joylashuv (position) — TEG TURIGA QARAMASDAN (div, a, button, p, h3...):
     Figma eksportida istalgan turdagi tugun absolyut joylashgan bo'lishi
     mumkin (masalan "Barchasini ko'rish" tugmasi — `<a>`). */
  body.is-responsive .page *:not(.icon):not(.dot):not(.category-icon):not(.rectangle-1):not(.avatar-1-1):not(.fig-bg):not(.fig-img):not(.has-img):not(.image):not(.mockup):not(.rule):not(.frame-335):not(.banner):not(.lnk-host):not(.lnk-spread) {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  body.is-responsive .page :is(div, article, section, nav, aside, footer, form):not(.icon):not(.dot):not(.category-icon):not(.rectangle-1):not(.avatar-1-1):not(.fig-bg):not(.has-img):not(.image):not(.mockup):not(.rule):not(.frame-335):not(.banner):not(.footer) {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap;
  }

  body.is-responsive .page .rule {
    width: auto !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }

  body.is-responsive .page .txt {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }

  /* Figma tugmalarni `<a>` sifatida chiqargan, shuning uchun ular yuqoridagi
     "qat'iy o'lcham -> auto" qoidasiga (u faqat div/article/... uchun)
     tushmaydi va 1920px kadr uchun hisoblangan enligida qoladi — hech
     bo'lmaganda ustundan chiqib ketmasin. */
  body.is-responsive .page a.button,
  body.is-responsive .page a.tag-button { max-width: 100% !important; }

  body.is-responsive .page .fig-bg {
    width: 100% !important;
    height: 100% !important;
  }
  body.is-responsive .page .fig-bg > .fig-img {
    position: absolute !important;
    left: 0 !important; top: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body.is-responsive .page .image { width: 100% !important; max-width: 100% !important; }

  /* `.has-img`/`.image` universal joylashuv-tozalash qoidasidan istisno
     qilingan (o'zining `.fig-bg` bolasi uchun langar bo'lib qolishi kerak),
     lekin ko'plari Figma eksportida O'ZI HAM `position:absolute;left:...`
     bilan katta masofaga surilgan (masalan sahifa balandligidagi hero
     banner). Shu sabab bu yerda alohida: `position:relative`ga o'tkaziladi
     (hamon langar bo'lib qoladi) va `left/top` olib tashlanadi. */
  body.is-responsive .page .has-img,
  body.is-responsive .page .image {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* Karta ustidagi "butun qutini qoplovchi" havola (`.lnk-spread`) va uning
     langari (`.lnk-host`, base.css da `position: relative`). Yuqoridagi umumiy
     joylashuv-tozalash qoidasi ularni ham `static` ga o'tkazardi: shunda
     havola oqimga tushib, 0x0 o'lchamli bo'lib qolardi va mobil versiyada
     kartaning rasmi/sarlavhasi bosilganda hech qayerga o'tmasdi. Langar
     `relative` bo'lib qoladi (oqimdan chiqmaydi, faqat Figma bergan
     `left/top` siljishi bekor qilinadi), havola esa kartani qoplaydi. */
  body.is-responsive .page .lnk-host {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
  body.is-responsive .page .lnk-spread {
    position: absolute !important;
    inset: 0 !important;
  }

  body.is-responsive .page .has-img { max-width: 100% !important; }
  body.is-responsive .page .has-img:has(.txt) {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body.is-responsive .page .has-img:not(:has(.txt)) { width: 100% !important; }
  body.is-responsive .page .has-img[class*="card-"] { min-height: 220px !important; }

  /* Maqolaning asosiy (katta) muqova rasmi — «batafsil» va «to'liq»da bir xil
     `.card-7-hero` qutisi. Figma kadrida u 1556px enlik uchun qat'iy 587-650px
     balandlikda: telefonda esa en 320-430px ga tushgani bilan balandlik
     o'zgarmay, rasm bo'yiga cho'zilgan "portret" bo'lib qolardi. Balandlik
     nisbat orqali hisoblanadi; ichki 50px joy ham bu enlikda ortiqcha.
     Reklama o'rni (`.ad-slot`) o'z o'lchamida qoladi. */
  body.is-responsive .page .has-img.card-7-hero:not(.ad-slot) {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    padding: 0 !important;
  }

  body.is-responsive .page img { max-width: 100% !important; }
  body.is-responsive .page img.icon.podcast { width: auto !important; height: auto !important; }

  body.is-responsive .page .image > .txt,
  body.is-responsive .page .gridicons-play {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
  }

  body.is-responsive .page .txt.title,
  body.is-responsive .page .txt.article-title,
  body.is-responsive .page .txt.description {
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }

  /* ---- Bir necha sahifada (batafsil, to'liq, podcast) aynan takrorlanadigan
     "obuna bo'ling" banneri: mockup rasm o'chadi, narx kartalari ustma-ust
     joylashadi.

     Tashqi qobiq (`.frame-346`/`.frame-347`) dizaynda matn ustuni bilan narx
     kartalarini yonma-yon (`flex-direction:row`) joylashtiradi — matn ustuni
     `flex:1 1 0%; min-width:0` bo'lgani uchun, narx kartalari o'z eniga
     (~795px) yig'ilib qolganda matn deyarli 0px ga siqilib, har bir so'z
     o'z qatoriga tushib ketardi. `.frame-346`/`.frame-347` sahifada boshqa
     (masalan «Tarif ichida» belgi+matn qatorlari kabi) kichik bloklar uchun
     ham ishlatilgani sabab, faqat narx kartalari qutisini (`.frame-343`)
     bevosita bola qilib olgan qobiq tanlanadi. ---- */
  body.is-responsive .page :is(.frame-346, .frame-347):has(> .frame-343) {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: stretch !important;
  }
  body.is-responsive .page .frame-343 {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    align-items: stretch !important;
  }

  /* ---- Obuna kartasi ichidagi bo'shliq va «Obuna bo'lish» tugmasi ----
     Dizaynda karta balandligi qat'iy (380px) va bolalari `space-between`
     bilan yoyilgan. Mobil oqimda balandlik "auto" ga o'tgani uchun narx,
     imkoniyatlar ro'yxati va tugma bir-biriga yopishib qolardi — shuning
     uchun aniq `gap` beriladi. Tugma esa Figma'dan 64px balandlik va
     o'tkir burchak bilan kelgan; telefonda u oddiy to'rtburchakdek
     ko'rinadi, shuning uchun sezilarli chegara va radius bilan
     barmoqqa mo'ljallangan o'lchamga keltiriladi. */
  body.is-responsive .page .banner:has(> .frame-351) {
    justify-content: flex-start !important;
    gap: 20px !important;
    padding: 20px !important;
  }
  body.is-responsive .page .banner:has(> .frame-351) > .frame-351 {
    align-self: stretch !important;
  }
  body.is-responsive .page .banner > :is(a, div).button {
    align-self: stretch !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 14px 20px !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
  }
  body.is-responsive .page .banner > :is(a, div).button > .txt {
    width: auto !important;
    height: auto !important;
    font-size: 16px !important;
    line-height: 22px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  body.is-responsive .page .frame-343 .mockup { display: none !important; }
  body.is-responsive .page .banner {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* Narx yorliqlari («6 Oylik» va «Bir yillik») ikkalasi ham o'z kartasi
     ichida turadi va karta ustida suzib chiqadi. `position` alohida
     tiklanadi: `.has-img` bo'lgan «Bir yillik» yuqoridagi umumiy qoida bilan
     `relative` ga o'tkazilgan bo'lardi va oqimga tushib, kartaning PASTIGA
     chiqib qolardi. Karta (`.banner`) dizaynda `position: relative`. */
  body.is-responsive .page .frame-335 {
    position: absolute !important;
    left: auto !important;
    right: 12px !important;
    top: -18px !important;
    bottom: auto !important;
  }

  body.is-responsive .auth-stage { width: auto !important; max-width: 100% !important; }

  /* ---- Footer ---- */
  body.is-responsive .footer {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 -16px !important;
    padding: 32px 16px !important;
    overflow: visible !important;
  }
  body.is-responsive .footer > *,
  body.is-responsive .footer .footer-links > * {
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important;
    max-width: 100% !important;
  }
  body.is-responsive .footer .footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 24px !important;
  }
  body.is-responsive .footer .frame-309 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px 32px !important;
  }
  body.is-responsive .footer .frame-309 > * { flex: 1 1 160px !important; }
}

/* ---- Planshet va tor noutbuk ---- */
@media (min-width: 768px) and (max-width: 1279.98px) {
  body.is-responsive .page { padding: 0 24px !important; }
  body.is-responsive .header { margin: 0 -24px 4px !important; padding: 14px 24px 0 !important; }
  body.is-responsive .footer { margin: 0 -24px !important; padding: 40px 24px !important; }
}

/* ---- Telefon ---- */
@media (max-width: 767.98px) {
  body.is-responsive .header > .social-links { display: none !important; }
  body.is-responsive .header > .duration-badge-container { display: none !important; }
  body.is-responsive .page { gap: 24px; }
  body.is-responsive .page .has-img[class*="card-"] { min-height: 200px !important; }
  /* Telefonda muqova biroz balandroq (3:2) — 16:9 juda past ko'rinadi. */
  body.is-responsive .page .has-img.card-7-hero:not(.ad-slot) { aspect-ratio: 3 / 2; }
}

@media (max-width: 599.98px) {
  body.is-responsive .auth-stage { zoom: 0.62; }
}
@media (max-width: 359.98px) {
  body.is-responsive .auth-stage { zoom: 0.54; }
}