/* Hodhod Header Styling */

.hodhod-header .news-ticker {
    background-color: var(--color-primary);
    color: white;
    padding: var(--space-xs) var(--space-sm);
}

.hodhod-header .news-ticker .badge {
    background-color: var(--color-accent);
    color: var(--color-dark);
    margin-inline-end: var(--space-xs);
}

.hodhod-header .topbar {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border);
}

.hodhod-header .logo img {
    height: 100px;
}

.hodhod-header .search-bar {
    background-color: var(--color-primary);
    color: white;
    padding: var(--space-sm) 0;
}

.hodhod-header .search-bar .btn {
    background-color: white;
    color: var(--color-primary);
}

.hodhod-header .social-icons i {
    color: white;
    font-size: 1.8rem;
}

/* News Ticker Container */
.hodhod-header .news-ticker {
    background-color: var(--color-primary);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-sm);
    white-space: nowrap;
}

/* News Badge */
.hodhod-header .news-ticker .badge {
    background-color: var(--color-accent);
    color: var(--color-dark);
    margin-inline-end: var(--space-xs);
    font-weight: bold;
    font-size: var(--font-sm);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
}

.hodhod-header .news-track {
    overflow: hidden;
    display: flex;
    align-items: center;
    direction: ltr;
}

.hodhod-header .news-list {
    display: flex;
    gap: var(--space-lg);
    will-change: transform;
}

.hodhod-header .news-item {
    flex-shrink: 0;
    white-space: nowrap;
    padding-inline: var(--space-sm);
    color: white;
    font-weight: 400;
}


/* =========================================================
   Navbar - professional refinement (Hodhod)
   ========================================================= */
.hodhod-header #mainNav {
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    max-width: 100%;
    min-width: 0;
}

.hodhod-header #mainNav .nav-item {
    flex: 0 0 auto;
}

.nav-link {
    position: relative;
    color: #2d2a5e;
    display: inline-flex;
    padding: 10px 12px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    background: transparent;
    height: auto;
    border: none;
    border-radius: 10px;
    font-family: "Al-Jazeera-Bold", sans-serif;
    font-size: clamp(13.5px, 0.9vw + 0.4rem, 15.5px);
    line-height: 1.1;
    letter-spacing: 0.1px;
    white-space: nowrap;
    transition: color .25s ease, background-color .25s ease, transform .2s ease;
}

/* Hide any empty dropdown menu (safety net) */
.nav-item.dropdown .dropdown-menu:empty {
    display: none !important;
}

/* The dynamic overflow dropdown */
.nav-item.nav-more[hidden] {
    display: none !important;
}

.nav-item.nav-more .dropdown-menu {
    min-width: 260px;
}

/* Nested sub-group inside the "More" dropdown */
.nav-more-sub {
    display: flex;
    flex-direction: column;
    padding: 2px 0 6px 18px;
    margin-top: 2px;
    border-right: 2px solid rgba(33, 29, 117, 0.15);
    margin-inline-end: 10px;
}

.nav-more-sub-item {
    font-size: 14px !important;
    padding: 6px 10px !important;
    color: #4a4776 !important;
    opacity: 0.92;
}

.nav-more-sub-item:hover {
    opacity: 1;
}

/* Animated underline accent */
.nav-link::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    width: calc(100% - 28px);
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 2px;
    transition: transform .3s ease;
}

.nav-item:hover > .nav-link,
.nav-item.active > .nav-link,
.nav-item:focus-within > .nav-link {
    color: var(--color-primary);
    background: rgba(33, 29, 117, 0.06);
}

.nav-item:hover > .nav-link::after,
.nav-item.active > .nav-link::after {
    transform: translateX(-50%) scaleX(1);
}

/* Hide Bootstrap's built-in caret */
.nav-item.dropdown .nav-link .dropdown-toggle::after,
.dropdown-toggle::after {
    display: none;
}

/* Dropdown arrow icon */
.dropdown-arrow {
    font-size: 0.72rem;
    color: var(--color-primary);
    transition: transform 0.3s ease, color 0.3s ease;
    opacity: 0.75;
}

.nav-item.dropdown:hover .dropdown-arrow,
.nav-item.dropdown:focus-within .dropdown-arrow {
    transform: rotate(180deg);
    color: var(--color-primary);
    opacity: 1;
}

/* Show submenu on hover (desktop) */
.nav-item.dropdown:hover > .dropdown-menu,
.nav-item.dropdown:focus-within > .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Submenu container - modern, branded */
.nav-item.dropdown .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    min-width: 240px;
    margin-top: 10px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid rgba(33, 29, 117, 0.08);
    border-radius: 14px;
    box-shadow:
        0 20px 40px -12px rgba(33, 29, 117, 0.22),
        0 8px 16px -8px rgba(33, 29, 117, 0.12);
    overflow: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

/* Decorative top accent bar on submenu */
.nav-item.dropdown .dropdown-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 0 0 4px 4px;
}

/* Little pointer arrow connecting submenu to parent */
.nav-item.dropdown .dropdown-menu::after {
    content: "";
    position: absolute;
    top: -6px;
    inset-inline-end: 24px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-top: 1px solid rgba(33, 29, 117, 0.08);
    border-inline-start: 1px solid rgba(33, 29, 117, 0.08);
    transform: rotate(45deg);
}

/* Submenu items - clean, no borders, pill hover */
.nav-item.dropdown .dropdown-menu .dropdown-item {
    position: relative;
    border: none;
    background: transparent;
    padding: 10px 14px;
    margin: 2px 0;
    color: #2d2a5e;
    font-size: 15px;
    font-family: "Al-Jazeera-Regular", sans-serif;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, padding-right .25s ease;
}

.nav-item.dropdown .dropdown-menu .dropdown-item::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0;
    transform: scale(0);
    transition: opacity .2s ease, transform .25s ease;
}

.nav-item.dropdown .dropdown-menu .dropdown-item:hover,
.nav-item.dropdown .dropdown-menu .dropdown-item:focus {
    background: rgba(33, 29, 117, 0.07);
    color: var(--color-primary);
    padding-inline-end: 18px;
}

.nav-item.dropdown .dropdown-menu .dropdown-item:hover::before,
.nav-item.dropdown .dropdown-menu .dropdown-item:focus::before {
    opacity: 1;
    transform: scale(1);
}

/* Keep dropdown accessible without click toggling */
.nav-item.dropdown > .nav-link {
    cursor: pointer;
}

.nav-item.dropdown > .nav-link[data-bs-toggle] {
    pointer-events: none;
}

.banner-bar img {
    width: 100%;
    object-fit: cover;

}


.card-title {
    font-family: "Al-Jazeera-Bold", sans-serif;
    margin-bottom: var(--space-xs);

}

.date,
.author {
    display: flex;
    gap: 6px;
    align-items: center;
    color: var(--color-primary);
    font-size: 12px;
    font-family: "Al-Jazeera-Bold";

}

.date img,
.author img {
    width: 16px !important;
    height: auto !important;
}

.category {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: var(--color-primary);
    background: var(--color-accent-light);
    width: max-content;
    padding: 4px 12px;
    text-align: center;
    font-size: 12px;
    font-family: "Al-Jazeera-Bold";
    border-radius: 999px;
    line-height: 150%;
    letter-spacing: 0.2px;
    transition: background-color 0.25s ease, color 0.25s ease;
    position: relative;
}

.category::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    transition: background-color 0.25s ease;
}

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

.category:hover {
    background: var(--color-primary);
    color: #fff;
}

.category:hover::before {
    background: var(--color-accent);
}

.category:hover a {
    color: #fff;
}

/* Category badge sitting on a dark overlay (white text, higher contrast) */
.main-card .category,
.featured-hero .category {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.main-card .category::before,
.featured-hero .category::before {
    background: var(--color-accent);
}

.main-card .category:hover,
.featured-hero .category:hover {
    background: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
}

.main-card .category:hover::before,
.featured-hero .category:hover::before {
    background: var(--color-primary);
}

.main-card .category a,
.featured-hero .category a {
    color: inherit;
}

/* Start Main Featured News */
.main-featured-news {
}

/* Start Main Featured News */
.main-featured-news-articles .featured-news-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-md);
}

/* Large item spans first column and both rows */
.featured-news-item-large {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

/* Small items placed in a 2×2 block on the right */
.featured-news-item-small:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.featured-news-item-small:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.featured-news-item-small:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.featured-news-item-small:nth-child(5) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}


.main-featured-news-home .featured-news-grid {
    display: grid;
    /* 3 columns: left big (2fr), right side split into two equal (1fr each) */
    grid-template-columns: 2fr 1fr 1fr;
    /* 2 rows: top and bottom */
    grid-template-rows: 1fr 1fr;
    /* place areas */
    grid-template-areas:
    "card-area-1 card-area-2 card-area-2"
    "card-area-1 card-area-3 card-area-4";
    gap: var(--space-md);
    min-height: clamp(420px, 55vh, 560px);
}

/* assign each card to its area */
.main-featured-news-home .featured-news-grid .card-area-1 {
    grid-area: card-area-1;
}

.main-featured-news-home .featured-news-grid .card-area-2 {
    grid-area: card-area-2;
}

.main-featured-news-home .featured-news-grid .card-area-3 {
    grid-area: card-area-3;
}

.main-featured-news-home .featured-news-grid .card-area-4 {
    grid-area: card-area-4;
}

.card-area-4 h3,
.card-area-3 h3 {
    font-size: var(--font-md);
    margin: var(--space-xs) 0;

}

/* ensure each .main-card fills its grid cell */
.featured-news-grid .main-card {
    width: 100%;
    height: 100%;
}


.featured-news-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.featured-news-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-news-item .featured-news-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

}


.featured-news-item .featured-news-image::after {
    content: "";
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.featured-news-item .featured-news-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-sm);
    color: white;
}


.featured-news-item .featured-news-content .card-title {
    font-size: var(--font-xl);
    margin: var(--space-xs) 0;


}

.featured-news-item-small .featured-news-content .card-title {
    font-size: var(--font-lg);

}

.card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;

}

.card-image .card-img-top {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.card .card-title {
    margin: var(--space-xs) 0;
}

.sidebar {
    border-radius: var(--radius-lg);
    border: 2px solid hsl(240, 100%, 90%);
    background: #F7F7FF;
    padding: 24px 16px;
}


/* Professional widget title styling */
.sidebar-widget .widget-title {
    font-family: "Al-Jazeera-Bold", sans-serif;
    /* bold font */
    font-size: clamp(1.125rem, 1.1vw + 0.95rem, 1.3125rem);
    /* large font size for widgets */
    color: var(--color-primary);
    /* primary brand color */
    position: relative;
    /* enable positioning of pseudo-element */
    padding-bottom: var(--space-sm);
    /* spacing below title */
    margin-bottom: var(--space-md);
    /* spacing below widget title */
    display: inline-block;
    /* shrink to text width */
    text-transform: uppercase;
    /* transform text to uppercase */
}

/* Underline pseudo-element */
.sidebar-widget .widget-title::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    width: 50px;
    /* initial underline width */
    height: 3px;
    /* underline thickness */
    background-color: var(--color-primary);
    /* accent color for underline */
    border-radius: var(--radius-sm);
    /* rounded edges for underline */
    transition: width 0.3s ease;
    /* smooth width transition */
}

/* Expand underline on hover */
.sidebar-widget .widget-title:hover::after {
    width: 100%;
    /* full width on hover */
}


/* Infographic slider images */
.infographic-slider .item img {
    width: 100%;
    aspect-ratio: 3/3.2;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-lg);
}

/* Dots styling */
.owl-theme .owl-dots {
    text-align: center;
    margin-top: var(--space-xs);
}

.owl-theme .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    background: var(--color-accent-light);
    display: inline-block;
    border-radius: 50%;
    margin: 0 var(--space-xs);
    transition: background 0.3s ease;
}

.owl-theme .owl-dots .owl-dot.active span {
    background: var(--color-primary);
    border-radius: 6px;
    width: 36px;
    height: 8px;
}

/* Most Read Widget Styles */
.sidebar-widget .most-read-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-sm);
}

/* Each most-read item */
.sidebar-widget .most-read-item {
    align-items: flex-start;
    gap: 10px;
}

/* Thumbnail image */
.sidebar-widget .most-read-item > a {
    width: 80px;
    height: 80px;

}

.small-news-card h6 a {
    font-size: 14px;
}

.homepage-featured .small-news-card .container-img {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
}

