/* === AKHBARONA UNIFIED CATEGORY PAGES CSS V2 START ===
   Scoped to the redesigned shared desktop and mobile category template.
   No JavaScript, font import, image movement, or advertisement rounding.
*/

.category-page-v2 {
    --category-navy: #213d5c;
    --category-navy-deep: #152c45;
    --category-red: #c2111e;
    --category-ink: #102a46;
    --category-muted: #64748b;
    --category-line: #d8e2ec;
    --category-soft: #f4f7fa;
    --category-white: #fff;
    --category-shadow: 0 10px 28px rgba(20, 46, 73, .08);
    color: var(--category-ink);
    direction: rtl;
    font-family: Cairo, Tahoma, Arial, sans-serif;
    container-type: inline-size;
}

.category-page-v2,
.category-page-v2 * {
    box-sizing: border-box;
}

.category-page-v2 a {
    color: inherit;
    text-decoration: none;
}

.category-page-v2 img {
    display: block;
    max-width: 100%;
}

.category-mobile-top-ad {
    width: 100%;
    min-height: 0;
    padding: 0;
    background: transparent;
    direction: ltr;
}

.category-mobile-top-ad__slot {
    width: 100%;
    height: auto;
    min-height: 0;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    display: block;
    overflow: visible;
    background: transparent;
    text-align: center;
}

.category-mobile-top-ad__slot center,
.category-mobile-top-ad__slot [id^="div-gpt-ad-"] {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.category-mobile-footer-ad {
    width: 100%;
    padding: 18px 0;
    background: #f5f7f9;
    direction: ltr;
}

.category-mobile-footer-ad__slot {
    width: 300px;
    height: 250px;
    max-width: 100%;
    margin: 0 auto;
    padding-top: 8px;
    display: grid;
    place-items: start center;
    overflow: visible;
    color: #9aa7b4;
    background: #eef2f4;
    font-size: 10px;
    line-height: 1;
    text-align: center;
}

.category-mobile-footer-ad__slot {
    position: relative;
    isolation: isolate;
}

.category-mobile-footer-ad__slot::before {
    content: "إعلان";
    position: absolute;
    inset: 8px 0 auto;
    z-index: 0;
    color: #9aa7b4;
    direction: rtl;
    pointer-events: none;
}

.category-mobile-footer-ad__slot > * {
    position: relative;
    z-index: 1;
}

/* The real mobile footer ad is rendered by the shared footer partial. */
.category-page-v2 ~ .container-body > .menu_under_ads {
    position: relative;
    width: 300px;
    min-height: 250px;
    max-width: 100%;
    margin: 18px auto !important;
    overflow: visible;
    background: #eef2f4;
    isolation: isolate;
    direction: ltr;
    text-align: center;
}

.category-page-v2 ~ .container-body > .menu_under_ads::before {
    content: "إعلان";
    position: absolute;
    inset: 8px 0 auto;
    z-index: 0;
    color: #9aa7b4;
    direction: rtl;
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
}

.category-page-v2 ~ .container-body > .menu_under_ads > * {
    position: relative;
    z-index: 1;
}

.category-page-v2__shell {
    margin-bottom: 40px;
}

.category-page-v2__leaderboard {
    width: 100%;
    margin: 0 auto 18px;
    text-align: center;
}

.category-page-v2__leaderboard iframe,
.category-page-v2__leaderboard ins,
.category-page-v2__leaderboard img {
    max-width: 100%;
    border-radius: 0 !important;
}

.category-page-v2__header {
    margin-bottom: 16px;
    padding: 18px 22px 16px;
    border: 1px solid var(--category-line);
    border-radius: 6px;
    background: var(--category-white);
    box-shadow: var(--category-shadow);
}

.category-page-v2__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: var(--category-muted);
    font-size: 13px;
    line-height: 1.5;
}

.category-page-v2__breadcrumb a:hover,
.category-page-v2__breadcrumb a:focus-visible {
    color: var(--category-red);
}

.category-page-v2__breadcrumb span[aria-hidden="true"] {
    color: #9aa7b4;
}

/* Keep category headings on the desktop-matched website font even when the
   legacy mobile stylesheet applies its generic h1/h2 font rule. */
