/* =========================================================================
   BLOG PAGE SPECIFIC STYLES
   ========================================================================= */

.page-title {
    color: #fff; font-size: 56px; font-weight: 800; line-height: 1.15;
    margin-bottom: 24px; letter-spacing: -2px; text-align: center;
}

/* --- Search Components --- */
.search-container { 
    position: relative; background: var(--br-bg-surface-glass-light); 
    border: 1px solid var(--br-border); border-radius: 100px; padding: 4px 24px; 
    display: flex; align-items: center; gap: 12px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
    backdrop-filter: blur(10px); 
}
.search-container:focus-within { border-color: var(--br-primary-light); box-shadow: 0 0 20px var(--br-primary-alpha-10); background: rgba(255, 255, 255, 0.05); }
.search-icon { color: var(--br-text-muted); }
#blogSearch { background: transparent; border: none; color: #fff; padding: 12px 0; width: 100%; font-size: 16px; outline: none; }
#clearSearch { background: transparent; border: none; color: var(--br-text-muted); cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
#clearSearch:hover { color: #fff; transform: scale(1.1); }
.no-results { text-align: center; padding: 60px 0; display: none; }

/* --- Pagination --- */
.pagination-wrapper {
    display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 60px;
}
.pagination-btn {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border-radius: 12px; background: var(--br-bg-surface-glass-light); border: 1px solid var(--br-border);
    color: #fff; text-decoration: none; font-weight: 600; transition: all 0.3s;
}
.pagination-btn:hover, .pagination-btn.active {
    background: var(--br-primary); border-color: var(--br-primary-light);
}
.pagination-btn.disabled { opacity: 0.3; pointer-events: none; }

@media (max-width: 991px) {
    .page-title { font-size: 42px; }
}
@media (max-width: 767px) {
    .page-title { font-size: 36px; }
}