/* ==========================================================================
   HUJJAT KARTOCHKASI — maqolalar, me'yoriy hujjatlar va metodika ro'yxatlari
   uchun umumiy ko'rinish.

   Uch sahifa ham bir xil "quruq matn" bo'lib qolgandi. Bu yerdagi tuzilma
   ularga rang, muqova va tugma qo'shadi; kartochkalarning JOYLASHISHI esa
   har sahifada avvalgidek qoladi — grid yoki qator to'rini sahifaning o'zi
   belgilaydi, bu fayl faqat kartochkaning ichini bezaydi.

   Har kartochkaga oila rangi `--fc` inline `style` orqali beriladi
   (shablonda `{% cycle %}`), shuning uchun bitta ro'yxat ham rang-barang
   chiqadi. Ranglar base.html dagi mavzu o'zgaruvchilari (--c1..--c6) dan
   olinadi, ya'ni mavzu almashsa kartochkalar ham u bilan birga almashadi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   RANG JUFTLIKLARI — kartochkaga `{% cycle 'rang-1' 'rang-3' ... %}` bilan
   beriladi. `--fc` — yorqin rang (tasma, fon, yorliq), `--fcd` — o'sha
   rangning to'q juftii: ustiga OQ matn tushadigan tugmalar shundan
   bo'yaladi, aks holda sariq fonda yozuv o'qilmay qoladi.
   -------------------------------------------------------------------------- */

/* Standart rang — `rang-*` klassi berilmagan holat uchun. Bu qator
   `.rang-*` dan OLDIN turishi shart: ikkalasi ham bitta klasslik tanlagich,
   shuning uchun keyin yozilgani ustun keladi. */
.hb, .hf, .hk, .hk-bosh { --fc: var(--accent); --fcd: var(--accent); }

.rang-1 { --fc: var(--c1); --fcd: var(--c1-deep); }
.rang-2 { --fc: var(--c2); --fcd: var(--c2-deep); }
.rang-3 { --fc: var(--c3); --fcd: var(--c3-deep); }
.rang-4 { --fc: var(--c4); --fcd: var(--c4-deep); }
.rang-5 { --fc: var(--c5); --fcd: var(--c5-deep); }
.rang-6 { --fc: var(--c6); --fcd: var(--c6-deep); }

/* --------------------------------------------------------------------------
   BO'LIM BOSHI — sahifa sarlavhasi (rangli tasma + medalyon)
   -------------------------------------------------------------------------- */

.hb {
    position: relative;
    margin: 0 0 clamp(1.5rem, 3vw, 2.4rem);
    padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.4rem, 4vw, 3rem);
    border-radius: 26px;
    overflow: hidden;
    background: var(--paper-soft);
    background:
        radial-gradient(120% 130% at 88% 12%,
                        color-mix(in srgb, var(--fc) 26%, transparent) 0%,
                        transparent 62%),
        linear-gradient(135deg,
                        color-mix(in srgb, var(--fc) 20%, #fff) 0%,
                        color-mix(in srgb, var(--fc) 7%, #fff) 55%,
                        #fff 100%);
    border: 1.5px solid color-mix(in srgb, var(--fc) 20%, var(--paper-line));
    box-shadow: 0 18px 40px -30px color-mix(in srgb, var(--fc) 70%, #10243D);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem 2.5rem;
    align-items: center;
}

/* Yumshoq pufakchalar — bolalar sahifasi ohangi uchun */
.hb::before,
.hb::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: color-mix(in srgb, var(--fc) 16%, transparent);
}
.hb::before { width: 190px; height: 190px; right: -50px; bottom: -95px; }
.hb::after  { width: 90px;  height: 90px;  right: 165px; top: -40px; }

.hb-ichi { position: relative; z-index: 1; min-width: 0; }

.hb-crumbs {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.34rem 0.85rem;
    margin: 0 0 1rem;
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--fc) 22%, var(--paper-line));
    border-radius: 999px;
    font-size: 0.78rem; font-weight: 600;
    color: var(--ink-soft);
}
.hb-crumbs a { color: var(--fc); transition: opacity 0.2s ease; }
.hb-crumbs a:hover { opacity: 0.7; }
.hb-crumbs i { font-size: 0.5rem; color: var(--ink-mute); }
.hb-crumbs .here { color: var(--ink); }

