/*
 * ================================================================
 *  tablet.css — Onlinepana · PREMIUM Responsive Tablet Stylesheet
 *  iPad Portrait  576–820px  |  iPad Landscape  821–1024px
 *
 *  Link already in index.html:
 *  <link rel="stylesheet" href="tablet.css" media="screen">
 * ================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — Premium color system
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Brand Colors */
    --op-blue        : #0054a4;
    --op-blue-dark   : #003d7a;
    --op-blue-light  : #1a7fd4;
    --op-red         : #e8192c;
    --op-red-dark    : #b8121e;
    --op-navy        : #0f172a;
    --op-navy-mid    : #1e293b;

    /* Backgrounds */
    --op-bg-page     : #f1f5f9;
    --op-bg-card     : #ffffff;
    --op-bg-dark     : #0f172a;
    --op-bg-section  : #f8fafc;

    /* Neutrals */
    --op-gray-100    : #f1f5f9;
    --op-gray-200    : #e2e8f0;
    --op-gray-300    : #cbd5e1;
    --op-gray-500    : #64748b;
    --op-gray-700    : #334155;
    --op-border      : #e2e8f0;

    /* Gradients */
    --op-grad-blue   : linear-gradient(135deg, #0054a4 0%, #1a7fd4 100%);
    --op-grad-red    : linear-gradient(135deg, #e8192c 0%, #ff5a3d 100%);
    --op-grad-dark   : linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    --op-grad-hero   : linear-gradient(180deg, transparent 30%, rgba(10,20,40,0.95) 100%);
    --op-grad-accent : linear-gradient(90deg, #e8192c 0%, #0054a4 100%);

    /* Shadows */
    --op-shadow-xs   : 0 1px 4px rgba(0,0,0,.06);
    --op-shadow-sm   : 0 4px 16px rgba(0,0,0,.08);
    --op-shadow-md   : 0 8px 32px rgba(0,0,0,.12);
    --op-shadow-lg   : 0 16px 48px rgba(0,0,0,.16);
    --op-shadow-blue : 0 8px 24px rgba(0,84,164,.25);

    /* Radii */
    --op-radius-sm   : 6px;
    --op-radius      : 10px;
    --op-radius-lg   : 16px;
    --op-radius-xl   : 24px;

    /* Transitions */
    --op-ease        : cubic-bezier(0.4, 0, 0.2, 1);
    --op-transition  : 0.3s var(--op-ease);
}

/* ═══════════════════════════════════════════════════════════════
   1. GLOBAL RESET & TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    *, *::before, *::after { box-sizing: border-box; }

    body {
        overflow-x: hidden;
        background: var(--op-bg-page);
        font-family: 'Mukta', 'Poppins', sans-serif !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    img  { max-width: 100%; height: auto; display: block; }
    a    { text-decoration: none !important; }

    /* Container */
    .uk-container-large {
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Global link hover */
    a.ah {
        color: var(--op-navy-mid);
        transition: color var(--op-transition);
    }
    a.ah:hover { color: var(--op-blue) !important; }

    /* Spacing */
    .uk-margin-medium-top { margin-top: 24px !important; }
    .uk-margin-small-top  { margin-top: 12px !important; }

    /* Scrollbar styling */
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: var(--op-gray-100); }
    ::-webkit-scrollbar-thumb { background: var(--op-gray-300); border-radius: 2px; }
}

/* ═══════════════════════════════════════════════════════════════
   2. TOP BAR — Premium strip
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .top-nav {
        padding: 7px 0;
        background: var(--op-navy) !important;
        border-bottom: none;
    }
    .top-nav-sec-title {
        font-size: 12px;
        color: #94a3b8 !important;
        font-weight: 500;
        letter-spacing: 0.04em;
    }
    .date-time-today {
        font-size: 11.5px;
        color: #94a3b8 !important;
        font-weight: 500;
    }
    .social-icon-item {
        width: 28px !important;
        height: 28px !important;
        background: rgba(255,255,255,0.08) !important;
        border-radius: 50% !important;
        transition: background var(--op-transition);
    }
    .social-icon-item:hover {
        background: var(--op-blue) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   3. HEADER / LOGO — Premium branded header
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    /* Header wrapper */
    .uk-padding-small {
        background: #fff;
        border-bottom: 3px solid var(--op-blue);
    }
    .uk-padding-small a img {
        max-width: 200px;
        width: 100%;
        height: auto;
        filter: drop-shadow(0 2px 8px rgba(0,84,164,.15));
    }
    .adsimage img {
        max-width: 100%;
        height: auto !important;
        border-radius: var(--op-radius);
        box-shadow: var(--op-shadow-sm);
    }
    .mobile-headaer-social { justify-content: center !important; }
}
@media (min-width:576px) and (max-width:820px) {
    .uk-padding-small a img { max-width: 155px; }
}