.sidebar-widget .most-read-item > a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-md);
}

/* Container for text */
.sidebar-widget .item-content {
    flex: 1;
}

/* Category badge */
.sidebar-widget .category {
    padding: 2px 8px;
}

/* Article title */
.sidebar-widget .item-title {
    font-family: "Al-Jazeera-Bold";

    font-size: var(--font-xs);
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.sidebar-widget .item-title:hover {
    color: var(--color-primary);
}

/* Meta info (author & time) */
.sidebar-widget .item-meta {
    font-size: var(--font-xs);
}

.sidebar-widget .item-meta i {
    font-size: 0.9em;
}

/* Caricature slider images */
.caricature-slider .item img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-lg);

}

/* Overlay caption */
.caricature-slider .overlay {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: var(--font-xs);
    text-align: center;
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

/* Hide pagination dots */
.caricature-slider .owl-dots {
    display: none;
}

/* Navigation arrows */
.caricature-slider .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.caricature-slider .owl-nav .owl-prev {
    left: 8px;
}

.caricature-slider .owl-nav .owl-next {
    right: 8px;
}

.caricature-slider .owl-nav button i {
    color: var(--color-primary);
    font-size: 0.9rem;
}

/* Newsletter widget container */
.sidebar-widget .newsletter-widget {
    background-color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid #e5e5ff;
}

/* Newsletter logo image */
.sidebar-widget .newsletter-widget .newsletter-logo {
    width: 60px;
    height: auto;
}

/* Description text */
.sidebar-widget .newsletter-widget .newsletter-text {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 150%;
}

/* Input group styling */
.sidebar-widget .newsletter-widget .input-group-text {
    background-color: var(--color-primary);
    color: #fff;
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.sidebar-widget .newsletter-widget .form-control {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    border-right: none;
    font-size: var(--font-sm);
}

/* Subscribe button */
.sidebar-widget .newsletter-widget .subscribe-btn {
    background-color: var(--color-accent);
    color: var(--color-dark);
    border: none;
    padding: var(--space-xs) 0;
    font-size: var(--font-md);
    border-radius: var(--radius-md);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar-widget .newsletter-widget .subscribe-btn:hover {
    background-color: var(--color-primary);
    color: #fff;
}

/* Important Categories Styles */
.sidebar-widget .important-categories {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-widget .category-item {
    margin-bottom: var(--space-sm);
    height: 80px;
}

.sidebar-widget .category-link {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.3s ease;
    height: 100%;
}

.sidebar-widget .category-link:hover {
    transform: translateY(-4px);
}

.sidebar-widget .category-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Link icon in top-left */
.sidebar-widget .category-icon {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    background: rgba(255, 255, 255, 0.8);
    padding: var(--space-xxs);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    color: var(--color-primary);
    transition: background 0.3s ease, color 0.3s ease;
}

/* Category label in bottom-right */
.sidebar-widget .category-label {
    position: absolute;
    bottom: var(--space-xs);
    right: var(--space-xs);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: var(--space-xxs) var(--space-sm);
    font-size: var(--font-xs);
    border-radius: var(--radius-lg);
    transition: background 0.3s ease;
}

/* Hover state */
.sidebar-widget .category-link:hover .category-icon {
    background: var(--color-primary);
    color: #fff;
}

.sidebar-widget .category-link:hover .category-label {
    background: var(--color-accent);
}

/* Reset list */
.sidebar-widget .read-also-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Align icon and text */
.sidebar-widget .read-also-item {
    align-items: flex-start;
}

/* Bullet icon styling */
.sidebar-widget .bullet-icon {
    font-size: var(--font-xs);
    color: var(--color-primary);
    margin-top: 0.4em;
}

/* Link styling */
.sidebar-widget .read-also-link {
    font-family: "Al-Jazeera-Bold";

    color: var(--text-primary);
    font-size: var(--font-sm);
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Hover state */
.sidebar-widget .read-also-link:hover {
    color: var(--color-primary);
}

/* ===== Pagination — Pro Look ===== */
.pagination-container {
    --size: 38px;
    --radius: 10px;
    --gap: .5rem;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--space-md) 0;
    margin-top: 40px;
    border-top: 1px solid var(--color-border);
}

.pagination-info {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* controls row */
.pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--gap);
    direction: ltr; /* الأرقام والأسهم من الشمال لليمين */
}

/* unify chip button styles (prev/next + numbers) */
.pagination-controls .page-btn,
.pagination-list .page-number {
    min-width: var(--size);
    height: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .75rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--surface, #fff);
    color: var(--text-primary);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .05s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
    outline: none;
}

.pagination-controls .page-btn:hover,
.pagination-list .page-number:hover {
    background: var(--color-surface, #f7f7fb);
    border-color: var(--color-border);
}

.pagination-controls .page-btn:active,
.pagination-list .page-number:active {
    transform: translateY(1px);
}

/* icons size */
.pagination-controls .page-btn i {
    font-size: .95rem;
}

/* active/current page */
.pagination-list .page-number.active,
.pagination-list .page-number[aria-current="page"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
    pointer-events: none;
}

/* disabled state for arrows */
.page-btn.is-disabled,
.page-btn.disabled,
.page-btn[aria-disabled="true"] {
    opacity: .45;
    filter: saturate(.3);
    pointer-events: none;
    cursor: default;
}

/* list reset */
.pagination-list {
    display: flex;
    gap: .35rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* small screens: وسط التحكم وخلي النص تحت */
@media (max-width: 576px) {
    .pagination-container {
        justify-content: center;
        gap: .75rem 1rem;
    }

    .pagination-info {
        order: 3;
        width: 100%;
        text-align: center;
    }
}

/* Dark mode tweaks */
[data-bs-theme="dark"] .pagination-controls .page-btn,
[data-bs-theme="dark"] .pagination-list .page-number {
    background: rgba(255, 255, 255, .04);
    border-color: #313244;
    color: #e5e7eb;
}

[data-bs-theme="dark"] .pagination-controls .page-btn:hover,
[data-bs-theme="dark"] .pagination-list .page-number:hover {
    background: rgba(255, 255, 255, .08);
}

[data-bs-theme="dark"] .pagination-list .page-number.active,
[data-bs-theme="dark"] .pagination-list .page-number[aria-current="page"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Optional: focus ring للوصولية */
.pagination-controls .page-btn:focus-visible,
.pagination-list .page-number:focus-visible {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
}

/* Reusable gradient overlay for image cards (replaces inline styles) */
.gradient-overlay {
    background: var(--overlay-dark);
}

/* Accessible focus ring for interactive elements (WCAG AA) */
.hodhod-header .nav-link:focus-visible,
.hodhod-header .buttons-group .btn-header:focus-visible,
.btn-view-all:focus-visible,
.site-footer a:focus-visible,
.small-news-card a:focus-visible,
.featured-hero a:focus-visible,
.main-card a:focus-visible,
.thumb:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Footer Base */
.site-footer {
    background-color: var(--color-primary-dark);
    color: #fff;
    padding: 1.5rem 0;
    margin-top: var(--container-padding-vertical);
}

/* Widget Title */
.footer-title {
    font-size: clamp(1.125rem, 1.1vw + 0.95rem, 1.3125rem);
    display: inline-block;
}

/* Separator under title */
.footer-separator {
    border: none;
    border-bottom: 1px dashed var(--color-border);
    margin-bottom: var(--space-sm);
}

/* About Text */
.footer-about-text {
    font-size: var(--font-sm);
    color: var(--color-accent-light);
    line-height: 1.6;
}

/* Categories List */
.footer-cats-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
}

.footer-cat {
    display: inline-block;
    padding: var(--space-xxs) var(--space-xs);
    font-size: var(--font-xs);
    color: var(--color-accent-light);
    border: 1px solid var(--color-accent-light);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}

.footer-cat:hover {
    background-color: #fff;
    color: var(--color-dark);
}

/* Social Links */
.footer-social-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.footer-social {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-sm);
    border: 1px solid var(--color-accent-light);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}

.icon-circle {
    background: hsla(206, 95%, 90%, 1);
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.footer-social:hover {
    background-color: #fff;
    color: var(--color-dark);
}

/* Bottom Separator */
.footer-bottom-separator {
    border: none;
    border-top: 1px solid var(--color-border);
}


/* End Main Featured News */


/* Article page wrapper */
.article-page {

    color: var(--text-primary);
}

/* Header */
.article-header {
    margin-bottom: var(--space-md);
}

.article-title {
    font-size: var(--font-xl);
    line-height: 1.3;
    margin-bottom: var(--space-sm);
}

/* Meta bar */
.article-meta .btn-icon {
    border-radius: 8px;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    background: rgba(235, 234, 255, 0.20);
    display: flex;
    width: 40px;
    height: 40px;
    padding: 4px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* ===== Share menu (slide from the right of the button) ===== */
.article-meta .share-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* the bubble of icons */
.article-meta .share-menu {
    position: absolute;
    top: 50%;
    /* logical start: on LTR it's left of the button; on RTL it's right of the button */
    inset-inline-end: 100%;
    transform: translateY(-50%) translateX(8px);
    display: flex;
    gap: 8px;
    background: rgba(235, 234, 255, 0.20);
    padding: 4px 10px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--color-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease, inset-inline-start .25s ease;
    z-index: 5;
}

/* when open: slide a bit further to the inline start (right in RTL) */
.article-meta .share-wrap.open .share-menu {
    inset-inline-end: calc(100% + 8px);
    transform: translateY(-50%) translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.article-meta .share-menu a,
.article-meta .share-menu button.copy-link {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    cursor: pointer;
    color: var(--color-primary);
}

.article-meta .share-menu a:hover,
.article-meta .share-menu button.copy-link:hover {
    background: rgba(235, 234, 255, 0.35);
}

/* Optional: icon sizing if you're using <i> from Font Awesome */
.article-meta .share-menu i {
    font-size: 14px;
    line-height: 1;
}


.article-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

/* Featured image */
.article-featured-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    height: 500px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

/* Body paragraphs */
.article-body p {
    font-size: var(--font-md);
    line-height: 1.8;
    margin-bottom: var(--space-md);
}

.article-body video {
    width: 100%;
}

/* Figure */
.article-figure {
    margin: 0;
    text-align: center;
}

.article-figure img {
    width: 100%;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.article-figure figcaption {
    margin-top: var(--space-xs);
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

/* Tags */
.article-tags {
    margin-top: var(--space-md);
    display: flex;
    align-items: center;
    gap: 10px;
}

.tags-title {
    color: var(--color-primary);
    font-size: 24px;
    border-right: 2px solid var(--color-primary);
    background: #EBEBFA;
    display: flex;
    padding: 6px 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: max-content;
}

.article-tags .tag {
    display: inline-block;

    padding: 4px 10px;
    font-size: var(--font-xs);
    background: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
    border-radius: 4px;
    border: 1px solid #C4C2F0;
    background: #EBEBFA;
}

.article-tags .tag:hover {
    background: var(--color-primary);
    color: #fff;
}

/* Related News Section */
.related-news {
    padding-top: 0;
}


/* Card base */
.related-card {
    border: none;
    border-radius: var(--radius-md);
    background: #FFF;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}


/* Content vs image */
.related-card .card-content {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.related-card .card-img {
    flex-shrink: 0;
    width: 200px;
    height: 160px;
    overflow: hidden;
}

.related-card .card-title {
    margin: 0;
}

/* Image styling */
.related-card .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Title link */
.related-card .card-title a {
    color: var(--text-primary);
    font-size: var(--font-md);
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-card .card-title a:hover {
    color: var(--color-primary);
}

/* Meta info */
.related-card .meta {
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

/* Read more link */
.related-card .read-more {
    font-size: var(--font-sm);
    color: var(--color-primary);
    text-decoration: none;
    align-self: flex-end;
}

.related-card .read-more i {
    margin-inline-start: var(--space-xxs);
}

.related-card .read-more:hover {
    text-decoration: underline;
}

/* --------------------------------- */
/* About Hero Section                */
/* --------------------------------- */
.about-hero {
    padding: var(--space-md) 0 60px;
    background: var(--color-surface);
}

.breadcrumb {
    justify-content: end;
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

.breadcrumb a {
    color: var(--color-primary);
    font-size: 16px;
    font-family: "Al-Jazeera-Bold";
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb span {
    color: var(--text-primary);
    font-size: 16px;
    font-family: "Al-Jazeera-Bold";

    margin: 0 var(--space-xs);
}

/* Features list (left column) */
.features-list .widget-title {
    display: flex;
    padding: 6px 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: max-content;
    border-right: 2px solid var(--color-accent);
    color: var(--color-accent);
    font-family: "Al-Jazeera-Bold";
    background: var(--color-accent-light-bg);
    font-size: var(--font-lg);
    margin-bottom: var(--space-md);
}

.features-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.features-list ul li {
    position: relative;
    padding-inline-start: var(--space-md);
    margin-bottom: var(--space-sm);
    font-size: var(--font-md);
    color: var(--text-primary);
}

.features-list ul li::before {
    content: "";
    position: absolute;
    margin-inline-start: -20px;
    top: 0.6em;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

/* About text (right column) */
.about-text {
    flex: 0 0 37%;
}

.title-section {
    font-size: var(--font-xxl);
    line-height: 150%;
    color: var(--text-primary);
}

.about-text .highlight {
    color: var(--color-accent);
}

.about-text p {
    font-size: var(--font-md);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Call-to-action button */
.about-text .btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.about-text .btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Circular image */
.about-hero .about-image {
    width: 430px;
}

.about-hero .about-image img {
    width: 100%;

    display: block;
}

/* Platform Intro Section */
.platform-intro {
    color: var(--text-primary);
}


/* Highlighted word */
.platform-text .highlight {
    color: var(--color-accent);
}

/* Image containers */
.platform-img {
    height: 525px;
    overflow: hidden;
    border-radius: 140px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


.platform-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: right;

}

.platform-img:nth-child(2) img {
    object-position: center;
}

.platform-img:nth-child(3) img {
    object-position: left;
}


/* Mission Section Hero */
.mission-hero {
    background-size: cover;
    background-position: center;
    /* Fallback background color while the image is loading */
    background-color: lightgray;

    /* Layer a semi-transparent black gradient over the image */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../img/mission-bg.jpg");

    /* Center the image, cover the container, and don’t repeat */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 450px;
    border-radius: 16px;
}

/* Overlay on hero */
.mission-hero .overlay {
    width: 100%;
    height: 100%;
}


.cards-mission {
    margin-top: -140px
}


.mission-hero p {
    font-size: var(--font-md);
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto;
}

/* Mission cards */
.mission-card {
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
}

.mission-card .icon-wrapper {
    display: flex;
    width: 64px;
    height: 64px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin: auto;
    border-radius: 32px;
    background: var(--color-accent-light);
    border-radius: 50%;
    font-size: 1.25rem;
}

/* Card titles */
.mission-card h5 {
    font-size: var(--font-lg);
    color: var(--text-primary);
}

.mission-card p {
    color: var(--text-secondary);
    line-height: 1.5;
}


/* Objectives Section */
.objectives-section {
    position: relative;
    padding: var(--space-xl) 0;
}

/* Subtle dotted background */
.objectives-section::before {
    content: "";
    position: absolute;
    top: 10%;
    right: 15%;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: 0.15;
    pointer-events: none;
}


/* Title and highlight */
.obj-title {
    font-size: var(--font-xxl);
    line-height: 1.3;
    color: var(--text-primary);
}

.obj-title .highlight {
    color: var(--color-accent);
}

/* Objectives list */
.objectives-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.objectives-list li {
    position: relative;
    padding-inline-start: var(--space-md);
    margin-bottom: var(--space-sm);
    font-size: var(--font-md);
    color: var(--text-primary);
}

.objectives-list li::before {
    content: "";
    position: absolute;
    margin-inline-start: -20px;
    top: 0.6em;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}


/* Main circle */
.objectives-img.main {
    width: 300px;
    height: 300px;
    top: 0;
    right: 0;
}

/* Smaller circles */
.objectives-img.small1 {
    width: 120px;
    height: 120px;
    top: 20%;
    right: 250px;
}

.objectives-img.small2 {
    width: 100px;
    height: 100px;
    bottom: 0;
    right: 180px;
}


/* Hero Contact Section */
.hero-contact {
    /* Fallback background color while the image is loading */
    background-color: lightgray;

    /* Layer a semi-transparent black gradient over the image */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../img/contact-bg.jpg");

    /* Center the image, cover the container, and don’t repeat */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 300px;
}

/* Dark overlay */
.hero-contact .overlay {
    background: rgba(0, 0, 0, 0.5);
}

/* Content centering */
.contact-content {
    height: 100%;
    padding: var(--space-lg);
}

/* Title styling */
.hero-contact .title-section {
    font-size: var(--font-xxl);
    color: #fff;
}

/* Lead paragraph */
.hero-contact .lead {
    font-size: var(--font-md);
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
}

/* Button */
.btn-secondary {
    background-color: var(--color-accent);
    color: var(--color-dark);
    border: none;
    transition: background 0.3s ease;
}

.btn-secondary:hover {
    background-color: #e0a70f;
    color: #fff;
}

/* Contact Section */
.contact-section {
    padding-top: 20px;
    padding-bottom: 60px;
    background: var(--color-surface);
}

/* Info cards */
.info-card {
    background: hsl(212, 100%, 97%);
    box-shadow: 0px 0px 4px 0px hsla(212, 100%, 50%, 0.25);
    border-radius: var(--radius-lg);
    transition: box-shadow 0.3s;
    min-height: 95px;
}


.icon-circle {
    background: var(--color-primary);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* Contact form wrapper */
.contact-form-wrapper {
    background: hsl(212, 100%, 97%);
    box-shadow: 0px 0px 4px 0px hsla(212, 100%, 50%, 0.25);
}

/* Form controls */
.contact-form .form-label {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    font-family: "Al-Jazeera-Bold";
}

.contact-form .form-control {
    border: 1px solid hsl(212, 100%, 90%);;
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-sm);
}

/* Submit button */
.btn-submit {
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-md);
    border: none;
    border-radius: var(--radius-md);
    transition: background 0.3s;
    width: 200px;
    height: 50px;
}

.btn-submit:hover {
    background: var(--color-primary-hover);
    color: #fff;
}


/* Homepage Featured Section */



.homepage-featured .featured-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    /* Aspect ratio 16:7 - wider than 16:9 but not as extreme as before */
    aspect-ratio: 16 / 7;
    width: 100%;
    max-height: 600px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

/* Image container for better control */
.homepage-featured .hero-img-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.homepage-featured .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.5s ease;
}

.homepage-featured .featured-hero:hover .hero-img {
    transform: scale(1.03);
}

.homepage-featured .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.homepage-featured .hero-content {
    max-width: 1320px;
    margin: auto;

    bottom: var(--space-md);
    left: var(--space-md);
    right: var(--space-md);
}


.homepage-featured .category {
    font-size: 14px;
}

.homepage-featured .hero-title {
    font-size: var(--font-xl);
    margin: 10px 0 var(--space-xs);
    color: #fff;
}

.homepage-featured .hero-desc {
    font-size: var(--font-md);
    margin-bottom: var(--space-sm);
    color: rgba(255, 255, 255, 0.9);
}

.homepage-featured .meta i {
    margin-inline-end: var(--space-xxs);
}

/* Featured Hero */
.featured-hero .object-fit-cover {
    object-fit: cover;
}

.featured-hero img {
    height: 100%;
}


.featured-hero .hero-desc {
    font-size: var(--font-md);
    color: rgba(255, 255, 255, 0.85);
}

.homepage-featured .small-news-card .container-img {
    flex: 0 0 120px;
    width: 120px;
    height: 100px;
}

.homepage-featured .small-news-card .card-img-top {
    width: 100%;
    height: 100%;
    border-radius: 12px;

    object-fit: cover;
}

.small-news-card h6 a {
    color: var(--text-primary);
    font-size: var(--font-sm);
    text-decoration: none;
    transition: color 0.3s;
}

.small-news-card h6 a:hover {
    color: var(--color-primary);
}


.small-news-card h6 a {
    color: var(--text-primary);
    font-size: var(--font-sm);
    text-decoration: none;
    transition: color 0.3s;
}

.small-news-card h6 a:hover {
    color: var(--color-primary);
}


/* Main featured card */
.featured-news {
    height: 400px;
}

.featured-news img.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-news .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.featured-news .hero-content {
    bottom: var(--space-md);
    left: var(--space-md);
    right: var(--space-md);
}


.hero-title {
    font-size: var(--font-xxl);
    line-height: 150%;
    margin: var(--space-sm) 0;
}

.hero-desc {
    font-size: var(--font-md);
    color: rgba(255, 255, 255, 0.9);
}

.video-section {
    margin: var(--container-padding-vertical) 0;

    padding: 60px 0;
}

.translated-articles .small-news-card .card-img {
    width: 100%;
    height: auto;
    border-radius: 0px 8px 8px 0px;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.situation-assessment-section .card,
.translated-articles .card {
    border: none;
    background: #FFF;
    box-shadow: none;
    transition: box-shadow 0.3s ease;
}

.situation-assessment-section .featured-news-item img,
.translated-articles .featured-news-item img {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.quotes-section .main-card img {
    height: auto;
    aspect-ratio: 4/3;
}

.video-section {
    background: #141146;
}


.nav-tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    width: max-content;
}

.tab-item {
    cursor: pointer;
    padding: var(--space-xs) var(--space-md);
    font-family: "Al-Jazeera-Bold";
    color: #B2B2B2;


    transition: background 0.3s;
}

.tab-item.active {
    border-right: 2px solid #C4C2F0;
    background: var(--color-accent-light);
    color: #0F0D35;


}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.thumb {
    height: 100%;
    width: 100%;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.play-icon-img {
    max-width: 80px;
}

.thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.8);
}

.thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-title {
    font-size: var(--font-xl);
    color: #fff;
}

.video-desc {
    font-size: var(--font-md);
    color: rgba(255, 255, 255, 0.9);
}

.video-thumb {
    height: auto;
    aspect-ratio: 9 / 12;
}


.video-thumb .thumb,
.video-thumb video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-section iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-main {
    height: 450px;
}
.video-main a{
    display: block;

}
    /* Analysis Section */
/* .analysis-section {
  padding: var(--space-xl) 0;
  background: var(--color-surface);
} */

/* Large featured cards (top row) */
.analysis-card-large {
    overflow: hidden;
    border-radius: var(--radius-lg);
    position: relative;
}

.analysis-card-large > img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.analysis-card-large .badge-large {
    position: absolute;
    top: var(--space-sm);
    margin-inline-start: var(--space-sm);
    padding: 4px 8px;
}

.analysis-card-large .analysis-content {
    padding: var(--space-md);
}

.analysis-card-large .card-title a {
    font-size: var(--font-lg);
    color: var(--text-primary);
    text-decoration: none;
}

.analysis-card-large .card-title a:hover {
    color: var(--color-primary);
}

.analysis-card-large .meta {
    margin-top: var(--space-xs);
}


/* Small lists (columns of three) */
/* .analysis-section .small-list {
  background: #fff;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
} */


.analysis-section .small-item {
    display: flex;
    align-items: start;
}

.analysis-section .small-title {
    margin: var(--space-xs) 0;
    font-size: var(--font-sm);

}

.analysis-section .small-item + .small-item {
    margin-top: var(--space-sm);
}

.analysis-section .small-img {
    width: 100%;
    max-width: 140px;
    height: 120px;

    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}


.analysis-section .small-title a:hover {
    color: var(--color-primary);
}

.analysis-section .small-item .meta {
    margin-top: var(--space-xxs);
    flex-wrap: wrap;
}


.situation-assessment-section .card-title {
    font-size: var(--font-lg);
}

/* arrows only */
.situation-carousel .owl-nav {

    position: relative;
    margin-top: 1rem;
    text-align: left;
}

.situation-carousel .owl-nav button {
    background: var(--color-accent) !important;
    color: #fff !important;
    border: none;
    width: 24px;
    height: 24px;
    padding: 4px;
    aspect-ratio: 1/1;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    transition: background 0.3s;
}

.situation-carousel .owl-nav button i {
    font-size: 12px;

}

.situation-carousel .owl-nav button:hover {
    background: var(--color-primary-hover);
    color: #fff;
}

/* hide default text */
.owl-prev .owl-prev-icon,
.owl-next .owl-next-icon {
    display: inline-block;

}

/*
  1) outer grid: two equal-width columns
     - left = .small-grid, right = .main-card
*/
.middle-east-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-items: stretch;
}

/*
  2) small-grid: 2×2 grid for the four mini-cards
*/
.small-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--space-md);
}

.middle-east-grid .featured-news-item {
    box-shadow: none;
    background: transparent;
}

.middle-east-grid .featured-news-item > img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
}

.small-grid .small-card .card-title {
    font-size: var(--font-md);
}

.homepage-featured .hero-title a:hover {
    color: #fff;
}


/* Author Detail Section */
.author-detail-section {
    padding: var(--space-xl) var(--container-padding-horizontal);
    background: var(--color-surface);
}

/* Breadcrumb */
.author-detail-section .breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.author-detail-section .breadcrumb a {
    color: var(--color-primary);
    font-family: "Al-Jazeera-Bold";
    text-decoration: none;
    transition: color 0.3s ease;
}

.author-detail-section .breadcrumb a:hover {
    color: var(--color-primary-hover);
}

.author-detail-section .breadcrumb span {
    color: var(--text-primary);
    font-family: "Al-Jazeera-Bold";
}

/* Author Info */
.author-info .author-role {
    /* English comment: role label styling */
    display: inline-block;
    color: var(--color-accent);
    font-size: var(--font-lg);
    font-family: "Al-Jazeera-Bold";
    margin-bottom: var(--space-sm);
}

.author-info .author-name {
    /* English comment: author name */
    font-size: var(--font-xxl);
    color: var(--text-primary);
    line-height: 150%;
    margin-bottom: var(--space-md);
}

.author-info .author-bio {
    /* English comment: biography text */
    font-size: var(--font-md);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

/* Social Icons */
.author-social a {
    /* English comment: social icon link */
    color: var(--color-primary-hover);
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.author-social a:hover {
    color: var(--color-accent);
}

/* Author Photo */
.author-photo-wrapper {
    /* English comment: photo container centering */
    display: flex;
    justify-content: center;
}

.author-photo {
    /* English comment: circular author image */
    border-radius: 50%;
    border: 4px solid var(--color-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Search Form */
.author-search input.form-control {
    /* English comment: search input styling */
    width: 300px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-sm);
    height: 40px;
    margin-left: -5px;
}

.author-search button.btn {
    /* English comment: search button styling */
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-lg);
    font-size: var(--font-md);
    height: 40px;

}

.author-search button.btn:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}


/* Article Cards */
.author-detail-section .card {
    /* English comment: uniform card styling */
    border: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.author-detail-section .card:hover {
    transform: translateY(-4px);
}

.author-detail-section .card-img-top {
    height: auto;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.author-detail-section .card-body {
    padding: var(--space-md);
}


.author-detail-section .card-title a {
    /* English comment: article title link */
    color: var(--text-primary);
    font-size: var(--font-md);
    text-decoration: none;
}

.author-detail-section .card-title a:hover {
    color: var(--color-primary);
}

.author-detail-section .meta {
    /* English comment: date and author meta */
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

.author-detail-section .meta img {
    vertical-align: middle;
}

/* =======================
       Search Filters Row
       ======================= */


/* ===== Filter Bar ===== */
.articles-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    background: #EBF6FF;
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

.articles-filter .form-control,
.articles-filter .btn {
    height: calc(var(--space-lg) + var(--space-xs));
    font-size: var(--font-sm);
}

.articles-filter .input-group-text {
    background: #fff;
    border: 1px solid var(--color-border);
}

.articles-filter .form-select {
    background: #fff;
    border: 1px solid var(--color-border);
}

.articles-filter .date-input {
    position: relative;
}

.articles-filter .date-input i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: var(--space-xs);
    color: var(--text-secondary);
}

.articles-filter .date-input input {
    padding-inline-start: 2.5em;
}

input[type="date"] {
    direction: rtl; /* النص والـ placeholder يمين */
    text-align: right; /* التاريخ لما يتكتب يظهر يمين */
}

/* الحاوية */
.date-field {
    position: relative;
}

/* اتجاه ومظهر الحقل */
.date-field input[type="date"] {
    direction: rtl;
    text-align: right;
    padding-right: 1rem; /* مسافة للنص */
}

/* مكان الأيقونة بتاعة Bootstrap input-group على اليمين */
.date-field .input-group-text {
    z-index: 2;
}

/* فوق الخلفية */

.date-field .fake-placeholder {
    position: absolute;
    right: 3rem; /* عدّلها حسب عرض الأيقونة والمسافات */
    top: 50%;
    transform: translateY(-50%);
    color: #9aa3af; /* رمادي هادي */
    pointer-events: none; /* ما تستقبلش ضغطات */
    white-space: nowrap;
    font-size: 0.95rem;
}

/* لما الحقل ياخد فوكس أو يبقى فيه قيمة، اخفي الـ placeholder */
.date-field:focus-within .fake-placeholder {
    opacity: 0;
    visibility: hidden;
}

/* لو عايزها تبقى سريعة وناعمة */
.date-field .fake-placeholder {
    transition: opacity .12s ease, visibility .12s ease;
}

/* (اختياري) لو هتكتفي بأيقونتك فقط وعايز تمنع أيقونة المتصفح */
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    display: none;
}

/* الموبايل فقط: أظهر الـ fake placeholder */
@media (max-width: 991.98px) {
    .date-field .fake-placeholder {
        display: inline-block;
    }
}

/* الديسكتوب: أخفِ الـ fake placeholder نهائيًا */
@media (min-width: 992px) {
    .date-field .fake-placeholder {
        display: none !important;
    }
}

.articles-filter .btn-apply {
    background: var(--color-primary);
    color: #fff;
    border: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    display: none;
}

input[type="date"]::-ms-clear,
input[type="date"]::-ms-expand {
    display: none;
}

.articles-filter .btn-reset {
    border: 1px solid var(--color-border);
    color: var(--text-secondary);
}


.articles-filter .filter-control {
    flex: 1 1 180px;
    max-width: 290px;
}

.articles-filter .filter-control .input-group-text {
    background: #fff;
    border: 1px solid var(--color-border);
    color: var(--text-secondary);
}

.articles-filter .filter-control .form-select,
.articles-filter .filter-control .form-control {
    border: 1px solid var(--color-border);
}

.articles-filter .btn-apply,
.articles-filter .btn-reset {
    height: calc(var(--space-lg) + var(--space-xs));
    font-size: var(--font-sm);
    padding: 0 var(--space-md);
}

.articles-filter .btn-apply {
    background: var(--color-primary);
    border: none;
    color: #fff;
}

.articles-filter .btn-reset {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}


/* =======================
       Results Grid
       ======================= */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-md);
}

.results-grid .card > img {
    height: 220px;
    object-fit: cover;
}

.main-articles .card-title {
    font-size: var(--font-md);
}


.main-articles .card {
    height: 100%;
}

.tags {
    margin-top: 60px;
}

.container-img {
    width: 100%;
    height: 220px;
}

.translated-articles .container-img {
    width: 220px;
    flex: 0 0 220px;
    height: auto;

}

.translated-articles .container-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 1023.98px) {
    .middle-east-grid {
        grid-template-columns: 1fr;
    }

    .translated-articles .small-news-list {
        margin-top: 40px;
    }

    .main-featured-news-home .featured-news-grid {
        display: grid;
        grid-template-columns:  1fr; /* عمودين: الكبير + عمود جانبي */
        grid-template-rows: auto auto auto; /* 3 صفوف للعمود الجانبي */
        grid-template-areas:
      "card-area-1 card-area-2"
      "card-area-1 card-area-3"
      "card-area-1 card-area-4";
        gap: var(--space-md) 0;
        height: auto; /* إلغاء 550px على التابلت */
        min-height: 0;
    }

    /* منع تمدد غير مرغوب فيه لأي عنصر داخل الشبكة */
    .main-featured-news-home .featured-news-grid > * {
        min-height: 0;
    }

    /* نسب أبعاد لطيفة (اختياري) لتحسين القصّ للصور */
    .main-featured-news-home .featured-news-grid .card-area-1 {
        aspect-ratio: 16 / 9;
    }

    .main-featured-news-home .featured-news-grid .card-area-2,
    .main-featured-news-home .featured-news-grid .card-area-3,
    .main-featured-news-home .featured-news-grid .card-area-4 {
        aspect-ratio: 16 / 10;
    }

    .col-lg-4 .analysis-container {
        margin-top: 40px;
    }

    .col-lg-4:first-child .analysis-container {
        margin: 0;
    }

    .sidebar-widget .most-read-item {
        flex-flow: column;
    }

    .sidebar-widget .most-read-item > a {
        width: 100%;
        height: 90px;
        flex: 0 0 60px;

    }

    .sidebar-widget .most-read-item .category {
        display: none;
    }

    .sidebar-widget .widget-title {
        font-size: 20px;
    }

    .sidebar-widget .newsletter-widget {
        padding: 10px;
    }

    .objectives-img.main {
        width: 200px;
        height: 200px;
        top: 0;
        right: 0;
    }

    .objectives-img-group {
        margin-top: 40px;
    }

    .objectives-img.small1 {
        width: 80px;
        height: 80px;
        top: 15%;
        right: 160px;
    }

    .objectives-img.small2 {
        width: 60px;
        height: 60px;
        bottom: 0;
        right: 120px;
    }


    /* Ensure navbar toggler stays at the edge */
    .hodhod-header .navbar-toggler {
        font-size: 1.5rem;
        border: none;
        background: transparent;
        padding: 0.25rem;
        position: relative;
        z-index: 1200;
        color: white;


    }

    /* Position menu under toggle properly */
    .hodhod-header #mainNav {
        position: absolute;
        top: 100%;
        right: var(--space-sm);
        left: var(--space-sm);
        z-index: 10;
        background-color: white;
        padding: var(--space-sm);
        border-radius: var(--radius-md);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        margin-top: var(--space-xs);
        z-index: 1000;
        gap: 0 !important;
    }

    /* Force column layout */
    .hodhod-header #mainNav .nav-item {
        width: 100%;
    }

    .hodhod-header #mainNav .nav-link {
        display: block;
        width: 100%;
        text-align: start;
        padding: 0.75rem 1rem;
        font-size: var(--font-md);
        color: var(--text-primary);
        border-bottom: 1px solid var(--color-border);
        background-color: transparent;
        transition: background 0.3s ease;
        height: unset;
        border: none;
    }

    .hodhod-header #mainNav .nav-link:hover {
        background-color: var(--color-surface);
        color: var(--color-primary);
    }

    .hodhod-header #mainNav .nav-item:last-child .nav-link {
        border-bottom: none;
    }

    .buttons-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .hodhod-header .buttons-group .btn-header {
        display: flex;
        width: 44px;
        height: 44px;
        padding: 10px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 8px;
        border: 1px solid var(--color-primary);
        background: var(--color-accent-light);
        color: var(--color-primary);

        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .hodhod-header .navbar-toggler:hover {
        background-color: var(--color-primary);
        color: white;
    }

    /* Make sure it’s aligned inside container */
    .hodhod-header .topbar {
        position: relative;
    }

}



.sidebar .author-intro {
    --author-bg: #fff;
    --author-ring: var(--color-primary, #5d3ebc);
    --author-text: var(--bs-body-color, #222);
    --author-muted: #6c757d;

    position: relative;
    padding: 18px 16px;
    border-bottom: 1px solid rgba(93, 62, 188, .15);
    overflow: hidden;
}


.sidebar .author-intro .author-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-inline: auto;
    position: relative;
    box-shadow: 0 0 0 4px var(--author-bg),
    0 0 0 6px var(--author-ring),
    0 10px 20px rgba(0, 0, 0, .10);
    overflow: hidden;
}

.sidebar .author-intro .author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sidebar .author-intro .author-name {
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--author-text);
    margin: 0.85rem 0 0.25rem;
}

.sidebar .author-intro .author-link {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease, text-shadow .2s ease;
}

.sidebar .author-intro .author-link:hover {
    color: var(--author-ring);
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.sidebar .author-intro .author-role {
    display: inline-block;
    font-size: .825rem;
    color: var(--author-ring);
    background: rgba(93, 62, 188, .08);
    padding: .25rem .6rem;
    border: 1px solid rgba(93, 62, 188, .18);
    border-radius: 999px;
}

.sidebar .author-intro .btn-author {
    --btn-bg: var(--author-ring);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem .85rem;
    border-radius: 10px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 0;
    font-size: .9rem;
    box-shadow: 0 6px 16px rgba(93, 62, 188, .25);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.sidebar .author-intro .btn-author:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(93, 62, 188, .30);
}

@media (max-width: 991.98px) {
    .sidebar .author-intro {
        padding: 16px 14px;
    }

    .sidebar .author-intro .author-avatar {
        width: 108px;
        height: 108px;
    }
}

/* Analysis section: bound the main overlay card so it never grows unbounded */
.analysis-container .main-card {
    aspect-ratio: 16 / 10;
    max-height: 360px;
    height: auto;
}

.analysis-container .main-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-section .section-title {
    color: #fff
}

.video-section .section-title::after {
    background-color: #fff;
}

.video-section .section-title::before {
    background-color: #fff;
}

.video-section .header-divider {
    border-color: #fff;
}

.video-section .btn-view-all {
    background-color: #fff;
    border-color: #fff;
    color: var(--color-primary);
}

.video-section .btn-view-all:hover {
    background-color: var(--color-primary);
    border-color: #fff;
    color: #fff;
}

/* خلّي الأيقونة قابلة للتحويل */
.hodhod-header #mainNav .dropdown-toggle .dropdown-arrow {
    display: inline-block; /* مهم عشان الـ transform يشتغل */
    transition: transform .2s ease;
    transform: rotate(0deg);
}

/* لما القائمة مفتوحة */
.hodhod-header #mainNav .dropdown.open > .dropdown-toggle .dropdown-arrow {
    transform: rotate(180deg);
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .featured-news-item-large {
        grid-column: span 1;
        grid-row: span 1;
    }

    .article-meta .share-menu {
        background: #fff;
    }

    .related-card .card-content {
        padding: 10px;
    }

    .pagination-container {
        margin: 0;
        align-items: center;
        justify-content: center;

        gap: 20px;
    }

    .footer-social-list {
        grid-template-columns: 1fr;
    }

    .main-articles .card {
        margin-bottom: 20px;
    }

    .mission-hero .title-section {
        font-size: var(--font-xl);
    }

    .mission-hero p {
        font-size: var(--font-sm);
    }

    .platform-intro .row {
        flex-direction: column;
        text-align: center;
    }

    .platform-text {
        margin-bottom: 40px;
    }

    .platform-img {
        margin-bottom: var(--space-md);
    }

    .about-hero .container-fluid > .d-flex {
        flex-direction: column;
        align-items: center;
    }

    .about-hero .about-image {
        width: 100%;
    }

    .search-bar {
        display: none;
    }


    .search-bar .justify-content-between {
        justify-content: center !important;
    }

    .homepage-featured .col-md-3 .small-news-card {
        margin-bottom: 20px;
        height: 100px !important;
    }

    .homepage-featured .col-md-3:last-child .small-news-card {
        margin-bottom: 0;
    }

    .translated-articles .small-news-list {
        margin-top: 40px;
    }

    .translated-articles .small-news-card .container-img {
        flex: 0 0 110px;
        width: 110px;
        height: auto;
    }

    .translated-articles .small-news-card .container-img img {
        aspect-ratio: 4 / 3;
    }

    .nav-tabs {
        width: 100%;
    }

    .video-main {
        height: 250px;
    }

    .video-main img{
        width: 100%;
    height: 100%;
    object-fit: cover;
         }
    .article-featured-img img
    {
        height: 300px;
    }




    .section-title {
        font-size: var(--font-lg);
    }

    .col-lg-4:first-child .analysis-container {
        margin: 0;
    }

    .col-md-4 .analysis-container {
        margin-top: 40px;
    }

    .analysis-section .small-img {
        width: 100%;
        max-width: 80px;
        height: 80px;
    }

    .analysis-section .small-title {
        margin: 0;
        font-size: 14px;
    }

    .analysis-section .small-item .meta {
        display: none !important;
    }

    .analysis-section .small-item .category {
        display: none;
    }

    .main-featured-news,
    .situation-assessment-section {
        padding-top: 0;
    }

    .middle-east-grid {
        grid-template-columns: 1fr;
    }

    .small-grid {
        grid-template-columns: 1fr;

    }

    .main-featured-news-home .featured-news-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
      "card-area-1"
      "card-area-2"
      "card-area-3"
      "card-area-4";
        height: auto;
    }

    .hodhod-header .logo img {
        height: 70px;
    }

    .author-search input.form-control {
        width: 100%;
    }

    .author-detail-section {
        padding: var(--space-lg) 0;
    }

    .articles-filter .filter-control {
        width: 100%;
        max-width: 100%;
        flex: unset;
    }

    .card-title {
        font-size: var(--font-md);
        margin: var(--space-xs) 0;
    }

    .tags {
        margin-bottom: 40px;
    }

    .related-card .card-img {
        width: 140px;
        height: 140px;
    }

    .related-card .category {
        display: none;
    }

    .related-card .card-title {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 8px;
    }

    .related-card .card-title a {
        font-size: inherit;
    }

    .main-featured-news-articles .featured-news-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .main-featured-news-articles .featured-news-item-large,
    .main-featured-news-articles .featured-news-item-small {
        grid-column: auto !important;
        grid-row: auto !important;
        height: 300px;
    }

    .about-hero .d-flex {
        flex-direction: column;
    }

    .nav-item.dropdown .dropdown-menu {
        position: static !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        border: none;
        box-shadow: none;
        background: transparent;
        margin: 0;
        padding: 4px 0 10px 0;
    }

    .nav-item.dropdown .dropdown-menu::before,
    .nav-item.dropdown .dropdown-menu::after {
        display: none;
    }

    .nav-item.dropdown .dropdown-menu .dropdown-item {
        background: transparent;
        padding-inline-start: 28px;
        font-size: 14.5px;
    }

    .nav-item.dropdown .dropdown-menu .dropdown-item:last-child {
        border-bottom: none;
    }

    /* Re-enable click on parent dropdown link on mobile */
    .nav-item.dropdown > .nav-link[data-bs-toggle] {
        pointer-events: auto;
    }
    .homepage-featured .featured-hero{
        aspect-ratio: 16 / 9;
        max-height: 350px;
        border-radius: 12px;
    }
    .homepage-featured .featured-hero-wrapper {
        padding: 0 10px;
    }
    .sidebar-widget .most-read-item > a{
        height: 160px;
    }
}
.article-body p ,.article-body span{
    font-family: "Al-Jazeera-Regular", sans-serif !important;
}

/* Blockquote (CKEditor quote) styling inside article body */
.article-body blockquote {
    position: relative;
    display: block;
    margin: 32px 0;
    padding: 28px 64px 28px 32px;
    background: linear-gradient(135deg, #f4f3fb 0%, #eceafb 100%);
    border-right: 6px solid var(--color-primary);
    border-radius: 12px;
    color: #1a1a3a;
    font-size: 20px;
    line-height: 1.9;
    font-style: italic;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(33, 29, 117, 0.08);
    quotes: "\201C" "\201D";
}

.article-body blockquote:before {
    content: "\201D";
    position: absolute;
    top: -10px;
    inset-inline-end: 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 90px;
    line-height: 1;
    color: var(--color-primary);
    opacity: 0.22;
    pointer-events: none;
}

.article-body blockquote p,
.article-body blockquote span {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-style: inherit;
    font-weight: inherit;
}

.article-body blockquote p + p {
    margin-top: 12px;
}

/* Keep social embeds (twitter/instagram) untouched */
.article-body blockquote.twitter-tweet,
.article-body blockquote.instagram-media {
    all: revert;
}

/* =========================================================
   Phase 2: Small-screen polish (<=575.98px)
   ========================================================= */
@media (max-width: 575.98px) {
    /* Homepage: sub-news cards — widen thumbnail so text has room to breathe */
    .homepage-featured .small-news-card .container-img {
        flex: 0 0 96px;
        width: 96px;
        height: 96px;
    }

    .homepage-featured .small-news-card h6 {
        font-size: var(--font-md);
    }

    /* Translated articles list: tighter thumbnail on phones */
    .translated-articles .small-news-card .container-img {
        flex: 0 0 96px;
        width: 96px;
        height: 96px;
    }

    .translated-articles .small-news-card .container-img img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    /* Hero height floor on the smallest screens so images never collapse */
    .main-featured-news-home .featured-news-grid {
        min-height: 0;
    }
}

/* Tablet polish (576px - 991.98px): translated-articles thumbnail mid-size */
@media (min-width: 576px) and (max-width: 991.98px) {
    .translated-articles .container-img {
        width: 160px;
        flex: 0 0 160px;
    }
}

/* Reserve space on featured grid images to prevent CLS when height is flexible */
.main-featured-news-home .featured-news-grid .main-card {
    min-height: 200px;
}

@media (max-width: 767.98px) {
    .article-body blockquote {
        padding: 22px 48px 22px 20px;
        font-size: 17px;
        margin: 24px 0;
    }
    .article-body blockquote:before {
        font-size: 70px;
        right: 12px;
    }
}

/* =========================================================
   Phase 5: Visual polish — hover states, transitions, rhythm
   ========================================================= */

/* Consistent vertical rhythm between homepage sections */
.homepage-featured.section,
.translated-articles.section,
.video-section.section,
.analysis-section.section,
.situation-assessment-section.section,
.quotes-section.section,
.middle-east-section.section,
.main-featured-news-home.section {
    padding-block: clamp(32px, 5vw, 72px);
}

/* ---- Default card variant (image on top + body below) ---- */
.featured-news-item {
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
    will-change: transform;
}

.featured-news-item a {
    display: block;
    overflow: hidden;
    position: relative;
}

.featured-news-item .card-img-top {
    transition: transform 0.5s ease;
}


.featured-news-item:hover .card-img-top {
    transform: scale(1.05);
}

/* Card title hover color on all cards */
.featured-news-item .card-title a,
.middle-east-grid .card-title a,
.situation-assessment-section .card-title a,
.translated-articles .card-title a {
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.25s ease;
    display: inline-block;
}

.featured-news-item:hover .card-title a,
.featured-news-item .card-title a:hover {
    color: var(--color-primary);
}

/* Clamp long titles so cards keep even heights */
.featured-news-item .card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* ---- Overlay card variant (dark gradient over image) ---- */
.main-card {
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
    will-change: transform;
}

.main-card > img {
    transition: transform 0.5s ease;
}

.main-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.main-card:hover > img {
    transform: scale(1.05);
}

/* Deepen overlay on hover for stronger text legibility */
.main-card .gradient-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0) 100%
    );
    transition: background 0.35s ease;
}

.main-card:hover .gradient-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.55) 50%,
        rgba(0, 0, 0, 0.08) 100%
    );
}

