/* ==========================================================================
   Invisible Islam – Books library & book detail pages
   Works alongside the Tailwind CDN classes used across the site.
   ========================================================================== */

:root {
    --bk-ink: #1e1b4b;
    --bk-indigo: #4f46e5;
    --bk-indigo-soft: #eef2ff;
    --bk-gold: #c9a24a;
    --bk-emerald: #0f5132;
    --bk-radius: 1.25rem;
    --bk-shadow: 0 1px 2px rgb(15 23 42 / .06), 0 12px 32px -12px rgb(30 27 75 / .25);
}

/* ---------- Hero ---------------------------------------------------------- */
.bk-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
    color: #fff;
    background:
        radial-gradient(1200px 400px at 110% -20%, rgb(201 162 74 / .35), transparent 60%),
        radial-gradient(800px 380px at -10% 120%, rgb(16 185 129 / .25), transparent 60%),
        linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #4338ca 100%);
    box-shadow: var(--bk-shadow);
    isolation: isolate;
}
.bk-hero::after {               /* subtle geometric pattern */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .12;
    background-image:
        linear-gradient(30deg, #fff 12%, transparent 12.5%, transparent 87%, #fff 87.5%, #fff),
        linear-gradient(150deg, #fff 12%, transparent 12.5%, transparent 87%, #fff 87.5%, #fff),
        linear-gradient(30deg, #fff 12%, transparent 12.5%, transparent 87%, #fff 87.5%, #fff),
        linear-gradient(150deg, #fff 12%, transparent 12.5%, transparent 87%, #fff 87.5%, #fff),
        linear-gradient(60deg, rgb(255 255 255 / .6) 25%, transparent 25.5%, transparent 75%, rgb(255 255 255 / .6) 75%);
    background-size: 40px 70px;
    background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0;
    mask-image: linear-gradient(to left, #000, transparent 75%);
}
.bk-hero h1 { font-family: 'PT Serif', serif; letter-spacing: -.02em; }
.bk-hero .bk-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .85rem; border-radius: 999px;
    background: rgb(255 255 255 / .12);
    border: 1px solid rgb(255 255 255 / .2);
    backdrop-filter: blur(6px);
    font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}

/* ---------- 3D book cover ------------------------------------------------- */
.bk-cover {
    --tilt: 0deg;
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: .35rem .9rem .9rem .35rem;
    overflow: hidden;
    background: #e5e7eb;
    transform: perspective(1200px) rotateY(var(--tilt));
    transform-origin: left center;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s;
    box-shadow:
        inset 4px 0 8px -4px rgb(0 0 0 / .35),
        0 18px 30px -18px rgb(15 23 42 / .55),
        0 4px 10px -4px rgb(15 23 42 / .25);
}
.bk-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-cover::before {             /* spine highlight */
    content: "";
    position: absolute; inset: 0 auto 0 0; width: 14px; z-index: 2;
    background: linear-gradient(90deg, rgb(0 0 0 / .28), rgb(255 255 255 / .18) 40%, transparent);
    pointer-events: none;
}
.bk-cover::after {              /* glossy sheen */
    content: "";
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .22) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform .9s ease;
    pointer-events: none;
}
.bk-card:hover .bk-cover,
.bk-card:focus-visible .bk-cover { --tilt: -14deg; box-shadow: inset 4px 0 8px -4px rgb(0 0 0 / .35), 22px 26px 40px -20px rgb(15 23 42 / .6); }
.bk-card:hover .bk-cover::after { transform: translateX(120%); }

/* Placeholder cover when none uploaded */
.bk-cover--placeholder {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 1.25rem; text-align: center; color: #fdf6e3;
    background:
        radial-gradient(circle at 50% 30%, rgb(201 162 74 / .35), transparent 55%),
        linear-gradient(160deg, #0f5132, #052e1c);
}
.bk-cover--placeholder .bk-ornament {
    width: 46%; aspect-ratio: 1; margin-bottom: 1rem;
    border: 2px solid rgb(201 162 74 / .8); border-radius: 50%;
    display: grid; place-items: center; color: var(--bk-gold);
}
.bk-cover--placeholder .bk-ph-title { font-family: 'Noto Nastaliq Urdu', 'PT Serif', serif; font-size: 1.05rem; line-height: 2; }

/* ---------- Library grid card -------------------------------------------- */
.bk-card {
    display: block;
    border-radius: var(--bk-radius);
    outline: none;
    transition: transform .3s ease;
}
.bk-card:hover { transform: translateY(-4px); }
.bk-card:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--bk-indigo); }

.bk-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .65rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600;
    background: var(--bk-indigo-soft); color: var(--bk-indigo);
}
.bk-badge--gold { background: #fdf6e3; color: #8a6a1f; }

/* ---------- Series cards -------------------------------------------------- */
.bk-series {
    position: relative;
    display: flex; gap: 1.1rem; align-items: stretch;
    padding: 1rem;
    border-radius: var(--bk-radius);
    background: #fff;
    border: 1px solid #eef0f4;
    box-shadow: 0 1px 2px rgb(15 23 42 / .04);
    transition: box-shadow .3s, transform .3s, border-color .3s;
}
.bk-series:hover { transform: translateY(-2px); border-color: #c7d2fe; box-shadow: var(--bk-shadow); }
.bk-series .bk-cover { width: 92px; flex-shrink: 0; }
.bk-series:hover .bk-cover { --tilt: -10deg; }
.bk-series-number {
    font-family: 'PT Serif', serif;
    font-size: 2.6rem; line-height: 1; font-weight: 700;
    background: linear-gradient(135deg, var(--bk-indigo), var(--bk-gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Buttons ------------------------------------------------------- */
.bk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .65rem 1.15rem; border-radius: .85rem;
    font-weight: 600; font-size: .9rem; line-height: 1.2;
    transition: background-color .2s, color .2s, box-shadow .2s, transform .15s;
    white-space: nowrap;
}
.bk-btn:active { transform: scale(.97); }
.bk-btn svg { width: 1.1rem; height: 1.1rem; }
.bk-btn--primary { color: #fff; background: linear-gradient(135deg, #4f46e5, #4338ca); box-shadow: 0 6px 18px -8px rgb(79 70 229 / .8); }
.bk-btn--primary:hover { background: linear-gradient(135deg, #4338ca, #3730a3); box-shadow: 0 10px 24px -10px rgb(79 70 229 / .9); }
.bk-btn--ghost { color: #4338ca; background: var(--bk-indigo-soft); }
.bk-btn--ghost:hover { background: #e0e7ff; }
.bk-btn--light { color: #1e1b4b; background: #fff; }
.bk-btn--light:hover { background: #f5f3ff; }
.bk-btn--sm { padding: .45rem .8rem; font-size: .8rem; border-radius: .7rem; }

/* ---------- Entrance animation ------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .bk-reveal { animation: bk-rise .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
    @keyframes bk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
    .bk-cover, .bk-card, .bk-series { transition: none; }
    .bk-card:hover .bk-cover, .bk-series:hover .bk-cover { --tilt: 0deg; }
}

/* Urdu-friendly auto-direction titles */
.bk-title { font-family: 'Noto Nastaliq Urdu', 'PT Serif', serif; line-height: 2; unicode-bidi: plaintext; }