.category-page-v2__title {
    position: relative;
    margin: 0;
    padding-inline-start: 15px;
    color: var(--category-navy);
    font-family: Cairo, Tahoma, Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    text-align: right;
}

.category-page-v2__title::before {
    content: "";
    position: absolute;
    inset-block: 3px;
    inset-inline-start: 0;
    width: 5px;
    border-radius: 2px;
    background: var(--category-red);
}

.category-page-v2__accent {
    height: 3px;
    margin-top: 13px;
    background: linear-gradient(
        to left,
        var(--category-red) 0 14%,
        var(--category-navy) 14% 100%
    );
}

.category-page-v2__layout {
    display: grid;
    grid-template-columns: minmax(0, 650px) 300px;
    gap: 20px;
    align-items: start;
    direction: rtl;
}

.category-page-v2__feed {
    min-width: 0;
}

.category-page-v2__featured {
    min-height: 222px;
    display: grid;
    grid-template-columns: 286px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--category-line);
    border-radius: 7px;
    background: var(--category-white);
    box-shadow: var(--category-shadow);
}

.category-page-v2__featured-media {
    position: relative;
    width: 286px;
    height: 222px;
    overflow: hidden;
    background: #dce5ed;
}

.category-page-v2__featured-media img {
    width: 286px;
    height: 222px;
    object-fit: cover;
}

.category-page-v2__badge {
    position: absolute;
    inset-inline-start: 12px;
    bottom: 12px;
    padding: 3px 9px;
    color: #fff;
    background: var(--category-red);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.category-page-v2__featured-content {
    min-width: 0;
    padding: 18px 20px 15px;
    display: flex;
    flex-direction: column;
}

.category-page-v2__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--category-muted);
    font-size: 12px;
    line-height: 1.5;
}

.category-page-v2__dot {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: var(--category-red);
}

.category-page-v2__featured h2,
.category-page-v2__story h2 {
    color: var(--category-ink);
    font-family: Cairo, Tahoma, Arial, sans-serif;
    font-weight: 700;
    text-align: right;
}

.category-page-v2__featured h2 {
    margin: 9px 0 6px;
    font-size: 21px;
    line-height: 1.48;
}

.category-page-v2__featured h2 a:hover,
.category-page-v2__featured h2 a:focus-visible,
.category-page-v2__story h2 a:hover,
.category-page-v2__story h2 a:focus-visible {
    color: var(--category-red);
}

.category-page-v2__featured p {
    margin: 0;
    color: #55677a;
    font-size: 14px;
    line-height: 1.65;
}

.category-page-v2__read-more {
    margin-top: auto;
    padding-top: 6px;
    color: var(--category-red) !important;
    font-size: 13px;
    font-weight: 700;
}

.category-page-v2__list {
    margin-top: 14px;
    display: grid;
    gap: 12px;
}

.category-page-v2__story {
    min-height: 145px;
    display: grid;
    grid-template-columns: 205px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--category-line);
    border-radius: 7px;
    background: var(--category-white);
    content-visibility: auto;
    contain-intrinsic-size: 145px;
}

.category-page-v2__story:hover,
.category-page-v2__story:focus-within {
    border-color: #aebdcc;
    box-shadow: 0 8px 22px rgba(20, 46, 73, .07);
}