.main-card .card-title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.25s ease;
}

.main-card .card-title a:hover {
    color: var(--color-accent);
}

.main-card .card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* ---- Small news cards (horizontal thumbnail + text) ---- */
.small-news-card {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 8px;
    transition: background-color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.25s ease;
}

.small-news-card:hover {
    background: var(--color-surface);
    box-shadow: 0 6px 18px rgba(33, 29, 117, 0.08);
    transform: translateX(-2px);
}

.small-news-card .container-img {
    overflow: hidden;
    border-radius: var(--radius-md);
}

.small-news-card .container-img img,
.small-news-card .card-img-top,
.small-news-card .card-img {
    transition: transform 0.4s ease;
}

.small-news-card:hover .container-img img,
.small-news-card:hover .card-img-top,
.small-news-card:hover .card-img {
    transform: scale(1.08);
}

.small-news-card h4 a,
.small-news-card h6 a {
    text-decoration: none;
    color: var(--text-primary);
    transition: color 0.25s ease;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.small-news-card:hover h4 a,
.small-news-card:hover h6 a {
    color: var(--color-primary);
}

/* ---- Hero polish: deeper gradient + bolder title hover ---- */
.homepage-featured .featured-hero {
    box-shadow: 0 12px 36px rgba(33, 29, 117, 0.18);
}

.homepage-featured .overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0.05) 100%
    );
}

