/* ============================================================
   KENYA NI HOME
   Responsive CSS
   Node.js + EJS Project
   ============================================================ */


/* ============================================================
   0. GLOBAL IMAGE BASE STYLES
   ============================================================ */

img,
video,
iframe,
svg {
    max-width: 100%;
    height: auto;
}

img {
    display: block;
    object-position: top;
}

figure {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

figure img {
    width: 100%;
    height: auto;
}

figcaption {
    font-size: 11px;
    line-height: 1.4;
}

/* ============================================================
   1. GLOBAL MOBILE RESET
   ============================================================ */

@media (max-width: 991.98px) {

    html {
        scroll-padding-top: 56px;
        -webkit-text-size-adjust: 100%;
    }

    body {
        max-width: 100%;
        overflow-x: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    img,
    video,
    iframe,
    svg {
        max-width: 100%;
    }

    img,
    video {
        height: auto;
    }

    .container {
        width: 100%;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .container-fluid {
        max-width: 100%;
    }

    section {
        padding-left: 0;
        padding-right: 0;
    }
}


@media (max-width: 575.98px) {

    html {
        scroll-padding-top: 50px;
    }

    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


/* ============================================================
   2. RESPONSIVE TYPOGRAPHY
   ============================================================ */

@media (max-width: 991.98px) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        letter-spacing: -0.02em;
    }

    h1 {
        font-size: clamp(22px, 4.5vw, 32px) !important;
        line-height: 1.15 !important;
    }

    h2 {
        font-size: clamp(18px, 3.8vw, 26px) !important;
        line-height: 1.2 !important;
    }

    h3 {
        font-size: clamp(16px, 3.2vw, 20px) !important;
        line-height: 1.25 !important;
    }

    h4 {
        font-size: clamp(14px, 2.8vw, 17px) !important;
    }

    p,
    .dek {
        font-size: clamp(13px, 2vw, 15px) !important;
        line-height: 1.55 !important;
    }

    .article-body,
    .post-body {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }
}


@media (max-width: 575.98px) {

    h1 {
        font-size: clamp(20px, 5.5vw, 26px) !important;
    }

    h2 {
        font-size: clamp(17px, 4.5vw, 22px) !important;
    }

    h3 {
        font-size: clamp(15px, 3.8vw, 18px) !important;
    }

    h4 {
        font-size: clamp(13px, 3.2vw, 15px) !important;
    }

    p,
    .dek,
    .post-body {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .article-body {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}


/* ============================================================
   3. NAVIGATION
   ============================================================ */

@media (max-width: 991.98px) {

    .premium-nav .nav-container {
        height: 56px !important;
        padding: 0 16px !important;
    }

    .premium-nav .nav-logo img {
        max-height: 30px !important;
    }

    .premium-nav .nav-logo .brand-text {
        font-size: 17px !important;
    }

    .premium-nav .nav-mobile-panel {
        top: 56px !important;
        padding: 10px !important;
    }

    .premium-nav .nav-overlay {
        top: 56px !important;
    }

    .premium-nav .nav-mobile-list > li > a,
    .premium-nav .nav-mobile-list > li > button {
        min-height: 40px !important;
        padding: 10px 4px !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
    }
}


@media (max-width: 575.98px) {

    .premium-nav .nav-container {
        height: 50px !important;
        padding: 0 12px !important;
    }

    .premium-nav .nav-logo img {
        max-height: 26px !important;
    }

    .premium-nav .nav-logo .brand-text {
        font-size: 15px !important;
    }

    .premium-nav .nav-mobile-panel {
        top: 50px !important;
        padding: 8px !important;
    }

    .premium-nav .nav-overlay {
        top: 50px !important;
    }

    .premium-nav .nav-mobile-list > li > a,
    .premium-nav .nav-mobile-list > li > button {
        min-height: 40px !important;
        padding: 8px 2px !important;
        font-size: 13px !important;
    }
}


/* ============================================================
   4. DATELINE / SOCIAL BAR
   ============================================================ */

@media (max-width: 767px) {

    .dateline {
        padding: 10px 0 !important;
    }

    .dateline .wrap,
    .dateline-right {
        gap: 6px !important;
    }

    .socials {
        gap: 10px !important;
    }

    .dateline-right {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}


@media (max-width: 575.98px) {

    .dateline {
        padding: 8px 0 !important;
    }

    .socials {
        gap: 8px !important;
    }
}


/* ============================================================
   5. HERO SECTION
   ============================================================ */

@media (max-width: 991.98px) {

    .hero-section {
        padding-top: 28px !important;
        padding-bottom: 20px !important;
    }

    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .hero-media {
        order: -1 !important;
    }

    .hero-viewfinder img,
    .hero-media-link img {
        width: 100% !important;
        max-height: 280px !important;
        object-fit: cover !important;
    }

    .hero-title {
        margin-bottom: 10px !important;
    }

    .hero-excerpt {
        margin-bottom: 12px !important;
    }

    .hero-meta {
        margin-bottom: 14px !important;
        gap: 10px !important;
    }

    .hero-cta {
        min-height: 40px !important;
    }
}


@media (max-width: 575.98px) {

    .hero-section {
        padding-top: 20px !important;
        padding-bottom: 14px !important;
    }

    .hero-title {
        margin-bottom: 8px !important;
    }

    .hero-excerpt {
        margin-bottom: 10px !important;
    }

    .hero-meta {
        margin-bottom: 10px !important;
        gap: 8px !important;
    }

    .hero-cta {
        min-height: 36px !important;
    }

    .hero-viewfinder img,
    .hero-media-link img {
        max-height: 200px !important;
    }
}


/* ============================================================
   6. CONTENT RAIL
   ============================================================ */

@media (max-width: 991px) {

    .content-rail {
        flex-direction: column !important;
    }

    .latest-col,
    .sidebar-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}


/* ============================================================
   7. ARTICLE GRID
   ============================================================ */

@media (max-width: 991px) {

    .article-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .sidebar {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        margin-bottom: 30px !important;
    }
}


@media (max-width: 768px) {

    .article-grid {
        display: block !important;
    }

    .sidebar {
        margin-bottom: 24px !important;
    }
}


/* ============================================================
   8. STORY CARDS
   ============================================================ */

@media (max-width: 991.98px) {

    article,
    .story-card,
    .single-post-wrap,
    .cat-featured-link,
    .ad-card,
    .premium-card {
        border-radius: 10px !important;
    }

    article img,
    .story-card img,
    .single-post-wrap img,
    .cat-featured-link img {
        border-radius: 10px 10px 0 0 !important;
    }

    .story-body,
    .ad-card .body {
        padding: 14px !important;
    }

    .story-body h3 {
        font-size: 15px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }

    .story-body p {
        font-size: 12px !important;
        line-height: 1.45 !important;
        margin-bottom: 8px !important;
    }

    .story-foot {
        padding-top: 10px !important;
        font-size: 11px !important;
    }
}


@media (max-width: 575.98px) {

    article,
    .story-card,
    .single-post-wrap,
    .cat-featured-link,
    .ad-card {
        border-radius: 8px !important;
    }

    article img,
    .story-card img,
    .single-post-wrap img {
        border-radius: 8px 8px 0 0 !important;
    }

    .story-body,
    .ad-card .body {
        padding: 12px !important;
    }

    .story-body h3 {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }

    .story-body p {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }

    .story-foot {
        padding-top: 8px !important;
        font-size: 10px !important;
    }

    .cat-featured-link > div:first-child {
        min-height: 140px !important;
        max-height: 200px !important;
    }
}


/* ============================================================
   9. BREAKING NEWS
   ============================================================ */

@media (max-width: 767px) {

    .breaking-strip {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .breaking-items {
        width: 100% !important;
        display: flex !important;
        gap: 12px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 6px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .breaking-items::-webkit-scrollbar {
        display: none;
    }
}


@media (max-width: 575.98px) {

    .breaking-strip {
        margin-top: 16px !important;
        margin-bottom: 8px !important;
    }
}


/* ============================================================
   10. TOPICS / LATEST STRIPS
   ============================================================ */

@media (max-width: 991px) {

    .topics-bar-scroll,
    .latest-strip-track,
    .chip-rail {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .topics-bar-scroll::-webkit-scrollbar,
    .latest-strip-track::-webkit-scrollbar,
    .chip-rail::-webkit-scrollbar {
        display: none;
    }
}


/* ============================================================
   11. EXPLORE SECTION
   ============================================================ */

@media (max-width: 820px) {

    .explore-premium {
        padding: 28px 0 40px !important;
    }

    .explore-premium .feature-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .explore-premium h2.title {
        font-size: clamp(22px, 4vw, 28px) !important;
    }

    .explore-premium .section-head {
        margin-bottom: 20px !important;
        padding-bottom: 16px !important;
    }

    .explore-premium .story-body {
        padding: 14px !important;
    }

    .explore-premium .story-body h3 {
        font-size: 17px !important;
        line-height: 1.25 !important;
    }

    .explore-premium .story-body p.dek {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}


@media (max-width: 650px) {

    .explore-premium {
        padding: 20px 0 32px !important;
    }

    .explore-premium h2.title {
        font-size: 22px !important;
    }

    .explore-premium .section-head {
        margin-bottom: 16px !important;
        padding-bottom: 12px !important;
    }

    .explore-premium .story-body {
        padding: 12px !important;
    }

    .explore-premium .story-body h3 {
        font-size: 15px !important;
    }

    .explore-premium .story-body p.dek {
        font-size: 12px !important;
    }

    .explore-premium .story-img {
        aspect-ratio: 16 / 9 !important;
    }

    .explore-premium .chip {
        padding: 7px 12px !important;
        font-size: 12px !important;
    }
}


/* ============================================================
    12. SIDEBAR
    ============================================================ */

@media (max-width: 991.98px) {

    .sidebar-card {
        border-radius: 10px !important;
    }

    .sidebar-card-head {
        padding: 12px 14px !important;
    }

    .sidebar-card-body {
        padding: 10px 14px 14px !important;
    }

    .trend-item,
    .most-read-item {
        padding: 8px 0 !important;
        gap: 8px !important;
    }

    .trend-item h5,
    .trend-title,
    .most-read-item h5 {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .trend-meta,
    .meta {
        font-size: 10px !important;
    }

    /* restore horizontal padding for custom sections */
    .contact-section,
    .trending-section,
    .most-read-section {
        padding-left: clamp(12px, 3vw, 24px) !important;
        padding-right: clamp(12px, 3vw, 24px) !important;
    }
}


@media (max-width: 575px) {

    .sidebar-card {
        border-radius: 8px !important;
    }

    .sidebar-card-head {
        padding: 10px 12px !important;
    }

    .sidebar-card-body {
        padding: 8px 12px 12px !important;
    }

    .trend-item,
    .most-read-item {
        padding: 6px 0 !important;
        gap: 6px !important;
    }

    .trend-item h5,
    .trend-title,
    .most-read-item h5 {
        font-size: 12px !important;
    }

    .trend-meta,
    .meta {
        font-size: 9px !important;
    }

    /* restore horizontal padding for custom sections */
    .contact-section,
    .trending-section,
    .most-read-section {
        padding-left: clamp(10px, 4vw, 16px) !important;
        padding-right: clamp(10px, 4vw, 16px) !important;
    }
}


/* ============================================================
   13. ARTICLE PAGE
   ============================================================ */

@media (max-width: 991.98px) {

    .article-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .article-header {
        margin-bottom: 16px !important;
    }

    .article-title {
        font-size: clamp(24px, 5vw, 34px) !important;
        line-height: 1.15 !important;
    }

    .article-cover {
        width: 100% !important;
        max-height: 420px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }

    .article-body img {
        width: 100% !important;
        height: auto !important;
    }

    .article-body iframe {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
    }

    .article-body blockquote {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 12px 14px !important;
    }
}


@media (max-width: 575.98px) {

    .article-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .article-title {
        font-size: 23px !important;
    }

    .article-cover {
        max-height: 230px !important;
        border-radius: 8px !important;
    }

    .article-body {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .article-body h2 {
        font-size: 19px !important;
    }

    .article-body h3 {
        font-size: 17px !important;
    }

    .article-body blockquote {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }
}


/* ============================================================
   14. SHARE BUTTONS
   ============================================================ */

@media (max-width: 991px) {

    .share button {
        width: 32px !important;
        height: 32px !important;
    }

    .share button svg {
        width: 13px !important;
        height: 13px !important;
    }
}


@media (max-width: 575px) {

    .share button {
        width: 28px !important;
        height: 28px !important;
    }

    .share button svg {
        width: 12px !important;
        height: 12px !important;
    }
}


/* ============================================================
   15. COMMENTS
   ============================================================ */

@media (max-width: 767px) {

    .comment-form {
        padding: 14px !important;
    }

    .comment-item {
        gap: 8px !important;
        padding: 8px 0 !important;
    }

    .comment-avatar {
        flex-shrink: 0;
    }
}


@media (max-width: 575px) {

    .comment-form {
        padding: 12px !important;
    }

    .comment-item {
        gap: 6px !important;
        padding: 6px 0 !important;
    }

    .comment-avatar {
        width: 26px !important;
        height: 26px !important;
        font-size: 10px !important;
    }
}


/* ============================================================
   16. NEWSLETTER / FORMS
   ============================================================ */

@media (max-width: 767px) {

    .newsletter-form {
        width: 100% !important;
    }

    .newsletter-form input {
        min-width: 0 !important;
        width: 100% !important;
    }

    .newsletter-form,
    .form-row {
        flex-direction: column !important;
    }

    input,
    textarea,
    select {
        max-width: 100% !important;
        font-size: 15px !important;
        box-sizing: border-box !important;
    }

    button[type="submit"],
    .btn {
        min-height: 40px !important;
    }
}


@media (max-width: 575px) {

    input,
    textarea,
    select {
        font-size: 14px !important;
    }

    button[type="submit"],
    .btn {
        min-height: 36px !important;
        font-size: 12px !important;
    }
}


/* ============================================================
   17. ADVERTISE PAGE
   ============================================================ */

@media (max-width: 860px) {

    .advertised-hero {
        padding: 28px 0 20px !important;
    }

    .advertised-hero h1 {
        font-size: 28px !important;
    }

    .advertised-hero p {
        font-size: 13px !important;
    }

    .advertised-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .advertised-stats .stat-item {
        padding: 12px !important;
    }

    .advertised-stats .stat-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }

    .advertised-stats .stat-num {
        font-size: 13px !important;
    }

    .cat-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .cat-card {
        padding: 12px 6px !important;
    }

    .cat-icon {
        width: 26px !important;
        height: 26px !important;
        font-size: 16px !important;
    }

    .cat-name {
        font-size: 10px !important;
    }

    .section {
        padding: 24px 0 !important;
    }

    .section-head h2 {
        font-size: 18px !important;
    }
}


@media (max-width: 600px) {

    .advertised-hero {
        padding: 20px 0 16px !important;
    }

    .advertised-hero h1 {
        font-size: 24px !important;
    }

    .advertised-hero p {
        font-size: 12px !important;
    }

    .advertised-stats {
        gap: 6px !important;
    }

    .advertised-stats .stat-item {
        padding: 10px !important;
    }

    .advertised-stats .stat-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .advertised-stats .stat-num {
        font-size: 12px !important;
    }

    .advertised-stats .stat-label {
        font-size: 10px !important;
    }

    .cat-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .cat-card {
        padding: 10px 4px !important;
        border-radius: 8px !important;
    }

    .cat-icon {
        width: 22px !important;
        height: 22px !important;
        font-size: 14px !important;
    }

    .cat-name {
        font-size: 9px !important;
    }

    .section {
        padding: 18px 0 !important;
    }

    .section-head h2 {
        font-size: 16px !important;
    }

    .why-grid {
        grid-template-columns: 1fr !important;
    }

    .why-item {
        padding: 14px !important;
    }

    .why-item h3 {
        font-size: 13px !important;
    }

    .why-item p {
        font-size: 11px !important;
    }

    .cta-banner {
        padding: 16px !important;
    }

    .cta-left h3 {
        font-size: 14px !important;
    }

    .cta-left p {
        font-size: 12px !important;
    }
}


/* ============================================================
   18. CONTACT PAGE
   ============================================================ */

@media (max-width: 991px) {

    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .contact-info,
    .contact-form {
        width: 100% !important;
    }

    .contact-card {
        padding: 16px !important;
    }
}


@media (max-width: 575px) {

    .contact-grid {
        gap: 14px !important;
    }

    .contact-card {
        padding: 12px !important;
        border-radius: 8px !important;
    }

    .contact-card h3 {
        font-size: 16px !important;
    }

    .contact-card p {
        font-size: 12px !important;
    }
}


/* ============================================================
   19. SEARCH PAGE
   ============================================================ */

@media (max-width: 991px) {

    .search-results {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .search-result-card {
        width: 100% !important;
    }

    .search-result-card img {
        max-height: 220px !important;
        object-fit: cover !important;
    }

    .search-form {
        width: 100% !important;
    }
}


@media (max-width: 575px) {

    .search-result-card {
        border-radius: 8px !important;
    }

    .search-result-card img {
        max-height: 180px !important;
    }

    .search-result-card .body {
        padding: 12px !important;
    }

    .search-result-card h3 {
        font-size: 15px !important;
    }

    .search-result-card p {
        font-size: 11px !important;
    }
}


/* ============================================================
   20. CATEGORY PAGE
   ============================================================ */

@media (max-width: 991px) {

    .category-layout {
        grid-template-columns: 1fr !important;
    }

    .category-main,
    .category-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .category-sidebar {
        margin-top: 18px !important;
    }

    .category-feature {
        grid-template-columns: 1fr !important;
    }

    .category-feature img {
        max-height: 280px !important;
        object-fit: cover !important;
    }
}


@media (max-width: 575px) {

    .category-feature {
        border-radius: 8px !important;
    }

    .category-feature img {
        max-height: 200px !important;
    }

    .category-feature-body {
        padding: 12px !important;
    }

    .category-feature-body h1,
    .category-feature-body h2 {
        font-size: 20px !important;
    }
}


/* ============================================================
   21. FOOTER
   ============================================================ */

@media (max-width: 991.98px) {

    footer,
    .footer-area {
        padding-top: 24px !important;
        padding-bottom: 16px !important;
    }

    footer .row,
    .footer-area .row {
        row-gap: 16px !important;
    }

    .footer-bottom {
        padding-top: 14px !important;
        margin-top: 18px !important;
    }

    footer .widget-title {
        font-size: 12px !important;
        margin-bottom: 12px !important;
    }

    footer .col-lg-3 {
        margin-bottom: 20px !important;
    }
}

@media (max-width: 575.98px) {

    footer,
    .footer-area {
        padding-top: 20px !important;
        padding-bottom: 12px !important;
    }

    footer .row,
    .footer-area .row {
        row-gap: 12px !important;
    }

    .footer-bottom {
        padding-top: 10px !important;
        margin-top: 14px !important;
    }

    footer .widget-title {
        font-size: 11px !important;
        margin-bottom: 10px !important;
    }

    footer .col-lg-3 {
        margin-bottom: 16px !important;
    }

    footer ul,
    footer .widget_nav_menu {
        gap: 10px !important;
    }

    footer .footer-popular-list a {
        gap: 8px !important;
        padding: 6px 0 !important;
    }

    footer .footer-popular-list a span {
        font-size: 10px !important;
        min-width: 18px !important;
    }

    footer .footer-popular-list a div div:first-child {
        font-size: 10px !important;
    }

    footer .footer-popular-list a div div:last-child {
        font-size: 10px !important;
    }
}


/* ============================================================
   22. AUTH / LOGIN
   ============================================================ */

@media (max-width: 900px) {

    .auth-frame {
        border-radius: 12px !important;
    }

    .auth-brand-panel,
    .auth-form-panel {
        padding: 20px 18px !important;
    }

    .auth-brand-top h2 {
        font-size: 20px !important;
    }

    .auth-feature-grid {
        gap: 8px !important;
    }

    .auth-feature {
        padding: 10px !important;
    }

    .auth-feature h5 {
        font-size: 11px !important;
    }

    .auth-feature p {
        font-size: 10px !important;
    }

    .auth-form-inner h1 {
        font-size: 22px !important;
    }
}


@media (max-width: 480px) {

    .auth-body {
        padding: 8px !important;
    }

    .auth-brand-panel,
    .auth-form-panel {
        padding: 16px 14px !important;
    }

    .auth-brand-top h2 {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }

    .auth-brand-top p {
        font-size: 12px !important;
        margin-bottom: 16px !important;
    }

    .auth-feature-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .auth-form-inner h1 {
        font-size: 20px !important;
    }

    .auth-field {
        margin-bottom: 10px !important;
    }

    .auth-input-wrap input {
        padding: 10px 12px 10px 36px !important;
        font-size: 13px !important;
    }

    .auth-submit {
        height: 42px !important;
        font-size: 13px !important;
    }

    .login-shell {
        padding: 12px !important;
    }

    .login-card {
        padding: 20px 14px !important;
        border-radius: 12px !important;
    }

    .login-brand .brand-logo {
        height: 32px !important;
    }

    .login-brand-word {
        font-size: 18px !important;
    }

    .login-title {
        font-size: 18px !important;
    }

    .login-card .sub {
        font-size: 12px !important;
    }

    .login-card .field {
        margin-bottom: 10px !important;
    }

    .login-card .field input,
    .login-card .field textarea,
    .login-card .field select {
        padding: 9px 10px !important;
        font-size: 12px !important;
    }
}


/* ============================================================
   23. ADMIN DASHBOARD
   ============================================================ */

@media (max-width: 900px) {

    .sidebar {
        width: 280px;
        max-width: 85vw;
        transform: translateX(-100%);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 8px 0 30px rgba(0,0,0,.18);
    }

    .sidebar-toggle {
        display: inline-flex !important;
    }

    .main-panel {
        margin-left: 0 !important;
    }
}

@media (max-width: 640px) {

    .sidebar {
        width: 100%;
        max-width: 100vw;
    }

    .panel-body {
        padding: 12px !important;
    }

    .topbar {
        padding: 10px 12px !important;
    }
}

@media (max-width: 480px) {

    .sidebar-toggle {
        top: 10px;
        right: 8px;
        width: 30px;
        height: 30px;
    }

    .sidebar-brand {
        padding: 10px 10px !important;
    }

    .brand-logo {
        height: 26px !important;
    }

    .brand-text {
        font-size: 13px !important;
    }

    .topbar {
        padding: 8px 10px !important;
        min-height: 48px !important;
    }

    .topbar-left h1 {
        font-size: 14px !important;
    }

    .crumb {
        font-size: 9px !important;
        letter-spacing: .05em !important;
    }
}


/* ============================================================
   24. TABLES
   ============================================================ */

@media (max-width: 767px) {

    .table-responsive {
        width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .table-responsive::-webkit-scrollbar {
        display: none;
    }

    table {
        min-width: 560px;
    }

    th,
    td {
        white-space: nowrap;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}


/* ============================================================
   25. VIDEO / EMBEDS
   ============================================================ */

@media (max-width: 991px) {

    .video-wrapper,
    .embed-wrapper,
    .media-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .video-wrapper iframe,
    .embed-wrapper iframe,
    .media-wrapper iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}


/* ============================================================
   26. PAGINATION
   ============================================================ */

@media (max-width: 575px) {

    .pagination {
        gap: 4px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .pagination a,
    .pagination button,
    .pagination span {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        font-size: 11px !important;
    }
}


/* ============================================================
   27. BACK TO TOP
   ============================================================ */

@media (max-width: 575.98px) {

    .back-to-top {
        right: 12px !important;
        bottom: 12px !important;
        width: 36px !important;
        height: 36px !important;
    }

    .back-to-top span,
    .back-top {
        width: 36px !important;
        height: 36px !important;
    }
}


/* ============================================================
   28. COOKIE / NOTIFICATION
   ============================================================ */

@media (max-width: 575px) {

    .cookie-banner,
    .notification-banner,
    .toast,
    .site-notice {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        width: auto !important;
        padding: 12px !important;
        border-radius: 8px !important;
    }
}


/* ============================================================
   29. MODALS
   ============================================================ */

@media (max-width: 575px) {

    .modal-dialog,
    .premium-modal {
        width: calc(100% - 16px) !important;
        max-width: none !important;
        margin: 8px auto !important;
    }

    .modal-content {
        border-radius: 10px !important;
    }

    .modal-body {
        padding: 14px !important;
    }

    .modal-header,
    .modal-footer {
        padding: 10px 14px !important;
    }
}


/* ============================================================
   30. TOUCH TARGETS
   ============================================================ */

@media (hover: none) and (pointer: coarse) {

    button,
    [role="button"],
    input[type="submit"],
    .btn {
        min-height: 40px;
    }

    .nav-desktop > li > a,
    .nav-mobile-list > li > a,
    .nav-mobile-list > li > button {
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
    }

    .premium-card:hover,
    .story-card:hover,
    .single-post-wrap:hover,
    article:hover {
        transform: none !important;
    }
}


/* ============================================================
   31. SAFE AREA
   ============================================================ */

@supports (padding-top: env(safe-area-inset-top)) {

    .premium-nav .nav-mobile-panel {
        padding-top: calc(8px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    }

    .back-to-top {
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }
}


/* ============================================================
   32. MOBILE UTILITY CLASSES
   ============================================================ */

@media (max-width: 767px) {

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    .mobile-full {
        width: 100% !important;
    }

    .mobile-center {
        text-align: center !important;
    }

    .mobile-stack {
        flex-direction: column !important;
    }

    .mobile-hide {
        display: none !important;
    }
}


@media (min-width: 768px) {

    .mobile-only {
        display: none !important;
    }
}


/* ============================================================
   33. MOBILE OVERFLOW PROTECTION
   ============================================================ */

@media (max-width: 991.98px) {

    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    pre {
        max-width: 100%;
        overflow-x: auto !important;
    }

    iframe,
    video,
    img {
        max-width: 100% !important;
    }

    figure {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    figure img {
        width: 100% !important;
        height: auto !important;
    }

    figcaption {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
}


/* ============================================================
   34. VERY SMALL DEVICES
   ============================================================ */

@media (max-width: 360px) {

    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    h1 {
        font-size: 20px !important;
    }

    h2 {
        font-size: 17px !important;
    }

    h3 {
        font-size: 15px !important;
    }

    .premium-nav .nav-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .premium-nav .nav-logo .brand-text {
        font-size: 14px !important;
    }

    .hero-title {
        font-size: 21px !important;
    }

    .story-body {
        padding: 10px !important;
    }
}


/* ============================================================
    34. SINGLE POST PAGE MOBILE FIXES
    ============================================================ */

@media (max-width: 991.98px) {

    .article-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .article-grid > .main,
    .article-grid > article.main {
        width: 100% !important;
        max-width: 100% !important;
    }

    .article-grid > .sidebar,
    .article-grid > aside.sidebar {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-top: 8px !important;
    }

    .sidebar {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 24px !important;
    }

    .trend {
        grid-template-columns: 24px 1fr 56px !important;
        gap: 6px !important;
        padding: 10px 0 !important;
    }

    .trend-title {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .trend-meta {
        font-size: 10px !important;
    }

    .thumb {
        width: 56px !important;
        height: 42px !important;
    }

    .number {
        font-size: 13px !important;
    }

    .byline {
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    .byline .author {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .byline .share {
        flex: 0 0 auto !important;
    }

    .hero {
        height: clamp(200px, 28vw, 320px) !important;
    }

    .article-body {
        margin: 20px 0 40px !important;
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    .article-body p {
        margin-bottom: 16px !important;
    }

    .article-body h2 {
        font-size: 22px !important;
        margin: 28px 0 10px !important;
    }

    .article-body h3 {
        font-size: 19px !important;
        margin: 24px 0 8px !important;
    }

    .article-body blockquote {
        margin: 20px 0 !important;
        padding: 16px 18px !important;
        font-size: 16px !important;
    }

    .article-body .quote {
        margin: 20px 0 !important;
        padding: 18px 20px !important;
        font-size: 17px !important;
    }

    .article-body .readalso {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    .article-body .readalso img {
        width: 100% !important;
        height: auto !important;
        max-height: 180px !important;
    }

    .article-body .arrow {
        margin-left: 0 !important;
        align-self: flex-end !important;
    }

    .article-title {
        font-size: clamp(22px, 4.5vw, 32px) !important;
        letter-spacing: -0.02em !important;
    }

    .dek {
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin-bottom: 18px !important;
    }

    .tag {
        font-size: 9px !important;
        padding: 5px 9px !important;
    }

    .card {
        padding: 16px !important;
        border-radius: 10px !important;
    }

    .card h3 {
        font-size: 15px !important;
        margin-bottom: 12px !important;
    }

    .newsletter {
        padding: 18px !important;
    }

    .newsletter h3 {
        font-size: 17px !important;
        margin-bottom: 8px !important;
    }

    .newsletter p {
        font-size: 12px !important;
    }

    .newsletter input {
        padding: 10px 12px !important;
        font-size: 13px !important;
        margin: 8px 0 8px !important;
    }

    .newsletter button {
        padding: 10px !important;
        font-size: 13px !important;
    }

    .newsletter small {
        font-size: 10px !important;
        margin-top: 6px !important;
    }

    .comments-section {
        padding: 32px 0 !important;
    }

    .comment-form {
        padding: 16px !important;
    }

    .comment-item {
        gap: 8px !important;
        padding: 8px 0 !important;
    }

    .comment-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 10px !important;
    }

    .comment-name {
        font-size: 11px !important;
    }

    .comment-date {
        font-size: 9px !important;
    }

    .comment-text {
        font-size: 12px !important;
    }

    .author-card {
        padding: 20px !important;
        margin-top: 24px !important;
    }

    .author-card .big-avatar {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
    }

    .author-card p {
        font-size: 11px !important;
    }

    .tags-section {
        margin-top: 24px !important;
        padding-top: 18px !important;
    }

    .tag-pill {
        font-size: 11px !important;
        padding: 4px 9px !important;
    }
}

@media (max-width: 575.98px) {

    .article-grid {
        gap: 12px !important;
    }

    .sidebar {
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    .trend {
        grid-template-columns: 22px 1fr 48px !important;
        gap: 5px !important;
        padding: 8px 0 !important;
    }

    .trend-title {
        font-size: 11px !important;
    }

    .trend-meta {
        font-size: 9px !important;
    }

    .thumb {
        width: 48px !important;
        height: 36px !important;
    }

    .number {
        font-size: 12px !important;
    }

    .byline {
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

    .hero {
        height: clamp(180px, 26vw, 260px) !important;
    }

    .article-body {
        margin: 16px 0 32px !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    .article-body p {
        margin-bottom: 14px !important;
    }

    .article-body h2 {
        font-size: 20px !important;
        margin: 24px 0 8px !important;
    }

    .article-body h3 {
        font-size: 17px !important;
        margin: 20px 0 6px !important;
    }

    .article-body blockquote {
        font-size: 14px !important;
        padding: 12px 14px !important;
    }

    .article-body .quote {
        font-size: 15px !important;
        padding: 14px 16px !important;
    }

    .article-title {
        font-size: clamp(20px, 5vw, 26px) !important;
    }

    .dek {
        font-size: 13px !important;
        margin-bottom: 14px !important;
    }

    .tag {
        font-size: 8px !important;
        padding: 4px 7px !important;
    }

    .card {
        padding: 14px !important;
    }

    .card h3 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    .newsletter {
        padding: 14px !important;
    }

    .newsletter h3 {
        font-size: 15px !important;
    }

    .newsletter p {
        font-size: 11px !important;
    }

    .newsletter input {
        padding: 9px 10px !important;
        font-size: 12px !important;
    }

    .newsletter button {
        padding: 9px !important;
        font-size: 12px !important;
    }

    .comments-section {
        padding: 24px 0 !important;
    }

    .comment-form {
        padding: 14px !important;
    }

    .comment-avatar {
        width: 24px !important;
        height: 24px !important;
        font-size: 9px !important;
    }

    .author-card {
        padding: 16px !important;
    }

    .author-card .person {
        gap: 10px !important;
    }

    .author-card .big-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
    }

    .share button {
        width: 30px !important;
        height: 30px !important;
    }

    .share button svg {
        width: 12px !important;
        height: 12px !important;
    }
}


/* ============================================================
    35. REDUCED MOTION
    ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================================
    35. HOME PAGE TRENDING / MOST READ CARDS
    ============================================================ */

@media (max-width: 991.98px) {
    .trending-section article,
    .most-read-section article {
        border-radius: 10px !important;
    }
}

@media (max-width: 575.98px) {
    .trending-section .row > [class*="col-"],
    .most-read-section .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 14px !important;
    }

    .trending-section article,
    .most-read-section article {
        border-radius: 10px !important;
    }

    .trending-section article div,
    .most-read-section article div {
        padding: 14px !important;
    }

    .trending-section article h3,
    .most-read-section article h3 {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    .trending-section article div > div,
    .most-read-section article div > div {
        font-size: 11px !important;
    }
}


/* ============================================================
    36. FINAL MOBILE VIEWPORT PROTECTION
    ============================================================ */

@supports (height: 100dvh) {

    .mobile-menu,
    .nav-mobile-panel,
    .mobile-overlay {
        max-height: calc(100dvh - 50px) !important;
    }
}