/* ======================================================
   TBC HOME PAGE — PROFESSIONAL NEWS-STYLE OVERRIDES
   Included only on index.html (loaded after main.css)
   ====================================================== */

/* --- Page rhythm: consistent vertical spacing --- */
main { padding: 2.4rem 0 3.5rem; }
main .category-showcase { margin-top: 2.75rem; }
main .top-grid { margin-bottom: 0 !important; }
main .afcon-live { margin: 2.75rem 0 0; }

/* ======================================================
   1. HERO + TRENDING — calmer height, clean overlay
   ====================================================== */
main .top-grid { gap: 1.25rem !important; }

/* Cap both panes at the same height — hero image fills its pane,
   trending list scrolls internally. (High specificity + !important
   needed to override the older hero rules in main.css.) */
main .top-grid .hero-section,
main .top-grid .top-stories {
    height: 320px !important;
    min-height: 0 !important;
    max-height: none !important;
}
@media (min-width: 576px) {
    main .top-grid .hero-section,
    main .top-grid .top-stories { height: 350px !important; }
}
@media (min-width: 992px) {
    main .top-grid .hero-section,
    main .top-grid .top-stories { height: 385px !important; }
}
@media (min-width: 1200px) {
    main .top-grid .hero-section,
    main .top-grid .top-stories { height: 410px !important; }
}
main .top-grid .hero-section .hero-link { flex: 1 1 auto !important; }
main .top-grid .hero-section .hero-image {
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    opacity: 0.85;
}