.homepage-featured .hero-title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.25s ease;
    display: inline-block;
}

.homepage-featured .hero-title a:hover {
    color: var(--color-accent);
}

.homepage-featured .hero-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* ---- Post meta icon alignment polish ---- */
.post-meta a,
.post-meta .date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

.post-meta a:hover {
    color: var(--color-primary);
}

.post-meta.text-white a:hover {
    color: var(--color-accent);
}

.post-meta img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ---- Section-header layout: wrap on small screens ---- */
@media (max-width: 575.98px) {
    .section-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .section-header .section-title {
        white-space: normal;
    }

    .section-header .btn-view-all {
        margin-inline-start: auto;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .featured-news-item,
    .featured-news-item .card-img-top,
    .main-card,
    .main-card > img,
    .main-card .gradient-overlay,
    .small-news-card,
    .small-news-card .container-img img,
    .btn-view-all,
    .btn-view-all i,
    .category,
    .homepage-featured .hero-img,
    .post-meta a {
        transition: none !important;
    }

    .featured-news-item:hover,
    .main-card:hover,
    .small-news-card:hover,
    .btn-view-all:hover {
        transform: none !important;
    }

    .featured-news-item:hover .card-img-top,
    .main-card:hover > img,
    .small-news-card:hover .container-img img,
    .homepage-featured .featured-hero:hover .hero-img {
        transform: none !important;
    }
}


/* =========================================================
   Phase 6: Post-meta, hover polish, footer redesign
   ========================================================= */

/* ---- Post-meta: author + date visual refinement ---- */
.post-meta {
    gap: 12px !important;
    font-size: var(--font-xs);
    color: var(--color-muted);
    flex-wrap: wrap;
}

.post-meta.text-white {
    color: rgba(255, 255, 255, 0.85);
}

/* Author link */
.post-meta .author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid transparent;
    color: var(--color-primary);
    font-family: "Al-Jazeera-Bold", sans-serif;
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                transform 0.2s ease;
    text-decoration: none;
}

