/* Visual refresh (2026-10). Loaded last in <head>, after the inline <style> blocks,
   so equal-specificity rules here win over the legacy CSS.
   Mobile-first: the base rules are the phone layout (320px and up);
   the min-width blocks at the end layer on tablet (768px) and desktop. */
:root {
    --ink: #1a1a1a;
    --muted: #6b6b6b;
    --rule: #e3e9e6; /* neutrals carry a hint of the logo green */
    --soft: #f2f6f4;
    --tint: #e6efeb; /* button tint: logo green at ~12% on white (Facebook/Vercel secondary-button style); green text on it passes AA */
    --tint-hover: #d7e5e1;
    --brand: #d42f43; /* logo red #dc364a, one shade deeper so white text on it passes AA */
    --brand-green: #236d59; /* logo green */
    --green-dark: #18493c;
    /* Noto Serif Bengali: the free newspaper standard (BBC Bangla, Kaler Kantho, Jugantor). */
    --font-head: "Noto Serif Bengali", "SolaimanLipiNormal", serif;
    --font-body: "Noto Serif Bengali", "SolaimanLipiNormal", serif;
    --radius: 6px;
    /* Type scale: every text role picks one step. Mobile-first and fluid: each clamp() is the phone
       size at 375px, grows linearly with the screen and stops at the desktop size at 1280px.
       Bangla needs taller lines than Latin (matras, conjuncts): headlines 1.45, UI 1.5, body 1.8. */
    --fs-meta: 14px; /* dates, captions, footer small print */
    --fs-ui: 15px; /* labels, crumbs, buttons, tables */
    --fs-ticker: clamp(14px, 13.17px + 0.221vw, 16px); /* ticker label and headlines: a quiet strip on phones */
    --fs-list: clamp(16px, 15.59px + 0.11vw, 17px); /* small list headlines, tabs, byline name */
    --fs-card: clamp(17px, 16.59px + 0.11vw, 18px); /* row and card headlines */
    --fs-section: clamp(20px, 19.17px + 0.221vw, 22px); /* section headings, story subheads */
    --fs-lead: clamp(21px, 19.76px + 0.331vw, 24px); /* the big story of a block */
    --fs-hero: clamp(22px, 19.51px + 0.663vw, 28px); /* homepage top story, page titles */
    --fs-title: clamp(26px, 21.86px + 1.105vw, 36px); /* story headline */
    --fs-body: clamp(18px, 17.59px + 0.11vw, 19px); /* story text */
    --lh-head: 1.45;
    --lh-ui: 1.5;
    --lh-body: 1.8;
    /* Space: the one gap between the header and every page's content (16px phone to 24px desktop, fluid like the type). */
    --space-page: clamp(16px, 12.69px + 0.884vw, 24px);
    /* The gap at each section edge: between homepage sections (one on each side) and before the footer. */
    --space-section: clamp(24px, 20.69px + 0.884vw, 32px);
}

.page {
    padding-top: var(--space-page);
}
body {
    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px; /* root size; every text role sets its own token */
    line-height: var(--lh-ui);
    overflow-wrap: break-word; /* a long unbroken word (a URL, an English name) wraps instead of widening the page */
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-head);
    line-height: var(--lh-head);
}
a:hover,
a:focus {
    color: var(--brand);
}
/* Motion: hover and focus colours ease instead of jumping (zero specificity, so a component's own transition wins),
   and back-to-top scrolls smoothly. Nothing moves under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
    :where(a, button) {
        transition:
            color 0.15s,
            background-color 0.15s,
            box-shadow 0.15s;
    }
}

/* ---------- Header ---------- */
.header_section {
    border-top: 4px solid var(--brand-green);
}
.masthead_date {
    color: var(--muted);
}
.masthead_date .fa {
    color: var(--brand);
}
.masthead_social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--soft) !important;
    color: #444 !important;
}
.masthead_social a:hover {
    background: var(--brand) !important;
    color: #fff !important;
}
/* Phone bar buttons (search, menu); 40px tap targets. */
.masthead_btn {
    background: transparent;
    color: var(--ink);
    font-size: 20px;
}
.masthead_btn:focus-visible {
    background: var(--soft);
    color: var(--brand);
}
@media (hover: hover) {
    .masthead_btn:hover {
        background: var(--soft);
        color: var(--brand);
    }
}

/* Phone category row (below 768px): plain text tabs in one swipeable line, brand underline on the current one. */
.mobile-horizontal-menu {
    overflow-x: auto;
    white-space: nowrap;
    background: #fff;
    padding: 0 4px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    scrollbar-width: none;
}
.mobile-horizontal-menu a {
    display: inline-block;
    padding: 10px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}
.mobile-horizontal-menu a:hover,
.mobile-horizontal-menu a.active {
    color: var(--brand);
    box-shadow: inset 0 -3px 0 var(--brand);
}

/* Main menu bar, from 768px (phones open the menu sheet instead): the whole bar lives here (no other stylesheet
   styles it). A category link opens its page, its sub-categories drop down on hover or keyboard focus. */