main .hero-section {
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

main .hero-content {
    background: linear-gradient(to top, rgba(5, 20, 40, 0.92) 0%, rgba(5, 20, 40, 0.55) 55%, transparent 100%);
    padding: 1.75rem 1.5rem 1.4rem;
}
main .hero-category-tag {
    background: var(--primary-yellow);
    color: #222;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.25rem 0.7rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
main .hero-title {
    font-family: 'Merriweather', serif;
    font-size: 1.55rem;
    line-height: 1.3;
    margin: 0.75rem 0 0.5rem;
}
@media (min-width: 992px) { main .hero-title { font-size: 1.7rem; } }
main .hero-excerpt {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #dce4ec;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Trending sidebar: matches hero height, scrolls internally */
main .top-stories {
    background: #ffffff;
    border: 1px solid #e5e8eb;
    border-top: 4px solid var(--primary-yellow);
    border-radius: 10px;
    padding: 1.1rem 1.15rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
    min-height: 0 !important;
}
main .top-grid .top-stories ul {
    flex: 1 1 auto !important;
    overflow: hidden !important;
}
main .top-stories h3 {
    margin: 0 0 0.85rem;
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-blue);
    border-bottom: 2px solid var(--primary-yellow);
    padding-bottom: 0.55rem;
}
main .top-story-item { padding: 0.65rem 0; }
main .top-story-number { color: var(--primary-yellow); text-shadow: 0 0 1px rgba(0,0,0,0.25); font-size: 1rem; }
main .top-story-text { font-size: 0.86rem; }

/* ======================================================
   2. SPORTS HUB — navy feature panel between white sections
   ====================================================== */
main .afcon-live {
    /* Stadium atmosphere: floodlight glows + sweeping navy base */
    background:
        radial-gradient(ellipse 560px 260px at 10% -5%, rgba(255, 217, 0, 0.14), transparent 65%),
        radial-gradient(ellipse 620px 300px at 95% 105%, rgba(0, 163, 221, 0.3), transparent 65%),
        linear-gradient(115deg, #071c3a 0%, #0f3a78 45%, #0a2b5c 70%, #071c3a 100%);
    background-size: 100% 100%, 100% 100%, 220% 100%;
    animation: afcon-base-sweep 11s ease-in-out infinite;
}
@keyframes afcon-base-sweep {
    0%   { background-position: 0 0, 0 0, 0% 0; }
    50%  { background-position: 0 0, 0 0, 100% 0; }
    100% { background-position: 0 0, 0 0, 0% 0; }
}
/* Broadcast light beams gliding across the panel */
main .afcon-live::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(115deg, transparent 40%, rgba(255, 217, 0, 0.09) 47%, transparent 55%),
        linear-gradient(115deg, transparent 58%, rgba(255, 255, 255, 0.06) 65%, transparent 73%),
        repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.028) 0 2px, transparent 2px 30px);
    background-size: 300% 100%, 300% 100%, auto;
    animation: afcon-beams 16s linear infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes afcon-beams {
    from { background-position: 120% 0, 80% 0, 0 0; }
    to   { background-position: -180% 0, -220% 0, 0 0; }
}
main .afcon-live > * { position: relative; z-index: 1; }
    border: 1px solid rgba(201, 162, 39, 0.45);
    border-top: 4px solid var(--primary-yellow);
    border-radius: 12px;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(13, 35, 71, 0.25);
    padding: 1.5rem;
}
main .afcon-live-header { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
main .afcon-live-title { color: var(--primary-yellow); }
main .afcon-live-subtitle { color: rgba(255, 255, 255, 0.72); }
main .afcon-live-loading { color: rgba(255, 255, 255, 0.75); }

main .afcon-live-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
main .afcon-countdown-title { color: #ffffff; }
main .afcon-countdown-box {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
main .afcon-countdown-number { color: var(--primary-yellow); }
main .afcon-countdown-label { color: rgba(255, 255, 255, 0.7); }

main .afcon-live-schedule-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid var(--primary-yellow);
}
main .afcon-live-schedule-item:hover {
    background: rgba(255, 255, 255, 0.1);
}
main .afcon-live-schedule-title { color: var(--primary-yellow); }
main .afcon-live-schedule-title i { color: var(--primary-yellow); }
main .afcon-live-schedule-time,
main .afcon-live-schedule-time strong { color: #ffffff; }
main .afcon-live-schedule-time small { color: rgba(255, 255, 255, 0.8); }
main .afcon-live-schedule-teams { color: #ffffff; }
main .afcon-live-schedule-vs { color: rgba(255, 255, 255, 0.85); }
main .afcon-live-schedule-channel { color: #ffffff; }
main .afcon-live-meta { color: #ffffff; }
main .afcon-live-team span { color: #ffffff; }

@media (max-width: 767px) {
    main .afcon-live-content { grid-template-columns: 1fr; }
}

/* ======================================================
   3. CATEGORY SECTIONS — clean grid instead of scroll rows
   ====================================================== */
main .category-showcase-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 3px solid var(--primary-blue);
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
}
main .category-showcase h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--primary-blue);
}
main .category-showcase h2 a:hover { color: var(--secondary-blue); text-decoration: none; }
main .category-showcase .see-all-link {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary-blue);
    letter-spacing: 0.4px;
    white-space: nowrap;
}
main .category-showcase .see-all-link:hover { color: var(--secondary-blue); text-decoration: none; }

/* News grid: 4 cards left-to-right in a scrollable row (original look) */
main .news-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    align-items: stretch;
}
main .news-grid .news-card {
    flex: 1 1 0;
    min-width: 0;
}

/* Cards: original professional look — blue accent, 220px images */
main .news-card {
    background: #ffffff;
    border: 1px solid #e5e8eb;
    border-top: 4px solid var(--primary-blue);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
main .news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-top-color: var(--primary-yellow);
}
main .news-card-image-wrap { overflow: hidden; flex-shrink: 0; background: #eef2f6; }
main .news-card-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
main .news-card:hover .news-card-image { transform: scale(1.03); }
main .news-card-content {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
main .news-card-title {
    font-family: 'Merriweather', serif;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: #222222;
}
main .news-card:hover .news-card-title { color: var(--primary-blue); }
main .news-card-meta {
    font-size: 0.75rem;
    color: #777777;
    margin-top: 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* --- Sticky main navigation --- */
.main-navigation {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- end of index pro overrides --- */

/* ======================================================
   ANIMATIONS — section reveals + card staggers
   ====================================================== */

/* Sections: fade + slide up when scrolled into view */
.reveal-init {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-init.revealed {
    opacity: 1;
    transform: none;
}

/* Content pieces: staggered entrance via --d delay */
@keyframes anim-in-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes anim-in-right {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes anim-in-scale {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: none; }
}

/* Hero text cascade */
main .hero-category-tag,
main .hero-title,
main .hero-excerpt {
    animation: anim-in-up 0.6s ease both;
    animation-delay: var(--d, 0s);
}

/* News cards stagger in */
main .news-card {
    animation: anim-in-up 0.55s ease both;
    animation-delay: var(--d, 0s);
}

/* Trending list slides from the right */
main .top-story-item {
    animation: anim-in-right 0.45s ease both;
    animation-delay: var(--d, 0s);
}

/* Sports hub cards + schedule rows pop in */
main .afcon-live-card,
main .afcon-live-schedule-item {
    animation: anim-in-scale 0.5s ease both;
    animation-delay: var(--d, 0s);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .reveal-init { opacity: 1 !important; transform: none !important; transition: none; }
    main .afcon-live { animation: none; }
    main .afcon-live::after { animation: none; }
    main .hero-category-tag, main .hero-title, main .hero-excerpt,
    main .news-card, main .top-story-item,
    main .afcon-live-card, main .afcon-live-schedule-item {
        animation: none;
    }
}


/* ======================================================
   ADVERTISEMENT ROW — banner slots under the hero
   ====================================================== */
main .ad-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.75rem;
}
main .ad-item { display: block; }
main .ad-item img {
    width: 100%;
    height: 145px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
main .ad-item:hover img {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
@media (max-width: 768px) {
    main .ad-row { grid-template-columns: 1fr; }
    main .ad-item img { height: 130px; }
}

/* ======================================================
   AD SLIDER — used when 3+ ads are active
   ====================================================== */
main .ad-slider {
    overflow: hidden;
    margin-top: 1.75rem;
}
main .ad-track {
    display: flex;
    will-change: transform;
}
main .ad-track .ad-item {
    flex: 0 0 50%;
    box-sizing: border-box;
    padding-right: 1rem;
    display: block;
}
main .ad-track .ad-item img {
    width: 100%;
    height: 145px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
@media (max-width: 768px) {
    main .ad-track .ad-item { flex: 0 0 100%; padding-right: 0; }
    main .ad-track .ad-item img { height: 130px; }
}

/* ======================================================
   TRENDING SIDEBAR — clean, simple, readable
   ====================================================== */
main .top-stories {
    background: #ffffff !important;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;
    padding: 1.15rem 1.15rem !important;
    display: flex;
    flex-direction: column;
}
main .top-stories h3 {
    margin: 0 0 0.6rem !important;
    padding: 0 0.15rem 0.65rem !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #12233d !important;
    background: none !important;
    border-bottom: 2px solid var(--primary-yellow) !important;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
main .top-stories h3 i { color: var(--primary-blue); }
main .top-stories ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
main .top-stories li { border-bottom: 1px solid #f0f3f7; }
main .top-stories li:last-child { border-bottom: none; }

main .top-story-item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.68rem 0.6rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s;
}
main .top-story-item:hover { background: #f5f8fc; }

main .top-story-number {
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.45;
    width: 1.35rem;
    flex-shrink: 0;
    text-align: right;
    color: #b6bfcc;
    text-shadow: none;
    padding-top: 0.1rem;
}
main .top-story-item:hover .top-story-number { color: var(--primary-blue); }

main .top-story-text {
    color: #22304a;
    font-size: 0.87rem;
    font-weight: 600;
    line-height: 1.45;
}
main .top-story-item:hover .top-story-text { color: var(--primary-blue); }

/* #1 story — subtle highlight */
main .top-stories li:first-child .top-story-item {
    background: #fffbf0;
    box-shadow: inset 3px 0 0 var(--primary-yellow);
}
main .top-stories li:first-child .top-story-text { font-weight: 700; }

/* Slim scrollbar */
main .top-grid .top-stories ul::-webkit-scrollbar { width: 5px; }
main .top-grid .top-stories ul::-webkit-scrollbar-track { background: transparent; }
main .top-grid .top-stories ul::-webkit-scrollbar-thumb {
    background: #dbe2ec;
    border-radius: 4px;
}

/* ======================================================
   HERO — clean, polished feature card (final redesign)
   ====================================================== */
main .hero-section {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(13, 35, 71, 0.22);
    position: relative;
    background: #0d2347;
}
main .hero-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
main .hero-section .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s ease;
}
main .hero-link:hover .hero-image { transform: scale(1.05); }

/* Bottom gradient — strong enough for text, fades out cleanly */
main .hero-content {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(8, 22, 46, 0.96) 0%, rgba(8, 22, 46, 0.72) 52%, transparent 100%);
    padding: 3.2rem 1.6rem 1.35rem;
    z-index: 2;
}
main .hero-section { position: relative; }
main .hero-section .hero-image-wrap { height: 100%; }
main .hero-section img.hero-image { height: 100%; object-fit: cover; }

/* Gold "Habari Kuu" badge */
main .hero-category-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--primary-yellow);
    color: #1a2b45;
    font-weight: 800;
    font-size: 0.72rem;
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    width: fit-content;
}

/* Headline */
main .hero-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.28;
    margin: 0.7rem 0 0.5rem;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,0.45);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 768px) { main .hero-title { font-size: 1.8rem; } }
@media (min-width: 1200px) { main .hero-title { font-size: 1.95rem; } }
main .hero-link:hover .hero-title { color: #ffe9a8; transition: color 0.2s; }

/* Excerpt */
main .hero-excerpt {
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(226, 234, 244, 0.92);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Date line */
main .hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.65rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(200, 214, 232, 0.85);
}
main .hero-meta i { color: var(--primary-yellow); font-size: 0.8rem; }

@media (max-width: 575px) {
    main .hero-content { padding: 2.4rem 1rem 1rem; }
    main .hero-title { font-size: 1.25rem; -webkit-line-clamp: 3; }
}

/* ======================================================
   HOMEPAGE POLISH — subtle, consistent, quiet
   ====================================================== */
/* News cards: softer shape, even heights, calmer accent */
main .news-card {
    border: 1px solid #e8edf3;
    border-top: 3px solid var(--primary-blue);
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(13, 35, 71, 0.06);
}
main .news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(13, 35, 71, 0.12);
    border-top-color: var(--primary-yellow);
}
main .news-card-image { height: 180px; }
@media (min-width: 992px) { main .news-card-image { height: 190px; } }
main .news-card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
main .news-card-content { padding: 0.9rem 0.95rem; }
main .news-card-meta { font-size: 0.72rem; color: #8a95a5; }
main .news-card-meta i { color: var(--primary-yellow); }

/* Category section headers: cleaner underline */
main .category-showcase-header {
    border-bottom: 2px solid #e8edf3;
    padding-bottom: 0.65rem;
    margin-bottom: 1.35rem;
}
main .category-showcase h2 { font-size: 1.05rem; }
main .category-showcase h2 a { position: relative; padding-bottom: 0.45rem; }
main .category-showcase h2 a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -0.65rem;
    height: 3px; width: 100%;
    background: var(--primary-yellow);
    border-radius: 3px;
}
main .category-showcase .see-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
main .category-showcase .see-all-link:hover { color: var(--primary-blue); }

/* Ad row: softer corners */
main .ad-item img { border-radius: 12px; }

/* Grid rhythm */
main .news-grid { gap: 1rem; padding-bottom: 0.25rem; }
main .news-grid::-webkit-scrollbar { height: 6px; }
main .news-grid::-webkit-scrollbar-thumb { background: #dbe2ec; border-radius: 4px; }

/* ======================================================
   HERO — final polish: entrance animation + readability
   ====================================================== */
main .hero-section { animation: heroFadeIn 0.6s ease; }
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Content rises into place */
main .hero-content > * { animation: heroRise 0.55s cubic-bezier(.2,.7,.3,1) both; }
main .hero-content > *:nth-child(1) { animation-delay: 0.05s; }
main .hero-content > *:nth-child(2) { animation-delay: 0.14s; }
main .hero-content > *:nth-child(3) { animation-delay: 0.22s; }
main .hero-content > *:nth-child(4) { animation-delay: 0.3s; }
@keyframes heroRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Gold headline glow on hover */
main .hero-link .hero-title { position: relative; }
main .hero-link:hover .hero-title { color: #ffd24d; text-shadow: 0 2px 18px rgba(0,0,0,0.5); }
/* 'Soma zaidi' hint arrow on hover */
main .hero-content::after {
    content: 'Soma habari →';
    display: inline-block;
    margin-top: 0.7rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--primary-yellow);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s, transform 0.25s;
}
main .hero-link:hover .hero-content::after { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    main .hero-section, main .hero-content > * { animation: none; }
}

/* ======================================================
   HERO — continuous gentle Ken Burns on the image
   ====================================================== */
main .hero-section .hero-image {
    animation: heroKenBurns 24s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}
main .hero-link:hover .hero-image { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) {
    main .hero-section .hero-image { animation: none; }
}

/* ======================================================
   CNN / BBC RESTYLE — headline strip, 3-col hero zone,
   category columns with lead story + compact items
   ====================================================== */

/* --- Top grid: hero | trending | latest (hero on the left) --- */
@media (min-width: 992px) {
    main .top-grid {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.85fr) minmax(0, 0.85fr) !important;
        gap: 1.5rem !important;
    }
    main .top-grid .hero-section { grid-column: 1; grid-row: 1; }
    main .top-grid .top-stories { grid-column: 2; grid-row: 1; }
    main .top-grid .latest-rail { grid-column: 3; grid-row: 1; }
}

/* --- Latest rail: mirrors the trending sidebar chrome --- */
main .latest-rail {
    background: #ffffff;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    padding: 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
main .latest-rail h3 {
    margin: 0 0 0.6rem;
    padding: 0 0.15rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #12233d;
    border-bottom: 2px solid var(--primary-yellow);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
main .latest-rail h3 i { color: var(--primary-blue); }
main .latest-rail ul {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
main .latest-rail li { border-bottom: 1px solid #f0f3f7; }
main .latest-rail li:last-child { border-bottom: none; }
main .latest-rail ul::-webkit-scrollbar { width: 5px; }
main .latest-rail ul::-webkit-scrollbar-track { background: transparent; }
main .latest-rail ul::-webkit-scrollbar-thumb { background: #dbe2ec; border-radius: 4px; }

/* Rail item: CNN-style thumb-left, headline-right */
main .rail-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.6rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s;
    animation: anim-in-right 0.45s ease both;
    animation-delay: var(--d, 0s);
}
main .rail-item:hover { background: #f5f8fc; }
main .rail-thumb {
    width: 82px;
    height: 58px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: #eef2f6;
}
main .rail-item-text {
    font-size: 0.83rem;
    font-weight: 600;
    line-height: 1.4;
    color: #22304a;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
main .rail-item:hover .rail-item-text { color: var(--primary-blue); }

/* --- Category band: three CNN-style columns with dividers --- */
main .cnn-sections {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 2.75rem;
}
main .cat-col { padding: 0 1.5rem; min-width: 0; }
main .cat-col:first-child { padding-left: 0; }
main .cat-col:last-child { padding-right: 0; }
main .cat-col + .cat-col { border-left: 1px solid #e2e6ec; }

/* Section label: square bullet + uppercase title (CNN section headers) */
main .cat-col-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #e8edf3;
}
main .cat-col-header h2 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #12233d;
}
main .cat-col-header h2 a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
main .cat-col-header h2 a::before {
    content: '';
    display: inline-block;
    width: 0.6em;
    height: 0.95em;
    background: var(--primary-blue);
    margin-right: 0.5em;
    flex-shrink: 0;
}
main .cat-col-header h2 a:hover { color: var(--primary-blue); }
main .cat-col .see-all-link {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a95a5;
    text-decoration: none;
    white-space: nowrap;
}
main .cat-col .see-all-link:hover { color: var(--primary-blue); }

/* Lead story: borderless image + headline (CNN card style) */
main .cat-lead {
    display: block;
    text-decoration: none;
    animation: anim-in-up 0.55s ease both;
}
main .cat-lead-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    background: #eef2f6;
}
main .cat-lead-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.38;
    color: #141414;
    margin: 0.65rem 0 0.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}
main .cat-lead:hover .cat-lead-title { color: var(--primary-blue); }
main .cat-meta {
    font-size: 0.72rem;
    color: #8a95a5;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
main .cat-meta i { color: var(--primary-yellow); }

/* Compact items: thumb-left, headline-right, separated by rules */
main .cat-mini {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 0;
    border-top: 1px solid #eceff3;
    text-decoration: none;
    animation: anim-in-up 0.55s ease both;
    animation-delay: var(--d, 0s);
}
main .cat-mini-thumb {
    width: 96px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: #eef2f6;
}
main .cat-mini-text {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.45;
    color: #22304a;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}
main .cat-mini:hover .cat-mini-text { color: var(--primary-blue); text-decoration: underline; }

/* Responsive: columns stack, dividers become horizontal */
@media (max-width: 991px) {
    main .cnn-sections { grid-template-columns: 1fr; }
    main .cat-col { padding: 0; }
    main .cat-col + .cat-col {
        border-left: none;
        border-top: 1px solid #e2e6ec;
        margin-top: 2rem;
        padding-top: 2rem;
    }
    /* On mobile the rails show every story at natural height */
    main .top-grid .top-stories,
    main .top-grid .latest-rail {
        height: auto !important;
        max-height: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    main .rail-item, main .cat-lead, main .cat-mini { animation: none; }
}

/* ======================================================
   FIRST-SCREEN FIT — hero + ad row fill the viewport
   At 100% zoom on desktop, the first screen shows the
   hero zone AND the advertisement row edge-to-edge:
   100vh - (header ~180px + strip ~38px + main padding
   28px + ad margin 28px + ad height 145px) ≈ -425px
   ====================================================== */
@media (min-width: 992px) {
    main .top-grid .hero-section,
    main .top-grid .top-stories,
    main .top-grid .latest-rail {
        height: calc(100vh - 395px) !important;
        min-height: 360px !important;
    }
}

/* ======================================================
   CATEGORY STRIP — all news categories, horizontally
   scrollable pill nav below the category columns
   ====================================================== */
.category-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 1rem 0 0.25rem;
    margin-top: 1.75rem;
    border-top: 1px solid #e2e6ec;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.category-strip::-webkit-scrollbar { height: 5px; }
.category-strip::-webkit-scrollbar-thumb { background: #c7cedb; border-radius: 3px; }
.category-strip .cat-strip-link {
    flex: 0 0 auto;
    padding: 0.45rem 1.1rem;
    border: 1px solid #d4dbe6;
    border-radius: 999px;
    background: #fff;
    color: #12233d;
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
.category-strip .cat-strip-link:hover {
    background: var(--primary-blue, #0057B8);
    border-color: var(--primary-blue, #0057B8);
    color: #fff;
    transform: translateY(-1px);
}
.category-strip .cat-strip-link:active,
.category-strip .cat-strip-link[aria-current] {
    background: var(--primary-blue, #0057B8);
    border-color: var(--primary-blue, #0057B8);
    color: #fff;
}
@media (min-width: 992px) {
    .category-strip { justify-content: center; flex-wrap: wrap; }
}