.post-meta .author:hover {
    background: var(--color-accent-light);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

/* Light variant (on dark cards): ghost chip */
.post-meta.text-white .author {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.post-meta.text-white .author:hover {
    background: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
}

/* Date */
.post-meta .date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-muted);
    font-family: "Al-Jazeera-Regular", sans-serif;
    font-size: var(--font-xs);
    position: relative;
}

.post-meta.text-white .date {
    color: rgba(255, 255, 255, 0.75);
}

/* Visual separator between author and date (only when both exist) */
.post-meta .author + .date::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    margin-inline-end: 4px;
}

/* Unified icon size inside meta */
.post-meta .author img,
.post-meta .date img {
    width: 13px !important;
    height: 13px !important ;
    flex-shrink: 0;
    opacity: 0.85;
}

.post-meta.text-white .author img,
.post-meta.text-white .date img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* ---- Video thumbnails: hover polish ---- */
.video-main,
.video-thumb {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-main img,
.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.3s ease;
}

.video-main:hover,
.video-thumb:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}

.video-main:hover img,
.video-thumb:hover img {
    transform: scale(1.06);
    filter: brightness(0.75);
}

/* Play icon scale + glow on hover */
.video-main .play-icon,
.video-thumb .play-icon {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    pointer-events: none;
}