.menu_section {
    display: none;
}
.menu_section,
.mainmenu {
    background: #fff;
}
.mainmenu {
    min-height: 20px;
    margin: 0;
    border: 0;
}
.mainmenu .navbar-collapse {
    padding-left: 0;
}
#menu-main-menu a {
    color: var(--ink);
    font-family: var(--font-body);
    text-decoration: none;
}
#menu-main-menu a:hover,
#menu-main-menu a:focus,
#menu-main-menu > li:hover > a {
    color: var(--brand);
    background: transparent;
}
#menu-main-menu > .active > a {
    color: var(--brand);
    background: transparent;
}
.search-icon {
    display: block;
    padding: 0;
    border: 0;
    background: none;
}
.search-icon svg {
    display: block;
    box-sizing: content-box;
    padding: 11px;
    border-radius: 50%;
    color: var(--ink);
    background: transparent;
    font-size: 20px;
    transition: color 0.2s, background-color 0.2s;
}
.search-icon:hover svg {
    color: var(--brand);
    background: var(--soft);
}

/* Headline ticker: a full-width band in the deep logo green (the footer green) under the menu,
   white headlines (10.2:1, AAA), and a pulsing red "live" dot (the red-on-green of the logo and the flag).
   No box inside the band: the label is plain text on the content edge.
   The view holds the list twice; the track slides by one copy (-50%), so it loops without a gap. */
.ticker-band {
    background: var(--green-dark);
    color: #fff;
}
.ticker {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    line-height: var(--lh-ui);
}
.ticker-tag {
    display: flex;
    flex: none;
    align-items: center;
    gap: 9px;
    font-size: var(--fs-ticker);
    font-weight: 700;
    letter-spacing: 0.01em;
}
.ticker-tag::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff5468; /* logo red, one step lighter: 3.3:1 on the green (graphics need 3:1) */
    animation: ticker-pulse 2s ease-out infinite;
}
/* The left padding holds the fade, so the first headline starts clear of it. */
.ticker-view {
    flex: 1;
    min-width: 0;
    padding-left: 12px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 40px), transparent);
}
/* ponytail: speed scales with the headline count (~55px/s for an average headline of ~600px); per-pixel timing needs JS, add if lengths vary a lot. */
.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker-slide calc(var(--n, 5) * 11s) linear infinite;
}
.ticker-view:hover .ticker-track,
.ticker-view:focus-within .ticker-track {
    animation-play-state: paused;
}
.ticker-list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ticker-list li {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
/* Every item ends with the separator, so the seam between the two copies spaces like the rest. */
.ticker-list li::after {
    content: "";
    width: 5px;
    height: 5px;
    margin: 0 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}
.ticker-list a,
.ticker-list a:hover,
.ticker-list a:focus {
    color: #fff;
    font-size: var(--fs-ticker);
    font-weight: 500; /* light text on dark reads thinner; 500 keeps the serif strokes solid */
}
.ticker-list a:hover,
.ticker-list a:focus {
    text-decoration: underline;
    text-underline-offset: 4px;
}
@media (min-width: 768px) {
    .ticker {
        padding: 9px 0;
    }
}
@keyframes ticker-slide {
    to {
        transform: translateX(-50%);
    }
}
@keyframes ticker-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 84, 104, 0.7);
    }
    70%,
    100% {
        box-shadow: 0 0 0 8px rgba(255, 84, 104, 0);
    }
}
/* No motion: a still row the reader can swipe; the second copy is only there for the loop. */
@media (prefers-reduced-motion: reduce) {
    .ticker-track,
    .ticker-tag::before {
        animation: none;
    }
    .ticker-view {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .ticker-list[aria-hidden] {
        display: none;
    }
}

/* ---------- Sections and headings ---------- */
/* Every page section ends with one --space-section (before the next section or the footer);
   homepage sections after the first also start with it (the first starts at --space-page). */
.page > section {
    padding-bottom: var(--space-section);
}
.page > section + section {
    padding-top: var(--space-section);
}
/* Sections are separated by space alone; two homepage blocks get the brand tint for rhythm. */
.tint {
    background: var(--soft);
}
/* Section headings (category blocks, sidebar boxes, related news): ink text after a short brand bar. */
.cat_title_one,
.facebook_title,
.sgl-cat-tittle {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0 0 8px;
    margin: 0 0 16px;
    color: var(--ink);
    font-family: var(--font-head);
    font-size: var(--fs-section);
    font-weight: 600;
}
.facebook_title,
.sgl-cat-tittle {
    margin-top: 28px;
}
/* A heading that opens a column sits on the page top space, not 28px below it. */
.facebook_title:first-child,
.sgl-cat-tittle:first-child {
    margin-top: 0;
}
.cat_title_one a {
    background: none;
    padding: 0;
    color: var(--ink);
    font-size: var(--fs-section);
    font-weight: 600;
}
/* A block heading is its "more news" link; the chevron says so. */
.cat_title_one a::after {
    content: "›";
    margin-left: 6px;
    color: var(--brand);
}
.cat_title_one a:before,
.facebook_title:before,
.sgl-cat-tittle:before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 20px;
    margin-right: 10px;
    vertical-align: -3px;
    background: var(--brand);
}
.cat_title_one a:hover {
    color: var(--brand);
}

