/* =============================================================================
   Podcast asosiy sahifasi — moslashuvchan (responsive) qatlam.
   Sahifa: templates/media/podcast.html, Figma kadri `.page.n-140-16247`.

   Umumiy bloklar (header, footer, «obuna bo'ling» banneri, absolyut
   joylashuvni tozalash) — responsive-common.css da. Bu fayl FAQAT shu
   sahifaga xos bo'limlarni boshqaradi:
     hero (`.frame-56`) · pleer kartochkasi (`.n-140-18727`) ·
     kartochka to'rlari (`.frame-395`) · «Ohirgi tinglanganlar» qatori.

   Barcha qoidalar `max-width: 1279.98px` ichida va `body.is-responsive` ga
   bog'langan: 1280px va undan keng ekranda dizayn 1:1 o'zgarishsiz qoladi
   (page-scale.js uni zoom bilan moslaydi).

   Tanlagichlar `.page.n-140-16247` bilan boshlanadi — responsive-common.css
   dagi universal qoidalar juda yuqori aniqlikka (specificity) ega, shu
   prefiksisiz bu yerdagi `!important` lar ham ularni yenga olmaydi.
   ========================================================================== */

@media (max-width: 1279.98px) {

  body.is-responsive .page.n-140-16247 {
    /* Bir joydan boshqariladigan o'lchov shkalasi — har bir blokda
       takrorlanmasligi uchun. */
    --pod-flow-gap: 40px;      /* bo'limlar orasi */
    --pod-block-gap: 18px;     /* sarlavha va to'r orasi */
    --pod-grid-gap: 20px;      /* kartochkalar orasi */
    --pod-radius: 12px;
    --pod-shadow: 0 2px 12px rgba(19, 39, 69, 0.08);
    gap: 20px;
  }

  /* ---- 1. Sahifa oqimi -----------------------------------------------------
     Dizaynda kontent bloki hero ustiga `margin: 1143px 0 0 180px` bilan
     tushirilgan (dynamic.css) — bu 1920px kadr uchun mo'ljallangan koordinata.
     Oqim rejimida u hero bilan kontent orasida 1143px BO'SH JOY qoldiradi,
     chap chekka esa 180px ga suriladi. Ikkalasi ham shu yerda nolga tushadi. */
  body.is-responsive .page.n-140-16247 > *:not(.footer) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.is-responsive .page.n-140-16247 > .frame-397 { margin-top: 0 !important; }
  body.is-responsive .page.n-140-16247 > .footer { margin-top: 24px !important; }

  /* Pleer kartochkasi dizaynda hero USTIDA turadi (absolyut). Oqimda u
     hujjat oxiriga — obuna banneridan keyin — tushib qolardi; mantiqan u
     heroning davomi, shuning uchun tartib aniq belgilanadi.
     (Header `order: -1` ni responsive-common.css beradi.) */
  body.is-responsive .page.n-140-16247 > .breadcrumb { order: 1 !important; }
  body.is-responsive .page.n-140-16247 > .frame-56 { order: 2 !important; }
  body.is-responsive .page.n-140-16247 > .container.n-140-18727 { order: 3 !important; }
  body.is-responsive .page.n-140-16247 > .frame-397 { order: 4 !important; }
  body.is-responsive .page.n-140-16247 > .footer { order: 5 !important; }

  /* ---- 2. Non ushshoqlari (breadcrumb) ---- */
  body.is-responsive .page.n-140-16247 > .breadcrumb {
    flex-wrap: wrap !important;
    gap: 6px !important;
    row-gap: 2px !important;
  }

  /* ---- 3. Hero -------------------------------------------------------------
     Dizaynda 1556x713 (2.18:1). Qat'iy 713px balandlik tor ekranda deyarli
     butun bir ekranni egallab, faqat rasm ko'rsatardi — nisbat saqlanadi,
     balandlik enidan kelib chiqadi. */
  body.is-responsive .page.n-140-16247 .frame-56.n-140-18477 {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 7;
    padding: 20px !important;
    border-radius: var(--pod-radius);
    overflow: hidden !important;
  }
  body.is-responsive .page.n-140-16247 .frame-56 > img.icon.logo {
    width: clamp(88px, 13vw, 152px) !important;
    height: auto !important;
  }
  body.is-responsive .page.n-140-16247 .frame-56 > img.icon.podcast {
    width: min(70%, 620px) !important;
    height: auto !important;
    align-self: flex-start;
  }

  /* ---- 4. Pleer kartochkasi (eng yangi podcast) ---- */
  body.is-responsive .page.n-140-16247 > .container.n-140-18727 {
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 14px 16px !important;
    border-radius: var(--pod-radius);
    box-shadow: var(--pod-shadow);
  }
  body.is-responsive .page.n-140-16247 .n-140-18727 > .text-container {
    flex: 1 1 200px !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 2px !important;
  }
  /* Dizaynda sarlavha bir qatorga sig'ib, ortig'i `…` bilan kesilardi
     (`max-width: 375px`). Tor ekranda kesish o'rniga ikki qatorga o'tadi. */
  body.is-responsive .page.n-140-16247 .n-140-18727 .txt-auto {
    max-width: none !important;
    text-overflow: clip !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden !important;
  }
  body.is-responsive .page.n-140-16247 .n-140-18727 .n-140-18729 { font-size: 17px; line-height: 24px; }
  body.is-responsive .page.n-140-16247 .n-140-18727 .n-140-18730 { font-size: 14px; line-height: 20px; }
  body.is-responsive .page.n-140-16247 .n-140-18727 > .audio-container {
    flex: 0 1 auto !important;
    gap: 12px !important;
  }
  body.is-responsive .page.n-140-16247 .n-140-18727 .waveform-container { overflow: hidden !important; }

  /* ---- 5. Bo'lim ritmi va sarlavhalar ---- */
  body.is-responsive .page.n-140-16247 .frame-397 { gap: var(--pod-flow-gap) !important; }
  body.is-responsive .page.n-140-16247 .category-section { gap: var(--pod-block-gap) !important; }
  body.is-responsive .page.n-140-16247 .txt.section-title {
    font-size: clamp(20px, 3.4vw, 34px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
  }
  body.is-responsive .page.n-140-16247 .rule[class*="vector-"] { margin: 4px 0 !important; }

  /* ---- 6. Kartochka to'rlari ----------------------------------------------
     Dizaynda uchala to'r ham `.frame-395` — bir xil klass, lekin ichidagi
     kartochka turi har xil. Shuning uchun tanlash `:has()` orqali ichki
     tuzilma bo'yicha: n-ID lar Figma qayta eksportida o'zgarishi mumkin. */
  body.is-responsive .page.n-140-16247 .frame-395:not(.pod-carousel-row) {
    display: grid !important;
    gap: var(--pod-grid-gap) !important;
    align-items: stretch !important;
  }
  body.is-responsive .page.n-140-16247 .frame-395 > * {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 6a. Poster kartochkalar («Yangi podcastlar», «Ohirgi tinglanganlar»).
         Dizayn: 350x360 — nisbat saqlanadi, qat'iy 360px emas. */
  body.is-responsive .page.n-140-16247 .frame-395:has(> .frame-401):not(.pod-carousel-row) {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
  body.is-responsive .page.n-140-16247 .frame-395 > .frame-401 { gap: 12px !important; }
  body.is-responsive .page.n-140-16247 .frame-395 .has-img.card-12 {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 35 / 36;
    padding: 14px !important;
    border-radius: var(--pod-radius);
  }
  body.is-responsive .page.n-140-16247 .card-12 > img.icon.podcast {
    width: min(88%, 158px) !important;
    height: auto !important;
  }
  body.is-responsive .page.n-140-16247 .frame-406 { gap: 6px !important; }
  body.is-responsive .page.n-140-16247 .frame-406 > .txt.title {
    font-size: clamp(16px, 1.6vw, 24px) !important;
    line-height: 1.35 !important;
  }

  /* 6b. REELSLAR — dizaynda 350x464 (3:4) poster, matn pastda. */
  body.is-responsive .page.n-140-16247 .frame-395:has(> .card-16) {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
  body.is-responsive .page.n-140-16247 .frame-395 > .has-img.card-16 {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4;
    padding: 14px !important;
    border-radius: var(--pod-radius);
    gap: 10px !important;
  }
  /* Ijro tugmasi dizaynda kartochka ustida absolyut (`left:158; top:210`) —
     bu koordinatalar 350px lik kartochka uchun. responsive-common.css absolyut
     joylashuvni tozalagani uchun u oqimda, matndan KEYIN chiqib qolardi.
     `order` + `margin-bottom:auto` bilan u yuqori o'ng burchakka qaytariladi
     (kartochka `justify-content: flex-end` — matn pastda qoladi). */
  body.is-responsive .page.n-140-16247 .card-16 > .play-button-container {
    order: -1;
    align-self: flex-end;
    margin-bottom: auto;
  }
  body.is-responsive .page.n-140-16247 .card-16 .txt.title { font-size: 16px !important; line-height: 1.25 !important; }
  body.is-responsive .page.n-140-16247 .card-16 .txt.description { font-size: 12px !important; line-height: 1.4 !important; }
  body.is-responsive .page.n-140-16247 .card-16 .metadata-container { flex-wrap: wrap !important; row-gap: 2px !important; }

  /* 6c. «Mashxurlar» — kvadrat rasm + matn qatori. */
  body.is-responsive .page.n-140-16247 .frame-395:has(> .frame-403) {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  }
  body.is-responsive .page.n-140-16247 .frame-395 > .frame-403 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    align-items: center !important;
  }
  body.is-responsive .page.n-140-16247 .frame-403 > .has-img.card-11 {
    flex: 0 0 auto !important;
    width: 120px !important;
    height: 120px !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 10px;
  }
  body.is-responsive .page.n-140-16247 .frame-403 > .frame-398 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 8px !important;
  }
  body.is-responsive .page.n-140-16247 .frame-398 > .txt.title {
    font-size: clamp(15px, 1.5vw, 24px) !important;
    line-height: 1.35 !important;
  }

  /* ---- 7. Meta qatori va ijro tugmasi (barcha kartochkalarda) --------------
     responsive-common.css `div` larning `width/height` ini `auto` ga majburan
     o'tkazadi, shuning uchun tugma o'lchami padding orqali beriladi — bu
     yagona ishonchli yo'l va bir vaqtda barmoq uchun yetarli nishon (~40px)
     hosil qiladi. */
  /* Ichkarida 12x16 lik SVG uchburchak turadi, `div` larning eni/bo'yi esa
     responsive-common.css da `auto` ga majburlangan — shuning uchun tugma
     o'lchami padding orqali beriladi: 12+2*14 = 40 va 16+2*12 = 40, ya'ni
     aynan doira va barmoq uchun yetarli nishon. */
  body.is-responsive .page.n-140-16247 .play-button-container {
    padding: 12px 14px !important;
    border-radius: 200px;
    box-shadow: inset 0 0 0 0.5px #afafaf, 0 1px 6px rgba(0, 0, 0, 0.12);
  }
  body.is-responsive .page.n-140-16247 .metadata-container {
    flex-wrap: wrap !important;
    gap: 8px !important;
    row-gap: 2px !important;
  }
  body.is-responsive .page.n-140-16247 .metadata-container .txt { font-size: 13px !important; line-height: 20px !important; }

  /* ---- 8. Strelkali qatorlar («Yangi podcastlar», «Ohirgi tinglanganlar»,
     «REELSLAR») ---------------------------------------------------------------
     Dizaynda qator faqat strelkalar bilan siljiydi (`overflow-x: hidden`).
     Sensorli ekranda strelkalar keraksiz va noqulay — qator barmoq bilan
     suriladigan, kartochkaga "yopishadigan" (scroll-snap) karusel bo'ladi.
     O'ng chetdan tashqariga chiqadigan 180px lik "peek" sahifa chekkasiga
     (16/24px) moslanadi. */
  body.is-responsive .page.n-140-16247 .pod-carousel-row.frame-395 {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    gap: var(--pod-grid-gap) !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    /* Sahifa chekkasidan tashqariga chiqib, keyingi kartochkaning bir qismi
       ko'rinib turadi — yana material borligi bilinadi. */
    margin-right: calc(-1 * var(--pod-edge, 16px)) !important;
    padding-right: var(--pod-edge, 16px) !important;
  }
  /* Kartochka eni `flex-basis` orqali beriladi: responsive-common.css barcha
     `div` larning `width` ini `auto` ga majburlaydi va uni bu yerdan yengib
     bo'lmaydi (aniqlik farqi juda katta) — `flex` esa u yerda tegilmagan. */
  body.is-responsive .page.n-140-16247 .pod-carousel-row > .frame-401 {
    flex: 0 0 240px !important;
    scroll-snap-align: start;
    gap: 12px !important;
  }
  body.is-responsive .page.n-140-16247 .pod-carousel-row .has-img.card-12 {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 35 / 36;
    padding: 14px !important;
    border-radius: var(--pod-radius);
  }

  /* ---- 9. Bo'sh holat ---- */
  body.is-responsive .page.n-140-16247 .empty-state {
    padding: 16px 0 !important;
    font-size: 15px !important;
  }
}

/* ============================ Planshet / tor noutbuk ====================== */
@media (min-width: 768px) and (max-width: 1279.98px) {
  body.is-responsive .page.n-140-16247 { --pod-edge: 24px; --pod-flow-gap: 56px; }
  body.is-responsive .page.n-140-16247 .frame-56.n-140-18477 { aspect-ratio: 16 / 6; }
  body.is-responsive .page.n-140-16247 .pod-carousel-row > .frame-401 { flex-basis: 300px !important; }
}

/* ================================= Telefon =============================== */
@media (max-width: 767.98px) {
  body.is-responsive .page.n-140-16247 {
    --pod-edge: 16px;
    --pod-flow-gap: 32px;
    --pod-block-gap: 14px;
    --pod-grid-gap: 14px;
    gap: 16px;
  }

  body.is-responsive .page.n-140-16247 .frame-56.n-140-18477 {
    aspect-ratio: 16 / 10;
    padding: 14px !important;
  }
  body.is-responsive .page.n-140-16247 .frame-56 > img.icon.podcast { width: min(86%, 320px) !important; }

  /* Pleer kartochkasi: matn tepada to'liq enda, tugma+to'lqin pastda. */
  body.is-responsive .page.n-140-16247 > .container.n-140-18727 { padding: 12px 14px !important; gap: 12px !important; }
  body.is-responsive .page.n-140-16247 .n-140-18727 > .text-container { flex: 1 1 100% !important; }
  body.is-responsive .page.n-140-16247 .n-140-18727 > .audio-container { flex: 1 1 100% !important; }
  body.is-responsive .page.n-140-16247 .n-140-18727 .n-140-18729 { font-size: 16px; }
  body.is-responsive .page.n-140-16247 .n-140-18727 .n-140-18730 { font-size: 13px; }

  /* Ikki ustunli to'r — 375px da kartochka ~163px: poster hamon o'qiladi.
     Strelkali qatorlar bundan mustasno: ular barmoq bilan suriladi. */
  body.is-responsive .page.n-140-16247 .frame-395:has(> .frame-401):not(.pod-carousel-row),
  body.is-responsive .page.n-140-16247 .frame-395:has(> .card-16) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* «Mashxurlar» bir ustunda — rasm+matn qatori tor ekranda ham buzilmaydi. */
  body.is-responsive .page.n-140-16247 .frame-395:has(> .frame-403) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  body.is-responsive .page.n-140-16247 .frame-403 > .has-img.card-11 {
    width: 96px !important;
    height: 96px !important;
  }

  body.is-responsive .page.n-140-16247 .frame-395 .has-img.card-12,
  body.is-responsive .page.n-140-16247 .pod-carousel-row .has-img.card-12,
  body.is-responsive .page.n-140-16247 .frame-395 > .has-img.card-16 { padding: 10px !important; }
  body.is-responsive .page.n-140-16247 .card-16 .txt.title { font-size: 14px !important; }
  body.is-responsive .page.n-140-16247 .frame-406 > .txt.title { font-size: 15px !important; }
  body.is-responsive .page.n-140-16247 .metadata-container .txt { font-size: 12px !important; line-height: 18px !important; }
  body.is-responsive .page.n-140-16247 .play-button-container { padding: 10px 12px !important; }

  /* Siljiydigan qatorda («Ohirgi tinglanganlar») strelkalar o'rniga barmoq
     bilan surish. Sahifalanadigan qatorlarda esa strelkalar QOLADI: telefonda
     ham keyingi 4 talikka o'tishning boshqa yo'li yo'q. */
  body.is-responsive .page.n-140-16247 [data-carousel] .pod-pager { display: none !important; }
  body.is-responsive .page.n-140-16247 .pod-carousel-row > .frame-401 { flex-basis: min(62vw, 240px) !important; }
}

/* ================== Kichik telefonlar (iPhone SE va shunga o'xshash) =======
   360px dan tor ekranda ikki ustunli to'rda kartochka ~140px ga tushadi —
   reels kartochkasidagi sarlavha+tavsif+meta o'sha enda o'qilmay qoladi. */
@media (max-width: 359.98px) {
  body.is-responsive .page.n-140-16247 { --pod-grid-gap: 12px; }
  body.is-responsive .page.n-140-16247 .frame-56.n-140-18477 { aspect-ratio: 4 / 3; }
  /* Reels kartochkasida sarlavha + tavsif + meta bor: 2 ustunda ~150px
     bo'lganda matn o'qilmay qoladi, shuning uchun bitta ustun. */
  body.is-responsive .page.n-140-16247 .frame-395:has(> .card-16) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.is-responsive .page.n-140-16247 .frame-395 > .has-img.card-16 { aspect-ratio: 16 / 9; }
  body.is-responsive .page.n-140-16247 .frame-403 > .has-img.card-11 { width: 84px !important; height: 84px !important; }
  body.is-responsive .page.n-140-16247 .pod-carousel-row > .frame-401 { flex-basis: 74vw !important; }
}