.video-main:hover .play-icon,
.video-thumb:hover .play-icon {
    transform: translate(50%, -50%) scale(1.12);
    background: var(--color-accent);
    box-shadow: 0 6px 22px rgba(255, 184, 36, 0.55);
}

.video-thumb .play-icon {
    width: 44px;
    height: 44px;
}

.play-icon-img {
    width: 18px;
    height: 18px;
}

/* ---- Tab items: hover + active underline ---- */
.nav-tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid var(--color-border);
}

.tab-item {
    position: relative;
    padding: 10px 18px;
    font-family: "Al-Jazeera-Bold", sans-serif;
    font-size: var(--font-md);
    color: var(--color-muted);
    cursor: pointer;
    transition: color 0.25s ease;
    margin-bottom: -2px;
}

.tab-item::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
    border-radius: 2px 2px 0 0;
}

.tab-item:hover {
    color: var(--color-primary);
}

.tab-item.active {
    color: var(--color-primary);
}

.tab-item:hover::after,
.tab-item.active::after {
    transform: scaleX(1);
}

/* ---- Header buttons (search + mobile toggle) ---- */
.hodhod-header .btn-header,
.hodhod-header .search-btn {
    transition: background-color 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease,
                transform 0.25s ease,
                box-shadow 0.25s ease;
}

.hodhod-header .btn-header:hover,
.hodhod-header .search-btn:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 29, 117, 0.25);
}

/* ---- Owl carousel navigation button hover ---- */
.owl-theme .owl-nav button {
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.owl-theme .owl-nav button:hover {
    background: var(--color-accent) !important;
    transform: scale(1.08);
}

.owl-theme .owl-dots .owl-dot span {
    transition: background-color 0.25s ease, width 0.25s ease;
    cursor: pointer;
}

.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--color-primary);
    opacity: 0.6;
}

/* ---- Generic button polish (btn-header, btn-primary, etc) ---- */
.btn,
button {
    transition: background-color 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease,
                transform 0.2s ease,
                box-shadow 0.25s ease;
}

/* =========================================================
   Phase 8: Footer redesign v2 — clean & professional
   ========================================================= */

.site-footer {
    background:
        radial-gradient(ellipse at top left, rgba(33, 29, 117, 0.55) 0%, transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(255, 184, 36, 0.06) 0%, transparent 60%),
        var(--color-primary-dark);
    color: rgba(255, 255, 255, 0.85);
    padding: 64px 0 0;
    margin-top: clamp(48px, 8vw, 96px);
    position: relative;
    overflow: hidden;
    font-family: "Al-Jazeera-Regular", sans-serif;
}

/* Top accent stripe */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--color-primary) 20%,
        var(--color-accent) 50%,
        var(--color-primary) 80%,
        transparent
    );
}

.site-footer > .container {
    position: relative;
    z-index: 1;
}

/* ---- Column titles ---- */
.footer-title {
    position: relative;
    display: inline-block;
    font-size: clamp(1.05rem, 0.8vw + 0.9rem, 1.2rem);
    font-family: "Al-Jazeera-Bold", sans-serif;
    color: #fff;
    padding-bottom: 12px;
    margin-bottom: 22px;
    letter-spacing: 0.3px;
}

.footer-title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 3px;
    transition: width 0.35s ease;
}

.footer-title:hover::after {
    width: 64px;
}

/* Hide legacy dashed separator markup (if ever reused) */
.footer-separator,
.footer-bottom-separator {
    display: none;
}

/* ---- Brand / logo area ---- */
.footer-brand {
    margin-bottom: 20px;
}

.footer-logo {
    display: inline-block;
    max-width: 180px;
}

.footer-logo img {
    width: 100%;
    height: auto;
    max-height: 72px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.footer-brand-name {
    font-family: "Al-Jazeera-Bold", sans-serif;
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
    color: #fff;
    margin: 0;
}

.footer-about-text {
    font-size: var(--font-sm);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    max-width: 42ch;
    margin: 0 0 24px;
}

/* ---- Categories: compact pills ---- */
.footer-cats-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-cat {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: var(--font-xs);
    font-family: "Al-Jazeera-Bold", sans-serif;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease,
                transform 0.2s ease;
}

.footer-cat:hover {
    background: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

/* ---- Quick links: two-column list ---- */
.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.footer-links-list li {
    min-width: 0;
}

.footer-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--font-sm);
    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s ease, padding-inline-start 0.25s ease;
}

.footer-link::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.25s ease, transform 0.25s ease;
    flex-shrink: 0;
}

.footer-link:hover {
    color: #fff;
}

.footer-link:hover::before {
    opacity: 1;
    transform: scale(1);
}

/* ---- Social icons: clean circular buttons ---- */
.footer-social-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.footer-social-list li {
    margin: 0;
}

.footer-social {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                transform 0.3s ease,
                box-shadow 0.3s ease;
}

/* Radial ripple that expands from center on hover */
.footer-social::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.35s ease;
    z-index: 0;
}

.footer-social img {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* Hide the text label — the aria-label covers a11y */
.footer-social-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.footer-social:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 184, 36, 0.35);
}

.footer-social:hover::before {
    transform: scale(1);
}

.footer-social:hover img {
    filter: brightness(0) saturate(100%) invert(11%) sepia(66%) saturate(5555%) hue-rotate(240deg) brightness(40%) contrast(100%);
    transform: scale(1.08);
}

.footer-social:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* ---- Copyright bar ---- */
.footer-copyright {
    margin-top: 56px;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.footer-copyright p {
    margin: 0;
    font-size: var(--font-xs);
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.4px;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .footer-links-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .site-footer {
        padding-top: 48px;
    }

    .footer-about-text {
        max-width: 100%;
    }

    .footer-copyright {
        margin-top: 36px;
        padding: 18px 0;
    }

    .footer-social {
        width: 38px;
        height: 38px;
    }

    .footer-social img {
        width: 16px;
        height: 16px;
    }
}

/* =========================================================
   Phase 7: Card sizing normalization — kill all unbounded cards
   ========================================================= */

/* ---- DEFAULT CARD VARIANT (image on top + body below) ---- */
/* Image always uses a fixed aspect-ratio so cards line up in a row */
.featured-news-item {
    display: flex;
    flex-direction: column;
}

.featured-news-item > a:first-child {
    display: block;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.featured-news-item .card-img-top {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    height: auto !important;
}

.featured-news-item .card-body {
    flex: 1 1 auto;
    min-height: 0;
}

/* Override old conflicting rules */
.situation-assessment-section .featured-news-item img,
.translated-articles .featured-news-item img {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* ---- OVERLAY CARD VARIANT (.main-card) ---- */
/* Override Bootstrap h-100 where needed */
.main-card {
    display: block;
    position: relative;
}

.main-card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- ANALYSIS SECTION (الاستيطان الإسرائيلي) ---- */
/* 3-column layout with main overlay card on top + 3 small items below */
/* baseline container — wrapper takes full column height */
.analysis-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.analysis-container .main-card {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    max-height: 300px;
    min-height: 220px;
    width: 100%;
    flex-shrink: 0;
}

.analysis-container .main-card > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* ---- QUOTES SECTION (TWO_BIG_THREE_MID_STYLE) ---- */
/* Row 1: 2 big cards (col-lg-6). Row 2: 3 mid cards (col-lg-4) */
.quotes-section .row > .col-lg-6 .main-card {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    min-height: 280px;
    max-height: 380px;
    width: 100%;
}

.quotes-section .row > .col-lg-4 .main-card {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    min-height: 240px;
    max-height: 320px;
    width: 100%;
}

/* Kill the old conflicting rule */
.quotes-section .main-card img {
    aspect-ratio: unset !important ;
    height: 100% ;
    width: 100% ;
    object-fit: cover;
}

/* ---- MIDDLE-EAST SECTION (ONE_BIG_FOUR_MID_STYLE) ---- */
.middle-east-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-md);
    align-items: start;
}

/* Big card on one side */
.middle-east-grid > .featured-news-item {
    height: 100%;
}

.middle-east-grid > .featured-news-item .card-img-top {
    aspect-ratio: 16 / 10 !important;
    max-height: 320px;
}

.middle-east-grid > .featured-news-item .card-body {
    padding-top: 16px;
}

.middle-east-grid > .featured-news-item .card-text {
    font-size: var(--font-sm);
    color: var(--color-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin-top: 10px;
}

/* 2x2 grid on the other side */
.middle-east-grid .small-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-sm);
    height: 100%;
}

.middle-east-grid .small-grid .small-card {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
}