/* ---------- Story lists ---------- */
/* Headline type (category pages, related news, sidebar tabs) */
.hadding_02 {
    margin: 0;
    padding: 0;
}
.hadding_02 a,
.Name-again .sgl-hadding a {
    color: var(--ink);
    font-size: var(--fs-card);
    font-weight: 600;
    line-height: var(--lh-head);
}
.hadding_02 a:hover,
.Name-again .sgl-hadding a:hover {
    color: var(--brand);
}
/* Every headline slot is clamped, so one long headline (the longest runs 189 characters)
   never breaks a row: 3 lines in rows, cards and lists, 4 in the big slots. The story page h1 is never cut. */
.hadding_02 a,
.Name-again .sgl-hadding a,
.story h3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Photos: an 8:5 box, the shape of every stored photo (uploads were 500x310), so poster text is not cut.
   Square and portrait uploads show whole on the tint (masthead.js adds .whole). */
.image-again img,
.archive-page-post img,
.photo-item img,
.story img {
    display: block;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    border: 0;
    padding: 0;
    border-radius: var(--radius);
}
/* A state class: it has to win over every photo-slot rule above. */
img.whole {
    object-fit: contain !important;
}

/* Related news: no box; on phones a row with the photo on the right (cards from 768px). */
.box-shadow,
.Name-again {
    background: none;
    box-shadow: none;
    border-top: 0;
}
.image-again {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 12px;
}
.image-again > a {
    width: 38%;
    flex-shrink: 0;
}
.Name-again .sgl-hadding {
    position: static;
    flex: 1;
    padding: 0;
    background: none;
}
.Name-again {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}

/* ---------- Homepage stories ----------
   One link per story (frontend/story.blade.php): photo, then headline. frontend/block.blade.php picks a layout.
   Phones: .list = first story big, then rows with the photo on the right; .grid = rows; .pairs = two cards a row;
   .scroll = a swipe row of cards. From 768px .grid/.pairs/.scroll show --cols cards a row; from 992px .list.split
   puts the big story beside its rows. Phones split stories with one hairline, wider screens with space. */
.story {
    display: block;
    color: var(--ink);
}
.story img {
    width: 100%;
    height: auto;
    background: var(--soft);
}
/* Content never widens a slot: grid tracks are minmax(0, 1fr), row headlines min-width 0 (long words wrap, see body). */
.story h3 {
    margin: 10px 0 0;
    font-size: var(--fs-card);
    font-weight: 600;
    line-height: var(--lh-head);
}
.list > :first-child h3 {
    font-size: var(--fs-lead);
    -webkit-line-clamp: 4;
}
.hero h3 {
    font-size: var(--fs-hero);
    -webkit-line-clamp: 4;
}
.hero {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}
.list,
.grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
.list > * + *,
.grid > * + * {
    padding-top: 12px;
    border-top: 1px solid var(--rule);
}
.list > * + *,
.grid > * {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 12px;
}
.list > * + * img,
.grid > * img {
    width: 38%;
    flex-shrink: 0;
}
.list > * + * h3,
.grid > * h3 {
    flex: 1;
    min-width: 0;
    margin: 0;
}
.list > * + * h3 {
    font-size: var(--fs-list);
}
.pairs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
}
.pairs h3 {
    margin-top: 8px;
    font-size: var(--fs-list);
}
/* Swipe row: each card 72% wide so the next one peeks in; the row runs to the screen edges. */
.scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    gap: 12px;
    margin: 0 -15px;
    padding: 0 15px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 15px;
    scrollbar-width: none;
}
.scroll::-webkit-scrollbar {
    display: none;
}
.scroll > * {
    scroll-snap-align: start;
}
/* Feedback: the headline turns brand red and the photo dims a touch; keyboard focus gets a ring. */
.story:hover,
.story:focus {
    color: var(--brand);
    text-decoration: none;
}
.story:hover img {
    filter: brightness(0.92);
}
.story:focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: 4px;
    border-radius: var(--radius);
}
@media (prefers-reduced-motion: no-preference) {
    .story,
    .story img {
        transition:
            color 0.15s,
            filter 0.2s;
    }
}

/* Category, sub-category and search lists: rows with the photo on the right, the first story big.
   One hairline between rows, no box (from 768px even cards, photo on top, see below). */
.archive-page-post {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}
.archive-page-post > a {
    width: 38%;
    flex-shrink: 0;
}
.archive-page-post img {
    width: 100%;
    height: auto;
}
.archive-page-post .hadding_02 {
    flex: 1;
    min-width: 0; /* a flex item is otherwise as wide as its longest word */
    margin: 0;
}

/* Members (family, reporters): square headshots, 2 per row on phones, 3 then 4; name, then designation.
   Photo gallery: full-width photos on phones, 2 then 3 per row; the caption is the only text. */
