.category-archive { --archive-red: #d82220; min-width: 0; }
.category-archive__header { margin-bottom: 1.4rem; padding-bottom: .65rem; border-bottom: 2px solid #eadbd8; }
.category-archive__header h1 { display: inline-block; margin: 0; padding-bottom: .55rem; border-bottom: 4px solid var(--archive-red); color: #202938; font-family: var(--font-arabic-heading); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.25; }
.category-archive__header h1.archive-latin, .category-archive .archive-latin, .category-archive [lang="en"], .category-archive time, .category-pagination { font-family: "Poppins", Arial, Helvetica, sans-serif; }
.category-archive__header p { max-width: 52rem; margin: .7rem 0 0; color: #5b6573; font-size: 1.08rem; line-height: 1.7; }
.category-archive__layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(15rem, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; direction: rtl; }
.category-archive__main, .archive-sidebar { min-width: 0; }
.category-top-feature { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(13rem, .9fr); gap: 1rem; direction: rtl; }
.category-top-feature article { min-width: 0; overflow: hidden; border-radius: 13px; background: #202938; }
.category-top-feature a { position: relative; display: block; height: 100%; color: #fff; text-decoration: none; }
.category-top-feature__lead { min-height: 27rem; }
.category-top-feature__support { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.category-top-feature__image { display: block; width: 100%; height: 100%; background: #e4e0da; }
.category-top-feature__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 180ms ease; }
.archive-image-fallback { display: block; width: 100%; height: 100%; background: radial-gradient(circle at top, #4b5563, #202938 72%); }
.category-top-feature__overlay { position: absolute; inset: 35% 0 0; display: flex; padding: 1rem 1.1rem; flex-direction: column; align-items: flex-start; justify-content: flex-end; background: linear-gradient(to top, rgb(0 0 0 / .88), rgb(0 0 0 / .5) 46%, transparent); }
.category-top-feature__overlay strong { display: -webkit-box; overflow: hidden; color: #fff; font-family: var(--font-arabic-heading); font-size: clamp(1.25rem, 2.25vw, 2.2rem); line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.category-top-feature__support .category-top-feature__overlay strong { font-size: clamp(1.05rem, 1.55vw, 1.38rem); }
.category-top-feature__meta { margin-bottom: .3rem; color: #e6e8ec; font-size: .7rem; direction: ltr; }
.category-top-feature a:hover img, .category-top-feature a:focus-visible img { transform: scale(1.025); }
.category-more-stories, .category-older-stories { margin-top: 2.2rem; }
.category-more-stories > h2, .category-older-stories > h2, .archive-sidebar__section > h2 { margin: 0 0 1rem; padding-bottom: .48rem; border-bottom: 2px solid #eadbd8; color: #202938; font-family: var(--font-arabic-heading); font-size: 1.45rem; }
.category-more-stories > h2::after, .category-older-stories > h2::after, .archive-sidebar__section > h2::after { display: block; width: 4rem; height: 3px; margin-top: .48rem; background: var(--archive-red); content: ""; }
.category-more-stories__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.category-more-stories__grid article { display: flex; min-width: 0; min-height: 100%; flex-direction: column; overflow: hidden; border: 1px solid #e8e4de; border-radius: 11px; background: #fff; box-shadow: 0 6px 18px rgb(17 24 39 / .045); }
.category-more-stories__image { display: block; aspect-ratio: 16 / 9; background: #e4e0da; overflow: hidden; }
.category-more-stories__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 180ms ease; }
.category-more-stories__grid article > div { display: flex; flex: 1; padding: .8rem .9rem .9rem; flex-direction: column; }
.category-more-stories h3, .category-older-stories h3, .archive-sidebar h3 { margin: 0; font-family: var(--font-arabic-heading); }
.category-more-stories h3 { display: -webkit-box; overflow: hidden; font-size: 1.62rem; font-weight: 800; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.category-more-stories h3 a, .category-older-stories h3 a, .archive-sidebar h3 a { color: #202938; text-decoration: none; }
.category-more-stories p { display: -webkit-box; margin: .45rem 0; overflow: hidden; color: var(--public-story-summary); font-size: 1.07rem; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.category-more-stories time, .category-older-stories time, .archive-sidebar time { display: block; margin-top: auto; color: #7a8492; font-size: .72rem; direction: ltr; }
.category-more-stories__grid article:hover img, .category-more-stories__grid article:focus-within img { transform: scale(1.025); }
.category-older-stories > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.category-older-stories__row { display: flex; min-width: 0; padding: 0; flex-direction: column; gap: 0; border: 1px solid #e8e4de; border-radius: 11px; background: #fff; overflow: hidden; }
.category-older-stories__image { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 0; background: #e4e0da; color: #fff; overflow: hidden; text-decoration: none; }
.category-older-stories__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 180ms ease; }
.category-older-stories__overlay { position: absolute; inset: 34% 0 0; display: flex; padding: .75rem .85rem; align-items: flex-end; background: linear-gradient(to top, rgb(0 0 0 / .94), rgb(0 0 0 / .78) 48%, transparent); }
.category-older-stories__overlay strong { display: -webkit-box; overflow: hidden; color: #fff; font-family: var(--font-arabic-heading); font-size: 1.42rem; font-weight: 800; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.category-older-stories__image:hover img, .category-older-stories__image:focus-visible img { transform: scale(1.025); }
.category-older-stories__row > div { display: flex; flex: 1; padding: .8rem .9rem .9rem; flex-direction: column; }
.category-older-stories p { display: -webkit-box; margin: 0 0 .45rem; overflow: hidden; color: var(--public-story-summary); font-size: 1.1rem; font-weight: 600; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.archive-sidebar { display: grid; gap: 1.4rem; }
.archive-sidebar-advertisement {
    display: grid;
    width: 100%;
}

.archive-sidebar-advertisement__creative {
    display: none;
    width: 100%;
}

.archive-sidebar-advertisement__creative--desktop {
    display: block;
}

.archive-sidebar-advertisement__creative img,
.archive-sidebar-advertisement__creative iframe {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
}

.archive-sidebar-advertisement__creative > a {
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

@media (hover: hover) and (pointer: fine) {
    .archive-sidebar-advertisement__creative > a {
        cursor: pointer;
        transition: box-shadow .25s ease;
    }

    .archive-sidebar-advertisement__creative > a img {
        transition: transform .25s ease;
    }

    .archive-sidebar-advertisement__creative > a:hover {
        box-shadow: 0 0 0 2px var(--archive-red), 0 5px 14px rgb(24 33 45 / .12);
    }

    .archive-sidebar-advertisement__creative > a:hover img {
        transform: scale(1.015);
    }
}

.archive-sidebar-advertisement__creative > a:focus-visible {
    outline: 2px solid var(--archive-red);
    outline-offset: 3px;
}
.archive-sidebar__section { padding: 1rem; border: 1px solid #e8e4de; border-radius: 11px; background: #fff; }
.archive-sidebar__section > h2 { font-size: 1.2rem; }
.archive-sidebar__stories { display: grid; }
.archive-sidebar__story { display: grid; min-width: 0; padding: .7rem 0; grid-template-columns: 5rem minmax(0, 1fr); gap: .7rem; border-bottom: 1px solid #eeeae4; direction: rtl; align-items: center; }
.archive-sidebar__story:last-child { padding-bottom: 0; border-bottom: 0; }
.archive-sidebar__image { display: block; aspect-ratio: 4 / 3; border-radius: 7px; background: #e4e0da; overflow: hidden; }
.archive-sidebar__image img { width: 100%; height: 100%; object-fit: cover; }
.archive-sidebar h3 { display: -webkit-box; overflow: hidden; font-size: 1.19rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.archive-sidebar time { margin-top: .22rem; font-size: .64rem; }
.archive-ad-hook[hidden] { display: none; }
.archive-ad-hook { min-height: 12rem; border: 1px dashed #d8d1c9; border-radius: 10px; }
.category-pagination { display: flex; margin-top: 2rem; padding-top: 1.1rem; align-items: center; justify-content: center; gap: .6rem; border-top: 1px solid #e9e5df; direction: rtl; }
.category-pagination a { display: inline-flex; min-width: 2.1rem; min-height: 2.1rem; padding-inline: .55rem; align-items: center; justify-content: center; border: 1px solid #dfd9d1; border-radius: 7px; color: #303949; font-size: .82rem; text-decoration: none; }
.category-pagination__pages { display: flex; gap: .3rem; direction: ltr; }
.category-pagination a:hover, .category-pagination a:focus-visible, .category-pagination a.is-active { border-color: var(--archive-red); background: var(--archive-red); color: #fff; }
.category-pagination a.is-disabled { opacity: .45; pointer-events: none; }
@media (max-width: 64rem) { .category-archive__layout { grid-template-columns: 1fr; } .category-more-stories__grid, .category-older-stories > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } .archive-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .archive-sidebar-advertisement__creative--desktop { display: none; } .archive-sidebar-advertisement__creative--tablet { display: block; } .archive-ad-hook { display: none; } .category-top-feature__overlay strong, .category-top-feature__support .category-top-feature__overlay strong, .category-more-stories h3, .category-older-stories__overlay strong { font-size: 1.625rem; font-weight: 700; } .category-more-stories p, .category-older-stories p { font-size: 1.25rem; font-weight: 600; line-height: 1.7; } .category-top-feature__meta, .category-more-stories time, .category-older-stories time, .archive-sidebar time { font-size: .79rem; } .category-more-stories > h2, .category-older-stories > h2, .archive-sidebar__section > h2 { font-size: 1.5rem; font-weight: 700; } .archive-sidebar h3 { font-size: 1.435rem; font-weight: 700; line-height: 1.5; } }
@media (max-width: 46rem) { .category-top-feature { grid-template-columns: 1fr; } .category-top-feature__lead { min-height: 20rem; } .category-top-feature__support { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; } .category-top-feature__support article { min-height: 12rem; } .category-more-stories__grid, .category-older-stories > div { grid-template-columns: 1fr; } .archive-sidebar { grid-template-columns: 1fr; } .archive-sidebar-advertisement__creative--tablet { display: none; } .archive-sidebar-advertisement__creative--mobile { display: block; } .category-top-feature__overlay strong, .category-top-feature__support .category-top-feature__overlay strong, .category-more-stories h3, .category-older-stories__overlay strong { font-size: 1.625rem; font-weight: 700; line-height: 1.48; } .category-more-stories p, .category-older-stories p { font-size: 1.25rem; font-weight: 600; line-height: 1.75; } .category-more-stories time, .category-older-stories time, .archive-sidebar time { font-size: .79rem; } .archive-sidebar__section > h2, .category-more-stories > h2, .category-older-stories > h2 { font-size: 1.5rem; font-weight: 700; } .archive-sidebar h3 { font-size: 1.435rem; font-weight: 700; line-height: 1.5; } }
@media (max-width: 32rem) { .category-archive__header h1 { font-size: 2rem; } .category-top-feature__support { grid-template-columns: 1fr; } .category-top-feature__support article { min-height: 11rem; } .category-older-stories p { -webkit-line-clamp: 3; } .category-pagination { flex-wrap: wrap; } }
@media (min-width: 46.01rem) and (max-width: 64rem) { .category-more-stories__grid > article:last-child:nth-child(odd) { grid-column: 1 / -1; } .archive-sidebar { grid-auto-rows: min-content; align-content: start; } .archive-sidebar__section { min-height: 0; height: auto; align-self: start; } }