.middle-east-grid .small-grid .small-card .container-img {
    display: block;
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.middle-east-grid .small-grid .small-card .card-img-top {
    width: 100%;
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    object-fit: cover;
}

.middle-east-grid .small-grid .small-card .card-body {
    padding: 10px 12px !important;
}

.middle-east-grid .small-grid .small-card .card-title {
    font-size: var(--font-sm);
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* ---- TRANSLATED ARTICLES (ONE_BIG_THREE_MID_STYLE) ---- */
.translated-articles .row {
    align-items: stretch;
}

.translated-articles .col-lg-6 .card.featured-news-item {
    height: 100%;
}

.translated-articles .featured-news-item .card-img-top {
    aspect-ratio: 16 / 10 !important;
    max-height: 320px;
}

.translated-articles .small-news-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.translated-articles .small-news-card {
    display: flex !important;
    align-items: stretch;
    flex: 1 1 0;
    min-height: 0;
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.translated-articles .small-news-card .container-img {
    flex: 0 0 160px;
    width: 160px;
    height: auto;
    overflow: hidden;
}

.translated-articles .small-news-card .container-img img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    object-fit: cover;
    border-radius: 0 !important;
}

.translated-articles .small-news-card > .flex-grow-1,
.translated-articles .small-news-card > div:last-child {
    padding: 12px 14px !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.translated-articles .small-news-card .card-title {
    font-size: var(--font-sm);
    line-height: 1.45;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* ---- SITUATION ASSESSMENT (slider) ---- */
.situation-assessment-section .card.featured-news-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.situation-carousel .item {
    height: auto;
}

.situation-carousel .owl-stage {
    display: flex;
}

.situation-carousel .owl-item {
    display: flex;
    flex: 1 0 auto;
}

.situation-carousel .owl-item > div {
    width: 100%;
}

/* ---- VIDEO SECTION ---- */
/* Was 450px fixed — too tall; make it responsive */
.video-main {
    height: auto !important;
    aspect-ratio: 16 / 9;
    max-height: 420px;
    min-height: 240px;
}

.video-main > img,
.video-main > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-thumb {
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    min-height: 120px;
}

/* ---- MAIN FEATURED NEWS HOME (ONE_BIG_ONE_WIDE_TWO_MID_STYLE) ---- */
/* Add safety aspect-ratio to each grid cell */
.main-featured-news-home .featured-news-grid .main-card {
    aspect-ratio: unset;
    height: 100%;
    min-height: 200px;
}

/* Already has min-height: clamp() from Phase 2 — add max as safety */
.main-featured-news-home .featured-news-grid {
    max-height: 620px;
}

@media (max-width: 1023.98px) {
    .main-featured-news-home .featured-news-grid {
        max-height: none;
    }

    .main-featured-news-home .featured-news-grid .main-card {
        aspect-ratio: 16 / 10;
        max-height: 300px;
    }
}

/* ---- HOMEPAGE HERO + SUB-CARDS ---- */
/* Override the previously-fixed thumb flex on hero sub-cards */
.homepage-featured .small-news-card {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 10px;
    align-items: stretch;
    gap: 12px;
    min-height: 100px;
}

.homepage-featured .small-news-card .container-img {
    flex: 0 0 110px;
    width: 110px;
    height: auto;
    align-self: stretch;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.homepage-featured .small-news-card .card-img-top {
    width: 100%;
    height: 100%;
    aspect-ratio: unset !important;
    object-fit: cover;
}

.homepage-featured .small-news-card > .flex-grow-1,
.homepage-featured .small-news-card > div:not(.container-img) {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 !important;
}

.homepage-featured .small-news-card h6 {
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* =========================================================
   Phase 7: Mobile adjustments (<= 767.98px)
   ========================================================= */
@media (max-width: 767.98px) {
    /* Analysis section: columns stack, main card stays bounded */
    .analysis-container .main-card {
        max-height: 240px;
        min-height: 180px;
    }

    .analysis-container {
        gap: 16px;
    }

    .analysis-section .small-img {
        width: 90px;
        height: 70px;
        max-width: 90px;
        min-width: 90px;
        flex: 0 0 90px;
    }

    /* Quotes: reduce max on phones */
    .quotes-section .row > .col-lg-6 .main-card,
    .quotes-section .row > .col-lg-4 .main-card {
        max-height: 260px;
        min-height: 200px;
        aspect-ratio: 16 / 10 !important;
    }

    /* Middle-east: single column stacks */
    .middle-east-grid {
        grid-template-columns: 1fr;
    }

    .middle-east-grid .small-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Translated articles small list */
    .translated-articles .small-news-card .container-img {
        flex: 0 0 120px;
        width: 120px;
    }

    /* Video main */
    .video-main {
        max-height: 280px;
        min-height: 200px;
    }

    /* Homepage hero sub-cards */
    .homepage-featured .small-news-card .container-img {
        flex: 0 0 90px;
        width: 90px;
    }
}


/* =========================================================
   Phase 9: Translated Articles — small cards redesign
   ========================================================= */

/* Rebuild the translated-articles small list with proper rhythm */
.translated-articles .small-news-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
}

/* Reset conflicts from earlier phases */
.translated-articles .small-news-card {
    display: flex !important;
    flex-direction: row;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    flex: 1 1 0;
    min-height: 130px;
    background: #fff;
    border: 1px solid rgba(33, 29, 117, 0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(33, 29, 117, 0.04);
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
    text-decoration: none;
    margin-bottom: 0 !important;
}

.translated-articles .small-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(33, 29, 117, 0.12);
    border-color: rgba(33, 29, 117, 0.18);
}

/* Image area */
.translated-articles .small-news-card .container-img {
    flex: 0 0 38%;
    max-width: 38%;
    width: 38%;
    height: auto;
    overflow: hidden;
    position: relative;
    border-radius: 0 !important;
}

.translated-articles .small-news-card .container-img img,
.translated-articles .small-news-card .card-img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    object-fit: cover;
    border-radius: 0 !important;
    transition: transform 0.5s ease;
}

.translated-articles .small-news-card:hover .container-img img,
.translated-articles .small-news-card:hover .card-img {
    transform: scale(1.08);
}

/* Body area — 3 rows: category (top) / title (middle, flex grow) / meta (bottom) */
.translated-articles .small-news-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    padding: 14px 18px;
    min-width: 0;
}

/* Category badge inside small card — compact version */
.translated-articles .small-news-card .category {
    align-self: flex-start;
    padding: 3px 10px;
    font-size: 11px;
    margin: 0;
    flex-shrink: 0;
}

/* Title — 2 to 3 lines, takes whatever vertical space is left */
.translated-articles .small-news-card .card-title {
    font-size: var(--font-md);
    line-height: 1.5;
    margin: 0;
    font-family: "Al-Jazeera-Bold", sans-serif;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
}

.translated-articles .small-news-card .card-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.25s ease;
}

.translated-articles .small-news-card:hover .card-title a {
    color: var(--color-primary);
}

/* Meta at bottom — compact, pinned */
.translated-articles .small-news-card__meta {
    margin-top: auto;
    padding-top: 2px;
    font-size: 11px !important;
    flex-shrink: 0;
}

.translated-articles .small-news-card__meta .author {
    padding: 3px 8px;
    font-size: 11px;
}

.translated-articles .small-news-card__meta img {
    width: 11px !important;
    height: 11px !important;
}

/* ---- Responsive ---- */

/* Tablet: keep horizontal layout but adjust image ratio */
@media (max-width: 991.98px) {
    .translated-articles .small-news-list {
        margin-top: 24px;
    }

    .translated-articles .small-news-card .container-img {
        flex: 0 0 34%;
        max-width: 34%;
        width: 34%;
    }

    .translated-articles .small-news-card__body {
        padding: 14px 16px;
    }
}

/* Mobile: stack image on top, content below */
@media (max-width: 575.98px) {
    .translated-articles .small-news-card {
        flex-direction: column !important;
        min-height: 0;
    }

    .translated-articles .small-news-card .container-img {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .translated-articles .small-news-card__body {
        padding: 14px 16px 16px;
    }

    .translated-articles .small-news-card .card-title {
        font-size: var(--font-md);
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}


/* =========================================================
   Phase 10: Video Section — full redesign
   ========================================================= */

/* Section background: layered gradient on deep navy */
.video-section.section {
    background:
        radial-gradient(ellipse at top right, rgba(255, 184, 36, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(33, 29, 117, 0.6) 0%, transparent 55%),
        #0b0833 !important;
    padding-block: clamp(48px, 6vw, 88px) !important;
    position: relative;
    overflow: hidden;
}

/* Decorative corner shape */
.video-section.section::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 184, 36, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.video-section.section > .container {
    position: relative;
    z-index: 1;
}

/* ---- Section header (inverted — white on dark) ---- */
.video-section .section-header {
    margin-bottom: 28px;
}

.video-section .section-title {
    color: #fff !important;
}

.video-section .section-title::before {
    background: linear-gradient(180deg, var(--color-accent) 0%, #fff 100%) !important;
}

.video-section .section-title::after {
    content: none !important;
}

.video-section .header-divider {
    background: linear-gradient(
        90deg,
        var(--color-accent) 0%,
        rgba(255, 255, 255, 0.25) 30%,
        rgba(255, 255, 255, 0.08) 100%
    ) !important;
    border: none !important;
}

.video-section .btn-view-all {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.video-section .btn-view-all:hover {
    background: var(--color-accent) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 6px 18px rgba(255, 184, 36, 0.4) !important;
}

/* ---- Tabs row ---- */
.video-section .nav-tabs {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 0 !important;
    margin: 0 0 28px !important;
    list-style: none;
    border: none !important;
    width: 100% !important;
    background: transparent;
}

.video-section .tab-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 9px 18px !important;
    font-family: "Al-Jazeera-Bold", sans-serif;
    font-size: var(--font-sm);
    color: rgba(255, 255, 255, 0.65) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease,
                transform 0.2s ease;
    margin: 0 !important;
}

.video-section .tab-item::after {
    content: none !important;
}

.video-section .tab-item:hover {
    color: #fff !important;
    border-color: rgba(255, 184, 36, 0.4) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.video-section .tab-item.active {
    background: var(--color-accent) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 6px 18px rgba(255, 184, 36, 0.28);
}

.video-section .tab-pane {
    display: none;
}

.video-section .tab-pane.active {
    display: block;
    animation: videoFadeIn 0.4s ease;
}

@keyframes videoFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Featured video row (big player + info) ---- */
.video-featured {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 32px;
    align-items: stretch;
    margin-bottom: 32px;
}

/* The main player card */
.video-section .video-featured__player,
.video-section .video-main {
    position: relative;
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
    min-height: 240px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: #000;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.video-section .video-featured__player > img,
.video-section .video-main > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease, filter 0.35s ease;
}

.video-section .video-featured__player::after,
.video-section .video-main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 40%,
        rgba(0, 0, 0, 0.65) 100%
    );
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.video-section .video-featured__player:hover,
.video-section .video-main:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.55);
}

.video-section .video-featured__player:hover > img,
.video-section .video-main:hover > img {
    transform: scale(1.06);
    filter: brightness(0.88);
}

.video-section .video-featured__player:focus-visible,
.video-section .video-main:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
}

/* Big centered play button */
.video-section .video-featured__player .play-icon,
.video-section .video-main .play-icon {
    position: absolute !important;
    top: 50% !important;
    inset-inline-start: 50% !important;
    transform: translate(50%, -50%) !important;
    width: 88px !important;
    height: 88px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

/* Pulsing ring around the play button */
.video-section .video-featured__player .play-icon::before,
.video-section .video-main .play-icon::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    animation: playPulse 2s ease-out infinite;
}

@keyframes playPulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.35); opacity: 0; }
}

.video-section .video-featured__player:hover .play-icon,
.video-section .video-main:hover .play-icon {
    background: var(--color-accent) !important;
    border-color: var(--color-accent);
    transform: translate(50%, -50%) scale(1.1) !important;
    box-shadow: 0 10px 32px rgba(255, 184, 36, 0.5);
}

.video-section .video-featured__player .play-icon-img {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
    margin-inline-start: 4px; /* slight offset so the triangle centers visually */
}

.video-section .video-featured__player:hover .play-icon-img,
.video-section .video-main:hover .play-icon-img {
    filter: brightness(0) saturate(100%) invert(11%) sepia(66%) saturate(5555%) hue-rotate(240deg) brightness(40%);
}

/* Reset any injected iframe by the JS player */
.video-section .video-featured__player iframe,
.video-section .video-main iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    position: relative;
    z-index: 3;
}

/* Info column */
.video-featured__info {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    color: #fff !important;
    padding: 0 !important;
}

.video-featured__info .category {
    align-self: flex-start;
    margin-bottom: 12px;
}

.video-section .video-title {
    font-family: "Al-Jazeera-Bold", sans-serif;
    font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem) !important;
    color: #fff !important;
    line-height: 1.35;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.video-section .video-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}

.video-section .video-title a:hover {
    color: var(--color-accent);
}

.video-section .video-desc {
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--font-sm);
    line-height: 1.75;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Watch-now CTA */
.btn-watch-now {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    margin-top: 8px;
    align-self: flex-start;
    background: var(--color-accent);
    color: var(--color-primary);
    border-radius: 999px;
    font-family: "Al-Jazeera-Bold", sans-serif;
    font-size: var(--font-sm);
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(255, 184, 36, 0.3);
    transition: transform 0.25s ease,
                background-color 0.25s ease,
                box-shadow 0.25s ease,
                gap 0.25s ease;
}

.btn-watch-now i {
    transition: transform 0.25s ease;
}

.btn-watch-now:hover {
    background: #fff;
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 184, 36, 0.45);
    gap: 14px;
}

.btn-watch-now:hover i {
    transform: scale(1.15);
}