.hb-sarlavha {
    font-family: var(--display);
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0 0 0.7rem;
    color: var(--ink);
    max-width: 20ch;
}
.hb-sarlavha em { font-style: normal; color: var(--fc); }

.hb-tavsif {
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 58ch;
    margin: 0;
}

.hb-son {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin-top: 1.1rem;
    padding: 0.4rem 0.95rem;
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--fc) 25%, var(--paper-line));
    border-radius: 999px;
    font-weight: 700; font-size: 0.85rem;
    color: var(--ink);
    box-shadow: 0 8px 18px -14px color-mix(in srgb, var(--fc) 80%, #10243D);
}
.hb-son i { color: var(--fc); font-size: 0.8rem; }

/* Medalyon — o'ng tomondagi belgi (punktir halqa ichida) */
.hb-belgi {
    position: relative; z-index: 1;
    width: clamp(84px, 12vw, 118px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    /* Yuqorisi yorqin, pasti to'q — belgi katta, shuning uchun o'rtacha
       to'qlik yetadi va medalyon rangini yo'qotmaydi. */
    background: linear-gradient(150deg,
                var(--fc) 0%,
                var(--fcd, var(--fc)) 100%);
    box-shadow: 0 20px 34px -20px color-mix(in srgb, var(--fc) 85%, #10243D);
}
.hb-belgi::before {
    content: '';
    position: absolute; inset: -11px;
    border-radius: 50%;
    border: 2px dashed color-mix(in srgb, var(--fc) 55%, #fff);
}
@media (max-width: 720px) {
    .hb { grid-template-columns: 1fr; }
    .hb-belgi { display: none; }
}

/* --------------------------------------------------------------------------
   TOIFA FILTRI — dumaloq tugmalar
   -------------------------------------------------------------------------- */

.hf {
    display: flex; flex-wrap: wrap; gap: 0.55rem;
    margin: 0 0 1.6rem;
}
.hf-tug {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem; font-weight: 600;
    color: var(--ink-soft);
    background: #fff;
    border: 1.5px solid var(--paper-line);
    border-radius: 999px;
    transition: transform 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, box-shadow 0.2s ease;
}
.hf-tug:hover {
    transform: translateY(-2px);
    color: var(--ink);
    border-color: color-mix(in srgb, var(--fc, var(--accent)) 45%, var(--paper-line));
}
.hf-tug.faol {
    background: var(--fcd, var(--fc, var(--accent)));
    border-color: var(--fcd, var(--fc, var(--accent)));
    color: #fff;
    box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--fc, var(--accent)) 85%, #10243D);
}

/* --------------------------------------------------------------------------
   KARTOCHKA
   -------------------------------------------------------------------------- */

.hk {
    position: relative;
    display: flex; flex-direction: column;
    padding: 1.3rem 1.4rem 1.2rem 1.6rem;
    border-radius: 22px;
    background: #fff;
    background: linear-gradient(168deg,
                color-mix(in srgb, var(--fc) 12%, #fff) 0%,
                #fff 58%);
    border: 1.5px solid color-mix(in srgb, var(--fc) 20%, var(--paper-line));
    box-shadow: 0 14px 30px -26px rgba(16, 36, 61, 0.75);
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.3s ease, border-color 0.3s ease;
}

/* chap rang tasmasi */
.hk::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 7px;
    background: linear-gradient(180deg,
                var(--fc),
                color-mix(in srgb, var(--fc) 45%, #fff));
}

.hk:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--fc) 65%, #fff);
    box-shadow: 0 26px 42px -28px color-mix(in srgb, var(--fc) 75%, #10243D);
}

/* yuz — raqam va toifa yorlig'i */
.hk-yuz {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.8rem; margin-bottom: 0.9rem;
}
.hk-raqam {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 0.5rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--fc) 18%, #fff);
    color: color-mix(in srgb, var(--fc) 78%, #10243D);
    font-family: var(--display);
    font-weight: 700; font-size: 0.88rem;
}
.hk-tag {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fc) 19%, #fff);
    color: color-mix(in srgb, var(--fc) 82%, #10243D);
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    max-width: 62%;
    overflow: hidden; text-overflow: ellipsis;
}
.hk-tag i { font-size: 0.66rem; opacity: 0.8; }

/* tan — muqova + matn */
.hk-tan {
    display: flex; align-items: flex-start; gap: 1.05rem;
    margin-bottom: 1rem;
}
.hk-matn { min-width: 0; flex: 1; }

.hk-sarlavha {
    font-family: var(--display);
    font-size: 1.12rem; font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.01em;
    margin: 0 0 0.4rem;
    color: var(--ink);
    transition: color 0.25s ease;
}
.hk:hover .hk-sarlavha { color: var(--fc); }

/* butun kartochkani bosiladigan qiladi — tugmalar ustidan o'tmaydi */
.hk-link::after {
    content: '';
    position: absolute; inset: 0;
    z-index: 1;
}

.hk-meta {
    font-size: 0.78rem; font-weight: 600;
    line-height: 1.45;
    color: color-mix(in srgb, var(--fc) 42%, var(--ink-soft));
    margin: 0 0 0.5rem;
}
.hk-meta .ayr { opacity: 0.45; margin: 0 0.3rem; }

.hk-tavsif {
    font-size: 0.87rem; line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   MUQOVA — haqiqiy rasm yoki chizilgan lavha
   -------------------------------------------------------------------------- */

.hk-muqova {
    position: relative;
    flex: 0 0 auto;
    width: 78px;
    aspect-ratio: 5 / 7;
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--fc) 16%, #fff);
    box-shadow: 0 10px 20px -12px rgba(16, 36, 61, 0.55);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.3s ease;
}
.hk-muqova img {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
}
/* kitob gardishi — muqovaning chap qirrasidagi yorug' chiziq */
.hk-muqova::after {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 6px;
    background: linear-gradient(90deg,
                rgba(255, 255, 255, 0.42),
                rgba(255, 255, 255, 0));
}
.hk:hover .hk-muqova {
    transform: translateY(-3px) rotate(-1.5deg);
    box-shadow: 0 16px 26px -12px rgba(16, 36, 61, 0.6);
}

/* Chizilgan lavha — PDF ning birinchi beti mayda o'lchamda o'qilmaydi,
   shuning uchun muqovasi yo'q hujjatlarga belgili rangli lavha qo'yiladi. */
.hk-lavha {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0.35rem;
    color: #fff;
    text-align: center;
    padding: 0.4rem;
    /* Yuqorisi yorqin, pasti to'q: lavha rang-barang ko'rinadi, oq belgi
       esa to'q qismga tushib o'qiladigan bo'lib qoladi. */
    background: linear-gradient(150deg,
                var(--fc) 0%,
                var(--fcd, var(--fc)) 52%,
                color-mix(in srgb, var(--fcd, var(--fc)) 60%, #123252) 100%);
}
/* qog'oz chiziqlari — hujjat ekanini bildiradi */
.hk-lavha::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(180deg,
                rgba(255, 255, 255, 0.16) 0 1px,
                transparent 1px 9px);
    opacity: 0.5;
}
.hk-lavha i {
    position: relative;
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 4px rgba(10, 25, 45, 0.35));
}
/* yozuvi yo'q lavhada belgi markazda kattaroq turadi */
.hk-lavha--sof i { font-size: 1.95rem; }
.hk-lavha b {
    position: relative;
    font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.15;
    text-transform: uppercase;
    opacity: 0.95;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   OYOQ — harakat tugmalari
   -------------------------------------------------------------------------- */

.hk-oyoq {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1.5px dashed color-mix(in srgb, var(--fc) 22%, var(--paper-line));
}

.hk-btn {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.8rem; font-weight: 700;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.25s ease,
                background 0.25s ease, color 0.25s ease;
}
.hk-btn i { font-size: 0.78rem; }
.hk-btn:hover { transform: translateY(-2px); }

.hk-btn.asosiy {
    background: var(--fcd, var(--fc));
    color: #fff;
    box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--fc) 90%, #10243D);
}
.hk-btn.asosiy:hover {
    box-shadow: 0 14px 24px -12px color-mix(in srgb, var(--fc) 90%, #10243D);
}
.hk-btn.ikkil {
    background: color-mix(in srgb, var(--fc) 15%, #fff);
    color: color-mix(in srgb, var(--fc) 80%, #10243D);
    border: 1.5px solid color-mix(in srgb, var(--fc) 42%, #fff);
}
.hk-btn.ikkil:hover {
    background: color-mix(in srgb, var(--fc) 24%, #fff);
}
/* "Faqat o'qish" hujjat — yuklab olish o'rnidagi yorliq (tugma emas) */
.hk-btn.hk-qulf {
    cursor: default;
    border-style: dashed;
}
.hk-btn.hk-qulf:hover { transform: none; background: color-mix(in srgb, var(--fc) 15%, #fff); }

/* --------------------------------------------------------------------------
   QATOR KO'RINISHI — me'yoriy hujjatlar ro'yxati (bir qator = bitta hujjat)
   -------------------------------------------------------------------------- */

.hk--qator {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0 1.3rem;
    align-items: center;
    padding: 1.15rem 1.4rem 1.15rem 1.7rem;
}
.hk--qator .hk-yuz {
    grid-column: 2; grid-row: 1;
    justify-content: flex-start;
    margin-bottom: 0.5rem;
}
.hk--qator .hk-muqova {
    grid-column: 1; grid-row: 1 / span 2;
    width: 72px;
}
.hk--qator .hk-tan {
    grid-column: 2; grid-row: 2;
    margin-bottom: 0;
}
.hk--qator .hk-oyoq {
    grid-column: 3; grid-row: 1 / span 2;
    flex-direction: column; align-items: stretch;
    margin-top: 0; padding-top: 0;
    border-top: none;
}
.hk--qator .hk-btn { justify-content: center; }
.hk--qator .hk-sarlavha { font-size: 1.18rem; }
.hk--qator .hk-tavsif { -webkit-line-clamp: 2; max-width: 78ch; }

@media (max-width: 780px) {
    .hk--qator {
        grid-template-columns: auto 1fr;
        gap: 0.2rem 1rem;
    }
    .hk--qator .hk-oyoq {
        grid-column: 1 / -1; grid-row: 3;
        flex-direction: row; flex-wrap: wrap;
        margin-top: 0.9rem; padding-top: 0.9rem;
        border-top: 1.5px dashed color-mix(in srgb, var(--fc) 22%, var(--paper-line));
    }
}

/* --------------------------------------------------------------------------
   TO'R — kartochkalarning joylashishi (sahifalardagi avvalgi to'r saqlangan)
   -------------------------------------------------------------------------- */

.hk-tor {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1.1rem;
}
.hk-tor--qator {
    display: flex; flex-direction: column;
    gap: 0.85rem;
}

/* --------------------------------------------------------------------------
   BO'SH HOLAT
   -------------------------------------------------------------------------- */

.hk-bosh {
    max-width: 520px; margin: 2rem auto;
    padding: 3.4rem 2rem; text-align: center;
    border: 2px dashed var(--paper-line);
    border-radius: 24px;
    background: #fff;
}
.hk-bosh .ic {
    width: 72px; height: 72px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 0 1.1rem;
    font-size: 1.6rem; color: #fff;
    background: linear-gradient(150deg, var(--accent), var(--c4));
    box-shadow: 0 14px 26px -16px var(--accent);
}
.hk-bosh h3 {
    font-family: var(--display);
    font-size: 1.35rem; font-weight: 600;
    margin: 0 0 0.45rem;
}
.hk-bosh p { color: var(--ink-soft); margin: 0; font-size: 0.94rem; }

/* --------------------------------------------------------------------------
   CHIQISH ANIMATSIYASI
   -------------------------------------------------------------------------- */

@keyframes hk-kir {
    to { opacity: 1; transform: translateY(0); }
}
.hk, .hb, .hf {
    opacity: 0; transform: translateY(14px);
    animation: hk-kir 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hb { animation-delay: 0.04s; }
.hf { animation-delay: 0.1s; }
.hk:nth-child(1) { animation-delay: 0.14s; }
.hk:nth-child(2) { animation-delay: 0.19s; }
.hk:nth-child(3) { animation-delay: 0.24s; }
.hk:nth-child(4) { animation-delay: 0.29s; }
.hk:nth-child(5) { animation-delay: 0.34s; }
.hk:nth-child(6) { animation-delay: 0.39s; }
.hk:nth-child(n+7) { animation-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
    .hk, .hb, .hf { animation: none; opacity: 1; transform: none; }
    .hk:hover { transform: none; }
    .hk:hover .hk-muqova { transform: none; }
    .hk-btn:hover, .hf-tug:hover { transform: none; }
}

@media (max-width: 420px) {
    .hk-muqova { width: 64px; }
    .hk-tan { gap: 0.8rem; }
}