.photo-item {
    margin: 0;
}
.photo-item img {
    width: 100%;
    height: auto;
}
.member {
    margin: 0;
}
.member img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: top; /* headshots: keep the face, crop the shoulders */
    border-radius: var(--radius);
}
.member figcaption {
    margin-top: 8px;
    color: var(--muted);
    font-size: var(--fs-meta);
    line-height: var(--lh-ui);
}
.member b {
    display: block;
    color: var(--ink);
    font-size: var(--fs-list);
    font-weight: 600;
}
.photo-item figcaption {
    margin-top: 8px;
    font-size: var(--fs-ui);
    line-height: var(--lh-ui);
}
.archive-section .row > :first-child > .archive-page-post {
    flex-direction: column;
    align-items: stretch; /* full width, so a long word wraps instead of sizing the column */
}
.archive-section .row > :first-child > .archive-page-post > a {
    width: 100%;
}
.archive-section .row > :first-child > .archive-page-post .hadding_02 a {
    font-size: var(--fs-lead);
    -webkit-line-clamp: 4;
}
/* Buttons: one tint style for every secondary action (older/newer pages, Facebook follow, share).
   Light brand tint, no border, brand-green text or icon. Icon-only buttons are square. */
/* The pager closes the list column: Bootstrap's 20px under it would add to the section gap. */
.pager {
    margin-bottom: 0;
}
.pager li > a,
.fb-follow,
.sgl-page-social ul li > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    border: 0;
    border-radius: var(--radius);
    background: var(--tint);
    color: var(--brand-green);
    font-size: var(--fs-ui);
    font-weight: 600;
    line-height: 1;
    padding: 0 16px;
}
.pager li > a:hover,
.pager li > a:focus,
.fb-follow:hover,
.fb-follow:focus,
.sgl-page-social ul li > :hover,
.sgl-page-social ul li > :focus {
    background: var(--tint-hover);
    color: var(--brand-green);
    text-decoration: none;
}

/* ---------- Sidebar ---------- */
/* Latest / popular tabs: plain text tabs, brand underline on the open one. */
.tab-header .nav-tabs {
    background: none;
    border-bottom: 1px solid var(--rule);
}
.tab-header .nav-tabs > li > a,
.tab-header .nav-tabs > li > a:hover,
.tab-header .nav-tabs > li.active > a,
.tab-header .nav-tabs > li.active > a:focus,
.tab-header .nav-tabs > li.active > a:hover {
    border: 0;
    background: none;
    padding: 10px 6px;
    color: var(--muted);
    font-family: var(--font-head);
    font-size: var(--fs-list);
    font-weight: 600;
}
.tab-header .nav-tabs > li.active > a,
.tab-header .nav-tabs > li.active > a:focus,
.tab-header .nav-tabs > li.active > a:hover {
    color: var(--ink);
    box-shadow: inset 0 -3px 0 var(--brand);
}
/* The two tabs sit side by side on phones too (Bootstrap stacks nav-justified below 768px). */
.tab-header .nav-justified {
    display: flex;
}
.tab-header .nav-justified:before,
.tab-header .nav-justified:after {
    display: none;
}
.tab-header .nav-justified > li {
    flex: 1;
}
.tab-header .nav-justified > li > a {
    margin: 0;
    text-align: center;
}
.tab-border {
    border-bottom: 1px solid var(--rule);
    padding: 12px 4px;
    margin: 0;
}
.tab-border .padding {
    padding: 0;
}
.tab-border .fa-arrow-circle-right {
    display: none;
}
/* Prayer times: one quiet tint panel; each row has the prayer (time-of-day mark, name) on the left and the time on the right. */
.prayer {
    margin: 0;
    padding: 2px 14px;
    background: var(--soft);
    border-radius: var(--radius);
    font-size: var(--fs-ui);
}
.prayer > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 10px 0;
}
.prayer > div + div {
    border-top: 1px solid var(--rule);
}
.prayer dt {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400; /* Bootstrap sets dt to 700; the rows stay regular, the mark and the right-aligned time carry the structure */
}
.prayer dt svg {
    flex-shrink: 0;
    color: var(--brand-green);
}
.prayer dd {
    margin: 0 0 0 auto;
}

/* ---------- Single news page ---------- */
/* Reference: Prothom Alo's story page. Crumbs, a bold headline, a byline (reporter, then date),
   a full-bleed photo on phones, then the body at 18px with Bangla-friendly leading. */
