/* ════════════════════════════════════════════════════════════════════
   KASKAD QATLAMI: @layer hubcards            (v79 · 13-qatlam)
   ────────────────────────────────────────────────────────────────────
   BO'LIM (XAB) KARTOCHKALARI — "Otvertka" va "Barcha Kitoblar"

   NEGA ALOHIDA QATLAM VA ALOHIDA SINF:
   Eski XAB kartochkasi `.card .card-hub` edi, ya'ni kitob kartochkasi
   bilan bir xil suyakda. Oqibatda u to'rtta joyda qayta yozilardi:
   components.css (mobil ro'yxat qatoriga aylanish), editorial.css
   (hairline to'r, gap:1px, fon), glass.css, apple-motion.css.
   XAB kartochkasining ehtiyoji esa butunlay boshqa — unda muqova
   ham, "Saqlash / Yuklab olish / Ulashish" paneli ham kerak emas.

   Shu sabab yangi sinf `.tcard` olindi va eng oxirgi qatlamga
   qo'yildi. Qatlam tartibi QAT'IY (tokens.css birinchi qatorida
   e'lon qilingan), shuning uchun bu yerda `!important` ham,
   sun'iy selektor og'irligi ham kerak emas: `hubcards` barcha
   oldingi qatlamlarni bosadi.

   Ranglar `--cc / --cd / --cg` dan keladi (tokens.css). Ular
   `[data-nav="..."]` orqali kartochkaning O'ZIGA tushadi, ya'ni
   har bo'lim o'z rangida chiqadi — qo'shimcha sinf yozish shart emas.
   ════════════════════════════════════════════════════════════════════ */