/* ---- Small video thumbs grid (below the featured) ---- */
.video-section .video-thumbs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.video-section .video-thumb {
    position: relative;
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    background: #000;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.video-section .video-thumb > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease, filter 0.35s ease;
}

.video-section .video-thumb:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5);
}

.video-section .video-thumb:hover > img {
    transform: scale(1.08);
    filter: brightness(0.7);
}

.video-section .video-thumb:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

/* Overlay title at the bottom of each small thumb */
.video-thumb__overlay {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
    padding: 18px 14px 14px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.55) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.video-thumb__title {
    color: #fff;
    font-family: "Al-Jazeera-Bold", sans-serif;
    font-size: var(--font-xs);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Small play button on thumbs */
.video-section .video-thumb .play-icon {
    position: absolute !important;
    top: 50% !important;
    inset-inline-start: 50% !important;
    transform: translate(50%, -50%) !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.45);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.3s ease;
}

.video-section .video-thumb .play-icon-img {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    filter: brightness(0) invert(1);
    margin-inline-start: 2px;
}

.video-section .video-thumb:hover .play-icon {
    background: var(--color-accent) !important;
    border-color: var(--color-accent);
    transform: translate(50%, -50%) scale(1.1) !important;
    box-shadow: 0 8px 24px rgba(255, 184, 36, 0.5);
}

.video-section .video-thumb:hover .play-icon-img {
    filter: brightness(0) saturate(100%) invert(11%) sepia(66%) saturate(5555%) hue-rotate(240deg) brightness(40%);
}

/* JS-injected iframe (when user clicks play) */
.video-section .video-thumb iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    position: relative;
    z-index: 3;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .video-featured {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .video-section .video-featured__player,
    .video-section .video-main {
        min-height: 220px;
    }

    .video-section .video-thumbs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 575.98px) {
    .video-section.section {
        padding-block: 48px !important;
    }

    .video-section .video-featured__player .play-icon,
    .video-section .video-main .play-icon {
        width: 64px !important;
        height: 64px !important;
    }

    .video-section .video-featured__player .play-icon-img {
        width: 24px !important;
        height: 24px !important;
    }

    .video-section .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px !important;
        scrollbar-width: none;
    }

    .video-section .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .video-section .tab-item {
        flex-shrink: 0;
    }

    .video-section .video-thumbs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .video-thumb__overlay {
        padding: 12px 10px 10px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .video-section .video-featured__player .play-icon::before,
    .video-section .video-main .play-icon::before {
        animation: none;
    }

    .video-section .video-featured__player,
    .video-section .video-main,
    .video-section .video-thumb,
    .btn-watch-now {
        transition: none;
    }
}


/* =========================================================
   Phase 11: Analysis Section — premium column cards
   ========================================================= */

/* Section background: subtle tint so white column cards pop */
.analysis-section.section {
    background:
        radial-gradient(ellipse at top right, rgba(33, 29, 117, 0.04) 0%, transparent 50%),
        var(--color-surface);
    padding-block: clamp(48px, 5vw, 80px) !important;
    position: relative;
}

/* Decorative top-left wash */
.analysis-section.section::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(255, 184, 36, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.analysis-section.section > .container {
    position: relative;
    z-index: 1;
}

/* ---- Column wrapper: each column becomes a card ---- */
.analysis-section .analysis-container {
    background: #fff;
    border: 1px solid rgba(33, 29, 117, 0.08);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: 0 4px 16px rgba(33, 29, 117, 0.05);
    transition: transform 0.35s ease,
                box-shadow 0.35s ease,
                border-color 0.35s ease;
    gap: 18px !important;
}

.analysis-section .analysis-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(33, 29, 117, 0.1);
    border-color: rgba(33, 29, 117, 0.15);
}

/* Subtle accent bar at the top of each column */
.analysis-section .analysis-container {
    position: relative;
    overflow: hidden;
}

.analysis-section .analysis-container::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        var(--color-accent) 60%,
        var(--color-primary) 100%
    );
    border-radius: 3px 3px 0 0;
    opacity: 0.85;
}

/* ---- Section header inside each column — compact ---- */
.analysis-section .analysis-container > .section-header {
    margin-bottom: 0 !important;
    padding-top: 4px;
    justify-content: space-between;
}

.analysis-section .analysis-container .section-title {
    font-size: clamp(1.05rem, 0.8vw + 0.9rem, 1.2rem);
}

.analysis-section .analysis-container .header-divider {
    display: none;
}

.analysis-section .analysis-container .btn-view-all {
    padding: 5px 12px;
    font-size: var(--font-xs);
    height: auto;
}

/* ---- Main overlay card inside column — more compact ---- */
.analysis-section .analysis-container .main-card {
    aspect-ratio: 16 / 10 !important;
    min-height: 180px;
    max-height: 240px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

/* Category badge on the overlay card should be tighter */
.analysis-section .main-card .category {
    font-size: 10px;
    padding: 3px 10px;
}

.analysis-section .main-card .card-title {
    font-size: var(--font-md) !important;
    line-height: 1.4 !important;
    margin-top: 8px !important;
}

/* ---- Small list with hover + numbered feel ---- */
.analysis-section .small-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    margin: 0 !important;
    counter-reset: analysis-item;
}

.analysis-section .small-item {
    counter-increment: analysis-item;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 14px 0 !important;
    margin: 0 !important;
    border-top: 1px dashed rgba(33, 29, 117, 0.1);
    position: relative;
    transition: background-color 0.25s ease,
                padding-inline-start 0.25s ease;
}

.analysis-section .small-item:first-child {
    border-top: none;
    padding-top: 4px !important;
}

.analysis-section .small-item:last-child {
    padding-bottom: 4px !important;
}

.analysis-section .small-item + .small-item {
    margin-top: 0 !important;
}

/* Thumbnail */
.analysis-section .small-img {
    width: 92px !important;
    height: 70px !important;
    max-width: 92px !important;
    min-width: 92px !important;
    flex: 0 0 92px !important;
    object-fit: cover;
    border-radius: var(--radius-sm);
    transition: transform 0.4s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 6px rgba(33, 29, 117, 0.08);
}

.analysis-section .small-item:hover .small-img {
    transform: scale(1.05);
    box-shadow: 0 6px 14px rgba(33, 29, 117, 0.18);
}

/* Content column */
.analysis-section .small-item > div:last-child,
.analysis-section .small-item .flex-grow-1 {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Compact category inside small item */
.analysis-section .small-item .category {
    align-self: flex-start;
    font-size: 10px !important;
    padding: 2px 8px !important;
    margin: 0 0 2px !important;
}

.analysis-section .small-title {
    font-size: var(--font-sm);
    line-height: 1.5;
    font-family: "Al-Jazeera-Bold", sans-serif;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--text-primary);
    transition: color 0.25s ease;
}

.analysis-section .small-title a {
    color: inherit;
    text-decoration: none;
}

.analysis-section .small-item:hover .small-title,
.analysis-section .small-item:hover .small-title a {
    color: var(--color-primary);
}

/* Meta row in small item — super compact */
.analysis-section .small-item .meta,
.analysis-section .small-item .post-meta {
    font-size: 10px !important;
    margin: 2px 0 0 !important;
    gap: 10px !important;
    color: var(--color-muted);
}

.analysis-section .small-item .meta img,
.analysis-section .small-item .post-meta img {
    width: 10px !important;
    height: 10px !important;
}

.analysis-section .small-item .post-meta .author {
    padding: 2px 6px !important;
    font-size: 10px !important;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .analysis-section .analysis-container {
        padding: 16px;
    }

    .analysis-section .analysis-container .main-card {
        max-height: 280px;
        min-height: 200px;
    }

    /* Override earlier margin-top gap stacking */
    .col-lg-4 .analysis-container,
    .col-md-4 .analysis-container {
        margin-top: 20px !important;
    }

    .col-lg-4:first-child .analysis-container {
        margin-top: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .analysis-section .analysis-container {
        padding: 14px;
        gap: 14px !important;
    }

    .analysis-section .analysis-container .main-card {
        max-height: 220px;
        min-height: 160px;
    }

    .analysis-section .small-img {
        width: 80px !important;
        height: 64px !important;
        max-width: 80px !important;
        min-width: 80px !important;
        flex: 0 0 80px !important;
    }

    .analysis-section .small-item {
        gap: 12px !important;
        padding: 12px 0 !important;
    }

    .analysis-section .small-title {
        font-size: var(--font-xs);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .analysis-section .analysis-container,
    .analysis-section .small-img,
    .analysis-section .small-item {
        transition: none;
    }
}


/* =========================================================
   Phase 12: Hero sub-cards (under the main hero)
   ========================================================= */

/* 3-column responsive grid container */
.homepage-featured .hero-subcards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
}

/* Each sub-card: horizontal flex with image + content */
.homepage-featured .hero-subcard {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(33, 29, 117, 0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(33, 29, 117, 0.06);
    transition: transform 0.35s ease,
                box-shadow 0.35s ease,
                border-color 0.35s ease;
    position: relative;
    min-height: 134px;
}

/* Subtle accent top-bar that grows on hover */
.homepage-featured .hero-subcard::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
    transition: width 0.45s ease;
    z-index: 2;
}

.homepage-featured .hero-subcard:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(33, 29, 117, 0.15);
    border-color: rgba(33, 29, 117, 0.2);
}

.homepage-featured .hero-subcard:hover::before {
    width: 100%;
}

/* Image area (38% width on desktop) */
.homepage-featured .hero-subcard__img {
    flex: 0 0 38%;
    width: 38%;
    max-width: 38%;
    display: block;
    overflow: hidden;
    position: relative;
    border-radius: 0;
}

/* Dark accent overlay that fades in on hover */
.homepage-featured .hero-subcard__img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(33, 29, 117, 0.25) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 1;
}

.homepage-featured .hero-subcard:hover .hero-subcard__img::after {
    opacity: 1;
}

.homepage-featured .hero-subcard__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s ease;
}

.homepage-featured .hero-subcard:hover .hero-subcard__img img {
    transform: scale(1.08);
}

/* Body: 62% — category + title + meta */
.homepage-featured .hero-subcard__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px 18px;
    min-width: 0;
}

/* Compact category badge at the top */
.homepage-featured .hero-subcard .category {
    align-self: flex-start;
    padding: 3px 10px;
    font-size: 10px;
    margin: 0;
    flex-shrink: 0;
}

/* Title — takes available space, 3-line clamp */
.homepage-featured .hero-subcard__title {
    font-size: var(--font-md);
    font-family: "Al-Jazeera-Bold", sans-serif;
    line-height: 1.5;
    margin: 0;
    flex: 1 1 auto;
    min-height: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.homepage-featured .hero-subcard__title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.25s ease;
}

.homepage-featured .hero-subcard:hover .hero-subcard__title a {
    color: var(--color-primary);
}

/* Meta pinned to the bottom */
.homepage-featured .hero-subcard__meta {
    margin-top: auto !important;
    padding-top: 2px;
    font-size: 10px !important;
    flex-shrink: 0;
    gap: 10px !important;
}

.homepage-featured .hero-subcard__meta .author {
    padding: 2px 8px !important;
    font-size: 10px !important;
}

.homepage-featured .hero-subcard__meta img {
    width: 11px !important;
    height: 11px !important;
}

/* ---- Responsive ---- */

/* Tablet: 2 columns then the 3rd spans full width */
@media (max-width: 991.98px) {
    .homepage-featured .hero-subcards {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .homepage-featured .hero-subcard:nth-child(3) {
        grid-column: span 2;
    }

    .homepage-featured .hero-subcard__body {
        padding: 14px 16px;
    }
}

/* Mobile: single column + image stacked on top */
@media (max-width: 575.98px) {
    .homepage-featured .hero-subcards {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 20px;
    }

    .homepage-featured .hero-subcard:nth-child(3) {
        grid-column: span 1;
    }

    .homepage-featured .hero-subcard {
        flex-direction: column;
        min-height: 0;
    }

    .homepage-featured .hero-subcard__img {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 9;
    }

    .homepage-featured .hero-subcard__body {
        padding: 14px 16px 16px;
    }

    .homepage-featured .hero-subcard__title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .homepage-featured .hero-subcard,
    .homepage-featured .hero-subcard::before,
    .homepage-featured .hero-subcard__img img,
    .homepage-featured .hero-subcard__img::after {
        transition: none;
    }

    .homepage-featured .hero-subcard:hover {
        transform: none;
    }

    .homepage-featured .hero-subcard:hover .hero-subcard__img img {
        transform: none;
    }
}