.single-cat-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    margin: 0 0 10px;
    background: none;
}
.single-cat-home,
.single-cat-cate {
    float: none;
    height: auto;
    padding: 0;
    background: none;
    font-size: var(--fs-ui);
    line-height: 1.6;
}
.single-cat-cate:before {
    content: "›";
    margin: 0 8px;
    color: var(--muted);
    font-size: var(--fs-ui);
}
.single-cat-home a,
.single-cat-cate a {
    color: var(--brand-green);
    font-size: var(--fs-ui);
    font-weight: 600;
    padding: 0;
}
.single-title {
    padding: 0;
}
.single-title h1 {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: var(--fs-title);
    font-weight: 700;
    line-height: 1.45;
}
/* Reporter and date on the left, share icons on the right, as on Prothom Alo's story page. */
.byline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    line-height: 1.6;
}
.byline-text {
    min-width: 0; /* a long name or date wraps inside its column, the icons keep their size */
}
.byline-name {
    color: var(--ink);
    font-size: var(--fs-list);
    font-weight: 700;
}
.byline-role {
    color: var(--muted);
    font-size: var(--fs-ui);
}
.byline-date {
    color: var(--muted);
    font-size: var(--fs-meta);
}
/* Edge to edge on phones (the column has 15px padding), rounded card from tablet. */
.single-img {
    margin: 0 -15px 20px;
}
.single-img img {
    display: block;
    width: 100%;
}
.single-caption {
    margin: 8px 15px 0;
    color: var(--muted);
    font-size: var(--fs-meta);
    line-height: 1.6;
}
/* Body copy: --fs-body (18px phone to 19px desktop), generous leading for Bangla conjuncts; ragged right. */
.single-dtls,
.single-dtls p {
    color: #222;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    text-align: left;
}
.single-dtls {
    padding: 0;
}
.single-dtls p {
    margin: 18px 0;
}
/* Rich content from the editor: links, subheads, lists, quotes, photos, video and tables. */
.single-dtls a {
    color: var(--brand-green);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.single-dtls h2,
.single-dtls h3,
.single-dtls h4 {
    margin: 28px 0 8px;
    color: var(--ink);
    font-size: var(--fs-section);
    font-weight: 700;
    line-height: var(--lh-head);
}
.single-dtls ul,
.single-dtls ol {
    margin: 18px 0;
    padding-left: 1.4em;
}
.single-dtls ol {
    list-style-type: bengali; /* ১. ২. ৩. */
}
.single-dtls li {
    margin: 6px 0;
}
.single-dtls blockquote {
    margin: 24px 0;
    padding: 2px 0 2px 16px;
    border-left: 3px solid var(--brand);
    color: var(--ink);
    font-size: inherit;
}
.single-dtls blockquote p {
    margin: 0;
}
.single-dtls img,
.single-dtls iframe {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 20px auto;
    border: 0;
    border-radius: var(--radius);
}
.single-dtls iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
}
/* Wide tables scroll inside the column instead of pushing the page sideways. */
.single-dtls table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    margin: 20px 0;
    border-collapse: collapse;
    font-size: var(--fs-list);
    line-height: 1.6;
}
.single-dtls th,
.single-dtls td {
    padding: 8px 10px;
    border: 1px solid var(--rule);
    vertical-align: top;
}
.single-dtls th {
    background: var(--soft);
}
.single-dtls hr {
    margin: 28px 0;
    border-top: 1px solid var(--rule);
}
/* Share: square icon buttons in the button tint (see Buttons). */
.sgl-page-social-title h4 {
    margin: 28px 0 10px;
    padding: 0;
    border: 0;
    color: var(--muted);
    font-size: var(--fs-ui);
    font-weight: 600;
}
.sgl-page-social ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.sgl-page-social ul li {
    margin: 0;
}
/* Phones: 32px squares with 16px icons, so four fit beside the byline; 38px from 768px. */
.sgl-page-social ul li > * {
    width: 32px;
    height: 32px;
    padding: 0;
}
.sgl-page-social svg {
    width: 16px;
    height: 16px;
}
/* Copy link: the check shows once the link is on the clipboard (masthead.js). */
.share-copy svg + svg,
.share-copy.copied svg:first-child {
    display: none;
}
.share-copy.copied svg + svg {
    display: block;
}
.byline .sgl-page-social ul {
    flex-wrap: nowrap;
}
/* Print stays in the share row after the story on phones. */
.byline li:has(.share-print) {
    display: none;
}
@media (min-width: 768px) {
    .sgl-page-social ul {
        gap: 10px;
    }
    .sgl-page-social ul li > * {
        width: 38px;
        height: 38px;
    }
    .sgl-page-social svg {
        width: 18px;
        height: 18px;
    }
    .byline li:has(.share-print) {
        display: block;
    }
}

/* ---------- Footer: deep brand green, one centred column ----------
   Prothom Alo order: logo, sections, follow, info pages, editor line, copyright. */
.site-footer {
    padding: 32px 0 72px; /* the bottom 72px keeps the copyright clear of the fixed back-to-top button */
    background: var(--green-dark);
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--fs-meta);
    text-align: center;
}
.site-footer a {
    color: #fff;
}
.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}
.ftr-logo img {
    display: block;
    width: auto;
    height: 56px;
    margin: 0 auto;
    filter: brightness(0) invert(1);
}
.ftr-links,
.ftr-social,
.ftr-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 16px 0;
    list-style: none;
}
.ftr-links,
.ftr-info {
    column-gap: 20px;
}
.ftr-links {
    margin-top: 16px;
    font-size: var(--fs-list);
}
.ftr-links a,
.ftr-info a {
    display: block;
    padding: 6px 0;
}
.ftr-social {
    gap: 12px;
}
.ftr-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.1); /* the button tint, on the dark footer */
}
.ftr-social a:hover,
.ftr-social a:focus {
    background: rgba(255, 255, 255, 0.2);
}
.ftr-info a {
    color: rgba(255, 255, 255, 0.82);
}
.ftr-editor {
    margin: 16px 0 4px;
    color: #fff;
    font-size: var(--fs-ui);
    font-weight: 600;
}
.ftr-contact {
    margin: 0;
    line-height: 1.8;
}
.ftr-copy {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.6);
}