@layer hubcards {

  /* ─────────────────────────────────────────────
     1) TO'R — XAB rejimi
     Oddiy kitob ro'yxati mobilda "gap:0 + ajratuvchi chiziq"
     bo'ladi (gazeta ro'yxati). Bo'lim kartochkalari esa mustaqil
     plitkalar — ular nafas olishi kerak. Belgini render.js qo'yadi
     (renderHub → classList.add('grid-hub')).
  ───────────────────────────────────────────── */
  #grid.grid.grid-hub {
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 16px;
    background: transparent;      /* editorial hairline foni bekor */
    border-top: 0;
  }
  @media (max-width: 719px) {
    #grid.grid.grid-hub {
      grid-template-columns: 1fr;
      gap: 12px;
      border-top: 0;
    }
  }

  /* ─────────────────────────────────────────────
     2) KARTOCHKA
  ───────────────────────────────────────────── */
  /* Sirt ATAYLAB shisha tizimidan olinadi (css/glass.css, 10-qatlam):
     --gl-pane / --gl-edge / --gl-3 / --gl-8. Agar shu tokenlarni
     e'tiborsiz qoldirib oddiy `var(--surf)` yozilsa, XAB kartochkasi
     saytning qolgan barcha kartochkalaridan ajralib, YOT bo'lib
     ko'rinadi: qolganlari yarim shaffof va sakkiz qatlamli soyada,
     bu esa yassi va qattiq. Tokenlar `html.gl` da e'lon qilingan;
     zaxira qiymatlar shisha o'chirilgan holat uchun. */
  .tcard {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px 20px 16px;
    background: var(--gl-pane, var(--surf));
    border: 1px solid var(--gl-edge, var(--rule));
    border-radius: 18px;
    box-shadow: var(--gl-3, var(--sh-sm));
    cursor: pointer;
    overflow: hidden;
    /* Tezlik: ekran tashqarisidagi kartochka ichi chizilmaydi.
       Qat'iy balandlik BERILMAYDI — apple-motion.css dagi izohda
       yozilganidek, taxminiy o'lcham haqiqiydan kichik bo'lsa matn
       ustma-ust tushadi. */
    contain: paint;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    animation: tcardIn .42s var(--ease-out) both;
    transition:
      transform var(--dur) var(--ease),
      background var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease);
  }
  /* Blur faqat qobiliyat darvozasi ruxsat bergan qurilmada
     (js/boot/02-glass-gate.js → html.gl-blur). */
  html.gl-blur .tcard {
    -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(150%);
    backdrop-filter: blur(var(--gl-blur)) saturate(150%);
  }
  @keyframes tcardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  /* Yuqori chap burchakdagi mayin nur — kartochka rangini
     ikon plitkasidan tashqariga ham "sizdiradi". Bezak bo'lgani
     uchun bosishni to'smaydi. */
  .tcard::before {
    content: "";
    position: absolute;
    top: -60px; left: -60px;
    width: 190px; height: 190px;
    background: radial-gradient(circle, var(--cg) 0%, transparent 68%);
    opacity: .55;
    pointer-events: none;
    transition: opacity var(--dur-lg) var(--ease);
  }

  .tcard:hover {
    transform: translateY(-3px);
    background: var(--gl-pane-hi, var(--surf-1));
    border-color: var(--cc);
    box-shadow: var(--gl-8, var(--sh-md));
    /* Kategoriya rangi 8-qatlam nuriga uzatiladi — glass.css dagi
       `.card:hover` bilan bir xil xatti-harakat. */
    --gl-glow: 0 0 30px -3px color-mix(in srgb, var(--cc) 34%, transparent);
  }
  @supports not (color: color-mix(in srgb, red, blue)) {
    .tcard:hover { --gl-glow: var(--gl-glow-hi); }
  }
  .tcard:hover::before { opacity: .9; }
  .tcard:active { transform: translateY(0) scale(.995); }
  .tcard:focus-visible {
    outline: 2px solid var(--cc);
    outline-offset: 2px;
  }

  /* ─── Ikon plitkasi ─── */
  .tcard-ic {
    position: relative;
    flex: 0 0 auto;
    width: 58px; height: 58px;
    display: grid; place-items: center;
    margin-bottom: 16px;
    font-size: 23px;
    color: var(--cc);
    background: var(--cg);
    border-radius: 17px;
    transition: transform var(--dur-lg) var(--ease-out);
  }
  .tcard:hover .tcard-ic { transform: translateY(-2px) scale(1.04); }

  /* ─── "YANGI" nishoni ─── */
  .tcard-new {
    position: absolute;
    top: 15px; right: 15px;
    z-index: 2;
    padding: 4px 11px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .09em;
    color: #fff;                  /* gradiyent ustida — mavzudan qat'i nazar oq */
    background: linear-gradient(135deg, #ff7a45, #f8447f);
    border-radius: var(--r-pill);
    box-shadow: 0 3px 10px rgba(248, 68, 127, .28);
  }

  /* ─── Matn ─── */
  .tcard-ttl {
    margin: 0 0 7px;
    font-family: var(--ff-display);
    font-size: 1.16rem;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.012em;
    color: var(--ink);
  }
  .tcard-dsc {
    margin: 0 0 15px;
    flex: 1 1 auto;
    font-size: .865rem;
    line-height: 1.6;
    color: var(--muted);
    /* Uch qator — kartochkalar bir xil balandlikda saflanadi */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ─── Pastki qator: son / kicker + o'q ─── */
  .tcard-ft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--gl-edge, var(--rule));
  }
  .tcard-cnt {
    min-width: 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tcard-go {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    font-size: .7rem;
    color: var(--cc);
    background: var(--surf-2);
    border-radius: 50%;
    transition:
      background var(--dur) var(--ease),
      color var(--dur) var(--ease),
      transform var(--dur) var(--ease);
  }
  .tcard:hover .tcard-go {
    color: #fff;
    background: linear-gradient(135deg, var(--cc), var(--cd));
    transform: translateX(2px);
  }

  /* ─────────────────────────────────────────────
     3) MOBIL — plitka biroz ixchamroq
  ───────────────────────────────────────────── */
  @media (max-width: 719px) {
    .tcard { padding: 18px 16px 13px; border-radius: 16px; }
    .tcard-ic { width: 50px; height: 50px; font-size: 20px; border-radius: 15px; margin-bottom: 13px; }
    .tcard-ttl { font-size: 1.06rem; }
    .tcard-dsc { font-size: .825rem; -webkit-line-clamp: 2; margin-bottom: 12px; }
    .tcard-new { top: 13px; right: 13px; padding: 3px 9px; font-size: .56rem; }
    /* Telefonda "hover" barmoq tegishi bilan yopishib qoladi — faqat
       ko'tarilish o'chiriladi, sirt va soya joyida qoladi. */
    .tcard:hover { transform: none; box-shadow: var(--gl-3, var(--sh-sm)); }
    .tcard:hover .tcard-ic { transform: none; }
  }

  /* ─────────────────────────────────────────────
     4) HARAKATNI KAMAYTIRISH
  ───────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .tcard { animation: none; }
    .tcard,
    .tcard-ic,
    .tcard-go,
    .tcard::before { transition: none; }
    .tcard:hover { transform: none; }
    .tcard:hover .tcard-ic { transform: none; }
    .tcard:hover .tcard-go { transform: none; }
  }
}