/*
Theme Name: Naat Academy Backup Theme
Theme URI: https://naatacademy.in
Author: Naat Academy
Author URI: https://naatacademy.in
Description: Backup theme for Naat Academy with cloned Kalam, Ashaar, and Durood frontend UI design and full backend function preservation.
Version: 1.0.0-backup
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: naat-academy-backup
Tags: islamic, poetry, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   Custom Styles Section (ported 1:1 from assets/css/style.css)
   ============================================================ */
html { font-size: 105%; scroll-behavior: smooth; }
body { background-color: #f8fafc; overflow-x: hidden; -webkit-tap-highlight-color: transparent; font-family: var(--naat-font-body, 'Bricolage Grotesque', system-ui), sans-serif; font-size: 1.02rem; letter-spacing: 0.005em; }

/* Premium editorial heading rhythm. Tailwind utility fonts on an element still
   win (e.g. .font-urdu), so this only sets defaults where none is specified. */
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.012em; }
.naat-title, .section-title, .card-title, .modal-title, .empty-title, .cta-heading, .feature-heading, .stat-number {
    font-family: var(--naat-font-display) !important;
    letter-spacing: -0.01em;
}
.naat-uititle, .page-title-ui, .filter-label, .nav-title { font-family: var(--naat-font-ui) !important; }
p, .naat-desc, .naat-label, .naat-meta-text, label, .filter, .tooltip, .search-result, .ai-content, .comment, .note,
button:not(.naat-display):not(.font-urdu), input, textarea, select {
    font-family: var(--naat-font-body) !important;
}

.font-urdu { font-family: 'Noto Nastaliq Urdu', serif !important; line-height: 2.2; }

/* ============================================================
   GLOBAL TYPOGRAPHY SYSTEM (Item 8 — Urdu font logic)
   Naat font ONLY for real Urdu text; clean Latin for everything else.
   Reusable classes — do not style per page.
   ============================================================ */
:root {
    /* Urdu content + metadata */
    --naat-font-urdu: 'NaatFont', 'Noto Nastaliq Urdu', serif;
    --naat-font-urdu-tax: 'Lateef', 'NaatFont', 'Noto Nastaliq Urdu', serif; /* taxonomy names */
    /* Premium editorial Latin system */
    --naat-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;     /* elegant headings */
    /* Single clean UI sans for English UI + Roman Urdu (perf: one family). */
    --naat-font-ui: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* modern UI sans */
    --naat-font-body: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* body / Roman / UI sans */
    --naat-font-latin: var(--naat-font-body); /* legacy alias kept */
    --naat-urdu-lh: 2.1;
    /* Global centered adaptive layout (1200–1440 range) + consistent gutters. */
    --naat-max: 1360px;
    --naat-gutter: clamp(1rem, 4vw, 2.5rem);

    /* ===== Unified premium design system (Apple-inspired ultra-clean white).
       Every page/archive/card references these so the whole interface is one
       coherent system with zero visual inconsistency. ===== */
    /* Brand + neutrals */
    --ds-accent: #047857;          /* emerald 700 */
    --ds-accent-strong: #065f46;   /* emerald 800 */
    --ds-accent-soft: #ecfdf5;     /* emerald 50 */
    --ds-accent-line: #a7f3d0;     /* emerald 200 */
    --ds-gold: #b45309;
    --ds-ink: #0b1220;             /* near-black headings */
    --ds-text: #1e293b;            /* body */
    --ds-muted: #64748b;           /* secondary */
    --ds-faint: #94a3b8;           /* labels */
    --ds-line: #eef1f5;            /* hairline borders */
    --ds-line-2: #e2e8f0;          /* input borders */
    --ds-surface: #ffffff;         /* cards */
    --ds-bg: #f8fafc;              /* page bg */
    --ds-bg-soft: #f1f5f9;         /* chips / wells */

    /* Radius scale (consistent rounding everywhere) */
    --ds-r-xs: 10px;
    --ds-r-sm: 12px;
    --ds-r-md: 16px;
    --ds-r-lg: 20px;
    --ds-r-xl: 24px;
    --ds-r-pill: 999px;

    /* Modern layered shadows (soft, diffuse, Apple-like) */
    --ds-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
    --ds-shadow-sm: 0 4px 18px -12px rgba(15,23,42,.14);
    --ds-shadow-md: 0 10px 30px -18px rgba(15,23,42,.22);
    --ds-shadow-lg: 0 22px 48px -24px rgba(15,23,42,.28);
    --ds-shadow-accent: 0 20px 44px -24px color-mix(in srgb, var(--ds-accent) 42%, rgba(15,23,42,.3));

    /* Spacing rhythm */
    --ds-gap: 1.5rem;
    --ds-gap-sm: 1rem;
    --ds-pad-card: 22px;
    --ds-section-y: clamp(2.5rem, 6vw, 4.5rem);

    /* Motion */
    --ds-ease: cubic-bezier(.22,1,.36,1);
    --ds-t: .28s;
}

/* ============================================================
   Global layout normalization — centre all primary content
   wrappers to a consistent max width with consistent gutters.
   Backward compatible: only caps outliers, keeps responsiveness.
   ============================================================ */
.naat-maj-wrap,
.naat-ash-wrap,
.naat-ash-landing .naat-ash-wrap,
.naat-aruuz-wrap,
.naat-wbx-wrap {
    max-width: var(--naat-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--naat-gutter);
    padding-right: var(--naat-gutter);
}
/* Tailwind max-w-7xl (1280px) primary containers -> unified max. */
.container.mx-auto.max-w-7xl,
.site-content.max-w-7xl,
main.max-w-7xl,
#content.max-w-7xl { max-width: var(--naat-max); }
/* Single Kalaam wide container -> unified max. */
.single-kalaam main.max-w-\[1400px\],
main.max-w-\[1400px\] { max-width: var(--naat-max); }

/* ---- Premium editorial heading + body utilities ---- */
.naat-display { font-family: var(--naat-font-display) !important; font-weight: 400; letter-spacing: -0.01em; line-height: 1.12; }
.naat-ui, .naat-uih { font-family: var(--naat-font-ui) !important; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
.naat-body { font-family: var(--naat-font-body) !important; }
/* Taxonomy / metadata Urdu names use Lateef for clear content↔metadata distinction. */
.naat-tax, .naat-tax-name { font-family: var(--naat-font-urdu-tax) !important; line-height: 1.5; unicode-bidi: plaintext; }

/* Urdu metadata VALUES (Master Poet, Writer, Origin, Book) — Lateef only on the
   detected-Urdu text; inherits size, color, weight, spacing from its container so
   the existing hierarchy is preserved. Applies to the value, never labels/icons. */
.naat-meta-ur {
    font-family: var(--naat-font-urdu-tax) !important;
    font-style: normal; /* override parent italic for Nastaliq/Lateef legibility */
    line-height: 1.45;
    unicode-bidi: plaintext;
    direction: rtl;
}

/* Urdu utility classes: apply Naat font + RTL-friendly line height. */
.naat-ur, .ur, [lang="ur"], [dir="rtl"].naat-ur {
    font-family: var(--naat-font-urdu) !important;
    line-height: var(--naat-urdu-lh);
    direction: rtl;
    unicode-bidi: plaintext;
}

/* Latin utility class: force clean Latin font (English / Roman Urdu). */
.naat-latin, .latin, .roman {
    font-family: var(--naat-font-latin) !important;
    direction: ltr;
}

/* Never use the Naat font for these, even inside Urdu containers. */
.naat-ur code, .naat-ur pre, .naat-ur kbd, .naat-ur samp,
.naat-ur .latin, .naat-ur .roman, .naat-ur .naat-num,
code, pre, kbd, samp, .naat-num, .naat-meta, .naat-slug,
input, textarea, select, button.naat-latin {
    font-family: var(--naat-font-latin) !important;
    direction: ltr;
    unicode-bidi: normal;
}

/* Auto-detected Urdu runs wrapped by the server filter. */
span.naat-ur-auto {
    font-family: var(--naat-font-urdu) !important;
    unicode-bidi: plaintext;
}

/* Make the legacy .font-urdu class use the Naat font globally (was single-kalaam only). */
.font-urdu {
    font-family: var(--naat-font-urdu) !important;
}

/* ============================================================
   Editorial heading mapping (non-invasive) — maps existing
   structural section/hero/page titles to the premium fonts
   without editing every template. Urdu titles keep NaatFont.
   ============================================================ */
/* Homepage & archive section titles -> elegant DM Serif Display. */
.section-title-bar h2:not(.font-urdu):not(.naat-ur),
.naat-section h2:not(.font-urdu):not(.naat-ur) {
    font-family: var(--naat-font-display) !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em;
}
/* Hero / page big titles. */
.naat-hero h1:not(.font-urdu):not(.naat-ur),
.page-hero h1:not(.font-urdu):not(.naat-ur),
.entry-title:not(.font-urdu):not(.naat-ur) {
    font-family: var(--naat-font-display) !important;
    font-weight: 400 !important;
}
/* Statistics numbers -> Bricolage Grotesque (modern, tabular feel). */
.naat-stat, .stat-number, [data-stat] { font-family: var(--naat-font-ui) !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.section-title-bar { position: relative; }

.typo-card { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; border-radius: 1rem; }
.shine-edge { position: relative; overflow: hidden; }
.shine-edge::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(251, 191, 36, 0.5) 50%, rgba(255,255,255,0) 100%); opacity: 0.8; }

#story-modal { transition: opacity 0.3s ease, visibility 0.3s ease; }
#story-modal.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#story-modal:not(.hidden) { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-content { transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
#story-modal:not(.hidden) .modal-content { transform: scale(1); }

.story-progress-bar { height: 2px; background-color: rgba(255, 255, 255, 0.3); border-radius: 2px; overflow: hidden; flex: 1; }
.story-progress-fill { height: 100%; background-color: white; width: 0%; transition: width 0.1s linear; }
.story-progress-fill.active { width: 100%; }

.reveal-on-scroll { opacity: 0; transform: translateY(15px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* Hero Animation Styles */
.hero-perspective { perspective: 1000px; }
.hero-rotate { transform: rotateY(-12deg) rotateX(8deg); }
@keyframes slideDownSlow {
    0% { transform: translateY(-5%); }
    50% { transform: translateY(5%); }
    100% { transform: translateY(-5%); }
}
@keyframes slideUpSlow {
    0% { transform: translateY(5%); }
    50% { transform: translateY(-5%); }
    100% { transform: translateY(5%); }
}
.animate-slide-down-slow { animation: slideDownSlow 20s ease-in-out infinite; }
.animate-slide-up-slow { animation: slideUpSlow 20s ease-in-out infinite; }

@keyframes textGlow {
    0%, 100% { text-shadow: 0 0 10px rgba(52, 211, 153, 0.4), 0 0 20px rgba(52, 211, 153, 0.2); }
    50% { text-shadow: 0 0 20px rgba(52, 211, 153, 0.7), 0 0 30px rgba(52, 211, 153, 0.5); }
}
.animate-text-glow { animation: textGlow 2.5s ease-in-out infinite; }

/* Custom Coverflow Pagination & Slider Overflow */
.mobile-coverflow-slider {
    overflow: visible !important;
}
.mobile-coverflow-slider .swiper-pagination {
    bottom: 0px !important;
}
.mobile-coverflow-slider .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
    opacity: 1;
    margin: 0 6px !important;
    transition: all 0.3s ease;
}
.mobile-coverflow-slider .swiper-pagination-bullet-active {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.9);
    transform: scale(1.2);
}

@media (min-width: 1024px) {
    .swiper-3d {
        perspective: 1200px !important;
    }
}

/* ============================================================
   Single Kalaam page styles (ported from single_kalaam.html)
   ============================================================ */
