/* assets/css/knowledge.css */

.niz-knowledge-wrapper { width: 100%; max-width: 1200px; margin: auto; padding: 10px; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* Filter Custom Bar Layouts */
.niz-knowledge-filter-bar { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    margin-bottom: 35px; 
    padding: 20px; 
    border-radius: 12px; 
    
    /* A much more prominent, vibrant Emerald Green to Sky Blue */
    background: linear-gradient(135deg, #a7f3d0 0%, #bae6fd 100%) !important; 
    
    /* A slightly darker green border to frame it sharply */
    border: 1px solid #6ee7b7 !important; 
    
    /* Slightly stronger shadow to lift it off the page */
    box-shadow: 0 6px 20px rgba(13, 77, 71, 0.15) !important; 
}


.niz-knowledge-input-group { display: flex; flex-direction: column; flex: 1; gap: 6px; }
.niz-knowledge-input-group label { font-size: 11px; font-weight: 700; color: #0d4d47; text-transform: uppercase; letter-spacing: 0.5px; }
.niz-knowledge-input-group input, .niz-knowledge-input-group select { min-height: 44px; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; width: 100%; background-color: #f8fafc; color: #334155; transition: all 0.2s; }
.niz-knowledge-input-group input:focus, .niz-knowledge-input-group select:focus { border-color: #25988b; background-color: #fff; outline: none; }

/* Structural Content Grid Canvas */
.niz-grid-canvas { display: grid; grid-template-columns: 1fr; gap: 25px; margin-top: 15px; }

/* Card Element Blocks */
.knowledge-card-link { display: flex; flex-direction: column; text-decoration: none !important; color: inherit !important; height: 100%; min-height: 220px; transition: transform 0.2s ease-in-out; }

.knowledge-card, .niz-knowledge-card {
    background: #ffffff;
    border-radius: 16px;
    
    /* INCREASED SHADOW: Wider blur and slightly higher opacity for more presence */
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -4px rgba(0, 0, 0, 0.04);
    
    border: 1px solid rgba(39, 177, 157, 0.45); 
    
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; /* <-- THIS IS THE FIX: Forces the card to stretch to the grid row height */
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.35s ease;
}

/* Make sure your hover shadow is proportionally larger so the animation still pops! */
.knowledge-card:hover, .niz-knowledge-card:hover {
    transform: translateY(-4px);
    /* Bumped the hover shadow up slightly to compensate for the stronger base shadow */
    box-shadow: 0 16px 32px -6px rgba(39, 177, 157, 0.18), 0 8px 16px -8px rgba(0, 0, 0, 0.08);
    border-color: #27B19D; 
}


.knowledge-card-img-box { width: 100%; height: 190px; position: relative; background: #f8fafc; overflow: hidden; border-bottom: 1px solid #f1f5f9; }
.knowledge-card-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }

.knowledge-card-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.knowledge-name { font-size: 17px; font-weight: 700; color: #0f172a !important; margin: 0 0 4px 0 !important; line-height: 1.4; display: block; }

.knowledge-inline-cat-text { display: inline-block; font-size: 11px; font-weight: 700; color: #25988B; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.knowledge-excerpt { font-size: 13px; color: #64748b; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.knowledge-card-footer { padding: 14px 20px; border-top: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; background: #fafbfc; }
.knowledge-date-metric { font-size: 12px; font-weight: 600; color: #64748b; }
.knowledge-read-btn { font-size: 12px; font-weight: 700; color: #0d4d47; }

/* Card Animations */
.knowledge-card-link:hover .knowledge-card { transform: translateY(-5px); border-color: #cbd5e1; box-shadow: 0 12px 30px rgba(13, 77, 71, 0.08); }
.knowledge-card-link:hover img { transform: scale(1.05); }
.knowledge-card-link:hover .knowledge-name { color: #25988b; }

.load-more-knowledge-btn { display: block; min-height: 44px; margin: 40px auto; padding: 12px 28px; background: #fff; color: #0d4d47; border: 2px solid #0d4d47; border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s; }
.load-more-knowledge-btn:hover { background: #0d4d47; color: #fff; }

.niz-carousel-wrapper { 
    width: 100%; 
    max-width: 1200px; 
    margin: auto; 
    position: relative; 
    /* Removed overflow: hidden here so dots don't get cut off */
}

/* 1. Add 60px of bottom padding to push the container wall down */
.nizKnowledgeSwiper { 
    padding: 10px 10px 60px 10px !important; 
}

/* 2. Anchor the dots into that safe 60px padding zone */
.nizKnowledgeSwiper .swiper-pagination {
    bottom: 10px !important; 
}

.nizKnowledgeSwiper .swiper-pagination-bullet { 
    background: #cbd5e1; 
    opacity: 1; 
    width: 8px; 
    height: 8px; 
    transition: all 0.3s ease; 
}

.nizKnowledgeSwiper .swiper-pagination-bullet-active { 
    background: #25988b; 
    width: 22px; 
    border-radius: 4px; 
}

/* 3. MOBILE SWIPE FIX: Prevents the phone from trying to "drag" the image, forcing it to swipe the slide instead */
.nizKnowledgeSwiper .knowledge-card-img-box img {
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Ensure slides stretch equally */
.nizKnowledgeSwiper .swiper-slide {
    height: auto;
}

@media (min-width: 768px) {
    .niz-knowledge-filter-bar { flex-direction: row; }
}

/* ---------------------------------------------------------------------------
   THE KNOWLEDGE HUB'S TOPIC INDEX IS NAVIGATION, NOT PROSE (2026-08-31)

   "Browse by topic" is 16 links to the category pages, and each one measured
   19px tall with 6px between it and the next - a cramped target on the phones
   most of this traffic arrives on. It matters more than it looks: this page is
   where /islam/, /hajj/, /zakat/, /nikah/, /hadith/ and /sunnah/ now land, so
   for anyone arriving on one of those it IS the navigation.

   THE PADDING IS ON AN INLINE LINK, DELIBERATELY, AND inline-block IS WRONG
   HERE. The obvious version - display:inline-block with vertical padding -
   measures a perfect 44px and looks broken: an inline-block changes the list
   item's baseline, so in "Start here" and "Recently published", where every
   link wraps onto two lines, the bullet jumped to the SECOND line. The numbers
   said 44px and no overflow; only the rendered page showed it.

   Vertical padding on an inline box grows the CLICKABLE AREA without touching
   the line box, so the marker, the wrap and the trailing "(17 articles)" all
   stay exactly where they were. The margin then spaces the rows so the
   enlarged areas tile rather than overlap: measured 45px tall on a 46px pitch,
   overlap 0.

   Styling only - the markup is hand-written HTML in the page's own content, so
   nothing here depends on a template. Making the whole row a link (moving
   "(N articles)" inside the anchor) would give a full-width target and is the
   better shape, but that is a content edit and belongs to whoever owns the
   page.
   --------------------------------------------------------------------------- */
.m4a-hub-index ul li { margin-bottom: 20px; }
.m4a-hub-index ul li a { padding: 13px 0; }