/* ---------- 1. GLOBAL ---------------------------------------------------- */
:root {
        --gap: 1rem;
        --gap-lg: 2rem;
        --shadow: 0 1px 3px rgba(0,0,0,.08);

        /* Global color scheme */
        --color-bg: #fff;
        --color-text: #000;
        --color-accent: #d62222;
}

body {
        background: var(--color-bg);
        color: var(--color-text);
}

#breaking {
        background: var(--color-bg);
        border-inline-start: 4px solid var(--color-accent);
        margin-block: var(--gap);
        padding-block: .5rem;
        font-size: .875rem;
        color: var(--color-text);
}
#breaking .swiper-wrapper { align-items: center; }
#breaking .breaking-link {

	white-space: nowrap;
	font-weight: 600;
}
#breaking .breaking-link{
    display:inline-block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* hidden on mobile */
.breaking-excerpt {
    display:none;
    font-weight:400;
}
@media (min-width: 992px) {
    .breaking-excerpt {
        display:inline;
        margin-inline-start:.5rem;
    }
}


/* keep text away from the nav arrows */
.breaking-wrap {
    padding-inline: 2.75rem;           /* ≈ 44 px on both sides */
    overflow: hidden;                  /* just in case */
}


/* style the nav arrows: small white arrow inside a black circle */
.breaking-wrap .swiper-button-prev,
.breaking-wrap .swiper-button-next {
    width:1.5rem;
    height:1.5rem;
    border-radius:50%;
    background:#000;
    color:#fff;
    --swiper-navigation-size:12px;
    top:50%;
    transform:translateY(-30%);
    display:flex;
    align-items:center;
    justify-content:center;
}
.breaking-wrap .swiper-button-prev::after,
.breaking-wrap .swiper-button-next::after{
    font-size:.75rem;
}

#hero { margin-block: var(--gap-lg); }
.hero-layout { position: relative; }
.hero-wrap { position: relative; }
.hero-slide { position: relative; }
.hero-thumb { aspect-ratio: 16 / 9; overflow: hidden; }
.hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-caption {
        position: absolute;
        inset-inline-start: 0; inset-inline-end: 0; bottom: 0;
        background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%);
        color: #fff; padding: 1rem;
}
.hero-cat {
        font-size: .75rem;
        background: var(--color-accent);
        color: var(--color-bg);
        padding: .25em .5em;
        border-radius: 3px;
}
.hero-title,
.hero-title a {
    font-size: 1.125rem;
    margin: .25rem 0 0;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.hero-title a:hover,
.hero-title a:focus {
    color: #fff;
}

/* pagination dots inside slide */
.hero-wrap .swiper-pagination {
    position: absolute;
    top: 50%;
    left: .5rem;                     /* explicit left even on RTL */
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: auto;
    z-index: 10;
}
.hero-wrap .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    background: #999;
    opacity: 1;
}
.hero-wrap .swiper-pagination-bullet-active {
    background: #fff;
}


.hero-extra { display:none; }
.hero-mini-thumb img { width:100%; height:auto; display:block; box-shadow: var(--shadow); }
.hero-mini-title { font-size:.875rem; margin:.5rem 0 0; line-height:1.4; }

@media (min-width: 992px) {
    .hero-layout { display:flex; flex-direction:row; gap: var(--gap); }
    .hero-wrap { flex:0 0 60%; }
    .hero-extra { flex:1 1 40%; display:flex; flex-direction:column; gap:var(--gap); }
}
.ad-slot { text-align:center; margin-block: var(--gap-lg); }

/* ---------- 2. CATEGORY GRID -------------------------------------------- */
.category-block { margin-block: var(--gap-lg); }
.cb-head {
        display:flex;
        align-items:center;
        justify-content:space-between;
        border-inline-start: 4px solid var(--color-accent);
        padding-inline-start: .75rem;
        margin-block-end: var(--gap);
}
.cb-title { font-size: 1.125rem; margin: 0; }
.cb-more {
        font-size:.75rem;
        color: var(--color-accent);
        text-decoration:none;
}

.cb-grid {
	display:grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
}
.cb-thumb img { width:100%; height:auto;display:block; box-shadow: var(--shadow); }
.cb-item-title { font-size:.875rem; margin:.5rem 0 0; line-height:1.4; }

@media (min-width: 576px) {
	.cb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
	.cb-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 3. RTL helper – Swiper needs direction:rtl already  ---------- */
/* Nothing else: Blocksy & WP both output RTL‑safe styles by default. */