/* Back-to-top: small and quiet (jQuery fades it, so display is left alone). */
.scrollToTop {
    padding: 0;
    text-align: center;
    line-height: 38px;
    right: 16px;
    bottom: 20px;
    border: 1px solid var(--rule);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.scrollToTop i.fa {
    position: static;
    display: inline;
    line-height: 38px;
    font-size: 20px;
    color: var(--ink);
}
.scrollToTop:hover,
.scrollToTop:focus-visible {
    background: var(--soft);
}
.scrollToTop:hover i.fa,
.scrollToTop:focus-visible i.fa {
    color: var(--brand);
}

/* ---------- Tablet and up (768px) ---------- */
@media (min-width: 768px) {
    .mobile-horizontal-menu {
        display: none;
    }
    .menu_section {
        display: block;
        border-top: 1px solid var(--rule);
        border-bottom: 2px solid var(--rule);
    }
    /* Menu bar: sizes that keep 10 categories in one row (13px is what fits at 768-991). */
    #menu-main-menu > li {
        position: relative;
    }
    #menu-main-menu > li > a {
        padding: 11px 4px;
        font-size: 13px;
        font-weight: 600;
    }
    #menu-main-menu > .active > a {
        box-shadow: inset 0 -3px 0 var(--brand);
    }
    #menu-main-menu .caret {
        color: #aaa;
    }
    #menu-main-menu .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        display: none;
        float: none;
        min-width: 180px;
        margin: 0;
        padding: 6px 0;
        border: 1px solid var(--rule);
        border-radius: var(--radius);
        background: #fff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }
    #menu-main-menu > li:hover > .dropdown-menu,
    #menu-main-menu > li:focus-within > .dropdown-menu {
        display: block;
    }
    #menu-main-menu .dropdown-menu a {
        padding: 8px 16px;
        font-size: var(--fs-ui);
        font-weight: 400;
        line-height: var(--lh-ui);
    }
    #menu-main-menu .dropdown-menu a:hover,
    #menu-main-menu .dropdown-menu a:focus {
        background: var(--soft);
    }
    /* Sub-menus fade in and drop 4px into place, and fade out the same way. */
    @media (prefers-reduced-motion: no-preference) {
        #menu-main-menu .dropdown-menu {
            opacity: 0;
            translate: 0 -4px;
            transition:
                opacity 0.15s ease-out,
                translate 0.15s ease-out,
                display 0.15s allow-discrete;
        }
        #menu-main-menu > li:hover > .dropdown-menu,
        #menu-main-menu > li:focus-within > .dropdown-menu {
            opacity: 1;
            translate: none;
        }
        @starting-style {
            #menu-main-menu > li:hover > .dropdown-menu,
            #menu-main-menu > li:focus-within > .dropdown-menu {
                opacity: 0;
                translate: 0 -4px;
            }
        }
    }
    /* Homepage: cards from 768px, split by space instead of hairlines. */
    .hero {
        padding-bottom: 0;
        border-bottom: 0;
    }
    .grid,
    .pairs,
    .scroll {
        grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
        grid-auto-flow: row;
        gap: 24px;
        margin: 0;
        padding: 0;
        overflow: visible;
    }
    .grid > * {
        display: block;
        padding-top: 0;
        border-top: 0;
    }
    .grid > * img {
        width: 100%;
    }
    .grid > * h3,
    .pairs h3 {
        margin-top: 10px;
        font-size: var(--fs-card);
    }

    .Name-again {
        padding-bottom: 0;
        border-bottom: 0;
    }
    .Name-again .sgl-hadding {
        padding: 8px 0 0;
    }
    .image-again {
        display: block;
    }
    .image-again > a {
        width: auto;
    }

    .site-footer {
        padding-bottom: 32px;
    }

    .single-img {
        margin: 0 0 24px;
    }
    .single-img img {
        border-radius: var(--radius);
    }
    .single-caption {
        margin: 8px 0 0;
    }


    .archive-page-post,
    .archive-section .row > :first-child > .archive-page-post {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 0;
        border: 0;
    }
    .archive-page-post > a {
        width: 100%;
    }
    .archive-section .row > :first-child > .archive-page-post .hadding_02 a {
        font-size: var(--fs-card);
        -webkit-line-clamp: 3;
    }
}

/* Image skeleton: the 16:9 box is reserved by aspect-ratio, so a tint shows until the photo loads. */
img.wp-post-image {
    background: var(--soft);
}

/* ---------- States ---------- */
/* Short pages (empty category, 404): the footer sits at the bottom of the window, not mid-screen.
   Sticky, not a flex body: in a flex column Bootstrap's auto-margin .container shrinks to its content.
   The footer can only move down, and only as far as the end of <body>, so long pages are untouched. */