.category-page-v2__story-media {
    width: 205px;
    height: 145px;
    overflow: hidden;
    background: linear-gradient(145deg, #dde5ed, #eef2f6);
}

.category-page-v2__story-media img {
    width: 205px;
    height: 145px;
    object-fit: cover;
}

.category-page-v2__story-copy {
    min-width: 0;
    padding: 12px 17px 11px;
    display: flex;
    flex-direction: column;
}

.category-page-v2__story h2 {
    margin: 6px 0 3px;
    font-size: 17px;
    line-height: 1.55;
}

.category-page-v2__story p {
    margin: 0;
    display: -webkit-box;
    overflow: hidden;
    color: var(--category-muted);
    font-size: 13px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.category-page-v2__source {
    margin-top: auto;
    color: var(--category-red);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.category-page-v2__sidebar {
    position: sticky;
    top: 16px;
    width: 300px;
}

.category-page-v2__ad-slot {
    width: 300px;
    max-width: 100%;
    overflow: visible;
    text-align: center;
}

.category-page-v2__ad-slot--secondary {
    margin-top: 16px;
}

.category-page-v2__ad-slot,
.category-page-v2__ad-slot iframe,
.category-page-v2__ad-slot ins,
.category-page-v2__ad-slot img {
    border-radius: 0 !important;
}

.category-page-v2__empty {
    margin: 0;
    padding: 30px 20px;
    border: 1px solid var(--category-line);
    border-radius: 7px;
    color: var(--category-muted);
    background: var(--category-white);
    text-align: center;
}

.category-pagination-v2 {
    margin-top: 20px;
    padding: 14px;
    border: 1px solid var(--category-line);
    border-radius: 7px;
    background: var(--category-white);
}

.category-pagination-v2__list {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    direction: rtl;
    list-style: none;
}

.category-pagination-v2__page,
.category-pagination-v2__control,
.category-pagination-v2__ellipsis {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    display: grid;
    place-items: center;
    border: 1px solid #c9d4df;
    border-radius: 5px;
    color: var(--category-navy);
    background: var(--category-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.category-pagination-v2__control {
    min-width: 64px;
}

.category-pagination-v2 a:hover,
.category-pagination-v2 a:focus-visible {
    border-color: var(--category-red);
    color: var(--category-red);
}

.category-pagination-v2 .is-current {
    border-color: var(--category-red);
    color: #fff;
    background: var(--category-red);
    box-shadow: 0 4px 12px rgba(194, 17, 30, .2);
}

.category-pagination-v2 .is-disabled {
    color: #a7b1bb;
    background: #f4f6f8;
}

.category-pagination-v2__ellipsis {
    min-width: 24px;
    padding: 0;
    border-color: transparent;
}

@container (max-width: 1000px) {
    .category-page-v2__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .category-page-v2__sidebar {
        position: static;
        width: 100%;
        display: none;
    }
}

@container (max-width: 680px) {
    .category-page-v2__header {
        padding: 15px 16px 14px;
    }

    .category-page-v2__title {
        font-size: 23px;
    }

    .category-page-v2__featured {
        display: block;
    }

    .category-page-v2__featured-media,
    .category-page-v2__featured-media img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .category-page-v2__story {
        min-height: 108px;
        grid-template-columns: 120px minmax(0, 1fr);
        contain-intrinsic-size: 108px;
    }

    .category-page-v2__story-media,
    .category-page-v2__story-media img {
        width: 120px;
        height: 108px;
    }

    .category-page-v2__story-copy {
        padding: 9px 11px 8px;
    }

    .category-page-v2__story h2 {
        margin-top: 4px;
        font-size: 15px;
    }

    .category-page-v2__story p {
        display: none;
    }

    .category-pagination-v2__list {
        gap: 5px;
    }

    .category-pagination-v2__page,
    .category-pagination-v2__control {
        min-width: 34px;
        height: 36px;
        padding: 0 8px;
        font-size: 13px;
    }

    .category-pagination-v2__control {
        min-width: 56px;
    }
}

/* Shared mobile category refinement.
   These rules live in the same category stylesheet used by desktop. */
@container (max-width: 680px) {
    .category-page-v2__shell {
        margin: 0;
        padding: 14px 10px 24px;
    }

    .category-page-v2__leaderboard {
        margin-bottom: 12px;
    }

    .category-page-v2__header {
        margin-bottom: 12px;
        padding: 14px 15px 13px;
        border-radius: 4px;
        box-shadow: 0 5px 16px rgba(20, 46, 73, .07);
    }

    .category-page-v2__breadcrumb {
        margin-bottom: 6px;
        font-size: 12px;
    }

    .category-page-v2__title {
        font-size: 24px;
    }

    .category-page-v2__accent {
        margin-top: 11px;
    }

    .category-page-v2__featured {
        min-height: 0;
        border-radius: 4px;
        box-shadow: 0 6px 18px rgba(20, 46, 73, .08);
    }

    .category-page-v2__featured-content {
        padding: 14px 15px 15px;
    }

    .category-page-v2__featured-topline {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        color: var(--category-muted);
        font-size: 11px;
        line-height: 1.5;
    }

    .category-page-v2__featured h2 {
        margin: 7px 0 5px;
        font-size: 20px;
        line-height: 1.55;
    }

    .category-page-v2__featured p {
        font-size: 13px;
        line-height: 1.7;
    }

    .category-page-v2__read-more {
        padding-top: 9px;
    }

    .category-page-v2__list {
        margin-top: 12px;
        gap: 10px;
    }

    .category-page-v2__story {
        min-height: 105px;
        grid-template-columns: 150px minmax(0, 1fr);
        align-items: stretch;
        border-radius: 3px;
        contain-intrinsic-size: 105px;
    }

    .category-page-v2__story-media {
        width: 150px;
        height: 103px;
        min-height: 103px;
        align-self: center;
    }

    .category-page-v2__story-media img {
        width: 100%;
        height: 103px;
        min-height: 103px;
        object-fit: cover;
    }

    .category-page-v2__story-copy {
        min-height: 103px;
        padding: 7px 11px 6px;
        overflow: hidden;
    }

    .category-page-v2__story h2 {
        margin: 3px 0 1px;
        display: -webkit-box;
        overflow: hidden;
        font-size: 15px;
        line-height: 1.48;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .category-page-v2__story p {
        display: none;
    }

    .category-page-v2__source {
        display: none;
    }

    .category-page-v2__meta {
        gap: 6px;
        font-size: 12px;
    }

    .category-page-v2__placeholder,
    .category-page-v2__featured-placeholder {
        display: grid;
        place-items: center;
        position: relative;
        color: #fff;
        background: linear-gradient(145deg, #244969, #102a46);
        font-size: 13px;
        font-weight: 700;
    }

    .category-page-v2__featured-placeholder {
        width: 100%;
        height: 100%;
        min-height: 100%;
    }

    .category-page-v2__placeholder::after,
    .category-page-v2__featured-placeholder::after {
        content: "";
        position: absolute;
        inset-inline-end: 12px;
        bottom: 10px;
        width: 28px;
        height: 3px;
        background: #fff;
        opacity: .85;
    }

    .mobile-category-ad {
        position: relative;
        width: 300px;
        height: 250px;
        max-width: calc(100vw - 36px);
        margin: 14px auto;
        display: grid;
        place-items: center;
        padding: 0;
        background: #f2f5f7;
        border: 1px solid #e3e9ee;
        font-size: 10px;
        isolation: isolate;
    }

    /* Keep the discreet empty-slot label at the top and center it horizontally. */
    .mobile-category-ad::before {
        content: "إعلان";
        position: absolute;
        inset: 8px 0 auto;
        z-index: 0;
        color: #9aa7b4;
        direction: rtl;
        text-align: center;
        pointer-events: none;
    }

    .mobile-category-ad > * {
        position: relative;
        z-index: 1;
    }

    .category-pagination-v2 {
        margin-top: 16px;
        padding: 12px 8px;
        border-radius: 3px;
    }

    .category-pagination-v2__page,
    .category-pagination-v2__control {
        min-width: 42px;
        height: 42px;
    }

    .category-pagination-v2__control {
        min-width: 70px;
    }
}

@container (max-width: 340px) {
    .category-page-v2__story {
        min-height: 103px;
        grid-template-columns: 126px minmax(0, 1fr);
        contain-intrinsic-size: 103px;
    }

    .category-page-v2__story-media {
        width: 126px;
        height: 101px;
        min-height: 101px;
    }

    .category-page-v2__story-media img {
        height: 101px;
        min-height: 101px;
    }

    .category-page-v2__story-copy {
        min-height: 101px;
        padding-inline: 9px;
    }

    .category-page-v2__story h2 {
        font-size: 14px;
    }

    .category-pagination-v2__list {
        gap: 4px;
    }

    .category-pagination-v2__page {
        min-width: 39px;
    }

    .category-pagination-v2__control {
        min-width: 64px;
        padding-inline: 6px;
    }
}

/* === AKHBARONA UNIFIED CATEGORY PAGES CSS V2 END === */