/* ═══════════════════════════════════════════════════════════════
   4. BREAKING NEWS / TICKER BAR
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    /* If there's a ticker/breaking bar */
    .breaking-news-bar,
    .ticker-wrap,
    [class*="breaking"],
    [class*="ticker"] {
        background: var(--op-grad-red) !important;
        padding: 6px 14px !important;
        border-radius: 0 !important;
    }
    .breaking-news-bar .label,
    [class*="breaking"] .label {
        background: #fff !important;
        color: var(--op-red) !important;
        padding: 2px 10px;
        border-radius: 3px;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-right: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   5. STICKY NAVIGATION — Premium glassy navbar
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .np-border.catnav-,
    [class*="catnav"],
    .uk-navbar-container {
        position: sticky;
        top: 0;
        z-index: 990;
        background: rgba(255,255,255,0.97) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 2px 20px rgba(0,0,0,.10), 0 1px 0 var(--op-border) !important;
    }

    .uk-navbar-nav > li > a,
    .navigation-bar > li > a {
        font-size: 13px !important;
        padding: 0 10px;
        min-height: 48px !important;
        line-height: 48px;
        font-weight: 600;
        color: var(--op-navy-mid) !important;
        letter-spacing: 0.01em;
        position: relative;
        transition: color var(--op-transition) !important;
    }

    /* Premium hover underline */
    .uk-navbar-nav > li > a::after,
    .navigation-bar > li > a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 10px;
        right: 10px;
        height: 2px;
        background: var(--op-grad-blue);
        border-radius: 2px 2px 0 0;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.25s var(--op-ease);
    }
    .uk-navbar-nav > li > a:hover::after,
    .uk-navbar-nav > li.uk-active > a::after,
    .navigation-bar > li > a:hover::after { transform: scaleX(1); }

    .uk-navbar-nav > li > a:hover,
    .navigation-bar > li > a:hover { color: var(--op-blue) !important; }

    .uk-navbar-dropdown {
        min-width: 190px;
        border-radius: var(--op-radius);
        box-shadow: var(--op-shadow-md);
        border: 1px solid var(--op-border);
    }
    .mob-date        { font-size: 11.5px; color: var(--op-gray-500); }
    .uk-search-input { width: 125px; font-size: 13px; }
    .logo-sticky img { width: 34px !important; height: 34px !important; }
}
@media (min-width:576px) and (max-width:820px) {
    .uk-navbar-nav > li > a,
    .navigation-bar > li > a { font-size: 12px !important; padding: 0 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   6. OFFCANVAS MENU — Premium sidebar nav
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {

    /* Sidebar bar wrapper */
    .uk-offcanvas-bar {
        width: 300px !important;
        padding: 0 !important;
        background: linear-gradient(170deg, #070e1c 0%, #0c1a30 60%, #07111f 100%) !important;
        box-shadow: 12px 0 48px rgba(0,0,0,0.45) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Glowing top accent border */
    .uk-offcanvas-bar::before {
        content: '' !important;
        display: block !important;
        height: 3px !important;
        width: 100% !important;
        background: linear-gradient(90deg, #2563eb, #7c3aed, #0ea5e9) !important;
        flex-shrink: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Logo area */
    .uk-offcanvas-bar .uk-section {
        padding: 20px 20px 0 20px !important;
    }
    .uk-offcanvas-bar img {
        max-width: 150px !important;
        height: auto !important;
        margin-bottom: 4px !important;
        filter: brightness(0) invert(1) !important;
        opacity: 0.92 !important;
        display: block !important;
    }

    /* Divider below logo */
    .uk-offcanvas-bar ul.side-nav {
        margin: 14px 0 0 0 !important;
        padding: 0 12px 24px !important;
        list-style: none !important;
        flex: 1;
    }

    /* Each nav item */
    .uk-offcanvas-bar .side-nav > li {
        margin: 0 !important;
    }

    /* Top-level link rows */
    .uk-offcanvas-bar .side-nav > li > a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 11px 14px !important;
        border-radius: 10px !important;
        color: #94a3b8 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        letter-spacing: 0.01em !important;
        transition: all 0.22s ease !important;
        border: 1px solid transparent !important;
        background: transparent !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .uk-offcanvas-bar .side-nav > li > a::before {
        content: none !important;
    }
    /* Shimmer glow on hover */
    .uk-offcanvas-bar .side-nav > li > a::after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(124,58,237,0.06)) !important;
        opacity: 0 !important;
        transition: opacity 0.22s ease !important;
        border-radius: 10px !important;
    }
    .uk-offcanvas-bar .side-nav > li > a:hover,
    .uk-offcanvas-bar .side-nav > li.uk-open > a {
        color: #ffffff !important;
        border-color: rgba(37,99,235,0.3) !important;
        transform: translateX(4px) !important;
        padding-left: 16px !important;
    }
    .uk-offcanvas-bar .side-nav > li > a:hover::after,
    .uk-offcanvas-bar .side-nav > li.uk-open > a::after {
        opacity: 1 !important;
    }

    /* Icon squares */
    .uk-offcanvas-bar .side-nav > li > a > span[uk-icon] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        background: rgba(37,99,235,0.15) !important;
        color: #60a5fa !important;
        flex-shrink: 0 !important;
        transition: background 0.22s ease, color 0.22s ease !important;
        position: relative !important;
        z-index: 1 !important;
    }
    .uk-offcanvas-bar .side-nav > li > a:hover > span[uk-icon],
    .uk-offcanvas-bar .side-nav > li.uk-open > a > span[uk-icon] {
        background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
        color: #ffffff !important;
    }

    /* Link text */
    .uk-offcanvas-bar .side-nav > li > a > span:not([uk-icon]) {
        z-index: 1 !important;
        position: relative !important;
    }

    /* Chevron / dropdown icon */
    .uk-offcanvas-bar .side-nav .dropdown-icon,
    .uk-offcanvas-bar .side-nav > li > a > span[uk-icon="icon: chevron-down; ratio: 1.2"] {
        margin-left: auto !important;
        color: #475569 !important;
        transition: color 0.2s ease, transform 0.3s ease !important;
        z-index: 1 !important;
        position: relative !important;
    }
    .uk-offcanvas-bar .side-nav > li.uk-open > a .dropdown-icon,
    .uk-offcanvas-bar .side-nav > li.uk-open > a > span[uk-icon="icon: chevron-down; ratio: 1.2"] {
        transform: rotate(180deg) !important;
        color: #60a5fa !important;
    }

    /* Divider between items */
    .uk-offcanvas-bar .side-nav > li + li {
        border-top: 1px solid rgba(255,255,255,0.04) !important;
        margin-top: 2px !important;
        padding-top: 2px !important;
    }

    /* Sub-nav dropdown */
    .uk-offcanvas-bar .uk-nav-sub {
        padding: 6px 0 10px 44px !important;
        background: rgba(255,255,255,0.03) !important;
        border-radius: 8px !important;
        margin: 4px 0 6px !important;
        list-style: none !important;
    }
    .uk-offcanvas-bar .uk-nav-sub li {
        margin: 0 !important;
    }
    .uk-offcanvas-bar .uk-nav-sub li a {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 7px 12px !important;
        font-size: 13px !important;
        color: #64748b !important;
        border-radius: 6px !important;
        transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease !important;
        text-decoration: none !important;
    }
    .uk-offcanvas-bar .uk-nav-sub li a::before {
        content: '•' !important;
        font-size: 8px !important;
        color: #3b82f6 !important;
        opacity: 0.6 !important;
        flex-shrink: 0 !important;
        transition: opacity 0.2s ease !important;
    }
    .uk-offcanvas-bar .uk-nav-sub li a:hover {
        color: #93c5fd !important;
        background: rgba(37,99,235,0.07) !important;
        padding-left: 16px !important;
    }
    .uk-offcanvas-bar .uk-nav-sub li a:hover::before {
        opacity: 1 !important;
    }

    /* Nav divider line items */
    .uk-offcanvas-bar .uk-nav-sub li.uk-nav-divider {
        border-top: none !important;
    }

    /* Close button */
    .uk-offcanvas-bar .uk-offcanvas-close {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        color: #475569 !important;
        background: rgba(255,255,255,0.06) !important;
        border-radius: 8px !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: background 0.2s ease, color 0.2s ease !important;
    }
    .uk-offcanvas-bar .uk-offcanvas-close:hover {
        background: rgba(239,68,68,0.15) !important;
        color: #f87171 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   7. HERO BANNER — Cinematic full-bleed hero
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .np-banner-title-mob h1.main-banner,
    .main-banner {
        font-size: 1.65rem !important;
        line-height: 1.38;
        font-weight: 800;
        text-shadow: 0 2px 12px rgba(0,0,0,.5);
        letter-spacing: -0.01em;
    }
    .banner-top {
        border-radius: var(--op-radius-lg);
        overflow: hidden;
        box-shadow: var(--op-shadow-lg);
        position: relative;
    }
    .banner-top img {
        width: 100%;
        max-height: 330px;
        object-fit: cover;
        display: block;
    }

    /* Gradient overlay on hero */
    .banner-top::after {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--op-grad-hero);
        pointer-events: none;
        border-radius: var(--op-radius-lg);
    }

    .author-img { justify-content: center; }
    .author-name {
        font-size: 12.5px;
        background: rgba(255,255,255,0.12);
        backdrop-filter: blur(8px);
        padding: 3px 10px;
        border-radius: 20px;
        color: rgba(255,255,255,0.9);
    }
}
@media (min-width:576px) and (max-width:820px) {
    .np-banner-title-mob h1.main-banner,
    .main-banner { font-size: 1.35rem !important; }
    .banner-top img { max-height: 250px; }
}

/* ═══════════════════════════════════════════════════════════════
   8. PREMIUM SECTION TITLE BARS
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .cat-title {
        padding: 0 0 14px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2px solid var(--op-border);
        position: relative;
    }

    /* Animated left accent bar */
    .cat-title::before {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 60px;
        height: 2px;
        background: var(--op-grad-accent);
        border-radius: 2px;
    }

    .cat-title h2,
    .cat-title h2 span a,
    .cat-title h2 a {
        font-size: 17px !important;
        font-weight: 800 !important;
        color: var(--op-navy) !important;
        letter-spacing: -0.01em;
        position: relative;
    }

    .uk-heading-line > span {
        padding-right: 14px;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -0.01em;
        color: var(--op-navy) !important;
    }
}
@media (min-width:576px) and (max-width:820px) {
    .cat-title h2 span a,
    .cat-title h2 a { font-size: 15px !important; }
    .uk-heading-line > span { font-size: 14.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   9. MAIN NEWS GRID  (मुख्य समाचार)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .main-section-news {
        width: 100% !important;
        height: 240px !important;
        object-fit: cover;
        border-radius: var(--op-radius-lg);
        display: block;
    }
    .main-title-item {
        font-size: 19px !important;
        line-height: 1.42;
        font-weight: 800;
        letter-spacing: -0.02em;
        text-shadow: 0 2px 12px rgba(0,0,0,.6);
    }
    .uk-child-width-1-2\@s .uk-card-title { font-size: .9rem; font-weight: 700; }

    /* Sub-card images */
    .uk-child-width-1-2\@s > div .uk-card img {
        height: 150px !important;
        object-fit: cover;
        width: 100%;
        border-radius: var(--op-radius) var(--op-radius) 0 0;
        transition: transform 0.45s var(--op-ease);
    }
    .uk-child-width-1-2\@s > div .uk-card {
        border-radius: var(--op-radius);
        overflow: hidden;
        box-shadow: var(--op-shadow-sm) !important;
        background: var(--op-bg-card);
        transition: transform var(--op-transition), box-shadow var(--op-transition);
    }
    .uk-child-width-1-2\@s > div .uk-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--op-shadow-md) !important;
    }
    .uk-child-width-1-2\@s > div .uk-card:hover img { transform: scale(1.05); }
}
@media (min-width:821px) and (max-width:1024px) {
    .main-section-news  { height: 280px !important; }
    .main-title-item    { font-size: 22px !important; }
}
@media (min-width:576px) and (max-width:820px) {
    .main-section-news  { height: 195px !important; }
    .main-title-item    { font-size: 17px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   10. GRID COLUMN OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .uk-width-3-4\@m    { width: 100% !important; }
    .uk-width-1-4\@m    { width: 100% !important; margin-top: 24px; }
    .uk-width-2-3\@m    { width: 60% !important; }
    .uk-width-1-3\@m    { width: 40% !important; }
    .uk-width-medium\@m { width: 100% !important; margin-top: 20px; }
    .uk-width-3-5\@m    { width: 60% !important; }
    .uk-width-2-5\@m    { width: 40% !important; }
}

/* ═══════════════════════════════════════════════════════════════
   11. CARD IMAGES (latest-news / loksewa-news) — Premium hover
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .cat-name-title {
        overflow: hidden;
        border-radius: var(--op-radius) var(--op-radius) 0 0;
        position: relative;
    }

    .cat-name-title .latest-news,
    .cat-name-title .loksewa-news {
        width: 100%;
        height: 195px;
        object-fit: cover;
        border-radius: var(--op-radius) var(--op-radius) 0 0;
        transition: transform 0.45s var(--op-ease);
        display: block;
    }
    .cat-name-title:hover .latest-news,
    .cat-name-title:hover .loksewa-news { transform: scale(1.06); }

    /* Category badge on card images */
    .cat-name-yoho {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        background: var(--op-grad-red);
        color: #fff;
        padding: 3px 9px;
        border-radius: 20px;
        box-shadow: 0 2px 8px rgba(232,25,44,.4);
        z-index: 2;
    }
}
@media (min-width:576px) and (max-width:820px) {
    .cat-name-title .latest-news,
    .cat-name-title .loksewa-news { height: 158px; }
}

/* ═══════════════════════════════════════════════════════════════
   12. CARD GLOBAL — Premium card base
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .uk-card {
        text-align: left;
        border-radius: var(--op-radius);
        background: var(--op-bg-card);
        transition: transform var(--op-transition), box-shadow var(--op-transition);
    }
    .uk-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--op-shadow-md) !important;
    }
    .uk-card .uk-card-title {
        font-size: .95rem;
        font-weight: 700;
        line-height: 1.45;
    }

    .uk-card.uk-card-small {
        border-radius: var(--op-radius) !important;
        overflow: hidden !important;
        box-shadow: var(--op-shadow-sm) !important;
        transition: box-shadow var(--op-transition), transform var(--op-transition) !important;
    }
    .uk-card.uk-card-small:hover {
        box-shadow: var(--op-shadow-md) !important;
        transform: translateY(-3px) !important;
    }
    .uk-card.uk-card-small .uk-card-title {
        font-size: .9rem;
        line-height: 1.45;
        font-weight: 700;
    }
    .uk-card.uk-card-small p {
        font-size: 13px;
        line-height: 1.55;
        color: var(--op-gray-500);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ═══════════════════════════════════════════════════════════════
   13. ताजा अपडेट — Premium trending cards (Rank|Thumb|Title)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {

    /* 2-col grid */
    .uk-child-width-1-3\@s {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .uk-child-width-1-3\@s > * {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Card shell */
    .uk-child-width-1-3\@s .list-item.margin-s {
        background: var(--op-bg-card);
        border-radius: var(--op-radius);
        box-shadow: var(--op-shadow-sm) !important;
        overflow: hidden;
        transition: box-shadow var(--op-transition), transform var(--op-transition);
        border-left: none;
    }
    .uk-child-width-1-3\@s .list-item.margin-s:hover {
        box-shadow: var(--op-shadow-md) !important;
        transform: translateY(-3px);
    }

    /* Inner row: Rank | Image | Title */
    .uk-child-width-1-3\@s .list-item.margin-s
        .uk-card.uk-card-small.uk-grid-collapse {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 0;
        padding: 0;
        border-bottom: none;
    }

    /* Rank number badge */
    .uk-child-width-1-3\@s .list-item.margin-s
        .uk-width-auto.uk-card-media-left.uk-cover-container {
        order: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px !important;
        min-width: 38px;
        flex: 0 0 38px;
        background: var(--op-navy);
    }
    .uk-child-width-1-3\@s .list-item.margin-s
        .uk-width-auto .item-nunber {
        color: #fff !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        margin: 0 !important;
        font-family: 'Poppins', sans-serif;
    }

    /* First card rank: special red */
    .uk-child-width-1-3\@s .list-item.margin-s:first-child
        .uk-width-auto.uk-card-media-left.uk-cover-container {
        background: var(--op-grad-red);
    }

    /* Thumbnail */
    .uk-child-width-1-3\@s .list-item.margin-s
        .uk-width-1-3.uk-card-media-left.uk-cover-container {
        order: 2;
        position: relative;
        width: 88px !important;
        min-width: 88px;
        flex: 0 0 88px;
        overflow: hidden;
    }
    .uk-child-width-1-3\@s .list-item.margin-s
        .uk-width-1-3.uk-card-media-left.uk-cover-container img.artha-item-list {
        width: 88px !important;
        height: 100% !important;
        min-height: 74px;
        object-fit: cover;
        object-position: center;
        display: block;
        position: relative !important;
        transition: transform 0.45s var(--op-ease);
    }
    .uk-child-width-1-3\@s .list-item.margin-s:hover
        .uk-width-1-3.uk-card-media-left.uk-cover-container img.artha-item-list {
        transform: scale(1.07);
    }
    .uk-child-width-1-3\@s .list-item.margin-s
        .uk-width-1-3.uk-card-media-left.uk-cover-container canvas { display: none !important; }

    /* Title */
    .uk-child-width-1-3\@s .list-item.margin-s .uk-width-expand {
        order: 3;
        flex: 1;
        display: flex;
        align-items: center;
        padding: 10px 12px;
        min-width: 0;
    }
    .uk-child-width-1-3\@s .list-item.margin-s .margin-s-l {
        margin: 0 !important;
        width: 100%;
    }
    .uk-child-width-1-3\@s .list-item.margin-s .margin-s-l h4 { margin: 0 !important; }
    .uk-child-width-1-3\@s .list-item.margin-s .margin-s-l h4 a {
        font-size: 13px !important;
        line-height: 1.45 !important;
        font-weight: 600;
        color: var(--op-navy-mid);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color var(--op-transition);
    }
    .uk-child-width-1-3\@s .list-item.margin-s .margin-s-l h4 a:hover { color: var(--op-blue); }
}
/* Single column on narrow tablet */
@media (min-width:576px) and (max-width:660px) {
    .uk-child-width-1-3\@s { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   14. CORPORATE FOCUS / कर्पोरेट — 3-col → 2-col
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .uk-child-width-1-3\@m > div { width: 50% !important; }
}
@media (min-width:576px) and (max-width:820px) {
    .uk-child-width-1-3\@m > div { width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════
   14b. SECURITY / TECH / INTL — uk-child-width-1-3@m premium cards
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {

    /* Grid: prevent height-match from stretching column items */
    .uk-child-width-1-3\@m.uk-grid-match > div {
        align-content: flex-start !important;
    }
    .uk-child-width-1-3\@m.uk-grid-match > div > * {
        align-self: flex-start !important;
        width: 100% !important;
    }

    /* Premium card wrapper */
    .uk-child-width-1-3\@m.uk-grid-match .uk-card.uk-card-default,
    .uk-child-width-1-3\@m.uk-grid-match .uk-card.uk-card-default.uk-card-hover {
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 18px rgba(0,0,0,0.07) !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
        background: #ffffff !important;
        transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    .uk-child-width-1-3\@m.uk-grid-match .uk-card.uk-card-default:hover,
    .uk-child-width-1-3\@m.uk-grid-match .uk-card.uk-card-default.uk-card-hover:hover {
        box-shadow: 0 12px 36px rgba(0,0,0,0.13) !important;
        transform: translateY(-4px) !important;
        border-color: rgba(37,99,235,0.18) !important;
    }

    /* Image: cinematic + zoom on hover */
    .uk-child-width-1-3\@m.uk-grid-match .uk-card-media-top {
        overflow: hidden !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }
    .uk-child-width-1-3\@m.uk-grid-match .uk-card-media-top img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
        transition: transform 0.5s ease !important;
        display: block !important;
        border-radius: 0 !important;
    }
    .uk-child-width-1-3\@m.uk-grid-match .uk-card:hover .uk-card-media-top img {
        transform: scale(1.05) !important;
    }

    /* Blue→purple accent bar slides in at image bottom on hover */
    .uk-child-width-1-3\@m.uk-grid-match .uk-card-media-top::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0; left: 0; right: 0;
        height: 3px !important;
        background: linear-gradient(90deg, #2563eb, #7c3aed) !important;
        opacity: 0;
        transition: opacity 0.3s ease !important;
    }
    .uk-child-width-1-3\@m.uk-grid-match .uk-card:hover .uk-card-media-top::after {
        opacity: 1 !important;
    }

    /* Card body */
    .uk-child-width-1-3\@m.uk-grid-match .uk-card-body {
        padding: 16px 18px 18px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Main headline title */
    .uk-child-width-1-3\@m.uk-grid-match .uk-card-body > h3.uk-card-title:first-child {
        font-size: 0.96rem !important;
        font-weight: 700 !important;
        line-height: 1.5 !important;
        margin: 0 0 12px 0 !important;
        padding-bottom: 11px !important;
        border-bottom: 2px solid #f1f5f9 !important;
        color: #0f172a !important;
        flex-shrink: 0 !important;
    }
    .uk-child-width-1-3\@m.uk-grid-match .uk-card-body > h3.uk-card-title:first-child a {
        color: #0f172a !important;
        transition: color 0.2s ease !important;
    }
    .uk-child-width-1-3\@m.uk-grid-match .uk-card-body > h3.uk-card-title:first-child a:hover {
        color: #2563eb !important;
    }

    /* Bullet list — CRITICAL: override uk-flex-between space-between */
    .uk-child-width-1-3\@m.uk-grid-match .uk-card-body .small-list,
    .uk-child-width-1-3\@m.uk-grid-match .uk-card-body .small-list.uk-flex-between {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;   /* Kill space-between */
        align-items: stretch !important;
        gap: 4px !important;
        margin: 0 !important;
        flex: 0 !important;
    }

    /* Kill uk-margin auto-spacing on small-list children */
    .uk-child-width-1-3\@m.uk-grid-match .uk-card-body .small-list > * {
        margin-top: 0 !important;
    }

    /* Bullet item heading */
    .uk-child-width-1-3\@m.uk-grid-match .small-list h3.uk-card-title {
        margin: 0 !important;
        font-size: 0.83rem !important;
        line-height: 1.42 !important;
        font-weight: 500 !important;
    }
    .uk-child-width-1-3\@m.uk-grid-match .small-list h3.uk-card-title a,
    .uk-child-width-1-3\@m.uk-grid-match .small-list h3.uk-card-title a.margin-s.ah {
        color: #475569 !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 6px 8px !important;
        border-radius: 7px !important;
        border-left: 2px solid transparent !important;
        background: transparent !important;
        transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
    }
    .uk-child-width-1-3\@m.uk-grid-match .small-list h3.uk-card-title a:hover {
        color: #2563eb !important;
        background: rgba(37,99,235,0.06) !important;
        border-left-color: #2563eb !important;
        transform: translateX(3px) !important;
    }
    .uk-child-width-1-3\@m.uk-grid-match .small-list h3.uk-card-title a span[uk-icon] {
        color: #2563eb !important;
        flex-shrink: 0 !important;
        margin-top: 2px !important;
        opacity: 0.65 !important;
        transition: opacity 0.2s ease !important;
    }
    .uk-child-width-1-3\@m.uk-grid-match .small-list h3.uk-card-title a:hover span[uk-icon] {
        opacity: 1 !important;
    }
}
@media (min-width:576px) and (max-width:820px) {
    .uk-child-width-1-3\@m.uk-grid-match .uk-card-media-top img {
        height: 175px !important;
    }
    .uk-child-width-1-3\@m.uk-grid-match > div {
        width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   14c. LIFESTYLE GRID — uk-child-width-1-4@m (शृंगार, अचम्म, etc.)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .uk-child-width-1-4\@m.uk-grid-match > div {
        width: 50% !important;
        box-sizing: border-box;
    }
    /* Container card that wraps the 4-col grid */
    .uk-card-default.uk-margin-top:has(.uk-child-width-1-4\@m) {
        background: #f8faff !important;
        border-radius: 14px !important;
        padding: 16px !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
    }
    .uk-child-width-1-4\@m.uk-grid-match .np-samachar-item {
        border-radius: 12px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        box-shadow: 0 3px 14px rgba(0,0,0,0.07) !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
        transition: box-shadow 0.3s ease, transform 0.3s ease !important;
    }
    .uk-child-width-1-4\@m.uk-grid-match .np-samachar-item:hover {
        box-shadow: 0 8px 28px rgba(0,0,0,0.12) !important;
        transform: translateY(-3px) !important;
    }
    .uk-child-width-1-4\@m.uk-grid-match .img-wraper {
        overflow: hidden !important;
        border-radius: 0 !important;
    }
    .uk-child-width-1-4\@m.uk-grid-match .img-wraper img {
        width: 100% !important;
        height: 185px !important;
        object-fit: cover !important;
        transition: transform 0.5s ease !important;
        display: block !important;
    }
    .uk-child-width-1-4\@m.uk-grid-match .np-samachar-item:hover .img-wraper img {
        transform: scale(1.05) !important;
    }
    .uk-child-width-1-4\@m.uk-grid-match .uk-padding-small {
        padding: 14px 16px 16px !important;
    }
    .uk-child-width-1-4\@m.uk-grid-match .uk-card-title {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
        margin: 0 0 8px 0 !important;
        color: #0f172a !important;
    }
    .uk-child-width-1-4\@m.uk-grid-match .uk-card-title a {
        color: #0f172a !important;
        transition: color 0.2s ease !important;
    }
    .uk-child-width-1-4\@m.uk-grid-match .uk-card-title a:hover {
        color: var(--op-blue) !important;
    }
    .uk-child-width-1-4\@m.uk-grid-match .telipress-desc {
        font-size: 0.8rem !important;
        color: #64748b !important;
        line-height: 1.55 !important;
        margin: 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
@media (min-width:576px) and (max-width:820px) {
    .uk-child-width-1-4\@m.uk-grid-match > div {
        width: 100% !important;
    }
    .uk-child-width-1-4\@m.uk-grid-match .img-wraper img {
        height: 200px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   15. ARTHA MAIN FEATURE IMAGE
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .artha-main-img-op {
        width: 100% !important;
        height: 260px !important;
        object-fit: cover;
        border-radius: var(--op-radius-lg);
        transition: transform 0.45s var(--op-ease);
        display: block;
    }
    .img-wraper {
        overflow: hidden;
        border-radius: var(--op-radius-lg);
        box-shadow: var(--op-shadow-md);
    }
    .img-wraper:hover .artha-main-img-op { transform: scale(1.04); }
}
@media (min-width:821px) and (max-width:1024px)  { .artha-main-img-op { height: 320px !important; } }
@media (min-width:576px) and (max-width:820px)   { .artha-main-img-op { height: 205px !important; } }

/* ═══════════════════════════════════════════════════════════════
   16. SIDEBAR SMALL-LIST — 3-col photo-card grid
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .small-list.custom-list.uk-flex.uk-flex-column.uk-flex-between {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    /* Cover container - prevent collapsing */
    .small-list.custom-list .uk-cover-container {
        grid-column: 1 / -1;
        height: 280px !important;
        position: relative;
        border-radius: var(--op-radius-lg);
        overflow: hidden;
        box-shadow: var(--op-shadow-md);
    }
    .small-list.custom-list .uk-cover-container .main-section-news {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        display: block !important;
        transition: transform 0.5s var(--op-ease);
    }
    .small-list.custom-list .uk-cover-container:hover .main-section-news {
        transform: scale(1.04);
    }
    
    /* Hide canvas inside cover container */
    .small-list.custom-list .uk-cover-container canvas {
        display: none !important;
    }

    /* Cinematic overlay inside cover container */
    .small-list.custom-list .uk-cover-container .slider-overlay {
        background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.4) 60%, transparent 100%) !important;
        padding: 20px 16px !important;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        z-index: 2;
        border-radius: 0 0 var(--op-radius-lg) var(--op-radius-lg);
        text-align: left !important;
    }
    .small-list.custom-list .uk-cover-container .slider-overlay .uk-card {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        text-align: left !important;
    }
    .small-list.custom-list .uk-cover-container .slider-overlay h4 {
        margin: 0 !important;
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
        font-weight: 700 !important;
        color: #fff !important;
        text-align: left !important;
    }
    .small-list.custom-list .uk-cover-container .slider-overlay h4 a {
        color: #ffffff !important;
        text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        transition: color var(--op-transition);
        text-align: left !important;
    }
    .small-list.custom-list .uk-cover-container .slider-overlay h4 a:hover {
        color: #38bdf8 !important;
    }

    .small-list.custom-list h4,
    .small-list.custom-list h4 a {
        font-size: 13px !important;
        line-height: 1.45 !important;
        font-weight: 600 !important;
    }

    /* Card item */
    .list-item.margin-s { margin: 0 !important; }
    .list-item.margin-s .uk-card.uk-card-small.uk-grid-collapse {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0;
        padding: 0;
        border-bottom: none;
        background: #ffffff !important;
        border-radius: 12px !important;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.3s ease, transform 0.3s ease !important;
        height: 100%;
    }
    .list-item.margin-s .uk-card.uk-card-small.uk-grid-collapse:hover {
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1) !important;
        transform: translateY(-4px) !important;
    }
    .list-item.margin-s .uk-width-2-5 { 
        width: 100% !important; 
        max-width: 100% !important;
        flex: none !important; 
        height: 150px !important;
    }
    .list-item.margin-s .uk-width-2-5 a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
    .list-item.margin-s .uk-width-2-5 img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 0 !important;
        transition: transform 0.45s var(--op-ease);
    }
    .list-item.margin-s .uk-card.uk-card-small.uk-grid-collapse:hover
        .uk-width-2-5 img { transform: scale(1.04) !important; }

    .list-item.margin-s .uk-width-3-5 { 
        width: 100% !important; 
        max-width: 100% !important;
        flex: 1 !important; 
        display: flex !important;
        flex-direction: column !important;
        padding: 14px 16px !important;
    }
    .list-item.margin-s .margin-s-l {
        margin: 0 !important;
        padding: 0 !important;
    }
    .list-item.margin-s .margin-s-l h5 { margin: 0; }
    .list-item.margin-s .margin-s-l h5 a {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color 0.2s ease;
        text-align: left !important;
    }
    .list-item.margin-s .margin-s-l h5 a:hover { color: var(--op-blue) !important; }
}

@media (min-width:576px) and (max-width:820px) {
    .small-list.custom-list.uk-flex.uk-flex-column.uk-flex-between {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .small-list.custom-list .uk-cover-container { height: 220px !important; }
    .list-item.margin-s .uk-width-2-5 { height: 130px !important; }
    .list-item.margin-s .margin-s-l h5 a  { font-size: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   17. अर्थ/वाणिज्य SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .uk-width-medium\@m .small-list.custom-list.uk-flex.uk-flex-column.uk-flex-between {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .uk-width-medium\@m .small-list.custom-list .uk-cover-container { 
        grid-column: 1 / -1; 
        height: 250px !important;
    }
    
    /* Make the items look clean as premium cards */
    .uk-width-medium\@m .list-item.margin-s { margin: 0 !important; }
    .uk-width-medium\@m .list-item.margin-s .uk-card.uk-card-small.uk-grid-collapse {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0;
        padding: 0;
        border-bottom: none;
        background: #ffffff !important;
        border-radius: 12px !important;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.3s ease, transform 0.3s ease !important;
        height: 100%;
    }
    .uk-width-medium\@m .list-item.margin-s .uk-card.uk-card-small.uk-grid-collapse:hover {
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1) !important;
        transform: translateY(-4px) !important;
    }
    .uk-width-medium\@m .list-item.margin-s .uk-width-2-5 { 
        width: 100% !important; 
        max-width: 100% !important;
        flex: none !important; 
        height: 140px !important;
    }
    .uk-width-medium\@m .list-item.margin-s .uk-width-2-5 a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
    .uk-width-medium\@m .list-item.margin-s .uk-width-2-5 img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 0 !important;
        transition: transform 0.45s var(--op-ease);
    }
    .uk-width-medium\@m .list-item.margin-s .uk-card.uk-card-small.uk-grid-collapse:hover
        .uk-width-2-5 img { transform: scale(1.04) !important; }

    .uk-width-medium\@m .list-item.margin-s .uk-width-3-5 { 
        width: 100% !important; 
        max-width: 100% !important;
        flex: 1 !important; 
        display: flex !important;
        flex-direction: column !important;
        padding: 14px 16px !important;
    }
    .uk-width-medium\@m .list-item.margin-s .margin-s-l {
        margin: 0 !important;
        padding: 0 !important;
    }
    .uk-width-medium\@m .list-item.margin-s .margin-s-l h5 { margin: 0; }
    .uk-width-medium\@m .list-item.margin-s .margin-s-l h5 a {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color 0.2s ease;
        text-align: left !important;
    }
    .uk-width-medium\@m .list-item.margin-s .margin-s-l h5 a:hover { color: var(--op-blue) !important; }
}
@media (min-width:576px) and (max-width:820px) {
    .uk-width-medium\@m .small-list.custom-list .uk-cover-container { height: 200px !important; }
    .uk-width-medium\@m .list-item.margin-s .uk-width-2-5 { height: 110px !important; }
    .uk-width-medium\@m .list-item.margin-s .margin-s-l h5 a  { font-size: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   18. RAJNITI / POLITICS — Horizontal premium cards
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .rajniti-img { width: 100%; height: 90px; object-fit: cover; }

    .uk-child-width-1-2\@s.uk-grid-match { gap: 12px; }
    .uk-child-width-1-2\@s.uk-grid-match > div { width: 50% !important; }

    /* Horizontal list-item card */
    .uk-child-width-1-2\@s .list-item.margin-s .uk-card.uk-card-small.uk-grid-collapse {
        background: var(--op-bg-card);
        border-radius: var(--op-radius);
        overflow: hidden;
        box-shadow: var(--op-shadow-sm) !important;
        border-left: 3px solid var(--op-blue);
        display: flex;
        flex-direction: row;
        transition: box-shadow var(--op-transition), transform var(--op-transition) !important;
    }
    .uk-child-width-1-2\@s .list-item.margin-s .uk-card.uk-card-small.uk-grid-collapse:hover {
        box-shadow: var(--op-shadow-md) !important;
        transform: translateY(-3px) !important;
    }
    .uk-child-width-1-2\@s .list-item.margin-s .uk-width-2-5.uk-card-media-left {
        width: 95px !important;
        flex: 0 0 95px;
    }
    .uk-child-width-1-2\@s .list-item.margin-s .uk-width-2-5.uk-card-media-left img {
        height: 100% !important;
        min-height: 82px;
        width: 95px !important;
        object-fit: cover;
        transition: transform 0.45s var(--op-ease);
    }
    .uk-child-width-1-2\@s .list-item.margin-s .uk-card.uk-card-small.uk-grid-collapse:hover img {
        transform: scale(1.06);
    }
    .uk-child-width-1-2\@s .list-item.margin-s .uk-width-3-5 { flex: 1; padding: 8px 10px; }
    .list-item.margin-s .margin-s-l h3.uk-card-title { font-size: .87rem !important; line-height: 1.42; text-align: center; }
    .telipress-desc {
        font-size: 12px;
        line-height: 1.5;
        color: var(--op-gray-500);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Hero overlay image */
    .uk-height-large,
    .np-height-large { height: 275px !important; }
    .uk-card-media-right.uk-cover-container.uk-height-large {
        height: 275px !important;
        border-radius: var(--op-radius-lg);
        overflow: hidden;
    }
}
@media (min-width:576px) and (max-width:820px) {
    .uk-child-width-1-2\@s.uk-grid-match > div { width: 100% !important; }
    .uk-height-large, .np-height-large { height: 215px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   19. विचार/ब्लग OPINION / AUTHOR CARDS
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .uk-card.list-item.uk-text-center {
        display: flex;
        align-items: center;
        text-align: left !important;
        gap: 14px;
        padding: 12px 0;
        border-bottom: 1px solid var(--op-border);
        transition: background var(--op-transition);
    }
    .uk-card.list-item.uk-text-center:hover {
        background: var(--op-gray-100);
        padding-left: 6px;
        border-radius: var(--op-radius-sm);
    }
    .uk-card.list-item.uk-text-center a { flex-shrink: 0; }
    .bichar-img {
        height: 58px !important;
        width: 58px !important;
        border-radius: 50%;
        object-fit: cover;
        margin: 0 !important;
        border: 3px solid transparent;
        background: var(--op-grad-blue);
        box-shadow: 0 4px 12px rgba(0,84,164,.25);
        transition: transform var(--op-transition);
    }
    .uk-card.list-item.uk-text-center:hover .bichar-img { transform: scale(1.08); }
    .uk-card.list-item.uk-text-center h4.uk-margin-small-top { margin: 0; flex: 1; }
    .uk-card.list-item.uk-text-center h4.uk-margin-small-top a {
        font-size: .92rem !important;
        line-height: 1.42;
        color: var(--op-navy-mid);
        font-weight: 600;
    }
    .single-author { margin-left: 0 !important; margin-top: 2px; }
    .single-author a { font-size: 11.5px !important; color: var(--op-blue); font-weight: 500; }
}
@media (min-width:576px) and (max-width:820px) {
    .uk-card.list-item.uk-text-center h4.uk-margin-small-top a { font-size: .84rem !important; }
    .bichar-img { height: 50px !important; width: 50px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   20. SLIDER (अनलाइनपाना खोज) — 1 slide at a time, full width
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {

    /* ── CRITICAL: Reset — the <ul> has uk-child-width-1-3@s which our
       section-13 grid rule converts to display:grid with 2 cols.
       We must undo that here so UIkit slider flex layout works. ── */
    ul.uk-slider-items,
    .uk-slider-items.uk-child-width-1-3\@s,
    .uk-slider-items.uk-child-width-1-4\@m {
        display: flex !important;
        grid-template-columns: unset !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ── 1 slide per view: force each li to 100% width ── */
    .uk-slider-items > li,
    .uk-slider-items.uk-child-width-1-3\@s > li,
    .uk-slider-items.uk-child-width-1-4\@m > li {
        width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* ── Cover container: full-width cinematic ── */
    .uk-slider-items .uk-cover-container {
        width: 100% !important;
        border-radius: var(--op-radius-xl);
        overflow: hidden;
        box-shadow: var(--op-shadow-lg);
        position: relative;
    }

    /* ── Cinematic gradient overlay ── */
    .uk-slider-items .uk-cover-container::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg,
            rgba(5,15,35,0.85) 0%,
            rgba(5,15,35,0.35) 45%,
            transparent 100%);
        z-index: 1;
        pointer-events: none;
    }

    /* ── Image: tall and cinematic ── */
    .uk-slider-items .uk-cover-container img.uk-height-medium {
        width: 100% !important;
        height: 280px !important;
        object-fit: cover !important;
        display: block;
        transition: transform 0.6s var(--op-ease);
    }
    .uk-slider-items .uk-cover-container:hover img.uk-height-medium {
        transform: scale(1.04);
    }

    /* ── Overlays z-index fix ── */
    .uk-slider-items .uk-cover-container .uk-overlay-our { z-index: 2; }
    .uk-slider-items .uk-overlay.uk-position-bottom {
        z-index: 3;
        padding: 22px 18px !important;
        background: none !important;
    }

    /* ── Slide title ── */
    .bichar-title {
        font-size: 1rem !important;
        line-height: 1.45 !important;
        font-weight: 700 !important;
        color: #fff;
        text-shadow: 0 2px 10px rgba(0,0,0,0.6);
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .bichar-title a { color: #fff !important; }
    .bichar-title a:hover { color: #93c5fd !important; }

    /* ── Premium nav arrows: frosted glass ── */
    .uk-position-center-left,
    .uk-position-center-right {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,0.18) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1.5px solid rgba(255,255,255,0.35) !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
        transition: background var(--op-transition), transform var(--op-transition) !important;
        z-index: 10;
    }
    .uk-position-center-left:hover,
    .uk-position-center-right:hover {
        background: var(--op-blue) !important;
        transform: scale(1.12) !important;
        border-color: var(--op-blue) !important;
    }
}

/* Portrait */
@media (min-width:576px) and (max-width:767px) {
    .uk-slider-items .uk-cover-container img.uk-height-medium { height: 235px !important; }
    .bichar-title { font-size: .9rem !important; }
}

/* Landscape */
@media (min-width:768px) and (max-width:1024px) {
    .uk-slider-items .uk-cover-container img.uk-height-medium { height: 320px !important; }
    .bichar-title { font-size: 1.1rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   21. EDITORIAL (सम्पादकीय)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .uk-child-width-1-3\@m.np-taja-samachar > div { width: 50% !important; }
    .np-taja-samachar .uk-cover-container {
        text-align: center;
        border-radius: var(--op-radius-lg);
        overflow: hidden;
        box-shadow: var(--op-shadow-sm);
        transition: box-shadow var(--op-transition), transform var(--op-transition);
    }
    .np-taja-samachar .uk-cover-container:hover {
        box-shadow: var(--op-shadow-md);
        transform: translateY(-3px);
    }
    .np-taja-samachar .uk-cover-container img.uk-height-medium {
        height: 185px !important;
        object-fit: cover;
        transition: transform 0.45s var(--op-ease);
    }
    .np-taja-samachar .uk-cover-container:hover img.uk-height-medium { transform: scale(1.05); }
}
@media (min-width:576px) and (max-width:820px) {
    .uk-child-width-1-3\@m.np-taja-samachar > div { width: 100% !important; }
    .np-taja-samachar .uk-cover-container img.uk-height-medium { height: 205px !important; margin-left: 220px; }
}

/* ═══════════════════════════════════════════════════════════════
   22. INTERVIEW / अन्तर्वार्ता
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .np-samachar-item .uk-card-media-top img {
        width: 100%;
        height: 235px;
        object-fit: cover;
        border-radius: var(--op-radius-lg) var(--op-radius-lg) 0 0;
    }
    .uk-width-1-3\@m.custom-list.uk-flex-first { width: 100% !important; margin-top: 16px; }
    .uk-width-1-3\@m.custom-list .uk-card.list-item img {
        height: 135px !important;
        object-fit: cover;
        width: 100%;
        border-radius: var(--op-radius) var(--op-radius) 0 0;
        transition: transform 0.45s var(--op-ease);
    }
    .uk-width-1-3\@m.custom-list .uk-card.list-item:hover img { transform: scale(1.05); }
    .uk-width-1-3\@m.custom-list .uk-card.list-item {
        border-radius: var(--op-radius);
        overflow: hidden;
        box-shadow: var(--op-shadow-sm);
        transition: box-shadow var(--op-transition), transform var(--op-transition);
    }
    .uk-width-1-3\@m.custom-list .uk-card.list-item:hover {
        box-shadow: var(--op-shadow-md);
        transform: translateY(-3px);
    }
    .uk-width-1-3\@m.custom-list .uk-card.list-item h4 {
        font-size: .87rem;
        line-height: 1.42;
        padding: 10px 12px;
        color: var(--op-navy-mid);
        font-weight: 600;
    }
    .uk-width-2-3\@m { width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════
   23. प्रदेश समाचार (Province Tabs + Content)
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   23. प्रदेश समाचार (Province Tabs + Content) - Premium layout
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    /* Tab pills */
    .pradesha-tab {
        flex-wrap: wrap !important;
        gap: 6px;
        margin-right: 0 !important;
        justify-content: flex-start;
        margin-bottom: 20px !important;
    }
    .pradesha-tab li a {
        padding: 6px 16px !important;
        font-size: .84rem !important;
        white-space: nowrap;
        border-radius: 20px;
        background: var(--op-gray-100);
        color: var(--op-navy-mid) !important;
        font-weight: 600;
        transition: background var(--op-transition), color var(--op-transition), box-shadow var(--op-transition);
        border: 1.5px solid var(--op-border);
    }
    .pradesha-tab li.uk-active a,
    .pradesha-tab li a:hover {
        background: var(--op-grad-blue) !important;
        color: #fff !important;
        border-color: transparent;
        box-shadow: var(--op-shadow-blue);
    }

    /* Content styling */
    .pradesh-mb-pana-main {
        width: 100% !important;
        margin-bottom: 0px;
        padding-left: 0 !important;
    }
    .pradesh-mb-pana {
        width: 100% !important;
        padding-left: 0 !important;
    }

    /* Main Featured Card */
    .pradesh-mb-pana-main .uk-cover-container {
        height: 380px !important;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--op-shadow-md);
        position: relative;
    }
    .pradesh-mb-pana-main .uk-cover-container img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        transition: transform 0.5s var(--op-ease);
    }
    .pradesh-mb-pana-main .uk-cover-container:hover img {
        transform: scale(1.04);
    }
    .pradesh-mb-pana-main .uk-overlay-our {
        background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.3) 60%, transparent 100%) !important;
        z-index: 1;
    }
    .pradesh-mb-pana-main .uk-overlay {
        padding: 24px 20px !important;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }
    .pradesh-mb-pana-main h2 a {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.5);
        transition: color var(--op-transition);
    }
    .pradesh-mb-pana-main h2 a:hover {
        color: #93c5fd !important;
    }

    /* Secondary 2x2 grid */
    .pradesh-mb-pana .uk-child-width-1-2\@m {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .artha-samacahr-list .uk-cover-container {
        height: 184px !important;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: var(--op-shadow-sm);
        position: relative;
        transition: box-shadow var(--op-transition), transform var(--op-transition);
    }
    .artha-samacahr-list .uk-cover-container:hover {
        box-shadow: var(--op-shadow-md);
        transform: translateY(-3px);
    }
    .artha-samacahr-list .uk-cover-container img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        transition: transform 0.5s var(--op-ease);
    }
    .artha-samacahr-list .uk-cover-container:hover img {
        transform: scale(1.04);
    }
    .artha-samacahr-list .uk-overlay-our {
        background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.2) 60%, transparent 100%) !important;
        z-index: 1;
    }
    .artha-samacahr-list .uk-overlay {
        padding: 14px 12px !important;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }
    .artha-samacahr-list h4 a {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        text-shadow: 0 1px 6px rgba(0,0,0,0.5);
        transition: color var(--op-transition);
    }
    .artha-samacahr-list h4 a:hover {
        color: #93c5fd !important;
    }
}

/* Landscape tablet: side-by-side columns */
@media (min-width:768px) and (max-width:1024px) {
    .pradesha-tab + .uk-switcher > li > div[uk-grid] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
    }
    .pradesha-tab + .uk-switcher > li > div[uk-grid] > .uk-width-1-2\@m {
        width: 50% !important;
        flex: 0 0 50% !important;
    }
    .pradesha-tab + .uk-switcher > li > div[uk-grid] > .pradesh-mb-pana {
        width: 50% !important;
        flex: 0 0 50% !important;
        padding-left: 0px !important;
    }
}

/* Portrait tablet: vertical stacking & adjusted heights */
@media (min-width:576px) and (max-width:820px) {
    .pradesha-tab li a {
        padding: 5px 10px !important;
        font-size: .78rem !important;
    }
    .pradesh-mb-pana-main .uk-cover-container {
        height: 260px !important;
    }
    .pradesh-mb-pana-main h2 a {
        font-size: 1.05rem !important;
    }
    .artha-samacahr-list .uk-cover-container {
        height: 125px !important;
    }
    .artha-samacahr-list h4 a {
        font-size: 0.8rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   24. VIDEO SECTION — Premium with play overlay
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    /* Main video feature */
    .video-section-main .uk-cover-container {
        border-radius: var(--op-radius-xl);
        overflow: hidden;
        box-shadow: var(--op-shadow-lg);
        position: relative;
    }

    /* Gradient overlay on video thumb */
    .video-section-main .uk-cover-container::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 40%, rgba(10,20,40,0.85) 100%);
        pointer-events: none;
    }

    .np-height-large { height: 265px !important; object-fit: cover; }
    .video-titble-on {
        font-size: 17px !important;
        line-height: 1.42;
        font-weight: 700;
        text-shadow: 0 2px 10px rgba(0,0,0,.5);
    }

    /* Play icon hover animation */
    span[uk-icon*="play-circle"] {
        transition: transform 0.3s var(--op-ease), opacity 0.3s ease !important;
    }
    .uk-cover-container:hover span[uk-icon*="play-circle"] {
        transform: translate(-50%, -50%) scale(1.2) !important;
        color: var(--op-red) !important;
    }

    /* Side video cards — horizontal */
    .uk-card.uk-card-default.uk-grid-collapse.uk-child-width-1-2\@s.uk-margin {
        border-radius: var(--op-radius);
        overflow: hidden;
        box-shadow: var(--op-shadow-sm) !important;
        margin-bottom: 12px !important;
        transition: box-shadow var(--op-transition), transform var(--op-transition);
    }
    .uk-card.uk-card-default.uk-grid-collapse.uk-child-width-1-2\@s.uk-margin:hover {
        box-shadow: var(--op-shadow-md) !important;
        transform: translateY(-3px);
    }
    .uk-card.uk-card-default .uk-card-media-left.uk-cover-container {
        min-width: 125px;
        width: 125px;
        flex: 0 0 125px;
        border-radius: var(--op-radius) 0 0 var(--op-radius);
        overflow: hidden;
    }
    .uk-card.uk-card-default .uk-card-media-left.uk-cover-container canvas { height: 88px; }
    .np-card-title { font-size: .84rem !important; line-height: 1.42; font-weight: 600; }
    .uk-card.uk-card-default .uk-card-body { padding: 10px 12px !important; }

    /* Video columns */
    .uk-width-3-5\@m.uk-margin-remove-top,
    .uk-width-2-5\@m.uk-margin-remove-top { width: 100% !important; }
}
@media (min-width:576px) and (max-width:820px) {
    .np-height-large { height: 215px !important; }
    .video-titble-on { font-size: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   25. PHOTO SLIDESHOW (आजको तस्विर) - Premium design
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .uk-slideshow {
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: var(--op-shadow-lg) !important;
        height: 380px !important;
    }
    .uk-slideshow-items { 
        border-radius: 12px !important; 
        overflow: hidden !important; 
        height: 380px !important;
    }
    .uk-slideshow-items li { height: 380px !important; }
    .uk-slideshow-items li img { object-fit: cover !important; width: 100% !important; height: 100% !important; }

    /* Premium Overlay design */
    .uk-slideshow-items .uk-overlay,
    .uk-slideshow-items .uk-overlay-primary {
        background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.4) 60%, transparent 100%) !important;
        padding: 24px 20px 28px !important;
        text-align: left !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
    }
    .uk-slideshow-items .uk-overlay h2,
    .uk-slideshow-items .uk-overlay-primary h2 {
        margin: 0 !important;
    }
    .uk-slideshow-items .uk-overlay h2 a,
    .uk-slideshow-items .uk-overlay-primary h2 a {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
        transition: color var(--op-transition);
        text-align: left !important;
        display: block;
    }
    .uk-slideshow-items .uk-overlay h2 a:hover,
    .uk-slideshow-items .uk-overlay-primary h2 a:hover {
        color: #93c5fd !important;
    }

    /* Thumbnail nav */
    .photo-slide-mob { margin-top: 12px; }
    .uk-thumbnav {
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .uk-thumbnav::-webkit-scrollbar { display: none; }
    .thumb-nav-img {
        height: 62px !important;
        width: 92px !important;
        object-fit: cover;
        border-radius: var(--op-radius-sm);
        border: 2px solid transparent;
        transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .uk-thumbnav li.uk-active .thumb-nav-img,
    .uk-thumbnav li:hover .thumb-nav-img {
        border-color: var(--op-blue);
        transform: scale(1.04);
    }
}
@media (min-width:576px) and (max-width:820px) {
    .uk-slideshow { height: 260px !important; }
    .uk-slideshow-items { height: 260px !important; }
    .uk-slideshow-items li { height: 260px !important; }
    .uk-slideshow-items .uk-overlay h2 a,
    .uk-slideshow-items .uk-overlay-primary h2 a {
        font-size: 1.05rem !important;
    }
    .thumb-nav-img { height: 52px !important; width: 74px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   26. HEALTH / SPORTS / EMPLOYMENT (Health & Entertainment)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    /* --- Health section styles --- */
    .uk-width-1-4\@m:not(.custom-list) .uk-card.uk-card-small.uk-card-default {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        border-radius: 12px !important;
        overflow: hidden;
        background: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important;
        border: 1px solid rgba(0,0,0,0.06);
    }
    .uk-width-1-4\@m:not(.custom-list) .uk-card.uk-card-small.uk-card-default .uk-card-media-top {
        width: 45% !important;
        flex: 0 0 45% !important;
        height: auto !important;
        overflow: hidden;
    }
    .uk-width-1-4\@m:not(.custom-list) .uk-card.uk-card-small.uk-card-default .uk-card-media-top img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .uk-width-1-4\@m:not(.custom-list) .uk-card.uk-card-small.uk-card-default .uk-card-body {
        width: 55% !important;
        flex: 0 0 55% !important;
        padding: 20px !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .uk-width-1-4\@m:not(.custom-list) .uk-card-body > h3.uk-card-title {
        margin: 0 0 14px 0 !important;
        font-size: 1.05rem !important;
        line-height: 1.45 !important;
        font-weight: 700 !important;
    }
    .uk-width-1-4\@m:not(.custom-list) .uk-card-body > h3.uk-card-title a {
        color: #0f172a !important;
        transition: color var(--op-transition);
    }
    .uk-width-1-4\@m:not(.custom-list) .uk-card-body > h3.uk-card-title a:hover {
        color: var(--op-blue) !important;
    }
    .uk-width-1-4\@m:not(.custom-list) .uk-card-body .small-list {
        border-top: 1px solid rgba(0,0,0,0.06);
        padding-top: 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .uk-width-1-4\@m:not(.custom-list) .uk-card-body .small-list h3.uk-card-title {
        margin: 0 !important;
        font-size: 0.88rem !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
    }
    .uk-width-1-4\@m:not(.custom-list) .uk-card-body .small-list h3.uk-card-title a {
        color: #334155 !important;
        display: flex !important;
        align-items: flex-start;
        gap: 6px;
        transition: color 0.2s ease, transform 0.2s ease;
    }
    .uk-width-1-4\@m:not(.custom-list) .uk-card-body .small-list h3.uk-card-title a span[uk-icon] {
        color: var(--op-blue) !important;
        flex-shrink: 0;
        margin-top: 3px;
    }
    .uk-width-1-4\@m:not(.custom-list) .uk-card-body .small-list h3.uk-card-title a:hover {
        color: var(--op-blue) !important;
        transform: translateX(3px);
    }

    /* --- Entertainment section styles --- */
    .uk-width-3-5\@m .uk-cover-container {
        height: 380px !important;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--op-shadow-md);
        position: relative;
    }
    .uk-width-3-5\@m .uk-cover-container img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        transition: transform 0.5s var(--op-ease);
    }
    .uk-width-3-5\@m .uk-cover-container:hover img {
        transform: scale(1.04);
    }
    .uk-width-3-5\@m .uk-cover-container canvas {
        display: none !important;
    }
    .uk-width-3-5\@m .uk-cover-container .slider-overlay {
        background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.4) 60%, transparent 100%) !important;
        padding: 24px 20px 28px !important;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        z-index: 2;
    }
    .uk-width-3-5\@m .uk-cover-container .slider-overlay .uk-card {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        text-align: left !important;
    }
    .uk-width-3-5\@m .uk-cover-container .slider-overlay .main-title-item {
        margin: 0 !important;
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    }
    .uk-width-3-5\@m .uk-cover-container .slider-overlay .main-title-item a {
        color: #ffffff !important;
        transition: color var(--op-transition);
    }
    .uk-width-3-5\@m .uk-cover-container .slider-overlay .main-title-item a:hover {
        color: #93c5fd !important;
    }
}

/* Portrait overrides for Health & Entertainment */
@media (min-width:576px) and (max-width:820px) {
    /* Health section portrait layout */
    .uk-width-1-4\@m:not(.custom-list) .uk-card.uk-card-small.uk-card-default {
        flex-direction: column !important;
    }
    .uk-width-1-4\@m:not(.custom-list) .uk-card.uk-card-small.uk-card-default .uk-card-media-top {
        width: 100% !important;
        height: 180px !important;
    }
    .uk-width-1-4\@m:not(.custom-list) .uk-card.uk-card-small.uk-card-default .uk-card-body {
        width: 100% !important;
        padding: 16px !important;
    }

    /* Entertainment section portrait layout */
    .uk-width-3-5\@m { width: 100% !important; }
    .uk-width-2-5\@m { width: 100% !important; margin-top: 14px; }
    .uk-width-3-5\@m .uk-cover-container {
        height: 260px !important;
    }
    .uk-width-3-5\@m .uk-cover-container .slider-overlay .main-title-item {
        font-size: 1.05rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   26b. SPORTS — खेलकुद (Full-width featured layout)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    /* Force both sub-columns to full width */
    .uk-width-expand\@m .uk-width-3-5\@m {
        width: 100% !important;
    }
    .uk-width-expand\@m .uk-width-2-5\@m {
        width: 100% !important;
        margin-top: 16px !important;
    }

    /* Fix height-match collapse: give all wrapper divs explicit height */
    .uk-width-expand\@m .uk-width-3-5\@m > div[uk-grid],
    .uk-width-expand\@m .uk-width-3-5\@m .np-samachar-list {
        height: 380px !important;
        min-height: 380px !important;
        width: 100% !important;
        overflow: hidden;
    }
    .uk-width-expand\@m .uk-width-3-5\@m .uk-cover-container {
        height: 380px !important;
        min-height: 380px !important;
        width: 100% !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
        position: relative !important;
    }
    /* Image: NOT uk-cover, treat as a normal object-fit image */
    .uk-width-expand\@m .uk-width-3-5\@m .uk-cover-container img.uk-height-large {
        width: 100% !important;
        height: 380px !important;
        min-height: 380px !important;
        object-fit: cover !important;
        display: block !important;
        position: static !important;
        transition: transform 0.5s ease;
    }
    .uk-width-expand\@m .uk-width-3-5\@m .uk-cover-container:hover img.uk-height-large {
        transform: scale(1.04);
    }

    /* Premium dark gradient overlay */
    .uk-width-expand\@m .uk-width-3-5\@m .uk-overlay-our {
        background: linear-gradient(to top, rgba(15,23,42,0.95) 0%, rgba(15,23,42,0.35) 55%, transparent 100%) !important;
        position: absolute !important;
        inset: 0;
        z-index: 1;
    }
    .uk-width-expand\@m .uk-width-3-5\@m .uk-overlay.uk-position-bottom {
        background: transparent !important;
        padding: 24px 20px 28px !important;
        position: absolute !important;
        left: 0; right: 0; bottom: 0;
        z-index: 2;
    }
    .uk-width-expand\@m .uk-width-3-5\@m .uk-overlay h2 {
        margin: 0 !important;
    }
    .uk-width-expand\@m .uk-width-3-5\@m .uk-overlay h2 a {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.6);
        transition: color 0.25s ease;
        display: block;
    }
    .uk-width-expand\@m .uk-width-3-5\@m .uk-overlay h2 a:hover {
        color: #93c5fd !important;
    }

    /* Follow-up list — 3 card columns below featured */
    .uk-width-expand\@m .uk-width-2-5\@m .small-list.custom-list {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
    .uk-width-expand\@m .uk-width-2-5\@m .list-item.margin-s {
        margin: 0 !important;
    }
    .uk-width-expand\@m .uk-width-2-5\@m .list-item.margin-s .uk-card.uk-card-small.uk-grid-collapse {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 3px 12px rgba(0,0,0,0.07) !important;
        transition: box-shadow 0.25s ease, transform 0.25s ease !important;
        border: 1px solid rgba(0,0,0,0.05);
    }
    .uk-width-expand\@m .uk-width-2-5\@m .list-item.margin-s .uk-card.uk-card-small.uk-grid-collapse:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,0.13) !important;
        transform: translateY(-3px) !important;
    }
    .uk-width-expand\@m .uk-width-2-5\@m .list-item.margin-s .uk-width-2-5.uk-card-media-left {
        width: 100% !important;
        height: 110px !important;
        flex-shrink: 0;
        overflow: hidden;
    }
    .uk-width-expand\@m .uk-width-2-5\@m .list-item.margin-s .uk-width-2-5.uk-card-media-left img {
        width: 100% !important;
        height: 110px !important;
        object-fit: cover !important;
        border-radius: 0 !important;
        transition: transform 0.45s ease;
    }
    .uk-width-expand\@m .uk-width-2-5\@m .list-item.margin-s .uk-card:hover .uk-width-2-5.uk-card-media-left img {
        transform: scale(1.06);
    }
    .uk-width-expand\@m .uk-width-2-5\@m .list-item.margin-s .uk-width-3-5 {
        width: 100% !important;
        flex: 1;
        padding: 10px 12px !important;
    }
    .uk-width-expand\@m .uk-width-2-5\@m .list-item.margin-s h3.uk-card-title {
        font-size: 0.84rem !important;
        line-height: 1.45 !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        margin: 0 !important;
    }
}
@media (min-width:576px) and (max-width:820px) {
    .uk-width-expand\@m .uk-width-3-5\@m > div[uk-grid],
    .uk-width-expand\@m .uk-width-3-5\@m .np-samachar-list {
        height: 240px !important;
        min-height: 240px !important;
    }
    .uk-width-expand\@m .uk-width-3-5\@m .uk-cover-container {
        height: 240px !important;
        min-height: 240px !important;
    }
    .uk-width-expand\@m .uk-width-3-5\@m .uk-cover-container img.uk-height-large {
        height: 240px !important;
        min-height: 240px !important;
    }
    .uk-width-expand\@m .uk-width-3-5\@m .uk-overlay h2 a {
        font-size: 1.05rem !important;
    }
    .uk-width-expand\@m .uk-width-2-5\@m .small-list.custom-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   27. LITERATURE / साहित्य + शिक्षा
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .uk-width-medium\@m,
    .uk-width-expand\@m { width: 100% !important; }

    .uk-width-2-3\@m.np-samachar-item,
    .uk-width-1-3\@m { width: 100% !important; }

    .uk-width-1-3\@m .small-list.custom-list.uk-flex.uk-flex-column.uk-flex-between {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .uk-width-1-3\@m .list-item.margin-s { margin: 0 !important; }
    .uk-width-1-3\@m .list-item.margin-s .uk-card.uk-card-small.uk-grid-collapse {
        flex-direction: row;
        background: var(--op-bg-card);
        border-radius: var(--op-radius);
        overflow: hidden;
        box-shadow: var(--op-shadow-sm) !important;
        transition: box-shadow var(--op-transition), transform var(--op-transition) !important;
    }
    .uk-width-1-3\@m .list-item.margin-s .uk-card.uk-card-small.uk-grid-collapse:hover {
        box-shadow: var(--op-shadow-md) !important;
        transform: translateY(-3px) !important;
    }
    .uk-width-1-3\@m .list-item.margin-s .uk-width-2-5.uk-card-media-left {
        width: 90px !important;
        flex: 0 0 90px;
    }
    .uk-width-1-3\@m .list-item.margin-s .uk-width-2-5.uk-card-media-left img {
        width: 90px !important;
        min-height: 74px;
        height: 100% !important;
        object-fit: cover;
        transition: transform 0.45s var(--op-ease);
    }
    .uk-width-1-3\@m .list-item.margin-s .uk-card.uk-card-small.uk-grid-collapse:hover img {
        transform: scale(1.06);
    }
    .uk-width-1-3\@m .list-item.margin-s .uk-width-3-5 { flex: 1; padding: 8px 10px; }
    .uk-width-1-3\@m h3.uk-card-title {
        font-size: .85rem;
        font-weight: 600;
        color: var(--op-navy-mid);
        line-height: 1.42;
    }
}

/* ═══════════════════════════════════════════════════════════════
   28. WIDGETS / ADS
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .widget { text-align: center; margin-bottom: 14px; }
    .widget img { max-width: 100%; height: auto !important; margin: 0 auto; border-radius: var(--op-radius); }
    .adsimage, .uk-text-center > section.widget {
        overflow: hidden;
        border-radius: var(--op-radius);
        box-shadow: var(--op-shadow-xs);
    }
}
/* ==================================================================
   29. MOST READ (dherei padhieko) - Premium 2-col grid for tablet
   ================================================================== */

@media (min-width:576px) and (max-width:1024px) {
    /* Section header accent */
    .uk-width-1-4\@m.custom-list .cat-title {
        border-bottom: 3px solid #e8192c;
        padding-bottom: 8px;
        margin-bottom: 16px;
    }
    .uk-width-1-4\@m.custom-list .cat-title h2.uk-heading-line::before,
    .uk-width-1-4\@m.custom-list .cat-title h2.uk-heading-line::after { display: none; }
    .uk-width-1-4\@m.custom-list .cat-title h2 {
        font-size: 1.1rem !important;
        font-weight: 800 !important;
        color: #0d2044 !important;
    }

    /* 2-column grid */
    .uk-width-1-4\@m.custom-list .small-list.custom-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        flex-direction: unset !important;
    }

    /* Card shell */
    .uk-width-1-4\@m.custom-list .small-list.custom-list .list-item {
        background: #fff;
        border-radius: 10px;
        border: none !important;
        border-bottom: none !important;
        border-left: none !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden;
        position: relative;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .uk-width-1-4\@m.custom-list .small-list.custom-list .list-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0,54,164,0.16);
        padding-left: 0 !important;
    }

    /* Top gradient accent bar */
    .uk-width-1-4\@m.custom-list .small-list.custom-list .list-item::before {
        content: '';
        display: block;
        height: 4px;
        width: 100%;
        background: linear-gradient(90deg, #e8192c 0%, #0054a4 100%);
    }

    /* h5 trending-item layout */
    .uk-width-1-4\@m.custom-list .small-list.custom-list .list-item h5.trending-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        padding: 10px 12px 14px;
        margin: 0;
    }

    /* Number badge */
    .uk-width-1-4\@m.custom-list .small-list.custom-list .list-item .item-nunber {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: linear-gradient(135deg, #e8192c, #c0000f);
        color: #fff !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        font-family: 'Poppins', sans-serif;
        flex-shrink: 0;
        box-shadow: 0 2px 6px rgba(232,25,44,0.4);
        min-width: unset;
    }

    /* Article link */
    .uk-width-1-4\@m.custom-list .small-list.custom-list .list-item a.ah {
        font-size: 13.5px;
        line-height: 1.52;
        font-weight: 600;
        color: #1a2b4a;
        transition: color 0.2s ease;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .uk-width-1-4\@m.custom-list .small-list.custom-list .list-item a.ah:hover { color: #0054a4; }

    /* Top 2 items: blue accent highlight */
    .uk-width-1-4\@m.custom-list .small-list.custom-list .list-item:nth-child(1)::before,
    .uk-width-1-4\@m.custom-list .small-list.custom-list .list-item:nth-child(2)::before {
        background: linear-gradient(90deg, #0054a4 0%, #1e90ff 100%);
    }
    .uk-width-1-4\@m.custom-list .small-list.custom-list .list-item:nth-child(1) .item-nunber,
    .uk-width-1-4\@m.custom-list .small-list.custom-list .list-item:nth-child(2) .item-nunber {
        background: linear-gradient(135deg, #0054a4, #1e90ff);
        box-shadow: 0 2px 6px rgba(0,84,164,0.4);
    }
}

/* Portrait: single column */
@media (min-width:576px) and (max-width:660px) {
    .uk-width-1-4\@m.custom-list .small-list.custom-list {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   30. HEIGHT UTILITIES
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .uk-height-medium { height: 195px !important; object-fit: cover; }
    .uk-height-small  { height: 122px !important; object-fit: cover; }
}
@media (min-width:576px) and (max-width:820px) {
    .uk-height-medium { height: 162px !important; }
    .uk-height-small  { height: 102px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   31. FOOTER — Premium Redesign
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {

    /* ── Outer wrapper ── */
    .footer-nav {
        background: linear-gradient(160deg, #070e1c 0%, #0c1a30 55%, #07111f 100%) !important;
        padding: 0 !important;
        border-top: 3px solid transparent !important;
        border-image: linear-gradient(90deg,#2563eb,#7c3aed,#0ea5e9) 1 !important;
        overflow: hidden;
    }

    /* ── Category nav pill row ── */
    .footer-nav nav.uk-navbar {
        background: rgba(255,255,255,0.03) !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        padding: 0 16px !important;
        min-height: auto !important;
    }
    .footer-nav .uk-navbar-center { padding: 0 !important; }
    .footer-nav .op-offter-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 7px !important;
        padding: 16px 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    .footer-nav .op-offter-nav li {
        margin: 0 !important;
        padding: 0 !important;
    }
    .footer-nav .op-offter-nav li a,
    .footer-nav .op-offter-nav li a.uk-h4 {
        display: inline-block !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
        padding: 5px 15px !important;
        border-radius: 99px !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        background: rgba(255,255,255,0.05) !important;
        transition: all 0.25s ease !important;
        text-decoration: none !important;
        height: auto !important;
        line-height: 1.6 !important;
        letter-spacing: 0.02em !important;
    }
    .footer-nav .op-offter-nav li a:hover {
        color: #ffffff !important;
        background: linear-gradient(135deg,rgba(37,99,235,0.5),rgba(124,58,237,0.4)) !important;
        border-color: rgba(99,132,235,0.5) !important;
        transform: translateY(-2px) !important;
    }

    /* ── Info grid: override uk-child-width-1-5@s ── */
    .footer-nav .uk-child-width-1-5\@s > * {
        width: 50% !important;
        box-sizing: border-box !important;
    }
    .footer-nav .uk-child-width-1-5\@s {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 28px 16px 8px !important;
        margin: 0 !important;
        gap: 0 !important;
    }
    /* Glassmorphic info cards */
    .footer-nav .our-team {
        background: rgba(255,255,255,0.04) !important;
        border: 1px solid rgba(255,255,255,0.07) !important;
        border-radius: 10px !important;
        padding: 16px !important;
        margin: 0 6px 12px 0 !important;
    }

    /* Section headings */
    .footer-nav h3, .footer-nav h4, .footer-nav h5, .footer-nav h6 {
        font-size: 10.5px !important;
        font-weight: 700 !important;
        color: #7dd3fc !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1em !important;
        margin: 0 0 12px 0 !important;
        padding-bottom: 8px !important;
        position: relative !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }
    .footer-nav h3::after, .footer-nav h4::after,
    .footer-nav h5::after, .footer-nav h6::after {
        content: '' !important;
        position: absolute !important;
        bottom: -1px !important;
        left: 0 !important;
        width: 28px !important;
        height: 2px !important;
        background: linear-gradient(90deg,#2563eb,#7c3aed) !important;
        border-radius: 2px !important;
    }

    /* Info contact rows */
    .footer-nav .our-team p,
    .footer-nav .our-team p.uk-text-bold {
        font-size: 12px !important;
        color: #94a3b8 !important;
        line-height: 1.8 !important;
        margin: 0 0 2px 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 7px !important;
        font-weight: 400 !important;
    }
    .footer-nav .our-team p span[uk-icon] {
        color: #3b82f6 !important;
        flex-shrink: 0 !important;
        margin-top: 3px !important;
        opacity: 0.85;
    }

    /* Gradient divider */
    .footer-nav hr {
        border: none !important;
        height: 1px !important;
        background: linear-gradient(90deg, transparent 0%, rgba(37,99,235,0.45) 30%, rgba(124,58,237,0.45) 70%, transparent 100%) !important;
        margin: 8px 16px !important;
    }

    /* ── Bottom bar ── */
    .footer-nav .uk-width-1-3\@m,
    .footer-nav .uk-width-2-3\@m {
        width: 100% !important;
    }
    .footer-nav .uk-navbar-left.nav-btn-op {
        width: 100% !important;
    }
    .footer-nav .nav-btn-op .uk-navbar-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0 12px !important;
        padding: 8px 0 0 !important;
        list-style: none !important;
        justify-content: center !important;
        margin: 0 !important;
    }
    .footer-nav .nav-btn-op .uk-navbar-nav li a {
        font-size: 11.5px !important;
        color: #64748b !important;
        line-height: 2 !important;
        height: auto !important;
        padding: 0 !important;
        transition: color 0.2s ease !important;
        text-decoration: none !important;
        background: transparent !important;
    }
    .footer-nav .nav-btn-op .uk-navbar-nav li a:hover {
        color: #93c5fd !important;
    }
    .footer-nav .credit {
        font-size: 10.5px !important;
        color: #334155 !important;
        text-align: center !important;
        width: 100% !important;
        padding: 8px 16px 18px !important;
        line-height: 1.7 !important;
    }
}
@media (min-width:576px) and (max-width:820px) {
    /* 2 columns on portrait tablet */
    .footer-nav .uk-child-width-1-5\@s > * { width: 50% !important; }
    .footer-nav .our-team { margin: 0 4px 10px 0 !important; }
    .footer-nav .op-offter-nav li a { font-size: 0.75rem !important; padding: 4px 11px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   32. SEARCH MODAL
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .uk-modal-container .uk-modal-dialog {
        width: 88% !important;
        max-width: 600px;
        border-radius: var(--op-radius-lg);
        box-shadow: var(--op-shadow-lg);
    }
}

/* ═══════════════════════════════════════════════════════════════
   33. TO-TOP BUTTON
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .uk-totop {
        right: 16px;
        bottom: 72px;
        height: 40px;
        width: 40px;
        background: var(--op-grad-blue);
        border-radius: 50%;
        box-shadow: var(--op-shadow-blue);
        transition: transform var(--op-transition), box-shadow var(--op-transition);
    }
    .uk-totop:hover {
        transform: scale(1.12) translateY(-2px);
        box-shadow: 0 12px 28px rgba(0,84,164,.4);
    }
}

/* ═══════════════════════════════════════════════════════════════
   34. SLIDER OVERLAY TEXT
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .slider-overlay {
        background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.3) 50%, transparent 100%);
        padding: 16px 14px !important;
    }
    .slider-overlay .main-title-item {
        font-size: 17px !important;
        line-height: 1.42;
        color: #fff;
        font-weight: 700;
        text-shadow: 0 2px 10px rgba(0,0,0,.5);
    }
}
@media (min-width:576px) and (max-width:820px) {
    .slider-overlay .main-title-item { font-size: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   35. SINGLE ARTICLE
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .single-title {
        font-size: 1.85rem;
        line-height: 1.35;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--op-navy);
    }
    .sub-title { font-size: 1rem; line-height: 1.65; color: var(--op-gray-500); }
    .np-samachar-image .uk-card-title { font-size: 1rem !important; }
    .np-samachar-list {
        border-radius: var(--op-radius-lg);
        overflow: hidden;
        box-shadow: var(--op-shadow-md) !important;
    }
}
@media (min-width:576px) and (max-width:820px) {
    .single-title { font-size: 1.5rem; }
    .sub-title { font-size: .92rem; }
    .np-samachar-image .uk-card-title { font-size: .87rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   36. INFO-BOX
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .info-box {
        width: 94% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: var(--op-radius-lg);
        overflow: hidden;
        box-shadow: var(--op-shadow-md);
    }
}

/* ═══════════════════════════════════════════════════════════════
   37. POPULAR / PRAVAS / ROGAAR
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .popular.uk-grid-small.uk-child-width-1-1\@s { gap: 10px; }
    .popular .uk-card.uk-card-small.np-samachar-list {
        border-radius: var(--op-radius-lg);
        overflow: hidden;
        box-shadow: var(--op-shadow-sm) !important;
        transition: box-shadow var(--op-transition), transform var(--op-transition) !important;
    }
    .popular .uk-card.uk-card-small.np-samachar-list:hover {
        box-shadow: var(--op-shadow-md) !important;
        transform: translateY(-3px) !important;
    }
    .popular .uk-card.uk-card-small.np-samachar-list .uk-card-media-top img {
        width: 100%;
        height: 175px;
        object-fit: cover;
        transition: transform 0.45s var(--op-ease);
    }
    .popular .uk-card.uk-card-small.np-samachar-list:hover .uk-card-media-top img {
        transform: scale(1.06);
    }
    .popular .uk-margin-top h4 { font-size: .9rem; line-height: 1.42; padding: 8px 0; font-weight: 600; }
    .popular .small-list.custom-list.uk-flex.uk-flex-column.uk-flex-between { gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   38. SECTION BACKGROUND ACCENTS
       Alternating light/white bg for visual rhythm
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    /* Give sections some breathing room with subtle backgrounds */
    section.uk-section,
    .uk-section {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }

    /* Dark section highlight (for video, province, etc) */
    .uk-section-muted {
        background: var(--op-gray-100) !important;
        border-radius: var(--op-radius-xl);
        margin: 12px 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   39. OVERLAY GRADIENT (used in hero/news overlays)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    .uk-overlay-our {
        background: linear-gradient(5deg, rgba(10,20,40,0.92) 0%, rgba(10,20,40,0.5) 50%, transparent 100%) !important;
    }
    .uk-overlay.uk-position-bottom {
        padding: 16px 14px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   40. MICRO-ANIMATIONS — Fade-in on scroll areas
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {
    /* Smooth page-level transitions */
    * { -webkit-tap-highlight-color: transparent; }

    /* Pulse animation for breaking news label */
    @keyframes op-pulse {
        0%, 100% { opacity: 1; }
        50%       { opacity: 0.7; }
    }
    .breaking-badge,
    [class*="breaking"] .label {
        animation: op-pulse 2s ease-in-out infinite;
    }

    /* Shimmer for loading images */
    img[src=""], img:not([src]) {
        background: linear-gradient(90deg, var(--op-gray-100) 25%, var(--op-gray-200) 50%, var(--op-gray-100) 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
    }
    @keyframes shimmer {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
}

/* ═══════════════════════════════════════════════════════════════
   41. साहित्य / LITERATURE SECTION — Premium Pro Layout
       Structure: uk-width-expand@m
         └── uk-width-2-3@m  (feature card: .np-samachar-item)
         └── uk-width-1-3@m  (sidebar list: .small-list .custom-list)
   ═══════════════════════════════════════════════════════════════ */

/* ── Outer wrapper: stack to single column on tablet ── */
@media (min-width:576px) and (max-width:1024px) {

    /* The साहित्य section sits inside .uk-width-expand@m */
    .uk-width-expand\@m {
        width: 100% !important;
        padding-top: 0 !important;
    }

    /* Inner grid of साहित्य: feature + sidebar → side-by-side on landscape, stacked on portrait */
    .uk-width-expand\@m > div[uk-grid],
    .uk-width-expand\@m > div.uk-grid-small {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
        align-items: flex-start;
    }

    /* ── Feature card (left 2/3 col) ── */
    .uk-width-expand\@m .uk-width-2-3\@m {
        width: 100% !important;
        flex: 1 1 100%;
    }

    /* ── Sidebar list (right 1/3 col) ── */
    .uk-width-expand\@m .uk-width-1-3\@m {
        width: 100% !important;
        flex: 1 1 100%;
    }

    /* On landscape tablet → side-by-side */
    @media (min-width:768px) and (max-width:1024px) {
        .uk-width-expand\@m .uk-width-2-3\@m {
            width: 58% !important;
            flex: 0 0 58%;
        }
        .uk-width-expand\@m .uk-width-1-3\@m {
            width: calc(42% - 16px) !important;
            flex: 0 0 calc(42% - 16px);
        }
    }
}

/* ── Feature card: .np-samachar-item ── */
@media (min-width:576px) and (max-width:1024px) {

    .uk-width-expand\@m .np-samachar-item {
        margin: 0 !important;
        border-radius: var(--op-radius-lg) !important;
        overflow: hidden !important;
        box-shadow: var(--op-shadow-md) !important;
        background: var(--op-bg-card) !important;
        height: auto !important;
        transition: transform var(--op-transition), box-shadow var(--op-transition);
    }
    .uk-width-expand\@m .np-samachar-item:hover {
        transform: translateY(-4px);
        box-shadow: var(--op-shadow-lg) !important;
    }

    /* Feature image */
    .uk-width-expand\@m .np-samachar-item .img-wraper {
        border-radius: 0 !important;
        overflow: hidden;
        position: relative;
    }
    .uk-width-expand\@m .np-samachar-item .artha-main-img-op {
        width: 100% !important;
        height: 260px !important;
        object-fit: cover !important;
        display: block;
        transition: transform 0.5s var(--op-ease) !important;
    }
    .uk-width-expand\@m .np-samachar-item:hover .artha-main-img-op {
        transform: scale(1.05) !important;
    }

    /* Category badge overlay on feature image */
    .uk-width-expand\@m .np-samachar-item .img-wraper::after {
        content: 'साहित्य';
        position: absolute;
        top: 12px;
        left: 12px;
        background: var(--op-grad-red);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 4px 12px;
        border-radius: 20px;
        box-shadow: 0 2px 10px rgba(232,25,44,.45);
        z-index: 2;
        pointer-events: none;
    }

    /* Bottom gradient on feature image */
    .uk-width-expand\@m .np-samachar-item .img-wraper::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(0deg, rgba(10,20,40,0.5) 0%, transparent 100%);
        z-index: 1;
        pointer-events: none;
    }

    /* Feature card text body */
    .uk-width-expand\@m .np-samachar-item .uk-padding-small {
        padding: 14px 16px 16px !important;
        background: #fff;
    }
    .uk-width-expand\@m .np-samachar-item h2.uk-h2 {
        font-size: 1.15rem !important;
        font-weight: 800 !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        letter-spacing: -0.01em;
    }
    .uk-width-expand\@m .np-samachar-item h2.uk-h2 a {
        color: var(--op-navy) !important;
        transition: color var(--op-transition);
    }
    .uk-width-expand\@m .np-samachar-item h2.uk-h2 a:hover {
        color: var(--op-blue) !important;
    }
}

/* Landscape: taller feature image */
@media (min-width:768px) and (max-width:1024px) {
    .uk-width-expand\@m .np-samachar-item .artha-main-img-op {
        height: 310px !important;
    }
}
/* Portrait: shorter */
@media (min-width:576px) and (max-width:767px) {
    .uk-width-expand\@m .np-samachar-item .artha-main-img-op {
        height: 225px !important;
    }
}

/* ── Sidebar list items (the 4 small cards) ── */
@media (min-width:576px) and (max-width:1024px) {

    /* The container */
    .uk-width-expand\@m .uk-width-1-3\@m .small-list.custom-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Each list-item card shell */
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s {
        margin: 0 !important;
        background: var(--op-bg-card);
        border-radius: var(--op-radius) !important;
        overflow: hidden !important;
        box-shadow: var(--op-shadow-sm) !important;
        transition: transform var(--op-transition), box-shadow var(--op-transition);
        border-left: 3px solid var(--op-blue);
    }
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s:hover {
        transform: translateY(-3px);
        box-shadow: var(--op-shadow-md) !important;
        border-left-color: var(--op-red);
    }

    /* Inner grid card (horizontal layout) */
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .uk-card.uk-card-small.uk-grid-collapse {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0;
    }
    /* Disable global card hover inside this context */
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .uk-card.uk-card-small.uk-grid-collapse:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Thumbnail column */
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .uk-width-2-5.uk-card-media-left {
        width: 140px !important;
        min-width: 140px !important;
        flex: 0 0 140px !important;
        overflow: hidden;
        position: relative;
    }
    /* Override inline style height on images */
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .uk-width-2-5.uk-card-media-left a {
        display: block;
        height: 100%;
        min-height: 100px;
    }
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .uk-width-2-5.uk-card-media-left img {
        width: 140px !important;
        height: 100% !important;
        min-height: 100px !important;
        object-fit: cover !important;
        border-radius: 0 !important;    /* override inline border-radius:5px */
        display: block !important;
        transition: transform 0.45s var(--op-ease);
    }
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s:hover
        .uk-width-2-5.uk-card-media-left img {
        transform: scale(1.08) !important;
    }

    /* Text column */
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .uk-width-3-5 {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
    }
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .margin-s-l {
        margin: 0 !important;
        padding: 10px 12px !important;
        width: 100%;
    }
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .margin-s-l h3.uk-card-title {
        margin: 0 !important;
        font-size: .87rem !important;
        line-height: 1.42 !important;
        font-weight: 600 !important;
        color: var(--op-navy-mid) !important;
        text-align: center !important;
    }
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .margin-s-l h3.uk-card-title a {
        color: var(--op-navy-mid) !important;
        transition: color var(--op-transition);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: center !important;
    }
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .margin-s-l h3.uk-card-title a:hover {
        color: var(--op-blue) !important;
    }
}

/* On landscape: sidebar shows as 2-col mini-grid with bigger images & centered titles */
@media (min-width:768px) and (max-width:1024px) {
    .uk-width-expand\@m .uk-width-1-3\@m .small-list.custom-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .uk-card.uk-card-small.uk-grid-collapse {
        flex-direction: column !important;
    }
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .uk-width-2-5.uk-card-media-left {
        width: 100% !important;
        min-width: 100% !important;
        flex: none !important;
        height: 180px;
    }
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .uk-width-2-5.uk-card-media-left a {
        height: 180px;
        display: block;
    }
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .uk-width-2-5.uk-card-media-left img {
        width: 100% !important;
        height: 180px !important;
        min-height: 180px !important;
    }
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .uk-width-3-5 {
        padding: 0 !important;
    }
    /* Center title text on landscape tablet */
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .margin-s-l h3.uk-card-title {
        text-align: center !important;
        font-size: .92rem !important;
        padding: 10px 10px !important;
    }
    .uk-width-expand\@m .uk-width-1-3\@m .list-item.margin-s
        .margin-s-l h3.uk-card-title a {
        text-align: center !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   42. ALL "sidebar list" sections sharing the same pattern
       (sections that use .uk-width-1-3@m .small-list inline-style images)
       Override inline height: 90px on img tags everywhere
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:576px) and (max-width:1024px) {

    /* Generic override for any sidebar small-list that has inline height=90px */
    .uk-width-1-3\@m .small-list.custom-list .uk-width-2-5.uk-card-media-left img,
    .uk-width-1-3\@m .small-list.custom-list .uk-width-2-5 img {
        height: 100% !important;
        min-height: 78px !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important;
        display: block !important;
    }

    /* Also apply to any section with sidebar pattern not covered above */
    .uk-grid-divider .uk-width-1-3\@m .list-item.margin-s {
        border-left: 3px solid var(--op-blue);
        border-radius: var(--op-radius) !important;
        overflow: hidden !important;
        box-shadow: var(--op-shadow-sm) !important;
        background: var(--op-bg-card);
        transition: transform var(--op-transition), box-shadow var(--op-transition);
    }
    .uk-grid-divider .uk-width-1-3\@m .list-item.margin-s:hover {
        transform: translateY(-3px);
        box-shadow: var(--op-shadow-md) !important;
    }
}

/* =================================================================
   43-47. COMPREHENSIVE SECTION FIXES (????? ??????, ???? ?????, ???????? ????)
   ================================================================= */

/* -- 43. ????? ?????? sub-card 2-col grid -- */
@media (min-width:576px) and (max-width:1024px) {
    .uk-child-width-1-2\@s.uk-grid-match.small-list.custom-list { display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
    .uk-child-width-1-2\@s.uk-grid-match.small-list.custom-list > div { width:100% !important; margin:0 !important; }
    .uk-child-width-1-2\@s.small-list .uk-card { border-radius:var(--op-radius) !important; overflow:hidden !important; box-shadow:var(--op-shadow-sm) !important; background:var(--op-bg-card); transition:transform var(--op-transition),box-shadow var(--op-transition) !important; }
    .uk-child-width-1-2\@s.small-list .uk-card:hover { transform:translateY(-3px) !important; box-shadow:var(--op-shadow-md) !important; }
    .uk-child-width-1-2\@s.small-list .uk-card img,.uk-child-width-1-2\@s.small-list img.uk-width-1-1 { width:100% !important; height:148px !important; object-fit:cover !important; display:block !important; transition:transform 0.45s var(--op-ease); }
    .uk-child-width-1-2\@s.small-list .uk-card:hover img { transform:scale(1.05); }
    .uk-child-width-1-2\@s.small-list .uk-card h4 { font-size:.82rem !important; line-height:1.42 !important; font-weight:600 !important; padding:8px 6px 10px !important; margin:0 !important; color:var(--op-navy-mid); }
    .uk-child-width-1-2\@s.small-list .uk-card h4 a { color:var(--op-navy-mid) !important; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .uk-child-width-1-2\@s.small-list .uk-card h4 a:hover { color:var(--op-blue) !important; }
}

/* -- 44. Main news right column inline h4 22px fix -- */
@media (min-width:576px) and (max-width:1024px) {
    .small-list.custom-list .uk-card h4 { font-size:14px !important; line-height:1.45 !important; font-weight:700 !important; padding:8px 10px 10px !important; margin:0 !important; color:var(--op-navy-mid) !important; }
    .small-list.custom-list .uk-card h4 a { color:var(--op-navy-mid) !important; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; transition:color var(--op-transition); }
    .small-list.custom-list .uk-card h4 a:hover { color:var(--op-blue) !important; }
    .small-list.custom-list img.main-section-news { width:100% !important; height:150px !important; object-fit:cover !important; display:block !important; transition:transform 0.45s var(--op-ease); }
    .small-list.custom-list > div:hover img.main-section-news { transform:scale(1.04); }
}

/* -- 45. ???? ????? rank number inline 40px fix -- */
@media (min-width:576px) and (max-width:1024px) {
    div.item-nunber, .item-nunber { font-size:22px !important; font-weight:800 !important; color:#fff !important; line-height:1 !important; font-family:'Poppins',sans-serif !important; }
    .uk-child-width-1-3\@s .uk-width-auto .small-list.custom-list { display:flex !important; align-items:center !important; justify-content:center !important; grid-template-columns:unset !important; gap:0 !important; }
}

/* -- 46. ???????? ???? 3-col -> 2-col -- */
@media (min-width:576px) and (max-width:1024px) {
    .uk-child-width-1-3\@m.uk-grid.uk-grid-small.uk-grid-divider { display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:14px !important; }
    .uk-child-width-1-3\@m.uk-grid.uk-grid-small.uk-grid-divider > div { width:100% !important; margin:0 !important; padding:0 !important; }
    .uk-child-width-1-3\@m.uk-grid.uk-grid-small .uk-card.uk-card-small { border-radius:var(--op-radius-lg) !important; overflow:hidden !important; box-shadow:var(--op-shadow-sm) !important; height:100%; transition:transform var(--op-transition),box-shadow var(--op-transition) !important; }
    .uk-child-width-1-3\@m.uk-grid.uk-grid-small .uk-card.uk-card-small:hover { transform:translateY(-4px) !important; box-shadow:var(--op-shadow-md) !important; }
    .uk-child-width-1-3\@m.uk-grid.uk-grid-small .cat-name-title img.latest-news { height:170px !important; width:100% !important; object-fit:cover !important; display:block !important; transition:transform 0.45s var(--op-ease); }
    .uk-child-width-1-3\@m.uk-grid.uk-grid-small .uk-card.uk-card-small:hover .cat-name-title img.latest-news { transform:scale(1.06) !important; }
    .uk-child-width-1-3\@m.uk-grid.uk-grid-small .uk-card-title { font-size:.92rem !important; line-height:1.42 !important; font-weight:700 !important; }
    .uk-child-width-1-3\@m.uk-grid-divider > :not(.uk-first-column)::before { display:none !important; }
}
@media (min-width:576px) and (max-width:660px) {
    .uk-child-width-1-3\@m.uk-grid.uk-grid-small.uk-grid-divider { grid-template-columns:1fr !important; }
}

/* -- 47. Global inline style overrides -- */
@media (min-width:576px) and (max-width:1024px) {
    .uk-card.uk-card-small[style*='box-shadow'] { box-shadow:var(--op-shadow-sm) !important; }
    .uk-card.uk-card-small[style*='box-shadow']:hover { box-shadow:var(--op-shadow-md) !important; }
    .uk-card-body[style*='padding: 20px'] { padding:10px 12px !important; }
    div[uk-grid].uk-margin-small-top { margin-top:14px !important; }
}

/* =================================================================
   48. ??????? (POLITICS) � Premium Pro Section
   Structure:
     .uk-card-media-right.uk-cover-container.uk-height-large (hero)
     .uk-child-width-1-2@s.uk-grid-match (card list)
   ================================================================= */

/* -- Hero featured image -- */
@media (min-width:576px) and (max-width:1024px) {

    /* Wrapper: full-width hero */
    .uk-card-media-right.uk-cover-container.uk-height-large {
        height: 300px !important;
        width: 100% !important;
        border-radius: var(--op-radius-xl) !important;
        overflow: hidden !important;
        box-shadow: var(--op-shadow-lg) !important;
        position: relative;
    }

    /* Hide the canvas that forces bad height */
    .uk-card-media-right.uk-cover-container.uk-height-large canvas {
        display: none !important;
    }

    /* Hero image itself */
    .uk-card-media-right.uk-cover-container.uk-height-large img.main-section-news,
    .uk-card-media-right.uk-cover-container.uk-height-large img[uk-cover] {
        width: 100% !important;
        height: 300px !important;
        object-fit: cover !important;
        object-position: center top !important;
        display: block !important;
        position: relative !important;
        transition: transform 0.5s var(--op-ease);
    }

    /* Cinematic gradient overlay on hero */
    .uk-card-media-right.uk-cover-container.uk-height-large::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg,
            rgba(5,15,35,0.88) 0%,
            rgba(5,15,35,0.4) 50%,
            transparent 100%);
        z-index: 1;
        pointer-events: none;
        border-radius: var(--op-radius-xl);
    }

    /* Blue left accent stripe */
    .uk-card-media-right.uk-cover-container.uk-height-large::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--op-grad-blue);
        border-radius: var(--op-radius-xl) 0 0 var(--op-radius-xl);
        z-index: 3;
    }

    /* Slider overlay (title bar) */
    .uk-card-media-right.uk-cover-container .slider-overlay {
        z-index: 2;
        padding: 18px 18px 20px !important;
        background: none !important;
    }
    .uk-card-media-right.uk-cover-container .slider-overlay .main-title-item {
        font-size: 1.05rem !important;
        line-height: 1.42 !important;
        font-weight: 800 !important;
        color: #fff !important;
        text-shadow: 0 2px 12px rgba(0,0,0,0.7);
        margin: 0;
    }
    .uk-card-media-right.uk-cover-container .slider-overlay .main-title-item a {
        color: #fff !important;
    }
    .uk-card-media-right.uk-cover-container .slider-overlay .main-title-item a:hover {
        color: #93c5fd !important;
    }
}

@media (min-width:768px) and (max-width:1024px) {
    .uk-card-media-right.uk-cover-container.uk-height-large { height: 360px !important; }
    .uk-card-media-right.uk-cover-container.uk-height-large img.main-section-news,
    .uk-card-media-right.uk-cover-container.uk-height-large img[uk-cover] { height: 360px !important; }
    .uk-card-media-right.uk-cover-container .slider-overlay .main-title-item { font-size: 1.2rem !important; }
}
@media (min-width:576px) and (max-width:767px) {
    .uk-card-media-right.uk-cover-container.uk-height-large { height: 250px !important; }
    .uk-card-media-right.uk-cover-container.uk-height-large img.main-section-news,
    .uk-card-media-right.uk-cover-container.uk-height-large img[uk-cover] { height: 250px !important; }
}

/* -- Card list grid -- */
@media (min-width:576px) and (max-width:1024px) {

    /* 2-col card grid */
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top.uk-grid-small.uk-grid-divider {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-top: 14px !important;
    }
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top.uk-grid-small.uk-grid-divider > div {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Hide grid divider pseudo lines */
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top.uk-grid-small.uk-grid-divider > :not(.uk-first-column)::before { display: none !important; }

    /* Card shell */
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top .list-item.margin-s {
        background: var(--op-bg-card);
        border-radius: var(--op-radius) !important;
        overflow: hidden !important;
        box-shadow: var(--op-shadow-sm) !important;
        border-left: 3px solid var(--op-blue);
        transition: transform var(--op-transition), box-shadow var(--op-transition), border-left-color var(--op-transition);
    }
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top .list-item.margin-s:hover {
        transform: translateY(-3px);
        box-shadow: var(--op-shadow-md) !important;
        border-left-color: var(--op-red);
    }

    /* Inner card: horizontal row */
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top .list-item.margin-s
        .uk-card.uk-card-small.uk-grid-collapse {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0;
    }
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top .list-item.margin-s
        .uk-card.uk-card-small.uk-grid-collapse:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Thumbnail: left column */
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top
        .uk-width-2-5.uk-card-media-left {
        width: 115px !important;
        min-width: 115px !important;
        flex: 0 0 115px !important;
        overflow: hidden;
    }
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top
        .uk-width-2-5.uk-card-media-left a {
        display: block;
        height: 100%;
        min-height: 88px;
    }
    img.rajniti-img {
        width: 115px !important;
        height: 100% !important;
        min-height: 88px !important;
        object-fit: cover !important;
        border-radius: 0 !important;
        display: block !important;
        transition: transform 0.45s var(--op-ease);
    }
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top .list-item.margin-s:hover img.rajniti-img {
        transform: scale(1.08) !important;
    }

    /* Text column */
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top .uk-width-3-5 {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
    }
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top .margin-s-l.small-list {
        margin: 0 !important;
        padding: 10px 12px !important;
        width: 100%;
    }
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top h3.uk-card-title {
        font-size: .83rem !important;
        line-height: 1.42 !important;
        font-weight: 700 !important;
        color: var(--op-navy-mid) !important;
        margin: 0 0 4px !important;
    }
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top h3.uk-card-title a {
        color: var(--op-navy-mid) !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color var(--op-transition);
    }
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top h3.uk-card-title a:hover { color: var(--op-blue) !important; }
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top p.telipress-desc {
        font-size: 11.5px !important;
        line-height: 1.45 !important;
        color: var(--op-gray-500) !important;
        margin: 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Portrait: 1-col list */
@media (min-width:576px) and (max-width:660px) {
    .uk-child-width-1-2\@s.uk-grid-match.uk-margin-medium-top.uk-grid-small.uk-grid-divider {
        grid-template-columns: 1fr !important;
    }
}
