/* ════════════════════════════════════════════════════════════════════
   KASKAD QATLAMI: @layer home   (components dan KEYIN, editorial dan OLDIN)
   ────────────────────────────────────────────────────────────────────
   Joyi ataylab shunday: `components` dagi kartochka uslublarini bosa
   oladi, lekin tahririy mavzu (`editorial`) va shisha (`glass`)
   qatlamlari bosh sahifani ham o'z ko'rinishiga sola oladi.

   MOBIL BIRINCHI: har lenta gorizontal suriladi (scroll-snap), ya'ni
   bitta ekranga 5-6 yo'nalish sig'adi. Avval bosh sahifa 233 ta
   kartochkani bitta ustunga to'kardi va telefonda birinchi ekranda
   atigi bitta yarim kartochka ko'rinardi.
   ════════════════════════════════════════════════════════════════════ */

@layer home {

  /* To'r bosh sahifa rejimida — ustun emas, bo'laklar oqimi */
  #grid.grid-home {
    display: block;
    grid-template-columns: none;
    gap: 0;
    border-top: 0;
  }

  .hm-sec { margin: 0 0 26px; }
  .hm-sec:last-child { margin-bottom: 8px; }

  .hm-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin: 0 0 12px;
  }
  .hm-h {
    font-family: var(--ff-display);
    font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em;
    color: var(--ink);
  }
  .hm-more {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--brand-hi);
    background: none; border: 0;
  }
  .hm-more i { font-size: .62rem; }
  .hm-more:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* ── LENTA ──
     `overflow-x` bo'lgan qatorga vertikal soya sig'maydi, shuning
     uchun kartochka soyasi uchun pastdan `padding` qoldiriladi. */
  .hm-rail {
    display: flex; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 10px;
    margin: 0 -2px;
  }
  .hm-rail::-webkit-scrollbar { display: none; }

  .hm-tile {
    flex: 0 0 auto; scroll-snap-align: start;
    width: 148px;
    display: flex; flex-direction: column;
    text-align: start;
    background: var(--surf-2, var(--surf));
    border: 1px solid var(--rule);
    border-radius: 14px;
    overflow: hidden;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .hm-tile:hover {
    transform: translateY(-2px);
    border-color: var(--rule-strong);
    box-shadow: var(--sh-md, 0 12px 28px -14px rgba(0,0,0,.45));
  }
  .hm-tile:active { transform: scale(.98); }

  .hm-cov {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--cc, var(--gold)) 0%, var(--cd, #4a3a1e) 100%);
    overflow: hidden;
  }
  .hm-cov::before {                       /* nozik diagonal rastr */
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 9px);
  }
  .hm-cov-ic {
    position: relative; z-index: 1;
    font-size: 26px; color: #fff;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
  }
  .hm-new {
    position: absolute; top: 7px; right: 7px; z-index: 2;
    padding: 2px 7px;
    font-size: .52rem; font-weight: 800; letter-spacing: .1em;
    color: #fff;
    background: linear-gradient(135deg, var(--brand, #e01e37), #ff4d63);
    border-radius: 999px;
  }

  .hm-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 11px 12px; }
  .hm-t {
    font-size: .8rem; font-weight: 600; line-height: 1.3; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hm-k {
    font-size: .58rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
    color: var(--dim, var(--muted));
  }

  /* ══════════════════════════════════════════════════════════════
     (v110) "TASODIFIY TAVSIYALAR" — TO'XTOVSIZ LENTA
     ──────────────────────────────────────────────────────────────
     Avvalgi "Bo'limlar" panelining (.hm-cats/.hm-cat) O'RNIGA keldi;
     u uslublar bilan birga olib tashlandi.

     Tuzilma boshqa lentalar bilan bir xil: qator kesib turadi,
     yo'lak ikki nusxada chiziladi va aynan yarmiga suriladi, shu
     sabab halqa uzilishi ko'rinmaydi. Tezlik `--sp` orqali JS dan
     keladi. Muqova RASMSIZ — kutubxona elementlarida muqova rasmi
     saqlanmaydi, shuning uchun mavjud `.hm-cov` bilan bir xil tildagi
     ikonali rangli panel ishlatiladi.
     ══════════════════════════════════════════════════════════════ */
  .hmx-row { overflow: hidden; margin-top: 9px; }
  .hmx-row:first-of-type { margin-top: 0; }
  .hmx-track {
    display: flex; gap: 10px; width: max-content;
    padding: 2px 0 4px;
    animation: hmxSlide var(--sp, 44s) linear infinite;
    will-change: transform;
  }
  .hmx-rev .hmx-track { animation-direction: reverse; }
  @keyframes hmxSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Teginish TO'XTATMAYDI — telefonda sahifani surganda barmoq shu
     qatorga tegadi va lenta qotib qolardi. `:hover` faqat haqiqiy
     kursorli qurilmada (mobil brauzerda u bosilgach yopishib qoladi). */
  @media (hover: hover) and (pointer: fine) {
    .hmx-row:hover .hmx-track { animation-play-state: paused; }
  }
  .hmx-row:focus-within .hmx-track { animation-play-state: paused; }

  .hmx-card {
    flex: 0 0 clamp(160px, 46vw, 210px);
    width: clamp(160px, 46vw, 210px);
    display: flex; align-items: center; gap: 10px;
    padding: 8px 11px 8px 8px;
    text-align: start;
    background: var(--surf-2, var(--surf));
    border: 1px solid var(--rule);
    border-radius: 14px;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  @media (min-width: 720px)  { .hmx-card { flex-basis: 224px; width: 224px; } }
  @media (min-width: 1100px) { .hmx-card { flex-basis: 246px; width: 246px; } }
  @media (hover: hover) and (pointer: fine) {
    .hmx-card:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
  }
  .hmx-card:active { transform: scale(.98); }

  .hmx-cov {
    position: relative;
    width: 40px; height: 40px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--cc, var(--gold)) 0%, var(--cd, #4a3a1e) 100%);
    border-radius: 11px; overflow: hidden;
  }
  .hmx-cov::before {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 9px);
  }
  .hmx-cov-ic {
    position: relative; z-index: 1;
    font-size: 15px; color: #fff;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
  }
  .hmx-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
  .hmx-t {
    font-size: .78rem; font-weight: 600; line-height: 1.28; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hmx-s {
    font-size: .58rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--dim, var(--muted));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  @media (prefers-reduced-motion: reduce) {
    .hmx-track { animation: none; width: auto; }
    .hmx-row { overflow-x: auto; scrollbar-width: none; }
    .hmx-row::-webkit-scrollbar { display: none; }
    .hmx-card { transition: none; }
  }

  /* ── BARCHA MANBALAR / ORQAGA ── */
  .hm-all, .hm-back {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%;
    padding: 14px 18px;
    font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink);
    background: var(--surf-2, var(--surf));
    border: 1px solid var(--rule);
    border-radius: 14px;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .hm-all:hover, .hm-back:hover { border-color: var(--rule-strong); }
  .hm-all:active, .hm-back:active { transform: scale(.99); }
  .hm-back { width: auto; margin: 0 0 14px; padding: 10px 16px; }

  /* ── KENGROQ EKRANLAR ──
     Lenta o'sha-o'sha (u yerda ham tabiiy ko'rinadi), faqat bo'g'inlar
     kattaroq. (v110: bo'limlar panelining ustun qoidalari `.hm-cats`
     bilan birga olib tashlandi — u panel endi yo'q.) */
  @media (min-width: 720px) {
    .hm-tile { width: 176px; }
    .hm-h { font-size: 1.14rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hm-tile, .hm-all, .hm-back { transition: none; }
    .hm-tile:hover { transform: none; }
  }
}