@font-face {
    font-family: 'NaatFont';
    src: url('https://res.cloudinary.com/awescreative/raw/upload/v1749150996/Awes/naatfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body.single-kalaam {
    background-color: #fafaf9;
    background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23d9a60e" fill-opacity="0.03"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

body.single-kalaam .font-urdu {
    font-family: 'NaatFont', serif !important;
    line-height: 1.6;
    word-spacing: normal;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.verse-block {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.75rem 0.5rem;
    border-radius: 0.75rem;
}
.verse-block:hover {
    background-color: #ffffff;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
    transform: scale(1.01);
}
.verse-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 3px;
    background: linear-gradient(to bottom, #10b981, #047857);
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.verse-block:hover::before { opacity: 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Premium Mega Menu (Item 1) — desktop
   ============================================================ */
.naat-mm2 { width: 880px; }
.naat-mm2-inner {
	background: rgba(255,255,255,0.98);
	backdrop-filter: blur(24px);
	border: 1px solid rgba(6,78,59,0.10);
	border-radius: 24px;
	box-shadow: 0 30px 60px -15px rgba(0,0,0,0.3), 0 0 0 1px #d1fae5;
	padding: 22px;
	color: #1e293b;
}
.naat-mm2-search { margin-bottom: 18px; }
.naat-mm2-search form { display: flex; align-items: center; gap: 8px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; padding: 6px 8px 6px 16px; }
.naat-mm2-search .bi-search { color: #047857; }
.naat-mm2-search input[type=search] { flex: 1; border: none; background: transparent; outline: none; font-size: 14px; color: #0f172a; }
.naat-mm2-search button { background: #047857; color: #fff; border: none; border-radius: 999px; padding: 8px 18px; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .15s; }
.naat-mm2-search button:hover { background: #065f46; }

.naat-mm2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 22px; }
.naat-mm2-sec { min-width: 0; }
.naat-mm2-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #047857; margin: 0 0 10px; }
.naat-mm2-h .bi { font-size: 13px; }
.naat-mm2-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.naat-mm2-list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; border-radius: 9px; text-decoration: none; color: #1e293b; font-size: 13px; transition: background .14s, transform .14s, color .14s; }
.naat-mm2-list a:hover { background: rgba(4,120,87,.08); color: #047857; transform: translateX(3px); }
.naat-mm2-list a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.naat-mm2-list a > span.naat-ur { font-size: 15px; }
.naat-mm2-list em { font-style: normal; font-size: 11px; color: #94a3b8; flex-shrink: 0; }
.naat-mm2-sub { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.naat-mm2-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid #f1f5f9; display: flex; justify-content: flex-end; }
.naat-mm2-cta { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg,#047857,#065f46); color: #fff; font-weight: 700; font-size: 13px; padding: 10px 20px; border-radius: 999px; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.naat-mm2-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(4,120,87,.5); }

@media (prefers-reduced-motion: reduce) {
	.naat-mm2-list a, .naat-mm2-cta { transition: none; }
}

/* ============================================================
   Single Kalam — Premium Details section (Item 3)
   ============================================================ */
.naat-kdetails { margin-top: 1.25rem; }
.naat-kd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.naat-kd-item {
    display: flex; flex-direction: column; gap: 3px;
    background: linear-gradient(180deg,#f8fafc,#f1f5f9);
    border: 1px solid #eef2f7; border-radius: 16px;
    padding: 12px 14px; position: relative; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.naat-kd-item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(4,120,87,.35); border-color: #a7f3d0; }
.naat-kd-ico { position: absolute; top: 12px; right: 12px; color: #10b981; font-size: 14px; opacity: .55; }
.naat-kd-label { font-family: var(--naat-font-ui); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
.naat-kd-value { font-size: 16px; font-weight: 600; color: #0f2a22; line-height: 1.5; }
.naat-kd-value.font-urdu { font-size: 19px; line-height: 1.7; }
.naat-kd-value.naat-tax { font-family: var(--naat-font-urdu-tax); font-size: 19px; }

/* Premium Qafiya chips */
.naat-kd-qafiya { margin-top: 20px; padding: 18px; border-radius: 18px; background: radial-gradient(120% 120% at 0% 0%, #fffbeb 0%, #fef9f0 40%, #ffffff 100%); border: 1px solid #fde68a; }
.naat-kd-qhead { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.naat-kd-qcount { margin-left: auto; background: #d97706; color: #fff; font-size: 12px; font-weight: 700; min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0 8px; }
.naat-kd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.naat-kd-chip {
    display: inline-flex; align-items: center; padding: 7px 16px;
    background: #fff; border: 1px solid #fcd34d; color: #92400e;
    border-radius: 999px; font-size: 18px; line-height: 1.4;
    box-shadow: 0 2px 6px -3px rgba(217,119,6,.25);
    transition: transform .18s, background .18s, color .18s, box-shadow .18s;
}
.naat-kd-chip:hover { transform: translateY(-2px) scale(1.04); background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; box-shadow: 0 8px 18px -6px rgba(217,119,6,.5); }

/* Taxonomy chip rows */
.naat-kd-taxes { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.naat-kd-taxrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.naat-kd-taxlabel { font-family: var(--naat-font-ui); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; min-width: 84px; }
.naat-kd-taxchips { display: flex; flex-wrap: wrap; gap: 6px; }
.naat-kd-tax {
    display: inline-flex; padding: 5px 14px; border-radius: 999px;
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857;
    font-size: 16px; text-decoration: none; transition: background .15s, color .15s, transform .15s;
}
.naat-kd-tax:hover { background: #047857; color: #fff; transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
    .naat-kd-item, .naat-kd-chip, .naat-kd-tax { transition: none; }
}

/* ============================================================
   Urdu Kalam — compact Nastaliq composition (UI improvement 1)
   Reduce excessive vertical spacing BETWEEN Urdu verses to a
   consistent 0.20rem, preserving RTL flow, readability and the
   line-height suitable for Urdu poetry. Scoped to #urdu only so
   no other section/layout/component is affected.
   ============================================================ */
#urdu .lyrics-container { padding-top: 0.25rem; padding-bottom: 0.25rem; }

/* Consistent 0.20rem gap between stanza blocks + separators. */
#urdu .lyrics-container > * + * { margin-top: 0.20rem !important; }

/* Tighten the decorative sher separator's own vertical margin. */
#urdu .naat-sher-sep { margin-top: 0.20rem !important; margin-bottom: 0.20rem !important; }

/* Trim the block padding/offsets that inflated the gap, while keeping
   Matla / Maqta cards visually balanced. */
#urdu .verse-block { padding-top: 0.4rem; padding-bottom: 0.4rem; }
#urdu .verse-block.bg-emerald-100\/40 { padding-top: 1rem; padding-bottom: 0.75rem; margin-top: 0.5rem; }
#urdu .verse-block.bg-amber-50\/40 { padding-top: 0.85rem; padding-bottom: 0.6rem; margin-top: 0.5rem !important; }

/* Keep the two misras of a single sher readable (intra-sher line rhythm),
   but a touch tighter than the default gap-3. */
#urdu .verse-block .flex.flex-col { gap: 0.55rem; }
#urdu .verse-block .font-urdu { line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
	#urdu .verse-block { transition: none; }
}

/* ============================================================
   Global letter-spacing reset
   Remove ALL letter-spacing site-wide. Neutralizes every source:
   explicit letter-spacing declarations AND Tailwind tracking-*
   utilities (tracking-tight/normal/wide/wider/widest). Applied
   last with high specificity so no markup needs to change.
   ============================================================ */
*,
*::before,
*::after {
	letter-spacing: 0 !important;
}

/* ============================================================
   Writers & Books — Premium White, Apple-inspired homepage section.
   ============================================================ */
.naat-wb { margin-bottom: 56px; }
.naat-wb-bar {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 20px; margin-bottom: 28px;
}
.naat-wb-eyebrow {
	display: inline-block; font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif);
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0;
	color: #059669; margin-bottom: 8px;
}
.naat-wb-h2 {
	font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif);
	font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: #0b1220; line-height: 1.05;
}
.naat-wb-sub { font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif); font-size: 15px; color: #64748b; margin-top: 8px; max-width: 46ch; line-height: 1.5; }
.naat-wb-viewall {
	font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif);
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
	font-size: 14px; font-weight: 700; color: #0f766e; text-decoration: none;
	padding: 10px 18px; border-radius: 999px; background: #f0fdfa;
	border: 1px solid #cbfaf0; transition: background .2s, transform .2s, box-shadow .2s;
}
.naat-wb-viewall:hover { background: #ccfbf1; transform: translateX(2px); box-shadow: 0 8px 20px -12px rgba(13,148,136,.5); }

/* 2 cols mobile, 4 cols desktop — each cell holds one self-contained .naat-bcard. */
.naat-wb-grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 24px;
	align-items: stretch;
}
@media (min-width: 768px)  { .naat-wb-grid { column-gap: 24px; row-gap: 28px; } }
@media (min-width: 1000px) { .naat-wb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.naat-wb-grid .naat-bcard { --nbc-w: 100%; }
.naat-wb-grid .naat-bcard__frame { width: 60%; max-width: 60%; margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: reduce) {
	.naat-wb-viewall { transition: none; }
}

/* ============================================================
   GLOBAL BOOK CARD DESIGN SYSTEM (.naat-bcard)  — fresh design
   ONE canonical card reused EVERYWHERE a book appears.
   Anatomy: pastel accent card → poster artwork (thin frame) →
   "Book Name | Writer Name" heading → white footer bar with the
   writer (Urdu + avatar) and views + Urdu book name.
   Size variants xs / sm / md / lg. Flat, stable, premium.
   ==============================.naat-bcard {
	--nbc-accent: #16a34a; --nbc-w: 240px;
	position: relative; display: flex; flex-direction: column; width: 100%;
	padding: 14px 14px 16px; border-radius: 24px; isolation: isolate;
	background: #ffffff;
	border: 1px solid color-mix(in srgb, var(--nbc-accent) 12%, #e2e8f0);
	box-shadow: 0 8px 30px -16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.02);
	transition: transform .4s cubic-bezier(.25, 1, .5, 1), box-shadow .4s cubic-bezier(.25, 1, .5, 1), border-color .4s ease;
}
.naat-bcard::before {
	content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 5px; border-radius: 0 0 8px 8px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--nbc-accent) 20%, transparent), var(--nbc-accent) 50%, color-mix(in srgb, var(--nbc-accent) 20%, transparent));
	opacity: 0.95;
	transition: height 0.3s ease, left 0.3s ease, right 0.3s ease;
}
.naat-bcard:hover { 
	transform: translateY(-6px); 
	border-color: color-mix(in srgb, var(--nbc-accent) 35%, #cbd5e1); 
	box-shadow: 0 24px 48px -18px color-mix(in srgb, var(--nbc-accent) 25%, rgba(15, 23, 42, 0.16)), 0 8px 16px -8px color-mix(in srgb, var(--nbc-accent) 15%, transparent); 
}
.naat-bcard:hover::before {
	height: 6px;
	left: 18px;
	right: 18px;
}
.naat-bcard__link { position: absolute; inset: 0; z-index: 30; border-radius: inherit; }

/* Sizes drive the overall card width where it is placed in a fixed slot. */
.naat-bcard--xs { --nbc-w: 150px; padding: 9px 9px 10px; border-radius: 18px; }
.naat-bcard--sm { --nbc-w: 190px; padding: 11px 11px 12px; border-radius: 20px; }
.naat-bcard--md { --nbc-w: 240px; }
.naat-bcard--lg { --nbc-w: 300px; padding: 16px 16px 18px; }

/* ---- Poster artwork (portrait) with a floating physical cover frame ---- */
.naat-bcard__frame { 
	position: relative; display: block; border-radius: 16px; overflow: hidden;
	background: #fff; border: 1px solid rgba(15, 23, 42, 0.05);
	box-shadow: 0 8px 24px -10px rgba(15,23,42,.22), 0 1px 2px rgba(15,23,42,.05), inset 0 0 0 1px rgba(255,255,255,.3);
	transition: transform 0.4s cubic-bezier(.25, 1, .5, 1), box-shadow 0.4s ease;
	z-index: 2;
}
.naat-bcard--xs .naat-bcard__frame { border-radius: 11px; }
.naat-bcard:hover .naat-bcard__frame {
	transform: translateY(-2px) scale(1.01);
	box-shadow: 0 16px 36px -12px rgba(15,23,42,.35), 0 4px 10px -4px rgba(15,23,42,.12), inset 0 0 0 1px rgba(255,255,255,.4);
}

.naat-bcard__poster { 
	position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; 
	background: linear-gradient(135deg, var(--nbc-accent), color-mix(in srgb, var(--nbc-accent) 60%, #000 26%)); 
}
/* Realistic 3D book cover crease/spine overlay */
.naat-bcard__poster::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, 
		rgba(0, 0, 0, 0.35) 0%, 
		rgba(0, 0, 0, 0.05) 1.5%, 
		rgba(255, 255, 255, 0.15) 3%, 
		rgba(0, 0, 0, 0.08) 4.5%, 
		rgba(0, 0, 0, 0.02) 8%, 
		transparent 15%, 
		rgba(255, 255, 255, 0.08) 92%, 
		rgba(0, 0, 0, 0.22) 100%
	);
	pointer-events: none;
	z-index: 5;
}

.naat-bcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .6s cubic-bezier(.25, 1, .5, 1); }
.naat-bcard:hover .naat-bcard__img { transform: scale(1.05); }

.naat-bcard__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 12px; text-align: center; z-index: 4; }
.naat-bcard__ph-ur { font-family: "Lateef", "Noto Nastaliq Urdu", "NaatFont", serif; font-size: 1.35rem; font-weight: 700; color: #fff; line-height: 1.6; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.naat-bcard__ph-initial { font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif); font-size: 2.6rem; font-weight: 800; color: rgba(255,255,255,.96); text-shadow: 0 1px 5px rgba(0,0,0,.3); }
.naat-bcard__ph-cat { font-family: var(--naat-font-ui, sans-serif); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85); border-top: 1px solid rgba(255,255,255,.3); padding-top: 7px; }
.naat-bcard__badge { position: absolute; top: 8px; right: 8px; z-index: 6; width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; color: #f59e0b; background: rgba(255,255,255,.95); border: 1px solid #fde68a; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
/* ---- Writer Name in English ---- */
.naat-bcard__writer-en {
	font-family: var(--naat-font-ui, sans-serif);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #64748b;
	text-align: center;
	margin-top: 14px;
	margin-bottom: 2px;
	transition: color 0.3s ease;
}
.naat-bcard:hover .naat-bcard__writer-en {
	color: var(--nbc-accent);
}

/* ---- Book Title in English ---- */
.naat-bcard__heading { 
	font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif); font-weight: 700; letter-spacing: -.01em; font-size: 14.5px; line-height: 1.4; color: #0f172a; text-align: center; margin: 4px 4px 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	transition: color 0.3s ease;
}
.naat-bcard--xs .naat-bcard__heading { font-size: 11.5px; margin: 9px 2px 8px; }
.naat-bcard--lg .naat-bcard__heading { font-size: 16.5px; }
.naat-bcard:hover .naat-bcard__heading { color: var(--nbc-accent); }

/* ---- Integrated footer bar: writer (top) + views/book (bottom) ---- */
.naat-bcard__footer { 
	background: color-mix(in srgb, var(--nbc-accent) 3%, #f8fafc); 
	border: none;
	border-radius: 16px; padding: 12px 14px; 
	display: flex; flex-direction: column; gap: 8px; 
	transition: background 0.3s ease;
}
.naat-bcard--xs .naat-bcard__footer { border-radius: 12px; padding: 8px 10px; gap: 5px; }
.naat-bcard:hover .naat-bcard__footer { background: color-mix(in srgb, var(--nbc-accent) 6%, #f1f5f9); }

.naat-bcard__footer-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.naat-bcard__writer-ur { font-family: "Lateef", "NaatFont", "Noto Nastaliq Urdu", serif; font-size: 1.02rem; font-weight: 700; color: #0f172a; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.naat-bcard__av { 
	position: relative; z-index: 31; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; text-decoration: none;
	background: linear-gradient(135deg, var(--nbc-accent), color-mix(in srgb, var(--nbc-accent) 70%, #000 14%));
	box-shadow: 0 0 0 2px #fff, 0 4px 10px -4px rgba(15, 23, 42, 0.25);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.naat-bcard--xs .naat-bcard__av { width: 28px; height: 28px; }
.naat-bcard__av-img { width: 100%; height: 100%; object-fit: cover; }
.naat-bcard__av-icon svg { width: 20px; height: 20px; }
.naat-bcard--xs .naat-bcard__av-icon svg { width: 14px; height: 14px; }
.naat-bcard__av-link:hover { filter: brightness(1.05); }
.naat-bcard__av:hover {
	transform: scale(1.1) rotate(5deg);
	box-shadow: 0 0 0 2px #fff, 0 8px 16px -6px color-mix(in srgb, var(--nbc-accent) 60%, #0f172a);
}

.naat-bcard__footer-bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.naat-bcard__views { font-family: var(--naat-font-ui, sans-serif); font-size: 11px; font-weight: 600; color: #94a3b8; display: inline-flex; align-items: center; gap: 4px; }
.naat-bcard__views i { font-size: 12px; }
.naat-bcard__book-ur { font-family: "Lateef", "NaatFont", serif; font-size: .92rem; font-weight: 600; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Bare mode: poster artwork only (compact list rows) ---- */
.naat-bcard-bare { display: inline-block; width: var(--nbc-w, 120px); vertical-align: top; }
.naat-bcard-bare .naat-bcard__poster { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--nbc-accent) 22%, #e5e7eb); box-shadow: 0 6px 16px -10px rgba(15,23,42,.4); }
.naat-bcard-bare.naat-bcard--xs { --nbc-w: 54px; }
.naat-bcard-bare.naat-bcard--sm { --nbc-w: 96px; }
.naat-bcard-bare.naat-bcard--md { --nbc-w: 130px; }
.naat-bcard-bare.naat-bcard--lg { --nbc-w: 168px; }
@media (prefers-reduced-motion: reduce) {
	.naat-bcard, .naat-bcard__img, .naat-bcard__frame, .naat-bcard__av { transition: none !important; }
	.naat-bcard:hover { transform: none !important; }
	.naat-bcard:hover .naat-bcard__img { transform: none !important; }
	.naat-bcard:hover .naat-bcard__frame { transform: none !important; }
	.naat-bcard__av:hover { transform: none !important; }
}

/* ============================================================
   Hero — premium logo text + white search box.
   ============================================================ */
.naat-hero-title {
	background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 55%, #dcfce7 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	text-shadow: 0 0 1px rgba(255,255,255,.15);
	filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)) drop-shadow(0 0 22px rgba(61,220,132,.30));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.naat-hero-title { color: #ffffff; -webkit-text-fill-color: #ffffff; }
}

/* White premium pill search box */
.naat-hero-search {
	display: flex; align-items: center; gap: 8px;
	background: #ffffff; border: 1px solid rgba(255,255,255,.9);
	border-radius: 999px; padding: 6px 6px 6px 22px;
	box-shadow: 0 18px 44px -20px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.12);
	transition: box-shadow .25s ease, transform .25s ease;
}
.naat-hero-search:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 24px 56px -22px rgba(0,0,0,.5), 0 0 0 4px rgba(61,220,132,.30);
}
.naat-hero-search-icon { color: #10b981; font-size: 18px; flex: 0 0 auto; }
.naat-hero-search-input {
	flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
	color: #0f172a; font-family: var(--naat-font-body, "Bricolage Grotesque", system-ui, sans-serif);
	font-size: 15px; padding: 11px 4px; text-align: left;
}
.naat-hero-search-input::placeholder { color: #94a3b8; }
.naat-hero-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.naat-hero-search-btn {
	flex: 0 0 auto; width: 46px; height: 46px; border-radius: 999px; border: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px;
	background: linear-gradient(135deg, #10b981, #047857);
	box-shadow: 0 8px 18px -8px rgba(4,120,87,.7);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.naat-hero-search-btn:hover { filter: brightness(1.06); box-shadow: 0 12px 24px -10px rgba(4,120,87,.8); }
.naat-hero-search-btn:active { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) {
	.naat-hero-search, .naat-hero-search-btn { transition: none; }
}

/* ============================================================
   Tasawwuf page — Premium White editorial.
   ============================================================ */
.naat-tas-main { padding-top: 96px; }
.naat-tas-content { max-width: 880px; margin: 0 auto; padding: 0 16px 40px; }
.naat-tas-content .alignwide { width: min(1100px, 94vw); max-width: none; margin-left: calc(50% - min(1100px, 94vw) / 2); }
.naat-tas-content .alignfull { width: 94vw; max-width: none; margin-left: calc(50% - 47vw); }
.naat-tas-content > .wp-block-group { margin-bottom: 8px; }
.naat-tas-hero { padding: 56px 20px 30px; text-align: center; }
.naat-tas-eyebrow {
	font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif);
	font-size: 13px; font-weight: 700; text-transform: uppercase; color: #059669; margin-bottom: 10px;
}
.naat-tas-title {
	font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif);
	font-size: clamp(40px, 7vw, 64px); font-weight: 800; color: #0b1220; line-height: 1.02;
}
.naat-tas-lead { font-size: clamp(16px, 2.2vw, 19px); color: #475569; line-height: 1.7; margin-top: 18px; }
.naat-tas-section { padding: 18px 20px; }
.naat-tas-h2 {
	font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif);
	font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; color: #0b1220; margin-bottom: 14px;
}
.naat-tas-section p, .naat-tas-list li { font-size: 16.5px; color: #334155; line-height: 1.8; }
.naat-tas-list { padding-left: 0; list-style: none; }
.naat-tas-list li { position: relative; padding: 8px 0 8px 30px; border-bottom: 1px solid #f1f5f9; }
.naat-tas-list li::before {
	content: "\F26A"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 9px;
	color: #10b981; font-size: 16px;
}
.naat-tas-cards { padding: 26px 20px; }
.naat-tas-cols { gap: 20px; }
.naat-tas-cols .wp-block-column {
	background: #ffffff; border: 1px solid #f2f2f2; border-radius: 22px; padding: 26px 24px;
	box-shadow: 0 12px 30px -22px rgba(15,23,42,.25); transition: transform .25s ease, box-shadow .25s ease;
}
.naat-tas-cols .wp-block-column:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -24px rgba(5,150,105,.35); }
.naat-tas-card-t {
	font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif);
	font-size: 20px; font-weight: 800; color: #047857; margin-bottom: 8px;
}
.naat-tas-cards .wp-block-column p { font-size: 15px; color: #475569; line-height: 1.7; }
.naat-tas-cta {
	margin: 36px auto; padding: 48px 28px; text-align: center; border-radius: 24px;
	background: linear-gradient(160deg, #ecfdf5, #f0fdfa); border: 1px solid #d1fae5;
}
.naat-tas-cta-t {
	font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif);
	font-size: clamp(24px, 4vw, 34px); font-weight: 800; color: #0b1220;
}
.naat-tas-cta p { font-size: 16px; color: #475569; margin: 12px auto 22px; max-width: 52ch; }
.naat-tas-btn .wp-element-button {
	background: linear-gradient(135deg, #10b981, #0d9488); color: #fff; border: none;
	border-radius: 999px; padding: 13px 28px; font-weight: 700; font-size: 15px;
	box-shadow: 0 12px 26px -14px rgba(13,148,136,.7); transition: transform .2s, box-shadow .2s;
}
.naat-tas-btn .wp-element-button:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(13,148,136,.8); }
.naat-tas-btn.is-ghost .wp-element-button {
	background: #ffffff; color: #047857; border: 1px solid #a7f3d0; box-shadow: 0 8px 20px -14px rgba(5,150,105,.5);
}
@media (prefers-reduced-motion: reduce) {
	.naat-tas-cols .wp-block-column, .naat-tas-btn .wp-element-button { transition: none; }
}

/* ============================================================
   Single Kalam — premium Share / Copy / WhatsApp action buttons.
   ============================================================ */
.naat-kshare-views {
	display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
	color: #64748b; background: #f8fafc; border: 1px solid #eef2f6; padding: 8px 14px; border-radius: 999px;
}
.naat-kshare-views i { color: #94a3b8; }
.naat-kbtn {
	display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
	font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif);
	font-size: 13px; font-weight: 700; color: #fff; text-decoration: none;
	border: none; padding: 9px 18px; border-radius: 999px;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.naat-kbtn i { font-size: 15px; }
.naat-kbtn:hover { transform: translateY(-2px); }
.naat-kbtn:active { transform: translateY(0) scale(.97); }
.naat-kbtn-share { background: linear-gradient(135deg, #38bdf8, #2563eb); box-shadow: 0 10px 22px -12px rgba(37,99,235,.7); }
.naat-kbtn-share:hover { box-shadow: 0 16px 30px -14px rgba(37,99,235,.8); }
.naat-kbtn-copy { background: linear-gradient(135deg, #34d399, #0d9488); box-shadow: 0 10px 22px -12px rgba(13,148,136,.7); }
.naat-kbtn-copy:hover { box-shadow: 0 16px 30px -14px rgba(13,148,136,.8); }
.naat-kbtn-copy.is-copied { background: linear-gradient(135deg, #10b981, #059669); }
.naat-kbtn-wa { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 10px 22px -12px rgba(22,163,74,.65); }
.naat-kbtn-wa:hover { box-shadow: 0 16px 30px -14px rgba(22,163,74,.8); }
@media (max-width: 480px) {
	.naat-kbtn { padding: 9px 15px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.naat-kbtn { transition: none; }
}

/* ============================================================
   Latest Kalam — themed cards (matches latest_kalam.html design).
   ============================================================ */
.kalam-card {
	border-radius: 20px; overflow: hidden; position: relative; height: 100%;
	background-color: #f8fafc; border-top: 4px solid; text-decoration: none;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kalam-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 30px -12px rgba(15,23,42,.18), 0 6px 12px -6px rgba(15,23,42,.08);
}
.font-sans-eng { font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif); direction: ltr; }
/* Urdu couplet uses NaatFont ONLY. */
.kalam-card .naat-kalam-urdu,
.kalam-card .naat-kalam-urdu p { font-family: "NaatFont" !important; line-height: 2; }
/* Urdu writer name + book line use Lateef ONLY. */
.kalam-card .naat-writer-name,
.kalam-card p.naat-writer-name,
.kalam-card .naat-writer-book,
.kalam-card p.naat-writer-book { font-family: "Lateef", serif !important; line-height: 1.4; }
/* Minimal writer icon (no circular background). */
.kalam-card .naat-kalam-icon { line-height: 0; }
.kalam-card .naat-kalam-icon svg,
.kalam-card .naat-kalam-icon img { width: 16px; height: 16px; }
.kalam-card .naat-writer-book i { font-size: 12px; }

/* Roman meta (writer + book) — tiny, elegant, muted, directly below Roman lyrics. */
.naat-kc-rmeta {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 6px; margin-top: 10px; width: 100%;
	font-size: 10px; line-height: 1.25; letter-spacing: .015em;
	color: #94a3b8; font-weight: 500;
}
.naat-kc-rmeta > span { display: inline-flex; align-items: center; min-width: 0; }
.naat-kc-rmeta-writer { color: #475569; font-weight: 600; max-width: 60%; }
.naat-kc-rmeta-writer, .naat-kc-rmeta-book { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.naat-kc-rmeta-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.naat-kc-rmeta-ic { font-size: 9px; line-height: 1; opacity: .7; flex: 0 0 auto; display: inline-flex; }
.naat-kc-rmeta-writer .naat-kc-rmeta-ic { color: var(--naat-cat-accent, #10b981); opacity: .85; }
.naat-kc-rmeta-book .naat-kc-rmeta-ic { color: #94a3b8; }
.naat-kc-rmeta-link { position: relative; z-index: 4; text-decoration: none; cursor: pointer; transition: color .18s; }
a.naat-kc-rmeta-link:hover .naat-kc-rmeta-txt { text-decoration: underline; text-underline-offset: 2px; }
a.naat-kc-rmeta-writer:hover .naat-kc-rmeta-ic { opacity: 1; }
a.naat-kc-rmeta-writer:hover { color: #0f172a; text-decoration: underline; text-underline-offset: 2px; }
a.naat-kc-rmeta-book:hover { color: #64748b; text-decoration: underline; text-underline-offset: 2px; }
.naat-kc-rmeta-book { color: #94a3b8; font-weight: 500; max-width: 54%; }
.naat-kc-rmeta-book .naat-kc-rmeta-txt { font-style: italic; }
.naat-kc-rmeta-sep { color: #cbd5e1; font-weight: 700; margin: 0 6px; flex: 0 0 auto; line-height: 1; }

.naat-kalam-divider { height: 1px; width: 100%; position: relative; margin: 1.5rem 0; }
.naat-kalam-badge-wrap {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	display: inline-flex; align-items: center; gap: 5px; z-index: 10; white-space: nowrap;
}
.naat-kalam-badge {
	position: relative; top: auto; left: auto; transform: none;
	padding: 2px 10px; border-radius: 999px; font-size: .65rem; font-weight: 700; color: #fff; z-index: 10;
}
.naat-top-kalam-tag {
	display: inline-flex; align-items: center; gap: 3px;
	padding: 1px 7px; border-radius: 999px; font-size: 8.5px; font-weight: 800;
	text-transform: uppercase; letter-spacing: 0.05em; color: #78350f;
	background: linear-gradient(135deg, #fef08a, #f59e0b);
	border: 1px solid rgba(245, 158, 11, 0.45);
	box-shadow: 0 2px 6px -2px rgba(245, 158, 11, 0.35);
	line-height: 1.3; white-space: nowrap; vertical-align: middle;
}
.naat-top-kalam-tag i { font-size: 8px; color: #b45309; }

/* Green (Naat) */
.theme-green { border-top-color: #22c55e; background: linear-gradient(to bottom, #f0fdf4, #fff); }
.theme-green .naat-kalam-divider { background-color: #bbf7d0; }
.theme-green .naat-kalam-badge { background-color: #22c55e; }
.theme-green .urdu-text { color: #166534; }

/* Orange (Manqabat) */
.theme-orange { border-top-color: #f59e0b; background: linear-gradient(to bottom, #fffbeb, #fff); }
.theme-orange .naat-kalam-divider { background-color: #fef08a; }
.theme-orange .naat-kalam-badge { background-color: #f59e0b; }
.theme-orange .urdu-text { color: #b45309; }

/* Teal (Hamd) */
.theme-teal { border-top-color: #14b8a6; background: linear-gradient(to bottom, #f0fdfa, #fff); }
.theme-teal .naat-kalam-divider { background-color: #ccfbf1; }
.theme-teal .naat-kalam-badge { background-color: #14b8a6; }
.theme-teal .urdu-text { color: #0f766e; }

/* Blue (Salam) */
.theme-blue { border-top-color: #3b82f6; background: linear-gradient(to bottom, #eff6ff, #fff); }
.theme-blue .naat-kalam-divider { background-color: #bfdbfe; }
.theme-blue .naat-kalam-badge { background-color: #3b82f6; }
.theme-blue .urdu-text { color: #1d4ed8; }

/* Violet (Munajaat) */
.theme-lightblue { border-top-color: #8b5cf6; background: linear-gradient(to bottom, #f5f3ff, #fff); }
.theme-lightblue .naat-kalam-divider { background-color: #ddd6fe; }
.theme-lightblue .naat-kalam-badge { background-color: #8b5cf6; }
.theme-lightblue .urdu-text { color: #5b21b6; }

/* Admin-assigned per-category premium GRADIENT identity (Kalaam Category > Color).
   FULL COLOUR SYSTEM: every card inherits its category colour —
   • soft pastel background  • dark same-hue text  • gradient top border
   while leaving the distinct Matla / Maqta badges untouched. */
.kalam-card.has-cat-accent {
	position: relative;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--naat-cat-accent) 7%, #fff) 0%, #ffffff 62%);
	border-color: color-mix(in srgb, var(--naat-cat-accent) 16%, #eef2f7);
	border-top: 0;
}
/* Gradient top border (premium visual accent). */
.kalam-card.has-cat-accent::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
	background: var(--naat-cat-grad, var(--naat-cat-accent));
	border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
	z-index: 3; pointer-events: none;
}
.kalam-card.has-cat-accent:hover {
	border-color: color-mix(in srgb, var(--naat-cat-accent) 34%, #eef2f7);
	box-shadow: 0 18px 38px -18px color-mix(in srgb, var(--naat-cat-accent) 55%, rgba(15,23,42,.25));
}
/* Darker same-hue text for headings + Urdu (readable, on-brand). */
.kalam-card.has-cat-accent .naat-kalam-urdu p,
.kalam-card.has-cat-accent .font-sans-eng > p:first-child {
	color: color-mix(in srgb, var(--naat-cat-accent) 82%, #0f172a);
}
.kalam-card.has-cat-accent .naat-kalam-divider { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--naat-cat-accent) 45%, #e5e7eb), transparent); }
.kalam-card.has-cat-accent .naat-kalam-badge:not(.is-matla):not(.is-maqta) {
	background: var(--naat-cat-grad, var(--naat-cat-accent));
	box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--naat-cat-accent) 55%, transparent);
}
/* Full-card overlay link so nested tag links stay clickable. */
.kalam-card { position: relative; }
.kalam-card .naat-kc-overlay { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.kalam-card > *:not(.naat-kc-overlay) { position: relative; z-index: 2; }
.kalam-card .naat-pill-link { position: relative; z-index: 4; cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .2s, filter .2s; }
.kalam-card .naat-pill-link:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 3px 8px -3px rgba(15,23,42,.28); }
/* Writer avatar + name link — layered above the card overlay so it opens the writer profile. */
a.naat-kc-writer-link { position: relative; z-index: 4; text-decoration: none; cursor: pointer; border-radius: 12px; padding: 4px 6px; margin-top: 12px !important; transition: background .18s ease; }
a.naat-kc-writer-link:hover { background: rgba(15,23,42,.04); }
a.naat-kc-writer-link:hover .naat-writer-name { color: var(--naat-cat-accent, #047857); text-decoration: underline; text-underline-offset: 3px; }
a.naat-kc-writer-link .naat-writer-name { transition: color .18s ease; }
/* Category-coloured clickable tag pills (soft pastel bg + darker same-hue text). */
.kalam-card.has-cat-accent .naat-pill-light {
	background: linear-gradient(135deg, color-mix(in srgb, var(--naat-cat-accent) 8%, #fff), color-mix(in srgb, var(--naat-cat-accent) 20%, #fff));
	color: color-mix(in srgb, var(--naat-cat-accent) 78%, #0f172a);
	border-color: color-mix(in srgb, var(--naat-cat-accent) 26%, #e5e7eb);
	box-shadow: 0 2px 6px -3px color-mix(in srgb, var(--naat-cat-accent) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.6);
}
.kalam-card.has-cat-accent .naat-pill-dark {
	background: var(--naat-cat-grad, linear-gradient(135deg, color-mix(in srgb, var(--naat-cat-accent) 82%, #fff), var(--naat-cat-accent)));
	color: #fff; border-color: transparent;
	box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--naat-cat-accent) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.kalam-card .naat-pill-link:hover.naat-pill-dark, .kalam-card .naat-pill-link:hover.naat-pill-light { filter: brightness(1.05) saturate(1.05); }

/* ---- Kalam card: Urdu-meta avatar + footer (views / tag / topic pills) ---- */
.kalam-card .naat-kc-avatar {
	width: 40px; height: 40px; border-radius: 9999px; background: #fff;
	border: 1px solid #f1f5f9; box-shadow: 0 1px 2px rgba(0,0,0,.05); line-height: 0;
}
.kalam-card .naat-kc-avatar svg,
.kalam-card .naat-kc-avatar img { width: 20px; height: 20px; }
.kalam-card .naat-kc-avatar i { font-size: 18px; }
.kalam-card .naat-kc-footer { border-top: 1px solid rgba(241,245,249,.8); }
.kalam-card .naat-kc-views i { font-size: 12px; }
.naat-pill-light, .naat-pill-dark {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 3px 11px; border-radius: 9999px; font-size: 11px; font-weight: 500;
	border: 1px solid transparent; line-height: 1.6; white-space: nowrap; font-family: "Lateef", serif;
	-webkit-backdrop-filter: blur(6px) saturate(1.2); backdrop-filter: blur(6px) saturate(1.2);
	transition: transform .18s ease, box-shadow .22s ease, filter .18s ease;
}
/* Center the pill cluster + premium soft gradient background & responsive spacing. */
.naat-kc-pills { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; row-gap: 7px; text-align: center; margin-left: auto; margin-right: auto; }
.naat-pill-light { background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #166534; border-color: #bbf7d0; box-shadow: 0 2px 6px -3px rgba(34,197,94,.35), inset 0 1px 0 rgba(255,255,255,.6); }
.naat-pill-dark  { background: linear-gradient(135deg, #e0f2fe, #bae6fd); color: #0369a1; border-color: #7dd3fc; box-shadow: 0 2px 6px -3px rgba(14,165,233,.35), inset 0 1px 0 rgba(255,255,255,.6); }
@media (max-width: 480px) { .naat-kc-pills { gap: 5px !important; } .naat-pill-light, .naat-pill-dark { font-size: 10.5px; padding: 3px 10px; } }
/* Per-theme pill colours — soft premium GRADIENTS in the same colour family,
   with subtle glassmorphism (backdrop-blur) + soft shadow. Light = tinted glass,
   dark = rich same-hue gradient. Colours preserved, only refined. */
.theme-green   .naat-pill-light { background:linear-gradient(135deg,#f0fdf4,#dcfce7); color:#166534; border-color:#bbf7d0; box-shadow:0 2px 6px -3px rgba(34,197,94,.35), inset 0 1px 0 rgba(255,255,255,.6); }
.theme-green   .naat-pill-dark  { background:linear-gradient(135deg,#34d399,#16a34a); color:#fff; border-color:transparent; box-shadow:0 3px 10px -3px rgba(22,163,74,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.theme-orange  .naat-pill-light { background:linear-gradient(135deg,#fffbeb,#fef3c7); color:#b45309; border-color:#fde68a; box-shadow:0 2px 6px -3px rgba(245,158,11,.35), inset 0 1px 0 rgba(255,255,255,.6); }
.theme-orange  .naat-pill-dark  { background:linear-gradient(135deg,#fbbf24,#ea580c); color:#fff; border-color:transparent; box-shadow:0 3px 10px -3px rgba(234,88,12,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.theme-teal    .naat-pill-light { background:linear-gradient(135deg,#f0fdfa,#ccfbf1); color:#0f766e; border-color:#99f6e4; box-shadow:0 2px 6px -3px rgba(20,184,166,.35), inset 0 1px 0 rgba(255,255,255,.6); }
.theme-teal    .naat-pill-dark  { background:linear-gradient(135deg,#2dd4bf,#0d9488); color:#fff; border-color:transparent; box-shadow:0 3px 10px -3px rgba(13,148,136,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.theme-blue    .naat-pill-light { background:linear-gradient(135deg,#eff6ff,#dbeafe); color:#1d4ed8; border-color:#bfdbfe; box-shadow:0 2px 6px -3px rgba(59,130,246,.35), inset 0 1px 0 rgba(255,255,255,.6); }
.theme-blue    .naat-pill-dark  { background:linear-gradient(135deg,#60a5fa,#2563eb); color:#fff; border-color:transparent; box-shadow:0 3px 10px -3px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.theme-lightblue .naat-pill-light { background:linear-gradient(135deg,#f5f3ff,#ede9fe); color:#5b21b6; border-color:#ddd6fe; box-shadow:0 2px 6px -3px rgba(139,92,246,.35), inset 0 1px 0 rgba(255,255,255,.6); }
.theme-lightblue .naat-pill-dark  { background:linear-gradient(135deg,#a78bfa,#7c3aed); color:#fff; border-color:transparent; box-shadow:0 3px 10px -3px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.25); }

/* ---- Filter-tab click transition + grid switch animation ---- */
.filter-tab { will-change: transform; }
.filter-tab-pulse { animation: naat-tab-pulse .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes naat-tab-pulse {
	0%   { transform: scale(1); }
	35%  { transform: scale(.9); }
	70%  { transform: scale(1.06); }
	100% { transform: scale(1); }
}
#naatList { transition: opacity .18s ease, transform .18s ease; }
#naatList.naat-grid-switching { opacity: 0; transform: translateY(8px) scale(.985); }
#naatList.naat-grid-enter { animation: naat-grid-in .42s cubic-bezier(.22,1,.36,1); }
@keyframes naat-grid-in {
	0%   { opacity: 0; transform: translateY(14px) scale(.985); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Stagger the cards on enter for a smooth cascade. */
#naatList.naat-grid-enter > * { animation: naat-card-in .5s cubic-bezier(.22,1,.36,1) both; }
#naatList.naat-grid-enter > *:nth-child(1)  { animation-delay: .02s; }
#naatList.naat-grid-enter > *:nth-child(2)  { animation-delay: .06s; }
#naatList.naat-grid-enter > *:nth-child(3)  { animation-delay: .10s; }
#naatList.naat-grid-enter > *:nth-child(4)  { animation-delay: .14s; }
#naatList.naat-grid-enter > *:nth-child(5)  { animation-delay: .18s; }
#naatList.naat-grid-enter > *:nth-child(6)  { animation-delay: .22s; }
#naatList.naat-grid-enter > *:nth-child(7)  { animation-delay: .26s; }
#naatList.naat-grid-enter > *:nth-child(8)  { animation-delay: .30s; }
@keyframes naat-card-in {
	0%   { opacity: 0; transform: translateY(16px); }
	100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.kalam-card,
	#naatList,
	.filter-tab-pulse,
	#naatList.naat-grid-enter > * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Combined Writers & Books page (books_ui_section.html design).
   ============================================================ */
.naat-wbx-main { padding: 7rem 1rem 4rem; }
@media (min-width: 1024px) { .naat-wbx-main { padding: 8rem 1.5rem 5rem; } }
.naat-wbx-wrap { max-width: 80rem; margin: 0 auto; }
.naat-wbx-head { text-align: center; margin-bottom: 2.5rem; }
.naat-wbx-eyebrow { font-family: var(--naat-font-ui, sans-serif); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #059669; }
.naat-wbx-title { font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif); font-size: clamp(28px, 5vw, 44px); font-weight: 800; color: #0f172a; margin: .35rem 0 .5rem; line-height: 1.1; }
.naat-wbx-lead { max-width: 42rem; margin: 0 auto; font-family: var(--naat-font-ui, sans-serif); font-size: 14px; color: #64748b; line-height: 1.6; }
.naat-wbx-count { display: inline-block; margin-top: 1rem; font-family: var(--naat-font-ui, sans-serif); font-size: 12px; font-weight: 700; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; padding: 3px 14px; border-radius: 999px; }
.naat-wbx-empty { text-align: center; color: #94a3b8; padding: 4rem 0; }

.naat-wbx-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1rem; row-gap: 3rem; }
@media (min-width: 768px)  { .naat-wbx-grid { column-gap: 2rem; row-gap: 4rem; } }
@media (min-width: 1024px) { .naat-wbx-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- Per-card soft colour themes (glow + pill) ---- */
.naat-wbx-card.theme1 { --wbx-glow:#bbf7d0; --wbx-pill-tx:#16a34a; --wbx-pill-bg:#f0fdf4; --wbx-title:#15803d; }
.naat-wbx-card.theme2 { --wbx-glow:#fde68a; --wbx-pill-tx:#d97706; --wbx-pill-bg:#fffbeb; --wbx-title:#b45309; }
.naat-wbx-card.theme3 { --wbx-glow:#c7d2fe; --wbx-pill-tx:#4f46e5; --wbx-pill-bg:#eef2ff; --wbx-title:#4338ca; }
.naat-wbx-card.theme4 { --wbx-glow:#e9d5ff; --wbx-pill-tx:#9333ea; --wbx-pill-bg:#faf5ff; --wbx-title:#7e22ce; }
.naat-wbx-card.theme5 { --wbx-glow:#99f6e4; --wbx-pill-tx:#0d9488; --wbx-pill-bg:#f0fdfa; --wbx-title:#0f766e; }
.naat-wbx-card.theme6 { --wbx-glow:#fecdd3; --wbx-pill-tx:#e11d48; --wbx-pill-bg:#fff1f2; --wbx-title:#be123c; }
.naat-wbx-card.theme7 { --wbx-glow:#bae6fd; --wbx-pill-tx:#0284c7; --wbx-pill-bg:#f0f9ff; --wbx-title:#0369a1; }
.naat-wbx-card.theme8 { --wbx-glow:#fed7aa; --wbx-pill-tx:#ea580c; --wbx-pill-bg:#fff7ed; --wbx-title:#c2410c; }
/* ---- Card shell (white contained card) ---- */
.naat-wbx-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 24px;
	box-shadow: 0 8px 30px -16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.02);
	transition: transform .4s cubic-bezier(.25, 1, .5, 1), box-shadow .4s cubic-bezier(.25, 1, .5, 1), border-color .4s ease;
}
.naat-wbx-card:hover { 
	transform: translateY(-6px); 
	border-color: color-mix(in srgb, var(--wbx-title) 25%, #cbd5e1);
	box-shadow: 0 24px 48px -18px color-mix(in srgb, var(--wbx-glow) 35%, rgba(15, 23, 42, 0.16)), 0 8px 16px -8px color-mix(in srgb, var(--wbx-glow) 20%, transparent); 
}
.naat-wbx-link { position: absolute; inset: 0; z-index: 40; }
.naat-wbx-glow {
	position: absolute; top: 2.5rem; left: 50%; transform: translateX(-50%);
	width: 75%; aspect-ratio: 1; border-radius: 999px; z-index: 0; pointer-events: none;
	background: var(--wbx-glow, #bbf7d0); filter: blur(50px); opacity: .2;
	transition: opacity .7s ease;
}
.naat-wbx-card:hover .naat-wbx-glow { opacity: .4; }

/* ---- 2D realistic book cover ---- */
.naat-wbx-cover-wrap { position: relative; z-index: 20; display: flex; justify-content: center; padding: 2.25rem 1rem 1.25rem; }

/* ---- Content body ---- */
.naat-wbx-body { position: relative; z-index: 20; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 1.25rem 0.75rem; }
.naat-wbx-title-ur {
	font-family: "Noto Nastaliq Urdu", "NaatFont", serif; font-weight: 700; line-height: 2.2;
	font-size: clamp(19px, 2.4vw, 22px); color: #0f172a; margin: 0 0 4px; width: 100%;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s ease;
}
.naat-wbx-card:hover .naat-wbx-title-ur { color: var(--wbx-title, #15803d); }
.naat-wbx-title-en {
	font-family: var(--naat-font-ui, sans-serif); font-weight: 700; letter-spacing: .15em;
	font-size: clamp(9px, 1.2vw, 10px); text-transform: uppercase; color: #64748b; margin: 0 0 12px;
	width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.naat-wbx-author { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: auto; margin-bottom: 8px; }
@media (min-width: 768px) { .naat-wbx-author { gap: 8px; } }
.naat-wbx-author-name { font-family: var(--naat-font-ui, sans-serif); font-size: clamp(12.5px, 1.6vw, 14px); font-weight: 600; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.naat-wbx-author i { color: #94a3b8; font-size: 11px; flex: 0 0 auto; }
@media (min-width: 768px) { .naat-wbx-author i { font-size: 13px; } }

/* ---- Footer ---- */
.naat-wbx-footer {
	position: relative; z-index: 20; margin-top: auto;
	display: flex; justify-content: space-between; align-items: center;
	padding: .85rem 1.25rem; background: color-mix(in srgb, var(--wbx-glow) 8%, #f8fafc); border-top: 1px solid rgba(15, 23, 42, 0.04);
	transition: background .4s ease; font-family: var(--naat-font-ui, sans-serif);
}
@media (min-width: 768px) { .naat-wbx-footer { padding: 1rem 1.25rem; } }
.naat-wbx-card:hover .naat-wbx-footer { background: color-mix(in srgb, var(--wbx-glow) 15%, #f1f5f9); }
.naat-wbx-kalam {
	position: relative; z-index: 41; display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px; border-radius: 999px; font-size: 9.5px; font-weight: 700; white-space: nowrap;
	color: var(--wbx-pill-tx, #16a34a); background: var(--wbx-pill-bg, #f0fdf4); border: 1px solid color-mix(in srgb, var(--wbx-pill-tx) 15%, transparent);
	transition: box-shadow .2s ease, transform .2s ease;
}
@media (min-width: 768px) { .naat-wbx-kalam { font-size: 10px; padding: 6px 12px; } }
.naat-wbx-kalam:hover { box-shadow: 0 4px 10px rgba(0,0,0,.06); transform: translateY(-1px); }
.naat-wbx-kcount { margin-left: 4px; background: #fff; color: #64748b; font-weight: 700; padding: 1px 6px; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.naat-wbx-books { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 600; color: #94a3b8; white-space: nowrap; }
@media (min-width: 768px) { .naat-wbx-books { font-size: 10px; } }
.naat-wbx-books i { opacity: .75; }

@media (prefers-reduced-motion: reduce) {
	.naat-wbx-card, .naat-wbx-glow, .naat-wbx-title-ur, .naat-wbx-footer { transition: none !important; }
}

/* ============================================================
   Contextual sidebar widgets (Kalam & Ashaar single pages).
   Sticky on desktop; stacks below content on mobile/tablet.
   ============================================================ */
@media (min-width: 1024px) {
	.naat-ctx-sticky { position: sticky; top: 96px; align-self: start; }
}
.naat-ctx-sidebar { display: flex; flex-direction: column; gap: 16px; }
.naat-ctx-widget {
	background: rgba(255,255,255,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	border: 1px solid #eef2f6; border-radius: 20px; padding: 16px 16px 14px;
	box-shadow: 0 8px 30px rgba(0,0,0,.04); transition: border-color .25s ease, box-shadow .25s ease;
}
.naat-ctx-widget:hover { border-color: #d1fae5; box-shadow: 0 10px 30px -12px rgba(4,120,87,.14); }
.naat-ctx-title {
	display: flex; align-items: center; gap: 7px; margin: 0 0 10px;
	font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif); font-size: 12.5px; font-weight: 800;
	color: #0f172a; letter-spacing: -.01em;
}
.naat-ctx-title i { color: #059669; font-size: 14px; }
.naat-ctx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.naat-ctx-item a { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 12px; text-decoration: none; transition: background .12s; }
.naat-ctx-item a:hover { background: #f0fdf4; }
.naat-ctx-ur { font-family: var(--naat-font-urdu, "NaatFont"); font-size: 15px; color: #0f766e; line-height: 1.8; }
.naat-ctx-line { font-family: var(--naat-font-ui, sans-serif); font-size: 12px; color: #64748b; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.naat-ctx-line.font-urdu { font-family: var(--naat-font-urdu-tax, "Lateef", serif); font-size: 14px; color: #475569; }
.naat-ctx-more {
	display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
	font-family: var(--naat-font-ui, sans-serif); font-size: 11px; font-weight: 700; color: #047857; text-decoration: none; transition: gap .15s;
}
.naat-ctx-more:hover { gap: 8px; }
.naat-ctx-recent[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .naat-ctx-widget, .naat-ctx-item a, .naat-ctx-more { transition: none; } }

/* Kalam Details: "Explore all Kalam in this Bahr" CTA */
.naat-kd-bahrcta { margin-top: 18px; }
.naat-kd-bahrbtn {
	display: inline-flex; align-items: center; gap: 10px; width: 100%; justify-content: space-between;
	padding: 13px 18px; border-radius: 16px; text-decoration: none;
	background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%); border: 1px solid #a7f3d0;
	font-family: var(--naat-font-ui, sans-serif); font-size: 13.5px; font-weight: 700; color: #047857;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.naat-kd-bahrbtn:hover { transform: translateY(-2px); border-color: #34d399; box-shadow: 0 10px 24px -12px rgba(4,120,87,.4); }
.naat-kd-bahrbtn > span { flex: 1 1 auto; text-align: left; }
.naat-kd-bahrbtn i:first-child { color: #059669; font-size: 16px; }
.naat-kd-bahrbtn i:last-child { transition: transform .18s ease; }
.naat-kd-bahrbtn:hover i:last-child { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .naat-kd-bahrbtn, .naat-kd-bahrbtn i { transition: none; } }

/* Single Kalaam sidebar: Relevant Kalam — Roman + Urdu title on one line. */
.naat-rel-titles { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; }
.naat-rel-roman { flex: 1 1 auto; min-width: 0; font-family: var(--naat-font-ui, sans-serif); font-size: 13.5px; font-weight: 700; color: #1e293b; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; }
.naat-rel-urdu { flex: 0 1 auto; min-width: 0; font-family: var(--naat-font-urdu, "NaatFont"); font-size: 17px; line-height: 1.6; color: #047857; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; }
@media (max-width: 380px) {
	.naat-rel-titles { flex-wrap: wrap; }
	.naat-rel-roman, .naat-rel-urdu { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .naat-rel-roman, .naat-rel-urdu { transition: none; } }

/* Matla / Maqta badges: distinct, always visually distinguishable. */
.naat-kalam-badge.is-matla { background-color: #0d9488 !important; box-shadow: 0 2px 8px -2px rgba(13,148,136,.5); }
.naat-kalam-badge.is-maqta { background-color: #b45309 !important; box-shadow: 0 2px 8px -2px rgba(180,83,9,.5); }

/* ============================================================
   UNIFIED PREMIUM DESIGN SYSTEM — shared components (.ds-*)
   Master language used by Home, Majmua, Writers, Books and every
   archive/detail page so the whole interface is one system.
   ============================================================ */

/* Page shell */
.ds-page { padding-top: 116px; padding-bottom: var(--ds-section-y); }
.ds-wrap { max-width: var(--naat-max); margin: 0 auto; padding: 0 var(--naat-gutter); }
.ds-layout { display: block; }
.ds-main { min-width: 0; }
@media (min-width: 1024px) {
	.ds-layout.has-side { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 2.25rem; align-items: start; }
}

/* Section header (kicker + title + subtitle) */
.ds-shead { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.ds-shead.is-center { text-align: center; }
.ds-kicker { display: inline-block; font-family: var(--naat-font-ui); font-size: 11px; font-weight: 800;
	letter-spacing: .18em; text-transform: uppercase; color: var(--ds-accent); }
.ds-title { font-family: var(--naat-font-display); font-weight: 400; color: var(--ds-ink);
	font-size: clamp(28px, 4.6vw, 44px); line-height: 1.1; letter-spacing: -.01em; margin: 8px 0 10px; }
.ds-sub { font-family: var(--naat-font-ui); color: var(--ds-muted); font-size: 15px; line-height: 1.6; margin: 0; max-width: 62ch; }
.ds-shead.is-center .ds-sub { margin-inline: auto; }

/* Buttons */
.ds-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--naat-font-ui);
	font-size: 14px; font-weight: 700; padding: 11px 22px; border-radius: var(--ds-r-pill);
	background: var(--ds-accent); color: #fff; border: 1px solid var(--ds-accent); cursor: pointer;
	text-decoration: none; transition: background var(--ds-t), transform var(--ds-t), box-shadow var(--ds-t);
	box-shadow: var(--ds-shadow-sm); }
.ds-btn:hover { background: var(--ds-accent-strong); color: #fff; transform: translateY(-2px); box-shadow: var(--ds-shadow-md); }
.ds-btn.is-ghost { background: #fff; color: var(--ds-accent); border-color: var(--ds-accent-line); box-shadow: none; }
.ds-btn.is-ghost:hover { background: var(--ds-accent-soft); }
.ds-btn.xs { padding: 7px 15px; font-size: 12.5px; }

/* Search bar */
.ds-search { position: relative; display: flex; align-items: center; }
.ds-search i, .ds-search .ds-search-ic { position: absolute; left: 16px; color: var(--ds-accent); font-size: 14px; pointer-events: none; }
.ds-search input { width: 100%; padding: 13px 18px 13px 44px; border: 1px solid var(--ds-line-2);
	border-radius: var(--ds-r-md); font-family: var(--naat-font-ui); font-size: 15px; color: var(--ds-ink);
	background: #fff; outline: none; transition: border-color var(--ds-t), box-shadow var(--ds-t); }
.ds-search input::placeholder { color: var(--ds-faint); }
.ds-search input:focus { border-color: var(--ds-accent-line); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-accent) 12%, transparent); }

/* Generic elegant card */
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg);
	box-shadow: var(--ds-shadow-md); transition: transform var(--ds-t) var(--ds-ease), box-shadow var(--ds-t), border-color var(--ds-t); }
.ds-card.is-hover:hover { transform: translateY(-6px); box-shadow: var(--ds-shadow-lg); border-color: var(--ds-accent-line); }

/* Filter toolbar (sticky glass) */
.ds-toolbar { position: sticky; top: 92px; z-index: 30; display: flex; align-items: center; gap: 10px;
	background: rgba(255,255,255,.9); backdrop-filter: blur(16px); border: 1px solid var(--ds-line);
	border-radius: var(--ds-r-md); padding: 9px 12px; box-shadow: var(--ds-shadow-sm); margin-bottom: 18px; }
.ds-filter-scroll { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.ds-filter-scroll::-webkit-scrollbar { display: none; }
.ds-select { flex: 0 0 auto; appearance: none; -webkit-appearance: none; font-family: var(--naat-font-ui);
	padding: 9px 32px 9px 15px; border: 1px solid var(--ds-line-2); border-radius: var(--ds-r-pill);
	font-size: 12.5px; font-weight: 600; color: var(--ds-text); background: #fff; cursor: pointer; white-space: nowrap;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 13px center; transition: border-color var(--ds-t), color var(--ds-t); }
.ds-select:hover { border-color: var(--ds-accent-line); color: var(--ds-accent); }

/* Chips */
.ds-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ds-chip { font-family: var(--naat-font-ui); font-size: 12px; font-weight: 600; color: var(--ds-text);
	background: var(--ds-bg); border: 1px solid var(--ds-line-2); border-radius: var(--ds-r-pill);
	padding: 6px 13px; cursor: pointer; transition: all var(--ds-t); text-decoration: none; }
.ds-chip:hover { border-color: var(--ds-accent-line); color: var(--ds-accent); background: var(--ds-accent-soft); }
.ds-chip.is-active { background: var(--ds-accent); border-color: var(--ds-accent); color: #fff; }

/* Pagination */
.ds-pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: clamp(2rem,4vw,3rem); }
.ds-pager a, .ds-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px;
	padding: 0 12px; font-family: var(--naat-font-ui); font-size: 14px; font-weight: 700; border-radius: var(--ds-r-sm);
	border: 1px solid var(--ds-line-2); background: #fff; color: var(--ds-text); text-decoration: none; transition: all var(--ds-t); }
.ds-pager a:hover { border-color: var(--ds-accent-line); color: var(--ds-accent); background: var(--ds-accent-soft); }
.ds-pager .current { background: var(--ds-accent); border-color: var(--ds-accent); color: #fff; }
.ds-pager .dots { border: 0; background: transparent; }

/* Sidebar + widgets */
.ds-aside { width: 100%; margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 1024px) { .ds-aside { margin-top: 0; position: sticky; top: 92px; } }
.ds-widget { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg);
	padding: 16px 16px 18px; box-shadow: var(--ds-shadow-sm); }
.ds-wtitle { display: flex; align-items: center; gap: 8px; font-family: var(--naat-font-ui); font-size: 13px;
	font-weight: 800; color: var(--ds-ink); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ds-line); }
.ds-wtitle i { color: var(--ds-accent); }
.ds-wlist { list-style: none; margin: 0; padding: 0; }
.ds-wlist li + li { border-top: 1px solid var(--ds-bg-soft); }
.ds-wlist a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 4px;
	font-family: var(--naat-font-ui); font-size: 13.5px; color: var(--ds-text); text-decoration: none; transition: color var(--ds-t); }
.ds-wlist a:hover { color: var(--ds-accent); }
.ds-wlist em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ds-faint); }

@media (prefers-reduced-motion: reduce) {
	.ds-card, .ds-btn, .ds-chip, .ds-pager a, .ds-select, .ds-search input, .ds-wlist a { transition: none; }
	.ds-card.is-hover:hover, .ds-btn:hover { transform: none; }
}

/* ---- Universal fully-clickable cards ----
   Any card enhanced by clickable-cards.js signals it is clickable. Nested
   links keep their own pointer + focus and sit above the card click layer. */
.is-clickable-card { cursor: pointer; }
/* Generic stretched primary link for any overlay card (not just .kalam-card). */
.js-card { position: relative; }
.js-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.js-card > *:not(.js-card-link) { position: relative; z-index: 2; }
.is-clickable-card:focus-visible { outline: 2px solid var(--ds-accent, #047857); outline-offset: 3px; border-radius: 18px; }
.is-clickable-card a,
.is-clickable-card button,
.is-clickable-card [role="button"] { position: relative; z-index: 2; }
/* Aruuz + poet-row overlay cards: keep meta/preview links tappable above. */
.naat-aruuz-card.is-clickable-card .naat-aruuz-pv a,
.naat-aruuz-card.is-clickable-card .naat-aruuz-card-head,
.naat-poet-krow.is-clickable-card .naat-poet-chip { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .is-clickable-card { scroll-behavior: auto; } }

/* ---- HTML sitemap (/sitemap.html) ---- */
.naat-htmlmap { color: #1e293b; }
.naat-htmlmap-crumb { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.naat-htmlmap-crumb a { color: #047857; text-decoration: none; }
.naat-htmlmap-title { font-family: "DM Serif Display", Georgia, serif; font-size: clamp(28px, 4vw, 40px); color: #052e29; margin: 0 0 8px; }
.naat-htmlmap-lead { color: #475569; margin: 0 0 28px; max-width: 60ch; }
.naat-htmlmap-sec { background: #fff; border: 1px solid #eef2f7; border-radius: 18px; padding: 22px 24px; margin-bottom: 20px; box-shadow: 0 6px 24px rgb(0 0 0 / .03); }
.naat-htmlmap-h2 { font-family: "DM Serif Display", Georgia, serif; font-style: italic; font-size: 20px; color: #065f46; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
.naat-htmlmap-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
@media (max-width: 640px) { .naat-htmlmap-list { columns: 1; } }
.naat-htmlmap-list li { break-inside: avoid; margin-bottom: 8px; }
.naat-htmlmap-list a { color: #334155; text-decoration: none; font-size: 14.5px; transition: color .15s; }
.naat-htmlmap-list a:hover { color: #047857; text-decoration: underline; }
.naat-htmlmap-list em { font-style: normal; color: #94a3b8; font-size: 12px; }
.naat-htmlmap-more { display: inline-block; margin-top: 14px; color: #047857; font-weight: 600; font-size: 13px; text-decoration: none; }
.naat-htmlmap-more:hover { text-decoration: underline; }

/* Sidebar widget extras (unified) */
.naat-sb { }

/* ---- Unified premium sidebar: archive/search/index cards match the
   Kalam & Ashaar page sidebar (panel-kit) look exactly. ---- */
.ds-aside.naat-ctx-col { display: block; gap: 0; }
.ds-aside.naat-ctx-col .naat-ctx-sticky { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1024px) { .ds-aside.naat-ctx-col { position: static; } .ds-aside.naat-ctx-col .naat-ctx-sticky { position: sticky; top: 96px; align-self: start; } }
.ds-widget.naat-sb-card {
	background: rgba(255,255,255,.9); border: 1px solid #fff;
	border-radius: 24px; padding: 1.5rem; box-shadow: 0 8px 30px rgb(0 0 0 / .04);
}
.ds-widget.naat-sb-card .naat-sb-title { border-bottom: 0; padding-bottom: 0; margin: 0 0 1rem;
	font-family: "DM Serif Display", Georgia, serif; font-style: italic; font-size: 1.125rem; font-weight: 700; color: #052e29; }
.ds-widget.naat-sb-card .naat-sb-title i { color: inherit; }
.ds-widget.naat-sb-card .ds-wlist a { border-radius: 12px; padding: 9px 12px; }
.ds-widget.naat-sb-card .ds-wlist li + li { border-top: 1px solid #f1f5f9; }
.ds-widget.naat-sb-card .ds-wlist a:hover { background: #ecfdf5; color: #047857; }
.ds-widget.naat-sb-card .naat-sb-more { margin-top: 1rem; }

.ds-widget-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-family: var(--naat-font-ui);
	font-size: 12px; font-weight: 700; color: var(--ds-accent); text-decoration: none; }
.ds-widget-more:hover { color: var(--ds-accent-strong); gap: 8px; }
.ds-sb-search input { padding-block: 11px; font-size: 14px; border-radius: var(--ds-r-sm); }
.ds-wlist-posts a { align-items: flex-start; }
.ds-wlist-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-wlist-ur { font-family: var(--naat-font-urdu); font-size: 15px; color: var(--ds-muted); line-height: 1.6;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-wlist-nav a i { color: var(--ds-faint); font-size: 12px; transition: transform var(--ds-t); }
.ds-wlist-nav a:hover i { transform: translateX(3px); color: var(--ds-accent); }
.ds-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ds-stat { background: var(--ds-accent-soft); border: 1px solid var(--ds-accent-line); border-radius: var(--ds-r-sm);
	padding: 12px; text-align: center; }
.ds-stat b { display: block; font-family: var(--naat-font-ui); font-size: 22px; font-weight: 800; color: var(--ds-accent-strong);
	font-variant-numeric: tabular-nums; line-height: 1; }
.ds-stat span { display: block; margin-top: 4px; font-family: var(--naat-font-ui); font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em; color: var(--ds-muted); }
@media (prefers-reduced-motion: reduce) { .ds-widget-more:hover { gap: 5px; } .ds-wlist-nav a:hover i { transform: none; } }

/* Generic archive grid + card (design system) */
.naat-arc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: stretch; }
@media (min-width: 640px) { .naat-arc-grid { gap: 1.5rem; } }
@media (min-width: 1024px) { .naat-arc-grid { grid-template-columns: repeat(3, 1fr); } }
.naat-arc-empty { text-align: center; padding: 56px 16px; color: var(--ds-faint); font-family: var(--naat-font-ui); font-size: 15px; }
.naat-arc-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; height: 100%; }
.naat-arc-card.is-person { align-items: center; text-align: center; }
.naat-arc-cover { aspect-ratio: 4/5; overflow: hidden; background: var(--ds-bg); }
.naat-arc-img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ds-ease); }
.naat-arc-card:hover .naat-arc-img { transform: scale(1.05); }
.naat-arc-strip { height: 4px; width: 100%; background: var(--ds-accent); }
.naat-arc-avatar { display: flex; align-items: center; justify-content: center; padding: 22px 0 6px; }
.naat-arc-avatar img { width: 78px; height: 78px; border-radius: 50%; object-fit: contain;
	background: linear-gradient(140deg, var(--ds-accent-soft), #fff); border: 1px solid var(--ds-accent-line); padding: 14px; }
.naat-arc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.naat-arc-card.is-person .naat-arc-body { align-items: center; }
.naat-arc-title { font-family: var(--naat-font-ui); font-size: 16px; font-weight: 700; color: var(--ds-ink);
	line-height: 1.35; margin: 0; transition: color var(--ds-t); }
.naat-arc-card:hover .naat-arc-title { color: var(--ds-accent); }
.naat-arc-author { font-family: var(--naat-font-ui); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
	font-weight: 600; color: var(--ds-faint); }
.naat-arc-views { margin-top: auto; padding-top: 10px; font-family: var(--naat-font-ui); font-size: 11px; color: var(--ds-faint);
	display: inline-flex; align-items: center; gap: 5px; }
@media (prefers-reduced-motion: reduce) { .naat-arc-card:hover .naat-arc-img { transform: none; } }

/* Search results (design system) */
.naat-srch-list { display: flex; flex-direction: column; gap: 12px; }
.naat-srch-item { display: block; padding: 18px 20px; text-decoration: none; }
.naat-srch-type { display: inline-block; font-family: var(--naat-font-ui); font-size: 9.5px; font-weight: 800;
	text-transform: uppercase; letter-spacing: .1em; color: var(--ds-accent); background: var(--ds-accent-soft);
	border: 1px solid var(--ds-accent-line); padding: 3px 10px; border-radius: var(--ds-r-pill); }
.naat-srch-title { font-family: var(--naat-font-ui); font-size: 18px; font-weight: 700; color: var(--ds-ink);
	margin: 10px 0 4px; transition: color var(--ds-t); }
.naat-srch-item:hover .naat-srch-title { color: var(--ds-accent); }
.naat-srch-excerpt { font-family: var(--naat-font-ui); font-size: 14px; color: var(--ds-muted); line-height: 1.6; margin: 0; }
.naat-srch-empty { text-align: center; padding: 60px 16px; color: var(--ds-faint); }
.naat-srch-empty i { font-size: 44px; display: block; margin-bottom: 14px; }
.naat-srch-empty p { font-family: var(--naat-font-ui); font-size: 15px; margin: 0; }

/* 404 (design system) */
.naat-404-wrap { max-width: 620px; }
.naat-404-card { padding: clamp(28px, 5vw, 48px); text-align: center; }
.naat-404-ic { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; background: var(--ds-accent-soft);
	border: 1px solid var(--ds-accent-line); display: flex; align-items: center; justify-content: center;
	color: var(--ds-accent); font-size: 34px; }
.naat-404-code { font-family: var(--naat-font-display); font-size: clamp(56px, 12vw, 84px); font-weight: 400;
	color: var(--ds-ink); line-height: 1; margin: 0 0 8px; }
.naat-404-msg { font-family: var(--naat-font-ui); color: var(--ds-muted); font-size: 15px; margin: 0 0 22px; }
.naat-404-search { max-width: 380px; margin: 0 auto 20px; }
.naat-404-pop { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--ds-line); text-align: left; }
.naat-404-poptitle { display: block; font-family: var(--naat-font-ui); font-size: 12px; font-weight: 800;
	text-transform: uppercase; letter-spacing: .06em; color: var(--ds-faint); margin-bottom: 6px; }

/* Single article (design system) */
.naat-art { padding: clamp(22px, 4vw, 40px); }
.naat-art-crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--naat-font-ui); font-size: 11px;
	font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ds-faint); margin-bottom: 18px; }
.naat-art-crumbs a { color: var(--ds-muted); text-decoration: none; transition: color var(--ds-t); }
.naat-art-crumbs a:hover { color: var(--ds-accent); }
.naat-art-crumbs i { font-size: 10px; color: var(--ds-line-2); }
.naat-art-crumbs span { color: var(--ds-accent); }
.naat-art-head { border-bottom: 1px solid var(--ds-line); padding-bottom: 20px; margin-bottom: 24px; }
.naat-art-title { font-family: var(--naat-font-display); font-size: clamp(28px, 4.4vw, 42px); font-weight: 400;
	color: var(--ds-ink); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 14px; }
.naat-art-meta { display: flex; flex-wrap: wrap; gap: 18px; font-family: var(--naat-font-ui); font-size: 12px;
	color: var(--ds-muted); text-transform: uppercase; letter-spacing: .04em; }
.naat-art-meta i { color: var(--ds-accent); }
.naat-art-cover { border-radius: var(--ds-r-md); overflow: hidden; border: 1px solid var(--ds-line); margin-bottom: 26px; }
.naat-art-cover img { width: 100%; height: auto; display: block; }
.naat-art-content { font-family: var(--naat-font-body); color: var(--ds-text); font-size: 16.5px; line-height: 1.8; }
.naat-art-content > * + * { margin-top: 1.1em; }
.naat-art-content h2, .naat-art-content h3 { font-family: var(--naat-font-display); color: var(--ds-ink); line-height: 1.25; margin-top: 1.5em; }
.naat-art-content a { color: var(--ds-accent); text-decoration: underline; text-underline-offset: 3px; }
.naat-art-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--ds-line); }
.naat-art-tags a { font-family: var(--naat-font-ui); font-size: 12px; font-weight: 600; color: var(--ds-text);
	background: var(--ds-bg); border: 1px solid var(--ds-line-2); border-radius: var(--ds-r-pill); padding: 5px 13px; text-decoration: none; transition: all var(--ds-t); }
.naat-art-tags a:hover { border-color: var(--ds-accent-line); color: var(--ds-accent); background: var(--ds-accent-soft); }
.naat-art-comments { margin-top: 24px; padding: clamp(22px, 4vw, 36px); }

/* Blog / articles index (design system) */
.naat-blog-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.25rem; }
@media (min-width: 640px) { .naat-blog-grid { grid-template-columns: repeat(2, 1fr); } }
.naat-blog-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; height: 100%; }
.naat-blog-cover { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--ds-bg-soft); }
.naat-blog-img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ds-ease); }
.naat-blog-card:hover .naat-blog-img { transform: scale(1.05); }
.naat-blog-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	color: var(--ds-accent-line); font-size: 40px; background: linear-gradient(140deg, var(--ds-accent-soft), #fff); }
.naat-blog-badge { position: absolute; bottom: 12px; left: 12px; font-family: var(--naat-font-ui); font-size: 9.5px;
	font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--ds-accent);
	padding: 4px 11px; border-radius: var(--ds-r-pill); box-shadow: var(--ds-shadow-sm); }
.naat-blog-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex-grow: 1; }
.naat-blog-title { font-family: var(--naat-font-ui); font-size: 17px; font-weight: 700; color: var(--ds-ink);
	line-height: 1.35; margin: 0 0 8px; transition: color var(--ds-t); }
.naat-blog-card:hover .naat-blog-title { color: var(--ds-accent); }
.naat-blog-excerpt { font-family: var(--naat-font-ui); font-size: 13.5px; color: var(--ds-muted); line-height: 1.6; margin: 0; }
.naat-blog-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between;
	font-family: var(--naat-font-ui); font-size: 11px; color: var(--ds-faint); text-transform: uppercase; letter-spacing: .04em; }
.naat-blog-foot i { color: var(--ds-accent); }
.naat-blog-foot time { background: var(--ds-bg); border: 1px solid var(--ds-line-2); border-radius: var(--ds-r-pill); padding: 3px 10px; }
@media (prefers-reduced-motion: reduce) { .naat-blog-card:hover .naat-blog-img { transform: none; } }

/* Generic page (centered single column) */
.naat-pagewrap { max-width: 820px; }
.naat-page-art { padding: clamp(24px, 4vw, 44px); }

/* AI-search deep-link couplet highlight (single Kalam scroll target). */
.naat-sher-hit { animation: naatSherPulse 3s ease; border-radius: 14px; }
@keyframes naatSherPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); background-color: transparent; }
	15% { box-shadow: 0 0 0 4px rgba(16,185,129,.25); background-color: rgba(236,253,245,.9); }
	60% { box-shadow: 0 0 0 3px rgba(16,185,129,.12); background-color: rgba(236,253,245,.55); }
}
.naat-hl { background: linear-gradient(180deg, transparent 55%, #fde68a 55%); border-radius: 2px; padding: 0 1px; }
@media (prefers-reduced-motion: reduce) { .naat-sher-hit { animation: none; background-color: rgba(236,253,245,.7); } }

/* ============================================================
   Topic Landing Pages  (/category/{cat}/topic/{topic}/)
   Premium gradient identity driven by --tl-grad / --tl-soft / --tl-accent.
   ============================================================ */
.naat-tl { padding-block: 0 3rem; }
.naat-tl .ds-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; }

/* Breadcrumb */
.naat-tl-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 13px; color: #64748b; padding: 1.5rem 0 1rem; }
.naat-tl-crumb a { color: #64748b; text-decoration: none; transition: color .2s; }
.naat-tl-crumb a:hover { color: var(--tl-accent); }
.naat-tl-crumb-sep { color: #cbd5e1; }
.naat-tl-crumb-cur { color: #0f172a; font-weight: 600; }

/* Hero */
.naat-tl-hero { position: relative; overflow: hidden; border-radius: 24px; background: var(--tl-grad); color: #fff; padding: 2.75rem 2.25rem; box-shadow: 0 20px 45px -20px rgba(0,0,0,.35); }
.naat-tl-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.22), transparent 55%); pointer-events: none; }
.naat-tl-hero-inner { position: relative; z-index: 2; max-width: 640px; }
.naat-tl-badge { display: inline-block; background: rgba(255,255,255,.22); backdrop-filter: blur(4px); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); }
.naat-tl-title { font-family: "DM Serif Display", Georgia, serif; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.1; margin: .85rem 0 .35rem; color: #fff; }
.naat-tl-title-ur { font-family: "Noto Nastaliq Urdu", serif; font-size: clamp(1.3rem, 3vw, 2rem); opacity: .95; margin: 0 0 .5rem; }
.naat-tl-desc { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.92); margin: .5rem 0 1.25rem; }
.naat-tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-size: 14px; }
.naat-tl-stat strong { font-size: 18px; }
.naat-tl-dot { opacity: .6; }
.naat-tl-catlink { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); transition: opacity .2s; }
.naat-tl-catlink:hover { opacity: .8; }
.naat-tl-hero-img { position: absolute; inset: 0 0 0 auto; width: 42%; background-size: cover; background-position: center; opacity: .28; mix-blend-mode: luminosity; z-index: 1; }

/* Sibling topic filter chips */
.naat-tl-filters { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin: 1.75rem 0 .5rem; }
.naat-tl-filters-label { font-size: 13px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .06em; }
.naat-tl-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.naat-tl-chip { display: inline-block; font-size: 13px; font-weight: 500; color: #334155; background: var(--tl-soft); border: 1px solid color-mix(in srgb, var(--tl-accent) 22%, #e2e8f0); padding: 6px 14px; border-radius: 999px; text-decoration: none; transition: all .2s; }
.naat-tl-chip:hover { border-color: var(--tl-accent); color: var(--tl-accent); transform: translateY(-1px); }
.naat-tl-chip.is-active { background: var(--tl-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--tl-accent) 60%, transparent); }

/* Related section */
.naat-tl-related { margin-top: 2.25rem; }
.naat-tl-sechead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 2px solid var(--tl-soft); }
.naat-tl-sectitle { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 1.4rem; font-weight: 700; color: #0f172a; margin: 0; }
.naat-tl-secmeta { font-size: 13px; font-weight: 700; color: #fff; background: var(--tl-grad); padding: 3px 12px; border-radius: 999px; }
.naat-tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }

/* Generic related card (non-kalaam) */
.naat-tl-card { display: flex; flex-direction: column; gap: .5rem; background: #fff; border: 1px solid #eef2f7; border-radius: 16px; padding: 1.25rem; text-decoration: none; transition: all .25s; box-shadow: 0 2px 10px -6px rgba(0,0,0,.1); }
.naat-tl-card:hover { border-color: color-mix(in srgb, var(--tl-accent) 40%, #eef2f7); transform: translateY(-3px); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--tl-accent) 45%, rgba(0,0,0,.2)); }
.naat-tl-card-type { align-self: flex-start; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tl-accent); background: var(--tl-soft); padding: 3px 9px; border-radius: 6px; }
.naat-tl-card-title { font-size: 15px; font-weight: 700; color: #0f172a; margin: .25rem 0 0; line-height: 1.35; }
.naat-tl-card-ex { font-size: 13px; color: #64748b; line-height: 1.55; margin: 0; }
.naat-tl-card-more { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--tl-accent); }

/* Empty state */
.naat-tl-empty { text-align: center; padding: 3rem 1rem; color: #94a3b8; }
.naat-tl-empty i { font-size: 2.5rem; color: color-mix(in srgb, var(--tl-accent) 55%, #cbd5e1); }
.naat-tl-empty p { margin: .75rem 0 1.25rem; font-size: 15px; }
.naat-tl-empty-cta { display: inline-block; background: var(--tl-grad); color: #fff; font-weight: 600; font-size: 14px; padding: 9px 20px; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--tl-accent) 60%, transparent); }

@media (max-width: 640px) {
	.naat-tl-hero { padding: 2rem 1.5rem; }
	.naat-tl-hero-img { display: none; }
}

/* ============================================================
   Poet Single Page (single-poet.php) — Premium Redesigned UI
   ============================================================ */
.naat-poet { 
	color: #0f172a; 
	position: relative; 
	z-index: 20;
}

.naat-poet-crumb { 
	display: flex; 
	flex-wrap: wrap; 
	align-items: center; 
	gap: 6px; 
	font-family: var(--naat-font-ui, sans-serif);
	font-size: 11px; 
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #94a3b8; 
	margin-bottom: 24px; 
}
.naat-poet-crumb a { 
	color: #64748b; 
	text-decoration: none; 
	transition: color 0.2s ease; 
}
.naat-poet-crumb a:hover { 
	color: #0ea5e9; 
}
.naat-poet-crumb-cur { 
	color: #0f172a; 
	font-weight: 700; 
}

/* Profile Hero - Deluxe passport layout */
.naat-poet-hero { 
	position: relative; 
	overflow: hidden; 
	background: #ffffff; 
	border: 1px solid #f1f5f9; 
	border-radius: 32px; 
	padding: 40px; 
	box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.04), 0 20px 80px -20px rgba(15, 23, 42, 0.06); 
	transition: box-shadow 0.3s ease;
}
.naat-poet-hero:hover {
	box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.06), 0 30px 100px -25px rgba(15, 23, 42, 0.08); 
}
.naat-poet-hero-glow { 
	position: absolute; 
	top: -150px; 
	right: -100px; 
	width: 450px; 
	height: 450px; 
	border-radius: 50%; 
	background: radial-gradient(circle, rgba(14, 165, 233, 0.08), transparent 70%); 
	pointer-events: none; 
}

.naat-poet-id { 
	position: relative; 
	display: flex; 
	align-items: center; 
	gap: 28px; 
	flex-wrap: wrap; 
}
.naat-poet-avatar { 
	width: 120px; 
	height: 120px; 
	border-radius: 50%; 
	overflow: hidden; 
	flex-shrink: 0; 
	background: #ffffff; 
	border: 4px solid #ffffff; 
	box-shadow: 0 0 0 2px #e2e8f0, 0 12px 30px -10px rgba(15, 23, 42, 0.15); 
	display: flex; 
	align-items: center; 
	justify-content: center;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.naat-poet-avatar:hover {
	transform: scale(1.06) rotate(3deg);
	box-shadow: 0 0 0 2px #bae6fd, 0 15px 35px -8px rgba(14, 165, 233, 0.25);
}
@media (min-width: 768px) { 
	.naat-poet-avatar { width: 140px; height: 140px; } 
}
.naat-poet-avatar img { 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
}
.naat-poet-avatar-initial { 
	font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif); 
	font-size: 2.8rem; 
	font-weight: 800;
	color: #0ea5e9; 
}

.naat-poet-id-text { 
	min-width: 0; 
	flex: 1;
}
.naat-poet-kicker { 
	display: inline-flex; 
	align-items: center; 
	gap: 6px; 
	font-family: var(--naat-font-ui, sans-serif);
	font-size: 10px; 
	font-weight: 800; 
	letter-spacing: 0.18em; 
	text-transform: uppercase; 
	color: #b45309; 
	background: #fffbeb;
	border: 1px solid #fde68a;
	padding: 4px 12px;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.naat-poet-kicker i { 
	color: #d97706; 
}
.naat-poet-name { 
	font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif); 
	font-weight: 800;
	font-size: clamp(1.8rem, 4vw, 2.8rem); 
	line-height: 1.15; 
	margin: 12px 0 4px; 
	color: #0f172a; 
	letter-spacing: -0.02em;
}
.naat-poet-name-ur { 
	font-family: "Noto Nastaliq Urdu", serif; 
	font-size: clamp(1.3rem, 3vw, 1.8rem); 
	color: #0ea5e9; 
	margin: 0; 
	line-height: 1.8;
}

.naat-poet-stats { 
	display: flex; 
	flex-wrap: wrap; 
	gap: 16px; 
	margin-top: 20px; 
}
.naat-poet-stat { 
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 12px 20px;
	flex: 1 1 120px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
	transition: all 0.2s ease;
}
.naat-poet-stat:hover {
	background: #ffffff;
	border-color: #cbd5e1;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.naat-poet-stat strong { 
	display: block; 
	font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif); 
	font-size: 24px; 
	font-weight: 800; 
	color: #0f172a; 
	line-height: 1; 
	margin-bottom: 2px;
}
.naat-poet-stat span {
	font-family: var(--naat-font-ui, sans-serif);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #64748b;
}

/* Timeline facts list */
.naat-poet-facts { 
	position: relative; 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px; 
	margin-top: 28px; 
}
.naat-poet-fact { 
	display: flex; 
	flex-direction: column; 
	gap: 4px; 
	background: #ffffff; 
	border: 1px solid #f1f5f9; 
	border-radius: 16px; 
	padding: 14px 18px; 
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.02);
	transition: all 0.2s ease;
}
.naat-poet-fact:hover {
	border-color: #e2e8f0;
	box-shadow: 0 6px 15px rgba(15, 23, 42, 0.04);
}
.naat-poet-fact span { 
	font-family: var(--naat-font-ui, sans-serif);
	font-size: 10px; 
	font-weight: 800; 
	text-transform: uppercase; 
	letter-spacing: 0.1em; 
	color: #94a3b8; 
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.naat-poet-fact span i {
	color: #38bdf8;
}
.naat-poet-fact b { 
	font-size: 14px; 
	color: #1e293b; 
	font-weight: 600; 
}

.naat-poet-bio { 
	position: relative; 
	margin-top: 28px; 
	padding-top: 24px; 
	border-top: 1px solid #f1f5f9; 
	color: #475569; 
	font-size: 15px; 
	line-height: 1.75; 
}
.naat-poet-bio p { 
	margin: 0 0 12px; 
}

/* Sections Header (books / articles) */
.naat-poet-sechead { 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	gap: 16px; 
	margin: 48px 0 20px; 
}
.naat-poet-sectitle { 
	display: flex; 
	align-items: center; 
	gap: 10px; 
	font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif); 
	font-size: 1.5rem; 
	font-weight: 800; 
	color: #0f172a; 
	margin: 0; 
	letter-spacing: -0.01em;
}
.naat-poet-sectitle i { 
	color: #0ea5e9; 
}
.naat-poet-secmeta { 
	font-family: var(--naat-font-ui, sans-serif);
	font-size: 11px; 
	font-weight: 800; 
	color: #0ea5e9; 
	background: #f0f9ff; 
	border: 1px solid #e0f2fe; 
	padding: 4px 14px; 
	border-radius: 999px; 
}

/* Upgraded Book Row / Card */
.naat-poet-book { 
	background: #ffffff; 
	border: 1px solid #f1f5f9; 
	border-radius: 24px; 
	overflow: hidden; 
	margin-bottom: 28px; 
	box-shadow: 0 4px 20px -8px rgba(15, 23, 42, 0.03), 0 10px 40px -15px rgba(15, 23, 42, 0.05); 
	transition: all 0.3s ease;
}
.naat-poet-book:hover {
	border-color: #e2e8f0;
	box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.06), 0 20px 60px -15px rgba(15, 23, 42, 0.08);
}
.naat-poet-book-head { 
	display: flex; 
	align-items: center; 
	gap: 20px; 
	padding: 20px 24px; 
	background: #ffffff; 
	border-bottom: 1px solid #f8fafc; 
}
.naat-poet-book-cover { 
	flex-shrink: 0; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
}
.naat-poet-book-titles { 
	display: flex; 
	flex-direction: column; 
	gap: 2px; 
	min-width: 0; 
	flex: 1; 
}
.naat-poet-book-title { 
	font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif); 
	font-size: 1.15rem; 
	font-weight: 800; 
	color: #0f172a; 
	text-decoration: none; 
	transition: color 0.2s ease;
}
.naat-poet-book-title:hover { 
	color: #0ea5e9; 
}
.naat-poet-book-urdu { 
	font-family: "Noto Nastaliq Urdu", serif; 
	font-size: 15px; 
	color: #64748b; 
	line-height: 1.6;
}
.naat-poet-book-metrics { 
	display: flex; 
	align-items: center; 
	gap: 8px; 
	flex-shrink: 0; 
}
.naat-poet-book-views { 
	display: inline-flex; 
	align-items: center; 
	gap: 6px; 
	font-family: var(--naat-font-ui, sans-serif);
	font-size: 11px; 
	font-weight: 700; 
	color: #d97706; 
	background: #fffbeb; 
	border: 1px solid #fef3c7; 
	padding: 5px 12px; 
	border-radius: 999px; 
	white-space: nowrap; 
}
.naat-poet-book-views i { 
	font-size: 12px; 
}
.naat-poet-book-count { 
	font-family: var(--naat-font-ui, sans-serif);
	font-size: 11px; 
	font-weight: 700; 
	color: #475569; 
	background: #f1f5f9; 
	border: 1px solid #e2e8f0;
	padding: 5px 12px; 
	border-radius: 999px; 
	white-space: nowrap; 
	flex-shrink: 0; 
}

@media (max-width: 560px) { 
	.naat-poet-book-head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.naat-poet-book-metrics { width: 100%; justify-content: flex-start; gap: 8px; } 
}

/* Poet biography details layout upgrade */
.naat-poet-about.upgraded-ui {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid #f1f5f9;
}
.naat-poet-about-head {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--naat-font-ui, "Bricolage Grotesque", sans-serif);
	font-size: 1.15rem;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 16px;
}
.naat-poet-about-head i {
	color: #0ea5e9;
}

/* Kalam list row redesign */
.naat-poet-klist { 
	list-style: none; 
	margin: 0; 
	padding: 12px 14px; 
	background: #ffffff;
}
.naat-poet-krow { 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	gap: 16px; 
	padding: 10px 14px; 
	border-radius: 16px; 
	transition: all 0.25s ease; 
	border: 1px solid transparent;
}
.naat-poet-krow + .naat-poet-krow { 
	margin-top: 6px;
}
.naat-poet-krow:hover { 
	background: color-mix(in srgb, var(--k-accent) 4%, #ffffff); 
	border-color: color-mix(in srgb, var(--k-accent) 12%, transparent);
	transform: translateX(4px);
}
.naat-poet-krow-main { 
	display: flex; 
	align-items: center; 
	gap: 12px; 
	text-decoration: none; 
	min-width: 0; 
	flex: 1; 
}
.naat-poet-krow-dot { 
	width: 6px; 
	height: 6px; 
	border-radius: 50%; 
	flex-shrink: 0; 
	background: var(--k-grad, var(--k-accent)); 
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-accent) 16%, transparent); 
}
.naat-poet-krow-titles { 
	display: flex; 
	flex-direction: column; 
	gap: 1px; 
	min-width: 0; 
}
.naat-poet-krow-title { 
	font-size: 14px; 
	font-weight: 600; 
	color: #1e293b; 
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis; 
	transition: color 0.2s ease; 
}
.naat-poet-krow-main:hover .naat-poet-krow-title { 
	color: var(--k-accent); 
}
.naat-poet-krow-urdu { 
	font-family: "Noto Nastaliq Urdu", serif; 
	font-size: 14px; 
	color: #94a3b8; 
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis; 
	line-height: 1.6;
}
.naat-poet-krow-tax { 
	display: flex; 
	align-items: center; 
	gap: 6px; 
	flex-shrink: 0; 
}
.naat-poet-chip { 
	display: inline-flex; 
	align-items: center; 
	font-family: var(--naat-font-ui, sans-serif);
	font-size: 10px; 
	font-weight: 700; 
	padding: 4px 10px; 
	border-radius: 999px; 
	text-decoration: none; 
	white-space: nowrap; 
	transition: all 0.2s ease; 
}
.naat-poet-chip.is-cat { 
	background: color-mix(in srgb, var(--k-accent) 8%, #ffffff); 
	color: color-mix(in srgb, var(--k-accent) 85%, #0f172a); 
	border: 1px solid color-mix(in srgb, var(--k-accent) 18%, #e2e8f0); 
}
.naat-poet-chip.is-cat:hover { 
	background: var(--k-grad, var(--k-accent)); 
	color: #ffffff; 
	border-color: transparent; 
	box-shadow: 0 4px 10px -4px var(--k-accent);
}
.naat-poet-chip.is-topic { 
	background: #f8fafc; 
	color: #64748b; 
	border: 1px solid #e2e8f0; 
}
.naat-poet-chip.is-topic:hover { 
	border-color: #cbd5e1; 
	color: #0f172a; 
}

/* Empty state */
.naat-poet-empty { 
	text-align: center; 
	padding: 48px 16px; 
	color: #94a3b8; 
	background: #ffffff; 
	border: 1px solid #f1f5f9; 
	border-radius: 24px; 
	margin-top: 32px; 
}
.naat-poet-empty i { 
	font-size: 2.8rem; 
	color: #cbd5e1; 
}
.naat-poet-empty p { 
	margin-top: 12px; 
	font-size: 15px; 
}

/* Related articles */
.naat-poet-articles {
	margin-top: 48px;
}
.naat-poet-artgrid { 
	display: grid; 
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
	gap: 20px; 
}
.naat-poet-artcard { 
	display: flex; 
	flex-direction: column; 
	background: #ffffff; 
	border: 1px solid #f1f5f9; 
	border-radius: 20px; 
	overflow: hidden; 
	text-decoration: none; 
	transition: all 0.3s ease; 
	box-shadow: 0 4px 15px -8px rgba(15, 23, 42, 0.05); 
}
.naat-poet-artcard:hover { 
	transform: translateY(-4px); 
	border-color: #e2e8f0; 
	box-shadow: 0 12px 30px -10px rgba(15, 23, 42, 0.12); 
}
.naat-poet-artcard-img { 
	display: block; 
	height: 140px; 
	background-size: cover; 
	background-position: center; 
	background-color: #f8fafc; 
}
.naat-poet-artcard-img.is-placeholder { 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	color: #cbd5e1; 
	font-size: 2rem; 
}
.naat-poet-artcard-body { 
	display: flex; 
	flex-direction: column; 
	gap: 6px; 
	padding: 18px 20px; 
}
.naat-poet-artcard-date { 
	font-family: var(--naat-font-ui, sans-serif);
	font-size: 9px; 
	font-weight: 800; 
	text-transform: uppercase; 
	letter-spacing: 0.1em; 
	color: #94a3b8; 
}
.naat-poet-artcard-title { 
	font-size: 15px; 
	font-weight: 700; 
	color: #0f172a; 
	line-height: 1.4; 
	transition: color 0.2s ease;
}
.naat-poet-artcard:hover .naat-poet-artcard-title {
	color: #0ea5e9;
}
.naat-poet-artcard-ex { 
	font-size: 12.5px; 
	color: #64748b; 
	line-height: 1.6; 
}

@media (max-width: 640px) {
	.naat-poet-hero { padding: 24px; border-radius: 24px; }
	.naat-poet-krow { flex-direction: column; align-items: flex-start; gap: 8px; }
	.naat-poet-krow-tax { padding-left: 18px; }
}

/* ============================================================
   Tailwind card design enhancements from reference html
   ============================================================ */
.bg-texture {
	position: fixed;
	inset: 0;
	z-index: -1;
	opacity: 0.4;
	background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
	background-size: 32px 32px;
	pointer-events: none;
}

.urdu-text {
	line-height: 2.2;
	word-spacing: 2px;
}

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(40px); }
	to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
	animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	opacity: 0;
}
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

@keyframes shine {
	100% { left: 150%; }
}
.shine-effect {
	position: relative;
}
.shine-effect::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
	transform: skewX(-20deg);
	z-index: 30;
}
.group:hover .shine-effect::after {
	animation: shine 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.book-shadow {
	box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.08), 5px 8px 15px rgba(0, 0, 0, 0.12);
	transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media (min-width: 768px) {
	.book-shadow {
		box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.08), 10px 15px 25px rgba(0, 0, 0, 0.15);
	}
}
.group:hover .book-shadow {
	box-shadow: -6px 8px 20px rgba(0, 0, 0, 0.1), 10px 18px 30px rgba(0, 0, 0, 0.2);
	transform: translateY(-8px) scale(1.02);
}
@media (min-width: 768px) {
	.group:hover .book-shadow {
		box-shadow: -8px 10px 25px rgba(0, 0, 0, 0.12), 15px 25px 40px rgba(0, 0, 0, 0.25);
		transform: translateY(-12px) scale(1.03);
	}
}

.naat-wbx-glow-ref {
	background: var(--wbx-glow, #bbf7d0);
}
.group:hover .naat-wbx-title-ur-ref {
	color: var(--wbx-title, #15803d) !important;
}
.naat-wbx-kalam-ref {
	color: var(--wbx-pill-tx, #16a34a) !important;
	background: var(--wbx-pill-bg, #f0fdf4) !important;
	border: 1px solid color-mix(in srgb, var(--wbx-pill-tx) 15%, transparent) !important;
}
.naat-wbx-kalam-ref:hover {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
	transform: translateY(-1px);
}

/* Upgraded UI for Poet Biography Section */
.naat-poet-bio-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 15px;
}
@media (min-width: 768px) {
	.naat-poet-bio-grid {
		grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
		gap: 28px;
	}
}
.naat-poet-bio-block {
	background: #ffffff;
	border: 1px solid #f1f5f9;
	border-radius: 20px;
	padding: 20px 24px;
	box-shadow: 0 4px 20px -6px rgba(15, 23, 42, 0.05);
	transition: all 0.3s ease;
	position: relative;
}
.naat-poet-bio-block:hover {
	border-color: #e2e8f0;
	box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
	transform: translateY(-2px);
}
.naat-poet-bio-label {
	display: inline-block;
	font-family: var(--naat-font-ui, sans-serif);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #94a3b8;
	margin-bottom: 12px;
	border-bottom: 2px solid #cbd5e1;
	padding-bottom: 2px;
}
.naat-poet-bio-block.is-roman .naat-poet-bio-label {
	color: #0284c7;
	border-color: #bae6fd;
}
.naat-poet-bio-block.is-urdu .naat-poet-bio-label {
	color: #0f766e;
	border-color: #99f6e4;
}
.naat-poet-bio-content {
	color: #475569;
	font-size: 14.5px;
	line-height: 1.65;
}
.naat-poet-bio-content.font-urdu {
	font-family: var(--naat-font-urdu, "NaatFont") !important;
	font-size: 21px;
	line-height: 1.85;
	color: #0f172a;
}

/* Front page all section title center alignment */
.section-title-bar,
.naat-wb-bar {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	position: relative;
	gap: 8px !important;
	margin-bottom: 24px !important;
}
.section-title-bar > div,
.naat-wb-bar-text {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	width: 100%;
}
.section-title-bar h2,
.naat-wb-h2 {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.naat-wb-sub {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}