body {
    min-height: 100vh;
    min-height: 100svh;
}
.site-footer {
    position: sticky;
    top: 100vh;
}

/* Sheets: native modal <dialog>s that slide down from the top (search, phone menu). */
.sheet {
    width: 100%;
    max-width: none;
    margin: 0 0 auto;
    padding: 12px 15px;
    border: 0;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.sheet[open]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}
.sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius);
    background: var(--tint);
    color: var(--brand-green);
}
.sheet-close:hover {
    background: var(--tint-hover);
}
.sheet-close:focus-visible,
.menu-sheet-more:focus-visible,
.menu-sheet-list a:focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: -2px;
}
/* Open and close: the sheet slides from the top and the backdrop fades, both ways (MDN "transitioning dialog
   elements"). allow-discrete keeps a closing dialog on screen and in the top layer until it has slid away; a browser
   without it just hides the sheet. */
@media (prefers-reduced-motion: no-preference) {
    .sheet {
        transform: translateY(-100%);
        transition:
            transform 0.25s ease-out,
            display 0.25s allow-discrete,
            overlay 0.25s allow-discrete;
    }
    .sheet[open] {
        transform: none;
    }
    .sheet::backdrop {
        background-color: transparent;
        transition:
            background-color 0.25s,
            display 0.25s allow-discrete,
            overlay 0.25s allow-discrete;
    }
    @starting-style {
        .sheet[open] {
            transform: translateY(-100%);
        }
        .sheet[open]::backdrop {
            background-color: transparent;
        }
    }
}

/* Search sheet: the field and the close button in one row. */
.search-sheet-row {
    display: flex;
    gap: 8px;
    max-width: 720px;
    margin: 0 auto;
}
.search-sheet .search-form {
    flex: 1;
    min-width: 0;
}
.search-sheet .sheet-close {
    height: 100%;
}

/* Menu sheet (phones): the whole screen, the page behind it stays still. Logo and close button, then one hairline
   row per section; a chevron opens its sub-sections. */
.menu-sheet {
    height: 100%;
    max-height: none;
    padding-top: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: none;
}
html:has(.menu-sheet[open]) {
    overflow: hidden;
}
.menu-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule);
}
.menu-sheet-head img {
    max-height: 44px;
}
.menu-sheet-head .sheet-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
}
.menu-sheet-head .sheet-close:hover {
    background: var(--soft);
    color: var(--brand);
}
.menu-sheet-list,
.menu-sheet-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu-sheet-list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--rule);
}
.menu-sheet-list a {
    flex: 1;
    padding: 12px 0;
    color: var(--ink);
    font-size: var(--fs-list);
    font-weight: 600;
    line-height: var(--lh-ui);
    text-decoration: none;
}
.menu-sheet-list a:hover,
.menu-sheet-list a.active {
    color: var(--brand);
}
.menu-sheet-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--ink);
}
.menu-sheet-more[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.menu-sheet-list ul {
    flex-basis: 100%;
    padding-left: 16px;
}
.menu-sheet-list ul li:last-child {
    padding-bottom: 8px; /* inside the list, so it opens and closes with it */
}
.menu-sheet-list ul a {
    display: block;
    padding: 8px 0;
    font-size: var(--fs-ui);
    font-weight: 400;
}
/* The chevron turns; the sub-sections open to their height and close again (height: auto animates where
   interpolate-size is supported, elsewhere the list fades in place). */
@media (prefers-reduced-motion: no-preference) {
    .menu-sheet {
        interpolate-size: allow-keywords;
    }
    .menu-sheet-more svg {
        transition: transform 0.2s ease-out;
    }
    .menu-sheet-list ul {
        overflow: hidden;
        transition:
            height 0.2s ease-out,
            opacity 0.2s ease-out,
            display 0.2s allow-discrete;
    }
    .menu-sheet-list ul[hidden] {
        height: 0;
        opacity: 0;
    }
    @starting-style {
        .menu-sheet-list ul:not([hidden]) {
            height: 0;
            opacity: 0;
        }
    }
}

/* Empty list, no search result, 404: one centred message block. */
.state-box {
    text-align: center;
    padding: 24px 16px 48px;
}
.state-code {
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    color: var(--rule);
    margin: 0 0 12px;
}
.state-box h1 {
    font-size: var(--fs-hero);
    text-wrap: balance;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 8px;
}
.state-box p {
    color: var(--muted);
    font-size: var(--fs-card);
    line-height: 1.7;
    margin: 0 0 20px;
}
/* Search form (search sheet, empty search, 404): one field joined to a brand-green button. */
.search-form {
    display: flex;
}
.state-box .search-form {
    max-width: 420px;
    margin: 0 auto 16px;
}
.search-form input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 17px;
    padding: 10px 14px;
    border: 1px solid var(--rule);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
}
.search-form input:focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: -2px;
}
.search-form button svg {
    display: block;
}
.search-form button {
    border: 0;
    padding: 0 18px;
    color: #fff;
    background: var(--brand-green);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.state-home {
    font-weight: 600;
    color: var(--brand-green);
}
.state-latest {
    max-width: 720px;
    margin: 0 auto var(--space-section);
    padding: 0 16px;
}
.state-latest h2 {
    font-size: var(--fs-section);
    font-weight: 700;
    border-left: 4px solid var(--brand);
    padding-left: 10px;
    margin: 0 0 4px;
}
.state-latest a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    font-size: var(--fs-card);
    line-height: 1.6;
}
.state-latest a:hover {
    color: var(--brand);
}
@media (min-width: 768px) {
    .state-box {
        padding: 48px 16px 56px;
    }
    .state-code {
        font-size: 88px;
    }
}

