/* Base typography */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Sinhala:wght@400;600;700&family=Noto+Serif+Sinhala:wght@400;600&family=Yaldevi:wght@300;400;500;600&display=swap');


/* Base typography */
body {
    font-family: 'Yaldevi', sans-serif;
    background-color: #ffffff;
    color: #111111;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease-in-out, text-decoration-color 0.3s ease;
}

a:hover {
    color: #1456d9 !important; 
    text-underline-offset: 3px; 
} 

.img-fluid{border-radius: 6px !important}
.sinhala-head { font-family: "Noto Sans Sinhala", sans-serif; font-weight: 600; font-size: 18px}
.sinhala-head-red {font-family: 'Yaldevi', sans-serif; color: #B71C1C !important;}
.sinhala-head-bl {font-family: 'Yaldevi', sans-serif; color: #000000 !important;}
/* Top info bar */
.top-info-bar {
    font-size: 13px;
    color: #444444;
}
.image-cont {
    width: 100%;
    aspect-ratio: 5 / 3 !important;      
    object-fit: cover;        
    object-position: center; 
    display: block;
}

/* Social icons in top bar */
.social-icons i {
    font-size: 16px;
}

/* Header main area */
.header-main {
    gap: 1rem;
}

.header-logo {
    height: 70px;
    max-width: 100%;
}

/* Left controls: Sections + Search + E-paper links */
.header-controls {
    min-width: 190px;
}

/* Make Sections & Search same height and aligned */
.header-control-btn {
    height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* E-paper links under the buttons */
.epaper-links {
    font-size: 13px;
}

.epaper-links a {
    color: #555555;
    text-decoration: none;
    margin: 0 4px;
}

.epaper-links a:hover {
    text-decoration: underline;
}

/* Right side */
.header-weather {
    min-width: 150px;
}

/* Main navigation */
.main-nav a {
    font-size: 15px;
    font-family: "Noto Sans Sinhala", sans-serif;
    padding: 6px 10px;
    color: #111111;
    text-decoration: none;
    white-space: nowrap;
	font-weight: 600;
}

.main-nav a:hover {
    color: #0d6efd;
}

/* Trending bar */
.trending-bar {
    text-align: center;
}

.trending-label {
    font-size: 14px;
}

/* Buttons inside trending */
.trending-bar .btn {
    font-family: 'Yaldevi', sans-serif;
    font-size: 13px;
    border-radius: 999px;
    padding: 4px 14px;
}

/* Offcanvas sidebar */
.offcanvas-body a {
    color: #111111;
    font-size: 15px;
}

.offcanvas-body a:hover {
    color: #d10000;
}

/* Weather icon */
.weather-icon {
    font-size: 22px;
}

/* Small buttons */
.btn-primary.btn-sm,
.btn-dark.btn-sm {
    padding: 4px 12px;
}
.black-bottom-bar{border-bottom: 2px solid #000; margin-bottom: 15px}
/* Responsive tweaks */
@media (max-width: 767.98px) {

    .header-main {
        flex-direction: column;
        text-align: center;
    }

    .header-controls {
        align-items: center;
    }

    .header-weather {
        text-align: center !important;
        margin-top: 0.5rem;
    }

    .header-weather .d-flex {
        justify-content: center !important;
    }

    .main-nav a {
        font-size: 14px;
    }

    .trending-bar .btn {
        margin-bottom: 4px;
    }
}

/* ===================== OFFCANVAS MENU (SECTIONS) ===================== */

.main-menu-m {
    padding-left: 0;
    margin: 0;
}

.main-menu-m > li {
    position: relative;
    border-bottom: 1px solid #e9ecef;
}

.main-menu-m > li:last-child {
    border-bottom: none;
}

.main-menu-m a {
    display: block;
    padding: 10px 14px;
    font-size: 15px;
    text-decoration: none;
    color: #111111;
}

.main-menu-m a:hover {
    background-color: #f5f5f5;
    color: #d10000;
}

/* Sub menu for "මැතිවරණ ප්‍රතිඵල" */
.sub-menu-m {
    display: none;
    padding-left: 10px;
    background-color: #f8f9fa;
}

.sub-menu-m li a {
    padding: 8px 16px;
    font-size: 14px;
}

/* Show submenu when parent li has .open */
.has-submenu.open > .sub-menu-m {
    display: block;
}

/* Arrow button on the right side of the parent li */
.arrow-main-menu-m {
    position: absolute;
    top: 0;
    right: 4px;
    height: 100%;
    padding: 0 10px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.arrow-main-menu-m i {
    font-size: 14px;
    transition: transform 0.2s ease;
}

/* Rotate arrow when open */
.has-submenu.open .arrow-main-menu-m i {
    transform: rotate(180deg);
}




/* ===================== MAIN TOP NEWS BLOCK ===================== */

.main-top-block {
    border-bottom: 1px solid #eee;
}

/* Sinhala serif body text (Noto Serif Sinhala) */
.sinhala-body {
    font-family: "Noto Serif Sinhala", serif;
}

/* Use serif for reading text */
.story-teaser,
.lead-intro,
.timeline-title,
.sub-story-title {
     font-family: "Noto Sans Sinhala", sans-serif;
}

/* Section title */
.section-title {
    font-size: 24px;
    font-weight: 600;
}

/* Highlight story (left column) */
.highlight-story .badge {
    font-size: 11px;
}

.highlight-title {
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 6px;
	font-weight: 900
}

.story-teaser {
    font-size: 13px;
    color: #555;
}

.story-meta {
    font-size: 12px;
    color: #777;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.story-meta i {
    margin-right: 4px;
}

/* Timeline list */
.timeline-list {
    border-left: 2px solid #000;
    padding-left: 16px;
    margin-top: 10px;
    position: relative;
}

.timeline-item {
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 0px;
}

/* Dot centered on the vertical line */
.timeline-item::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #000;
    transform: translateX(-50%);
}

.timeline-date {
    font-size: 11px;
    color: #666;
    margin-bottom: 4px;
}

.timeline-title {
    font-size: 14px;
    line-height: 1.5;
}

.more-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    font-weight: 500;
}

.more-link:hover {
    text-decoration: underline;
}

/* Lead story (middle column) */
.lead-title {
    font-size: 25px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.lead-intro {
    font-size: 14px;
    color: #444;
}

/* Sub stories under main image */
.sub-story-title {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 4px;
}

.sub-story-img {
    max-width: 40%;
}

/* Ad block */
.ad-block {
    background-color: #f8f9fa;
    padding: 4px;
}

/* Responsive tweaks for top block */
@media (max-width: 991.98px) {
    .lead-title {
        font-size: 20px;
    }
}

@media (max-width: 767.98px) {
    .sub-story-img {
        max-width: 100%;
    }

    .timeline-list {
        border-left-width: 1px;
    }

    .timeline-item::before {
        width: 7px;
        height: 7px;
    }
}
/* Mobile header row */
.header-main-mobile .header-logo-mobile {
    height: 46px;
    max-width: 150px;
}

/* Make mobile header buttons visually similar to desktop controls */
.header-main-mobile .btn-sm {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 14px;
}

/* Optional: hide the "Sections" text on very narrow screens */
@media (max-width: 360px) {
    .header-main-mobile .btn-sm span {
        display: none;
    }
}
.header-main-mobile {border-bottom: 2px solid #dee2e6;}
 
/* ===================== ESANA QUICK NEWS LIST ===================== */

.esana-block {
    border-bottom: 1px solid #eee;
}

.esana-block .section-title {
    font-size: 24px;
    border-top: 1px solid rgba(0,0,0,0.1450980392);
    padding-top: 8px;
}

.esana-list {
    margin-top: 10px;
}

.esana-item {
    /* border / spacing already added via classes in HTML */
}

.esana-title {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 6px;
}

.esana-teaser {
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
	font-family: "Noto Sans Sinhala", sans-serif;
}

/* reuse story-meta but allow a bit tighter spacing */
.esana-meta {
    font-size: 12px;
}

.esana-thumb img {
    border-radius: 6px;
    display: block;
}

/* On small screens, make thumb full width above text if you like */
@media (max-width: 575.98px) {
    .esana-item {
        align-items: stretch;
    }

    .esana-thumb {
        order: -1;
        width: 100%;
    }

    .esana-thumb img {
        width: 100%;
        max-width: 260px;
        margin-left: auto;
        margin-right: auto;
    }
}
.esana-thumb img {
    width: 120px;
    height: auto;
    display: block;
}

@media (max-width: 400px) {
    .esana-thumb img {
        width: 100px;
    }
}
.esana-thumb-img{ float:right} 
.esana-thumb-img {
    width: 120px !important;
    height: 77px !important;
    object-fit: cover;      /* crop sides or top/bottom */
    object-position: center; /* crop evenly */
    border-radius: 6px;     /* optional */
    display: block;
}
.three-line-spliter {
  display: block;
  width: 100%;
  padding: 3px 0;
  margin: 10px 0px 7px 0px;
  border-top: 1px solid rgba(0,0,0,0.1450980392);
  border-bottom: 1px solid rgba(0,0,0,0.1450980392);
}


.features-block .feature-title {
    font-size: 18px;
    line-height: 1.5;
}

.feature-teaser {
    font-size: 14px;
    color: #444;
	font-family: "Noto Sans Sinhala", sans-serif;
}

.feature-mini-title {
    font-size: 15px;
    line-height: 1.5;
}

.feature-mini .story-meta {
    font-size: 12px;
    color: #777;
}

.feature-large img,
.feature-mini img {
    border-radius: 6px;
}
.underline {border-bottom: 1px solid #ccc}
.underlines {border-bottom: 1px solid #ccc; padding-bottom: 10px}


/* ===================== CARTOON SLIDER ===================== */

.cartoon-section {
    background: linear-gradient(180deg, #e4efff 0%, #d7e3ff 100%);
    border-radius: 10px;
    padding: 18px 18px 22px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.cartoon-title {
    font-size: 26px;
    margin-bottom: 12px;
}

/* viewport + track */
.cartoon-slider-wrapper {
    position: relative;
}

.cartoon-slider {
    overflow: hidden;
}

.cartoon-track {
    display: flex;
    transition: transform 0.4s ease;
}

/* each slide */
.cartoon-item {
    flex: 0 0 33.3333%;
    padding: 0 10px;
    box-sizing: border-box;
}

.cartoon-img {
    border-radius: 6px;
    display: block;
    width: 100%;
}

.cartoon-item-title {
    font-size: 16px;
    line-height: 1.5;
}

.cartoon-item-meta {
    font-size: 13px;
    color: #555;
}

/* nav buttons */
.cartoon-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.cartoon-prev {
    left: -16px;
}

.cartoon-next {
    right: -16px;
}

.cartoon-nav i {
    font-size: 14px;
}

/* disabled state */
.cartoon-nav.is-disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* footer text */
.cartoon-footnote {
    font-size: 14px;
    color: #333;
}

.cartoon-link {
    font-size: 14px;
    text-decoration: none;
    color: #000;
}

.cartoon-link:hover {
    text-decoration: underline;
}

/* ---- responsive slides: 2 on tablet, 1 on mobile ---- */
@media (max-width: 991.98px) {   /* md breakpoint */
    .cartoon-item {
        flex: 0 0 50%;
    }

    .cartoon-prev {
        left: -8px;
    }

    .cartoon-next {
        right: -8px;
    }
}

@media (max-width: 575.98px) {   /* sm breakpoint */
    .cartoon-item {
        flex: 0 0 100%;
    }

    .cartoon-section {
        padding: 14px 12px 18px;
    }

    .cartoon-title {
        font-size: 22px;
    }
}




/* ===================== LANKADEEPA FT BLOCK ===================== */

.ft-block {
    background-color: #fff7f0; /* FT-style salmon tone */
    border-radius: 10px;
    padding: 16px 16px 18px;
    margin-bottom: 24px;
}

.ft-title {
    font-size: 22px;
    margin-bottom: 12px;
}

.ft-card {
    background-color: #fff1e5; /* slightly lighter */
    border-radius: 8px;
    padding: 10px 10px 12px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ft-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

/* category labels like FT tabs */
.ft-category {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 999px;
    background-color: #e6d8cf;
    color: #4a2a18;
    margin-bottom: 6px;
}

.ft-category-companies {
    background-color: #e0eaf2;
    color: #1b3b5a;
}

.ft-category-opinion {
    background-color: #f3dfec;
    color: #582052;
}

.ft-category-tech {
    background-color: #dff3e8;
    color: #175c3c;
}

.ft-thumb {
    border-radius: 6px;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 5 / 3;      
    object-position: center; 
    display: block;
}

.ft-headline {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 4px;
    margin-bottom: 6px;
}

.ft-teaser {
    font-size: 13px;
    color: #444;
    margin-bottom: 6px;
}

.ft-meta {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
}

/* responsiveness */
@media (max-width: 575.98px) {
    .ft-block {
        padding: 12px;
    }

    .ft-headline {
        font-size: 15px;
    }
}

/* ===================== SPORTS FT BLOCK ===================== */

.sports-ft-block {
    margin-bottom: 24px;
    background: linear-gradient(180deg, #c9f7d8 0%, #76c78c 100%);
    border-radius: 10px;
    padding: 16px 16px 20px;
}


.sports-ft-title {
    font-size: 22px;
    margin-bottom: 12px;
}

.sports-ft-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 10px 10px 12px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    border: 1px solid rgba(0, 112, 192, 0.06);
}

.sports-ft-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.14);
    transform: translateY(-2px);
}

/* Category labels */
.sports-ft-category {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    border-radius: 999px;
    background-color: #d2ecff;
    color: #004a7a;
    margin-bottom: 6px;
}

.sports-ft-category-football {
    background-color: #d8f4df;
    color: #14572b;
}

.sports-ft-category-olympic {
    background-color: #f5e7ff;
    color: #5a268a;
}

.sports-ft-category-analysis {
    background-color: #ffeacc;
    color: #7a3d00;
}

.sports-ft-thumb {
    border-radius: 6px;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.sports-ft-headline {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 4px;
    margin-bottom: 6px;
}

.sports-ft-teaser {
    font-size: 13px;
    color: #444;
    margin-bottom: 6px;
    font-family: "Noto Serif Sinhala", serif;
}

.sports-ft-meta {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
}

/* small tweak for phones */
@media (max-width: 575.98px) {
    .sports-ft-block {
        padding: 12px;
    }

    .sports-ft-headline {
        font-size: 15px;
    }
}



/* ===================== BUSINESS SIDEBAR (ව්‍යාපාර) ===================== */

.business-sidebar {
    margin-top: 1.5rem;
}

.business-sidebar .section-title {
    font-size: 24px;
}

.business-item {
    align-items: flex-start;
}

.business-thumb {
    flex-shrink: 0;
    width: 80px;
}

.business-thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.business-body {
    flex: 1;
}

.business-title {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 4px;
}

.business-meta {
    font-size: 11px;
    gap: 8px;
}

.business-meta i {
    margin-right: 3px;
}

@media (max-width: 991.98px) {
    .business-thumb {
        width: 70px;
    }

    .business-title {
        font-size: 13px;
    }
}


/* ===================== CARTOON SIDEBAR ===================== */

.cartoon-sidebar {
    margin-top: 2rem;
}

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

/* main cartoon */
.cartoon-img-main {
    border-radius: 4px;
    display: block;
}

.cartoon-date {
    font-size: 13px;
    color: #333;
}

/* small cartoons */
.cartoon-img-small {
    border-radius: 4px;
    display: block;
}

.cartoon-date-small {
    font-size: 12px;
    color: #555;
}

.cartoon-divider {
    border-top: 1px solid #e0e0e0;
}

/* small tweak for mobile */
@media (max-width: 575.98px) {
    .cartoon-sidebar .section-title {
        font-size: 18px;
    }
}



/* ===================== VIDEO SECTION ===================== */

.video-block .section-title {
    font-size: 22px;
}

/* Thumbnail container for overlay */
.video-thumb-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}

/* Play icon overlay */
.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65px;
    height: 65px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-play-icon i {
    font-size: 26px;
    color: #fff;
}

/* Smaller icons for small videos */
.video-play-icon.small {
    width: 48px;
    height: 48px;
}

.video-small-title {
    font-size: 14.5px;
    line-height: 1.4;
}

/* Responsive tweaks */
@media (max-width: 575.98px) {
    .video-small-title {
        font-size: 13.5px;
    }
}



/* ===================== MIDDLE EAST FIXED ===================== */

.middle-east-block {
    border-top: 2px solid #000;
    padding-top: 10px;
}

/* Main feature */
.me-feature-img {
    width: 100%;
    border-radius: 4px;
}

.me-feature-title {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.me-feature-teaser {
    font-size: 14px;
    color: #444;
    margin-bottom: 10px;
    font-family: "Noto Serif Sinhala", serif;
}

/* List items (image MUST stay right) */
.me-item {
    align-items: flex-start;
}
.me-item-thumb {
    flex: 0 0 120px;     
    max-width: 120px;
}
.me-item-thumb img {
     width: 100% !important;         
    height: 75px;          
    object-fit: cover;     
    border-radius: 4px;
}

.me-item-title {
    font-size: 15px;
    line-height: 1.5;
}

/* MOBILE FIXES */
@media (max-width: 576px) {

    .me-item {
        flex-direction: column;
    }

    .me-item-thumb {
        margin-left: 0 !important;
        margin-top: 10px;
    }

    .me-item-thumb img {
        width: 100%;
        height: auto;
    }
}


/* ===================== SIRIKATHA TITLE STRIP ===================== */

.sirikatha-header {
    border-top: 2px solid #000;
    border-bottom: 1px solid #e0e0e0;
    background-color: #ffffff;
}

/* logo */
.sirikatha-logo img {
    max-height: 55px;
    height: auto;
}

/* nav */
.sirikatha-nav a {
     font-family: 'Yaldevi', sans-serif;
    font-size: 15px;
    text-decoration: none;
    color: #333;
    letter-spacing: 0.02em;
	font-weight: bold
}

.sirikatha-nav a:hover {
    color: #d10000;
}

/* mobile tweaks */
@media (max-width: 575.98px) {
    .sirikatha-header {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .sirikatha-logo img {
        max-height: 48px;
    }

    .sirikatha-nav {
        justify-content: center;
    }

    .sirikatha-nav a {
        font-size: 14px;
    }
}



/* ===================== SIRIKATHA MAIN GRID ===================== */

.sirikatha-main {
    border-top: 1px solid #e0e0e0;
}

/* Generic card */
.sk-card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    height: auto;
}

.sk-card-img {
    width: 100%;
    height: auto;
    display: block;
}

.sk-card-body {
    padding: 12px 14px 14px;
}

.sk-card-title {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 6px;
}

.sk-card-teaser {
    font-size: 14px;
    color: #444;
    margin-bottom: 8px;
    font-family: "Noto Serif Sinhala", serif;
}

.sk-card-meta {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #555;
}

/* Tall card on the left */
.sk-card-tall .sk-card-img {
    height: 260px;
    object-fit: cover;
}

/* Main big card center */
.sk-card-main .sk-card-img {
    height: 360px;
    object-fit: cover;
}

.sk-card-main .sk-card-title {
    font-size: 20px;
}

/* Features column */
.sk-features-title {
    font-size: 22px;
    margin-bottom: 12px;
}

.sk-feature-item {
    position: relative;
}

.sk-feature-thumb {
    flex: 0 0 72px;
    max-width: 72px;
}

.sk-feature-thumb img {
    width: 100%;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
}

.sk-feature-body {
    flex: 1;
}

.sk-feature-title {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 4px;
}

.sk-feature-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666;
}

/* Bookmark button */
.sk-bookmark {
    border: none;
    background: transparent;
    padding: 0;
    color: #999;
}

.sk-bookmark i {
    font-size: 16px;
}

.sk-bookmark:hover {
    color: #d10000;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
    .sk-card-main .sk-card-img {
        height: 300px;
    }
}

@media (max-width: 575.98px) {
    .sk-card-main .sk-card-img {
        height: 230px;
    }

    .sk-card-main .sk-card-title {
        font-size: 18px;
    }

    .sk-feature-thumb {
        flex: 0 0 64px;
        max-width: 64px;
    }

    .sk-feature-thumb img {
        height: 64px;
    }
}

/* =============== SUNDAY LANKADEEPA SECTION ================= */

.sunday-title-bar {
    border-top: 2px solid #000;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fff;
}

.sunday-logo img {
    max-height: 55px;
    height: auto;
	padding: 5px 0px 5px 0px;
}

.sunday-nav a {
     font-family: 'Yaldevi', sans-serif;
    font-size: 14px;
    color: #333;
    text-decoration: none;
	font-weight: bold
}

.sunday-nav a:hover {
    color: #d10000;
}

/* Left column text list */
.sunday-list-title {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 4px;
}

.sunday-list-teaser {
    font-size: 13px;
    color: #555;
	font-family: "Noto Serif Sinhala", serif;
}

/* Middle hero */
.sunday-hero-card {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
}

.sunday-hero-img-wrap {
    overflow: hidden;
}

.sunday-hero-img {
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.sunday-hero-title {
    font-size: 22px;
    line-height: 1.5;
}

.sunday-hero-teaser {
    font-size: 14px;
    color: #444;
	font-family: "Noto Serif Sinhala", serif;
}

/* Right features */
.sunday-features-title {
    font-size: 20px;
}

.sunday-feature-thumb {
    flex: 0 0 70px;
    max-width: 70px;
}

.sunday-feature-thumb img {
    width: 100%;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
}

.sunday-feature-title {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 4px;
}

.sunday-feature-meta {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #777;
}

/* Bottom mini cards */
.sunday-mini-card {
    background-color: #fff;
}

.sunday-mini-img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    margin-bottom: 6px;
}

.sunday-mini-title {
    font-size: 14px;
    line-height: 1.4;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
    .sunday-hero-img {
        height: 260px;
    }
}

@media (max-width: 575.98px) {
    .sunday-nav {
        justify-content: center;
    }

    .sunday-logo img {
        max-height: 50px;
    }

    .sunday-hero-img {
        height: 220px;
    }

    .sunday-left,
    .sunday-middle,
    .sunday-right {
        margin-bottom: 1.5rem;
    }
}



/* ===== Middle Column Vertical Borders ===== */
.middle-column-bordered {
    border-left: 2px solid #e5e5e5;
    border-right: 2px solid #e5e5e5;
    padding-left: 25px;
    padding-right: 25px;
}

/* Remove borders on mobile (optional, for nice view) */
@media (max-width: 991px) {
    .middle-column-bordered {
        border-left: none;
        border-right: none;
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 20px;
    }
}



/* ===================== STRONG NEWSROOM FOOTER ===================== */

.site-footer {
    background: #111;            /* deep newsroom black */
    color: #ddd;                 /* soft white */
    border-top: 4px solid #0d6efd;
    padding-bottom: 20px;
    font-size: 15px;
}

.site-footer a {
    color: #f1f1f1;
    text-decoration: none;
}

.site-footer a:hover {
    color: #ff3b3b;              /* strong red hover */
}

/* TOP TITLE */
.footer-main-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

/* SOCIAL ICONS */
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #222;
    color: #bbb;
    font-size: 16px;
    border: 1px solid #333;
    margin-left: 6px;
    transition: 0.2s;
}

.footer-social a:hover {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

/* COLUMN HEADINGS */
.footer-heading {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
    border-left: 3px solid #0d6efd;
    padding-left: 8px;
}

/* LISTS */
.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    margin-bottom: 6px;
    line-height: 1.4;
}

/* CONTACT SECTION */
.footer-contact-block {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #222;
}

.footer-contact-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.footer-contact-block p {
    margin: 0 0 4px;
}

.footer-contact-block i {
    color: #0d6efd;
    margin-right: 6px;
}

/* BOTTOM COPYRIGHT */
.footer-divider {
    border-color: #222;
    margin-top: 40px;
}

.footer-copy {
    color: #bbb;
    font-size: 13px;
    letter-spacing: 0.3px;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .footer-links-row > div {
        margin-bottom: 35px;
    }

    .site-footer {
        padding-top: 40px;
    }
}

@media (max-width: 575px) {
    .footer-main-title {
        text-align: center;
    }

    .footer-social {
        text-align: center !important;
        margin-top: 12px;
    }

    .footer-heading {
        margin-top: 18px;
    }
}



/* ===================== ARTICLE INNER PAGE ===================== */

.article-page {
    border-top: 2px solid #000; /* aligns with black bar above content */
}

/* breadcrumb */
.article-breadcrumb a {
    color: #777;
    text-decoration: none;
}
.article-breadcrumb a:hover {
    color: #d10000;
}
.article-breadcrumb .sep {
    margin: 0 4px;
    color: #aaa;
}

/* topline */
.article-topline .article-cat {
    background-color: #d10000;
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.08em;
}

/* title + deck */
.article-title {
    font-size: 2.1rem;
    line-height: 1.35;
}
.article-deck {
    font-size: 1rem;
    color: #444;
}

/* meta + share */
.article-meta {
    font-family: 'Yaldevi', sans-serif;
}
.article-share .btn {
    border-radius: 999px;
    padding: 4px 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* hero image */
.article-hero-img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: 6px;
}

/* body text */
.article-body {
    font-size: 1rem;
    line-height: 1.9;
    color: #222;
}
.article-body p + p {
    margin-top: 1rem;
}

/* comments button */
.article-comments-btn {
    border-radius: 999px;
    border: 1px solid #d10000;
    color: #d10000;
    padding: 8px 22px;
    font-weight: 500;
    background-color: #fff;
}
.article-comments-btn:hover {
    background-color: #d10000;
    color: #fff;
}

/* "In case you missed it" */
.article-more-title {
    font-size: 1.4rem;
    border-top: 1px solid #eee;
    padding-top: 1rem;
    margin-top: 0.5rem;
}
.article-more-card {
    text-decoration: none;
    color: inherit;
}
.article-more-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
}
.article-more-headline {
    font-size: 0.95rem;
    line-height: 1.4;
}
.article-more-card:hover .article-more-headline {
    color: #d10000;
}

/* responsive tweaks */
@media (max-width: 991.98px) {
    .article-title {
        font-size: 1.7rem;
    }
    .article-hero-img {
        max-height: 420px;
    }
}

@media (max-width: 575.98px) {
    .article-page {
        padding-top: 1.5rem;
    }
    .article-title {
        font-size: 1.5rem;
    }
    .article-hero-img {
        max-height: 320px;
    }
}
/* share / meta buttons */
.article-share .btn {
    border-radius: 999px;
    padding: 4px 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: #ddd;
}

/* bookmark can just inherit; optional subtle tweak */
.article-bookmark-btn i {
    font-size: 15px;
}

/* comment count pill (like your screenshot) */
.article-comments-pill {
    width: auto;              /* override the fixed 32px */
    min-width: 0;
    padding: 4px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    border-color: #ddd;
    color: #333;
    background-color: #fff;
}

.article-comments-pill i {
    font-size: 14px;
}

.article-comments-pill:hover {
    background-color: #f5f5f5;
}

/* ================= CATEGORY PAGE (LESĀ) ================= */

.category-page {
    border-top: 1px solid #eee;
}

/* header */
.cat-title {
    font-size: 26px;
    color: #b00000;       /* same red tone you use for sections */
}

.cat-breadcrumb span {
    font-weight: 600;
}

.cat-divider {
    margin-top: 10px;
    margin-bottom: 0;
    border-color: #ddd;
}

/* lead story */
.cat-lead-img {
    width: 100%;
    display: block;
    border-radius: 12px;
    object-fit: cover;
}

.cat-lead-title {
    font-size: 22px;
    line-height: 1.5;
}

.cat-lead-teaser {
    font-size: 14px;
    color: #444;
    margin-bottom: 8px;
	font-family: "Noto Serif Sinhala", serif;
}

/* list items */
.cat-list-item {
    position: relative;
}

.cat-item-title {
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 4px;
}

.cat-item-teaser {
    font-size: 14px;
    color: #555;
	font-family: "Noto Serif Sinhala", serif;
}

.cat-list-thumb {
    width: 32%;
    max-width: 210px;
}

.cat-thumb-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
}

/* pagination */
.cat-pagination-wrapper .page-link {
    border-radius: 999px !important;
    font-size: 14px;
    padding: 6px 14px;
    color: #333;
}

.cat-pagination-wrapper .page-item.active .page-link {
    background-color: #b00000;
    border-color: #b00000;
    color: #fff;
}

.cat-pagination-wrapper .page-item.disabled .page-link {
    color: #aaa;
}

/* responsive tweaks */
@media (max-width: 991.98px) {
    .cat-lead-title {
        font-size: 20px;
    }
}

@media (max-width: 767.98px) {
    .cat-list-item {
        flex-direction: column;
    }

    .cat-list-thumb {
        width: 100%;
        max-width: 100%;
    }

    .cat-thumb-img {
        height: 180px;
    }
}



/* ======= Article comments button ======= */
.article-comments-btn {
    border-radius: 999px;
    font-size: 13px;
    padding: 4px 12px;
}

/* ======= Offcanvas panel ======= */
.article-comments-panel {
    --bs-offcanvas-width: 390px;      /* width on desktop */
    border-left: 1px solid #e4e4e4;
    background-color: #ffffff;
    box-shadow: -4px 0 12px rgba(0,0,0,0.08);
}

@media (max-width: 767.98px) {
    .article-comments-panel {
        --bs-offcanvas-width: 100%;  /* full width on mobile */
    }
}

/* header bits */
.comments-count-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #f44336;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

/* compose area */
.comment-compose textarea {
    resize: vertical;
    font-size: 14px;
}

/* comment list */
.comment-item {
    padding: 0.75rem 0;
}

.comment-item + .comment-item {
    border-top: 1px solid #f0f0f0;
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #eee;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #555;
}

.comment-text {
    font-size: 14px;
    color: #333;
	font-family: "Noto Serif Sinhala", serif;
}

.comment-meta button {
    color: #444;
}

.comment-meta button:hover {
    text-decoration: underline;
}
.comment-compose .form-control {
    font-size: 14px;
    border-radius: 6px;
}

.comment-name-input {
    height: 38px;
}

.comment-textarea {
    resize: vertical;
}

/* ===================== MOST VIEWED ===================== */

.most-viewed-block {
    border-top: 1px solid #e5e5e5;
    padding-top: 1.25rem;
}

/* outer grid (two columns like in the screenshot) */
.most-viewed-table {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

/* right column vertical divider */
.most-viewed-table .mv-col-right {
    border-left: 1px solid #e5e5e5;
}

/* each row */
.mv-item {
    display: flex;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
}

.mv-item:last-child {
    border-bottom: none;
}

/* big number */
.mv-rank {
    font-size: 40px;
    line-height: 1;
    font-weight: 700;
    font-family: "Noto Serif Sinhala", serif; /* or your heading font */
    width: 40px;
    margin-right: 12px;
}

/* headline text */
.mv-link {
    font-size: 15px;
    line-height: 1.5;
    color: #111111;
    text-decoration: none;
}

.mv-link:hover {
    color: #d10000;
}

/* mobile: stack columns and keep borders neat */
@media (max-width: 767.98px) {
    .most-viewed-table .mv-col-right {
        border-left: none;
        border-top: 1px solid #e5e5e5;
    }

    .mv-item {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ===================== WIJEYA TEENS SECTION ===================== */

.wijeya-teens-section {
    background: linear-gradient(0deg, #fffbe5 0%, #fff 60%);
  border-bottom: 2px solid #f3d55b;
}

/* top bar */
.wt-bar {
    border-radius: 10px;
    padding: 10px 16px;
    background: #fff9cf;
    border: 1px solid #f3d55b;
}

.wt-logo {
    height: 46px;
    width: auto;
}

.wt-tagline {
    font-size: 15px;
    color: #444;
}

.wt-nav a {
    font-family: "Noto Sans Sinhala", sans-serif;
    font-size: 14px;
    text-decoration: none;
    color: #b3272a;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: rgba(179, 39, 42, 0.06);
    transition: background-color .2s, color .2s, transform .15s;
}

.wt-nav a:hover {
    background-color: #b3272a;
    color: #fff;
    transform: translateY(-1px);
}

/* cards */
.wt-card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
}

.wt-card-lg .wt-thumb-wrap {
    max-height: 230px;
}

.wt-thumb-wrap {
    position: relative;
    width: 100%;
    padding-top: 62%; /* ~16:10 ratio */
    overflow: hidden;
}

.wt-thumb-wrap .wt-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wt-body {
    padding: 10px 14px 14px;
}

.wt-cat-pill {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background-color: #ffe5e7;
    color: #b3272a;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 6px;
}

.wt-title {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 6px;
}

.wt-teaser {
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
	font-family: "Noto Serif Sinhala", serif;
}

/* mini items (right column) */
.wt-mini {
    border-radius: 12px;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid #f0f0f0;
}

.wt-mini-thumb {
    flex: 0 0 96px;
    max-width: 96px;
}

.wt-mini-thumb .wt-thumb {
    border-radius: 8px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wt-mini-title {
    font-size: 15px;
    line-height: 1.5;
}

/* trending strip */
.wt-trending-title {
    font-size: 18px;
    color: #b3272a;
}

.wt-trend-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px dashed #f3d55b;
    height: 100%;
}

.wt-trend-tag {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #777;
    margin-bottom: 4px;
}

.wt-trend-title {
    font-size: 14px;
    line-height: 1.5;
}

/* mascot */
.wt-mascot img {
    max-height: 160px;
    margin-bottom: 4px;
}

.wt-mascot-caption {
    font-size: 12px;
    color: #555;
}
.wt-mascot {margin-top: -60px;}
/* responsive */
@media (max-width: 991.98px) {
    .wt-card-lg .wt-thumb-wrap {
        max-height: none;
    }
}

@media (max-width: 767.98px) {
    .wt-bar {
        padding: 10px 12px;
    }

    .wt-logo {
        height: 40px;
    }

    .wt-nav {
        margin-top: 8px;
        width: 100%;
        justify-content: flex-start;
    }

    .wt-nav a {
        font-size: 13px;
    }

    .wt-mascot {
        margin-top: 8px;
    }

    .wt-mascot img {
        max-height: 130px;
    }
	.wt-mascot {margin-top: 0px;}
}


/* Container: horizontal layout */
.wt-left-img {
    display: flex;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    transition: 0.2s;
    background: #fff;
    border: 1px solid #eee;
}

/* Left thumbnail */
.wt-left-thumb {
    flex: 0 0 80px;      /* Fixed width */
    height: 80px;
    overflow: hidden;
    border-radius: 6px;
}

.wt-left-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Right side content */
.wt-left-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Trend tag */
.wt-trend-tag {
    font-size: 11px;
    font-weight: bold;
    color: #d01919;
    display: inline-block;
    margin-bottom: 4px;
}

/* Title */
.wt-left-img .wt-trend-title {
    font-size: 15px;
    line-height: 1.3;
    margin-bottom: 6px;
}

/* Hover effect */
.wt-left-img:hover {
    background: #f9f9f9;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

/* Mobile adjusts nicely */
@media(max-width: 575px){
    .wt-left-img {
        padding: 6px;
    }
    .wt-left-thumb {
        flex: 0 0 70px;
        height: 70px;
    }
}
.la-border-bottom{border-bottom: 1px solid #e0e0e0; padding-bottom:10px}


/* ---------------------------------------
   Saaravita colours
--------------------------------------- */
:root{
  --chip-purple:   #6d0eb1;
  --chip-magenta:  #b10ea7;
  --chip-pink:     #ff2fb3;
  --chip-red:      #ff3d63;
  --chip-orange:   #ff7a37;
  --chip-yellow:   #ffc233;
  --chip-lime:     #7bdc2b;
  --chip-teal:     #18c3a1;
  --chip-cyan:     #23b2ff;
  --chip-indigo:   #3b4dff;
  --chip-text:     #ffffff;

  --sv-bg-top:     #f7ecff;
  --sv-bg-bottom:  #f1f5ff;
  --sv-accent-1:   #ff2fb3;
  --sv-accent-2:   #6d0eb1;
}

/* whole block ----------------------------------------------------- */
.saaravita-block{
  position:relative;
  padding:20px 0 90px;
  background: linear-gradient(to bottom,var(--sv-bg-top),var(--sv-bg-bottom));
  overflow:hidden;
  border-radius: 12px;
}

/* wavy bottom bar (simplified but close to original) */
.saaravita-block::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-2px;
  width:120%;
  height:120px;
  background: linear-gradient(135deg, #6d0eb1 59%, #080ab4 100%);
  pointer-events:none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='black' d='M0,64 C160,96 320,32 480,48 C640,64 800,112 960,96 C1120,80 1280,32 1440,64 L1440,120 L0,120 Z'/%3E%3C/svg%3E")
                   repeat-x center bottom / 1440px 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='black' d='M0,64 C160,96 320,32 480,48 C640,64 800,112 960,96 C1120,80 1280,32 1440,64 L1440,120 L0,120 Z'/%3E%3C/svg%3E")
                   repeat-x center bottom / 1440px 100%;
}

/* top bar --------------------------------------------------------- */
.saaravita-inner{
  position:relative;
  z-index:1;
}

.saaravita-top{
  border-bottom:2px solid rgba(114,22,80,1);
  padding-bottom:8px;
}

.saaravita-logo img{
  max-height:54px;
}

/* chips row ------------------------------------------------------- */
.chips-scroll{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  max-width:100%;
  overflow-x:auto;
  padding:4px 0;
}

.chips-scroll::-webkit-scrollbar{
  height:4px;
}
.chips-scroll::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.15);
  border-radius:999px;
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  color:var(--chip-text);
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 6px 14px rgba(0,0,0,0.18);
  border:0;
}

/* colour sequence for chips */
.chips-scroll .chip:nth-child(1){
  background:linear-gradient(135deg,var(--chip-purple),var(--chip-cyan));
}
.chips-scroll .chip:nth-child(2){
  background:linear-gradient(135deg,var(--chip-teal),var(--chip-lime));
}
.chips-scroll .chip:nth-child(3){
  background:linear-gradient(135deg,var(--chip-pink),var(--chip-red));
}
.chips-scroll .chip:nth-child(4){
  background:linear-gradient(135deg,var(--chip-red),var(--chip-orange));
}
.chips-scroll .chip:nth-child(5){
  background:linear-gradient(135deg,var(--chip-orange),var(--chip-yellow));
}
.chips-scroll .chip:nth-child(6){
  background:linear-gradient(135deg,var(--chip-yellow),var(--chip-magenta));
}
.chips-scroll .chip:nth-child(7){
  background:linear-gradient(135deg,var(--chip-lime),var(--chip-indigo));
}

/* gradient framed image ------------------------------------------ */
.img-framed{
  border:4px solid transparent;
  border-radius:14px;
  background:
     linear-gradient(#ffffff,#ffffff) padding-box,
     linear-gradient(135deg,#ff9df5,#6b42ff,#23b2ff) border-box;
  box-shadow:0 18px 40px rgba(20,18,43,0.12);
}
.img-framed img{
  border-radius:10px;
  display:block;
  width:100%;
}

/* cards ----------------------------------------------------------- */
.sv-card,
.sv-hero-card{
  background:#ffffff;
  border-radius:18px;
  padding:14px 16px 16px;
  box-shadow:0 14px 28px rgba(23,16,80,0.08);
}

.sv-card{
  background: radial-gradient(circle at top,#ffffff 0%,#fdf6ff 40%,#ffffff 100%);
}

.sv-card-body{
  padding-top:10px;
}

.sv-card-title{
  font-size:16px;
  line-height:1.5;
}

.sv-card-meta span{
  opacity:0.8;
}

/* hero ------------------------------------------------------------ */
.sv-hero-card{
  padding:16px 18px 18px;
}

.sv-hero-label span{
  display:inline-block;
  padding:3px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,var(--sv-accent-1),var(--sv-accent-2));
  box-shadow:0 6px 14px rgba(20,18,43,0.22);
  margin-bottom:8px;
}

.sv-hero-title{
  font-size:22px;
  line-height:1.5;
  margin-bottom:8px;
}

.sv-hero-text{
  font-size:14px;
  line-height:1.7;
  color:#3b2f4f;
	font-family: "Noto Serif Sinhala", serif;
}

.sv-hero-meta{
  margin-top:10px;
}
.sv-hero-link{
  font-weight:600;
  font-size:13px;
  color:var(--sv-accent-2);
  text-decoration:none;
}

/* trending -------------------------------------------------------- */
.sv-trending{
  height:100%;
}

.sv-trending-header{
  margin-bottom:10px;
}

.sv-trending-title{
  display:inline-block;
  padding:6px 18px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  color:#fff;
  background:linear-gradient(135deg,#ff2fb3,#6d0eb1);
  box-shadow:0 6px 16px rgba(20,18,43,0.3);
}

.sv-trending-body{
  background:#ffffff;
  border-radius:18px;
  padding:12px 10px 10px;
  box-shadow:0 14px 28px rgba(23,16,80,0.08);
  background-image:linear-gradient(#ffffff,#ffffff);
}

/* each trending item */
.sv-trend-item{
  display:grid;
  grid-template-columns:auto 80px 1fr;
  gap:8px;
  padding:10px 6px;
  border-radius:14px;
  position:relative;
  margin-bottom:8px;
  background:linear-gradient(#ffffff,#ffffff) padding-box,
             linear-gradient(135deg,#e0d5ff,#ffc6f5) border-box;
  border:2px solid transparent;
}

.sv-trend-item:last-child{
  margin-bottom:0;
}

.sv-trend-num{
  align-self:flex-start;
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#fff;
  font-size:15px;
  background:linear-gradient(135deg,#ff2fb3,#6d0eb1);
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
}

.sv-trend-thumb img{
  border-radius:10px;
  width:100%;
  display:block;
}

.sv-trend-text h4{
  font-size:14px;
  line-height:1.5;
  margin-bottom:4px;
}
.sv-trend-meta{
  color:#666;
  font-size:12px;
}

/* responsive tweaks ----------------------------------------------- */
@media (max-width: 991.98px){
  .sv-trend-item{
    grid-template-columns:auto 72px 1fr;
  }
}

@media (max-width: 767.98px){
  .saaravita-block{
    padding-bottom:70px;
  }
  .sv-hero-title{
    font-size:19px;
  }
  .sv-card,
  .sv-hero-card{
    margin-bottom:10px;
  }
}


/* ================= TECHNOLOGY SECTION =================== */

.tech-block{
    background-color:#ffffff;
    border-top:1px solid #e5e5e5;
    padding-top:24px;
}

/* header strip */
.tech-header .section-title{
    font-size:28px;
    letter-spacing:0.02em;
}

.tech-subnav a{
    text-decoration:none;
    color:#555;
    margin-left:18px;
    font-size:11px;
    letter-spacing:0.08em;
}
.tech-subnav a:first-child{ margin-left:0; }
.tech-subnav a:hover{
    color:#bb1919;
}

/* main article */
.tech-main-article{
    padding-right:8px;
}
.tech-main-img img{
    width:100%;
    display:block;
    object-fit:cover;
}
.tech-main-title{
    font-size:20px;
    line-height:1.3;
    margin-bottom:8px;
}
.tech-main-teaser{
    font-size:14px;
    line-height:1.6;
    color:#444;
	font-family: "Noto Serif Sinhala", serif;
}

/* stacked middle column */
.tech-secondary-img img{
    width:100%;
    object-fit:cover;
}
.tech-secondary-title{
    font-size:16px;
    line-height:1.4;
}

/* sidebar */
.tech-sidebar{
    border-left:1px solid #e5e5e5;
}
@media(max-width:991.98px){
    .tech-sidebar{
        border-left:none;
        border-top:1px solid #e5e5e5;
        padding-top:16px;
        margin-top:8px;
    }
}

/* wrapper behaves like NYTimes side card */
.tech-side-article {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* text column takes remaining width */
.tech-side-text {
    flex: 1 1 auto;
}

/* title & teaser styling */
.tech-side-title {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 0.4rem;
}

.tech-side-teaser {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #555;
    margin-bottom: 0.35rem;
}

/* meta line */
.tech-side-article .story-meta {
    font-size: 0.75rem;
    color: #888;
}

/* right thumbnail */
.tech-side-thumb {
    flex: 0 0 84px;              /* fixed column width */
}

.tech-side-thumb img {
    width: 100%;
    height: 84px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* small-screen tweak: stack image below text if very narrow */
@media (max-width: 480px) {
    .tech-side-article {
        flex-direction: row;     /* keep row – looks fine on phones too */
    }
}


/* GENERAL BUTTON STYLE */
.trending-bar .btn {
    font-weight: 600;
    border-width: 2px;
    padding: 3px 12px;
    border-radius: 20px;
    transition: 0.2s ease;
	color: currentColor
}
.trending-bar .btn:hover{color: #000000}

/*.irid-bt {
    color: #d62828;
    border-color: #f7b1b1;
    background: #ffecec;
}
.irid-bt:hover {
    background: #d62828;
    color: #fff !important;
}


.keli-bt {
    color: #1b8a2d;
    border-color: #b6e8c3;
    background: #e9fff0;
}
.keli-bt:hover {
    background: #1b8a2d;
     color: #fff !important;
}


.siri-bt {
    color: #d61b86;
    border-color: #f7c1df;
    background: #ffe8f4;
}
.siri-bt:hover {
    background: #d61b86;
     color: #fff !important;
}


.mada-bt {
    color: #1456d9;
    border-color: #bcd4ff;
    background: #eaf1ff;
}
.mada-bt:hover {
    background: #1456d9;
     color: #fff !important;
}


.sara-bt {
    color: #7a1bc9;
    border-color: #d6c2f7;
    background: #f4e9ff;
}
.sara-bt:hover {
    background: #7a1bc9;
     color: #fff !important;
}


.wija-bt {
    color: #b88a00;
    border-color: #ffe8a6;
    background: #fff8d9;
}
.wija-bt:hover {
    background: #b88a00;
     color: #fff !important;
}


.tech-bt {
    color: #0c8f98;
    border-color: #b6f2f5;
    background: #e9fdff;
}
.tech-bt:hover {
    background: #0c8f98;
     color: #fff !important;
}


.ft-bt {
    color: #8a4b08;
    border-color: #e3d2c3;
    background: #fff7f0;
}
.ft-bt:hover {
    background: #8a4b08;
     color: #fff !important;
}


.tv-bt {
    color: #0288d1;
    border-color: #b3e5fc;
    background: #e1f5fe;
}
.tv-bt:hover {
    background: #0288d1;
     color: #fff !important;
}



.sports-ft-card {
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    transition: 0.3s ease;
}*/

/* Card Colors */
.sports-ft-card:nth-child(1) { background: #e6ffe9; } /* Mint Green */
.sports-ft-card:nth-child(2) { background: #e8f0ff; } /* Light Blue */
.sports-ft-card:nth-child(3) { background: #fff5e6; } /* Soft Orange */
.sports-ft-card:nth-child(4) { background: #fbe8ff; } /* Soft Purple */

.sports-ft-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}



/* =========================================
   MOBILE TABS NAVIGATION 
   ========================================= */
.mobile-tabs-nav {
    display: flex;
    justify-content: space-around;
    background: #fff;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
    padding-top: 10px;
}

.mobile-tab-item {
    text-align: center;
    padding: 8px 15px;
    color: #444;
    cursor: pointer;
    flex: 1; /* Distribute space evenly */
    position: relative;
    border: none;
    background: none;
    transition: all 0.3s ease;
}

.mobile-tab-item i {
    display: block;
    font-size: 20px;
    margin-bottom: 4px;
    color: #555;
}

.mobile-tab-item span {
    font-family: "Noto Sans Sinhala", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

/* Active State (Black underline) */
.mobile-tab-item.active {
    color: #000;
}

.mobile-tab-item.active i {
    color: #000;
}

.mobile-tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #000;
}

/* Helper to hide Business/Sports on desktop */
.mobile-only-section {
    display: block;
}

@media (min-width: 768px) {
    .mobile-only-section {
        display: none !important;
    }
    .mobile-tabs-nav {
        display: none !important;
    }
}






/* ================= SIDEBAR TABS ================= */
#sidebarMenu .offcanvas-header {
    padding-bottom: 0; /* Remove padding to align tabs closer to top */
}

#sidebarMenu .nav-tabs {
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 15px;
}

#sidebarMenu .nav-link {
    border: none;
    color: #666;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 10px;
    background: transparent;
    text-transform: uppercase;
    font-family: "Noto Sans Sinhala", sans-serif;
}

#sidebarMenu .nav-link:hover {
    color: #d10000; /* Red on hover */
}

#sidebarMenu .nav-link.active {
    color: #d10000;
    background: transparent;
    border-bottom: 3px solid #d10000; /* Red underline for active tab */
}

#sidebarMenu .tab-content {
    padding-bottom: 20px;
}




/* ================= LANKADEEPA TV BLOCK ================= */

.tv-block {
    background-color: #e1f5fe; /* Light Blue background */
    border-radius: 10px;
    padding: 20px 16px 24px;
    margin-bottom: 24px;
    border-bottom: 3px solid #0288d1; /* Darker blue accent bottom */
}

.tv-title {
    font-size: 24px;
    color: #0288d1;
    font-weight: 700;
    margin-bottom: 0;
    font-family: 'Yaldevi', sans-serif;
}

.tv-card {
    display: block;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.tv-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.tv-thumb-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background: #000;
}

.tv-thumb-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}

/* Play Button Overlay */
.tv-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background-color: rgba(255, 0, 0, 0.8); /* Red Play Button */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
}

.tv-card:hover .tv-play-btn {
    background-color: #d10000;
    transform: translate(-50%, -50%) scale(1.1);
}

.tv-card-body {
    padding: 10px 12px;
}

.tv-card-title {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    font-family: "Noto Sans Sinhala", sans-serif;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tv-meta {
    font-size: 11px;
    color: #666;
}




/* ================= LANKADEEPA EVENT BLOCK ================= */


.event-block {
    background-color: #f0f4f9; /* White background to pop against #f0f4f9 */
    border-radius: 12px;
    padding: 10px 24px 20px;
    margin-bottom: 30px;
    border-top: 4px solid #0b57d0; /* Changed Gold to Primary Blue */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07); /* Added subtle shadow for depth */
}

.event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #e1e3e1; /* Neutral light grey border */
    padding-bottom: 10px;
}

.event-title {
    font-size: 24px;
    color: #0b57d0; /* Changed Orange/Gold to Primary Blue */
    font-weight: 700;
    margin: 0;
    font-family: 'Yaldevi', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-btn {
    background-color: #d3e3fd; /* Light Blue background */
    color: #041e49; /* Dark Blue text */
    font-weight: 600;
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 20px;
    text-decoration: none;
    transition: 0.2s;
}

.event-btn:hover {
    background-color: #0b57d0; /* Darker blue on hover */
    color: #ffffff !important; /* White text on hover */
}

/* Event Cards */
.event-card {
    background: #ffffff;
    border: 1px solid #e0e3e7; /* Light cool grey border */
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(11, 87, 208, 0.15); /* Blue-tinted shadow */
    border-color: #c2e7ff;
}

.event-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-bottom: 1px solid #f0f4f9;
}

.event-body {
    padding: 14px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.event-tag {
    display: inline-block;
    background-color: #c2e7ff; /* Pale Blue */
    color: #001d35; /* Very Dark Blue */
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    align-self: flex-start;
}

.event-headline {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
    color: #1f1f1f; /* Darker, neutral black/grey */
    font-family: "Noto Sans Sinhala", sans-serif;
}

.event-desc {
    font-size: 13px;
    color: #444746; /* Material Design standard grey text */
    line-height: 1.5;
    margin-bottom: 10px;
    font-family: "Noto Serif Sinhala", serif;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-meta {
    margin-top: auto;
    font-size: 12px;
    color: #747775; /* Lighter grey for meta info */
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}


/* ================= MEDIA TAGS ================= */
.media-tag {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 8px;
    margin-bottom: 6px; /* Spacing if placed above headline */
    vertical-align: middle;
    letter-spacing: 0.5px;
    font-family: "Noto Sans Sinhala", sans-serif;
}

.media-tag i {
    margin-right: 4px;
    font-size: 11px;
}

/* 1. VIDEO TAG (Red) */
.tag-video {
    background-color: #cc0000;
}

/* 2. AUDIO TAG (Purple) */
.tag-audio {
    background-color: #8e24aa;
}

/* 3. PHOTO TAG (Teal/Green) */
.tag-photo {
    background-color: #00897b;
}




/* ========================================================= */
/* NEW 4-GRID LAYOUT STYLES (Sky News Style) */
/* ========================================================= */

.news-grid-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* No border or shadow for a clean look */
}

/* Image Container */
.news-grid-img-wrap {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 12px;
}

.news-grid-img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news-grid-card:hover .news-grid-img-wrap img {
    transform: scale(1.05);
}

/* Labels (Analysis / Live) */
.news-label {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    color: #fff;
    z-index: 2;
    letter-spacing: 0.5px;
}

.label-blue {
    background-color: #002f6c; /* Dark Blue for Analysis */
}

.label-red {
    background-color: #d60000; /* Red for Live */
}

/* Text Content */
.news-grid-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.news-grid-title {
	font-family: "Noto Sans Sinhala", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
    transition: color 0.2s ease;
}

.news-grid-card:hover .news-grid-title {
    color: #d10000;
}

.news-grid-teaser {
    font-size: 14px;
    line-height: 1.5;
    color: #4a4a4a;
    font-family: "Noto Serif Sinhala", serif;
    margin-bottom: 12px;
    
    /* Limit to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta Data (Time | Category) */
.news-grid-meta {
    margin-top: auto; /* Pushes meta to bottom */
    font-size: 12px;
    font-weight: 600;
    color: #767676;
    display: flex;
    align-items: center;
}

.news-sep {
    margin: 0 8px;
    color: #ccc;
    font-weight: 300;
}

.news-cat {
    color: #0056b3;
    text-decoration: none;
    text-transform: uppercase;
}

.news-cat:hover {
    text-decoration: underline;
}

/* Mobile Tweak */
@media (max-width: 767.98px) {
    .news-grid-title {
        font-size: 17px;
    }
}