/* About, terms, privacy: one reading column with the story headline and body styles. */
.text-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 0 var(--space-section);
}
.text-page h1 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: var(--fs-title);
    font-weight: 700;
    line-height: var(--lh-head);
}
.text-page-empty {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: var(--fs-card);
    line-height: 1.7;
}

/* ---------- Grid: Bootstrap 3 rows as wrapping flex lines ----------
   Float columns snag on a taller neighbour and leave holes; flex lines wrap cleanly and give a row equal heights.
   :where() has zero specificity, so Bootstrap's own .col-* widths still win; an unfloated column stays full width. */
.row {
    display: flex;
    flex-wrap: wrap;
}
.row::before,
.row::after {
    content: none;
}
:where(.row) > :where(*) {
    width: 100%;
}
/* Space between stacked or wrapped columns is the row's gap (12px after a phone row's hairline, 24px between desktop cards),
   never a margin under each story, so nothing trails after the last row of a section. */
.page .row {
    row-gap: 12px;
}
/* Category blocks that stack on phones (each column opens with its own heading) sit a section gap apart. */
.page .row:has(> [class*="col-"] > .cat_title_one) {
    row-gap: calc(2 * var(--space-section));
}
@media (min-width: 768px) {
    .page .row {
        row-gap: 24px;
    }
}

/* Page changes: the browser cross-fades the old and new page (both share the header, so only the content changes). */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

/* Big story beside its rows (জাতীয়), from 992px where each half is wide enough for a row. */
@media (min-width: 992px) {
    #menu-main-menu > li > a {
        padding: 13px 9px;
        font-size: 14px;
    }
    .split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }
    .split > :first-child {
        grid-row: span 4;
    }
    .split > :nth-child(2) {
        padding-top: 0;
        border-top: 0;
    }
}

/* ---------- Loading states: real events only, no timers ----------
   Photos: a soft shimmer until the photo's own load event (masthead.js adds .loaded; an error swaps in the
   placeholder, which then loads). Pages: from the moment a link to another page of this site is followed until
   that page replaces this one, a thin indeterminate bar runs along the top (masthead.js sets html.is-loading;
   pageshow clears it when back/forward restores this page; an open sheet is in the top layer, so it draws its own copy). It shows that the next page is on its way, never a made-up percentage. */
html.is-loading {
    cursor: progress;
}
html.is-loading body::after,
html.is-loading .sheet::before {
    content: "";
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--brand);
    box-shadow: 0 1px 4px rgba(212, 47, 67, 0.4);
}
@media (prefers-reduced-motion: no-preference) {
    main img:not(.loaded) {
        background: linear-gradient(100deg, var(--soft) 40%, #fff 50%, var(--soft) 60%) 0 0 / 200% 100% var(--soft);
        animation: skeleton 1.2s linear infinite;
    }
    /* Indeterminate: a faint red track across the top with a brand segment sweeping along it. */
    html.is-loading body::after,
    html.is-loading .sheet::before {
        background: linear-gradient(var(--brand) 0 0) no-repeat 0 0 / 40% 100% rgba(212, 47, 67, 0.2);
        animation: page-loading 1.1s ease-in-out infinite;
    }
}
@keyframes skeleton {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -100% 0;
    }
}
@keyframes page-loading {
    from {
        background-position: -70% 0;
    }
    to {
        background-position: 170% 0;
    }
}

@media (min-width: 1200px) {
    #menu-main-menu > li > a {
        padding: 13px 14px;
        font-size: 16px;
    }
}

/* ---------- Print: a page prints as its content only ----------
   News page: logo, crumbs, headline, byline, photo, caption, body (an embedded video cannot print). The browser
   prints the page address and date in the margins. Bootstrap 3's print rules already give black text, no
   backgrounds and no breaks inside photos. */
@media print {
    .masthead_date,
    .masthead_social,
    .masthead_btns,
    .menu_section,
    .mobile-horizontal-menu,
    .sgl-page-social,
    .sgl-page-social-title,
    .sgl-cat-tittle,
    .sgl-cat-tittle + .row,
    .singlepage-section .col-md-4,
    .site-footer,
    .single-dtls iframe {
        display: none;
    }
    /* jQuery's fadeIn writes an inline display on it */
    .scrollToTop {
        visibility: hidden;
    }
    /* Landscape pages are wide enough for the 8-column story; the sidebar is gone, so the story takes the row. */
    .singlepage-section .col-md-8 {
        width: 100%;
    }
    /* Bootstrap prints each link's address after it; a story reads cleaner without them. */
    a[href]::after {
        content: none;
    }
}