/* Patrika71 additions to the printed-page design: photo focus, captions on light bands,
   numbered key points, and five page "looks" so neighbouring pages never look alike. */

/* Reader: the site's own font (Noto Serif Bengali), so no second font family has to load. */
.epp-app, .epp-clip-body { --epp-font: 'EPP Serif', 'Noto Serif Bengali', serif }

/* Header bar across the screen as before, but its menu, logo and buttons (and the toolbar below) stay
   inside the site's 1248px box in every mode, so nothing sits in the screen corners. */
.epp-app .epp-head, .epp-app.is-compact .epp-head { padding-inline: max(16px, calc((100% - 1248px) / 2)) }
.epp-app.is-compact .epp-toolbar { padding-inline: max(16px, calc((100% - 1248px) / 2)) }
.epp-shell { width: min(1248px, calc(100% - 32px)) }
.epp-brand img { max-height: 46px }
.epp-app.is-compact .epp-brand img { max-height: 36px }
@media (max-width: 767px) {
    .epp-app .epp-head { padding-inline: 10px }
    .epp-brand img { max-height: 34px }
}

/* Page nameplates: the e-paper logo is wide, so it gets more width and less height. */
.np-brand img { max-height: 92px; max-width: 520px; mix-blend-mode: multiply }
.np-run-brand img { max-height: 34px; max-width: 200px; mix-blend-mode: multiply }
/* Clipped story card: a little more room under the logo line, so the picture ends cleanly. */
.np-clip { padding-bottom: 26px }
.np-clip-mark { padding-top: 10px }

/* Under a clipped story: the e-paper logo instead of the name. */
.np-clip-logo { display: block; height: 19px; width: auto; mix-blend-mode: multiply }

/* Page footer: small logo, then the date. */
.np-foot-l { display: flex; align-items: flex-end; gap: 8px }
.np-foot-l img { height: 18px; width: auto; mix-blend-mode: multiply; margin-bottom: -1px }
.np-foot-d { font-size: 13px; font-weight: 600; color: var(--np-ink) }

/* Printing: keep every colour and tinted box (browsers drop backgrounds by default), one page per sheet,
   no blank sheet after the last page. */
@media print {
    .np-page, .np-page *, .np-clip, .np-clip * { -webkit-print-color-adjust: exact; print-color-adjust: exact }
    .np-print-wrap .np-page:last-child { page-break-after: auto; break-after: auto }
    .np-page { page-break-inside: avoid; break-inside: avoid }
}

/* Body text: left-aligned with normal word spacing. Justified text in narrow columns stretched the
   gaps between Bangla words (Bangla cannot be hyphenated). */
.np-page .np-txt, .np-clip .np-txt { text-align: left; text-justify: auto; word-spacing: normal }
.np-brief p { text-align: left }

/* Only one edition: no edition picker on any screen. */
.epp-ed.is-single { display: none !important }
@media (min-width: 768px) and (max-width: 1000px) {
    .epp-toolbar { flex-wrap: nowrap }
    .epp-datebox { flex: 0 0 auto }
}

/* Phones: page picker and date side by side on one line, plain white boxes with a thin border
   (no grey band, no shadows). All pages: the menu button; other dates: the calendar. */
@media (max-width: 767px) {
    .epp-toolbar { flex-wrap: nowrap; gap: 8px; padding: 12px 12px 10px; background: transparent; border-bottom: 0 }
    .epp-sp, .epp-gridbtn { display: none !important }
    .epp-pgbox { flex: 1 1 0; min-width: 0; height: 42px; background: #fff; border: 1px solid #e2e5e9; border-radius: 10px; box-shadow: none }
    .epp-pgbox .epp-pill { height: 40px; padding: 0 26px 0 12px; font-size: 13.5px; background-position: right 9px center; background-size: 13px; border-radius: 10px }
    .epp-datebox { flex: 1 1 0; min-width: 0; justify-content: center; height: 42px; padding: 0; background: #fff; border: 1px solid #e2e5e9; border-radius: 10px; box-shadow: none }
    .epp-datebox [data-a="older"], .epp-datebox [data-a="newer"] { display: none }
    .epp-date { width: 100%; justify-content: center; height: 40px; gap: 6px; padding: 0 8px; font-size: 13.5px; min-width: 0 }
    .epp-date svg { width: 18px; height: 18px }
    /* Less empty room around the page: the card runs edge to edge, small gaps only. */
    .epp-shell { width: 100%; margin-top: 0; border-radius: 0; box-shadow: none }
    .epp-toolbar { padding: 8px 8px 6px }
    .epp-stage { padding: 4px 6px }
    .epp-pager { padding: 8px 8px 14px }
    .epp-cal { position: absolute; top: calc(100% + 8px); right: 0; left: auto; transform: none; width: min(300px, calc(100vw - 24px)) }
}

/* Computer footer: a printed-paper imprint line (blue rule on top, logo left, imprint right). */
.p71-foot { display: none }
.epp-app .epp-foot { display: none }
.p71-dfoot { margin-top: 18px; background: #fff; border-top: 3px solid #124b65; font-family: 'EPP Serif', 'Noto Serif Bengali', serif }
.p71-dfoot-in { display: flex; align-items: center; gap: 36px; width: min(1248px, calc(100% - 32px)); margin: 0 auto; padding: 16px 0 18px }
.p71-dfoot-brand { flex: none }
.p71-dfoot-brand img { display: block; height: 44px; width: auto }
.p71-dfoot-brand p { margin: 6px 0 0; font-size: 12.5px; color: #555 }
.p71-dfoot-imprint { flex: 1; min-width: 0; padding-left: 28px; border-left: 1px solid #e3e3e3; font-size: 14px; line-height: 1.75; color: #2b2b2b }
.p71-dfoot-imprint p { margin: 0 }
.p71-dfoot-imprint p + p { margin-top: 4px }
.p71-dfoot-imprint b { font-weight: 700; color: #124b65 }
.p71-dfoot-imprint a { color: #c2185b; text-decoration: none }
.p71-dfoot-imprint a:hover { text-decoration: underline }
.p71-dfoot-imprint span { color: #999; margin: 0 2px }
.epp-app.is-compact ~ .p71-dfoot { display: none }

/* Phone footer: the site's own phone footer (dark blue, centred). */
@media (max-width: 767px) {
    .p71-dfoot { display: none }
    .p71-foot {
        display: block; margin-top: 16px; padding: 30px 16px 22px; background: #124b65; color: #fff; text-align: center;
        font-family: 'EPP Serif', 'Noto Serif Bengali', serif;
    }
    .p71-foot-logo { display: inline-block }
    .p71-foot-logo img { display: block; width: 170px; height: auto; margin: 0 auto }
    .p71-foot-slogan { margin: 4px 0 0; font-size: 12px; color: rgba(255, 255, 255, .85) }
    .p71-foot-about { max-width: 28rem; margin: 16px auto 0; font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, .85) }
    .p71-foot-editor { margin: 8px 0 0; font-size: 14px; color: rgba(255, 255, 255, .85) }
    .p71-foot-editor span { color: #fff }
    .p71-foot-social { display: flex; justify-content: center; gap: 10px; margin-top: 16px }
    .p71-foot-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; transition: background .3s, color .3s }
    .p71-foot-social a:hover { background: #fff; color: #124b65 }
    .p71-foot-social svg { width: 16px; height: 16px; fill: currentColor }
    .p71-foot-bottom { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 14px; color: rgba(255, 255, 255, .85) }
    .p71-foot-bottom p { margin: 0 }
    .p71-foot-bottom nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 10px }
    .p71-foot-bottom a { color: rgba(255, 255, 255, .9); text-decoration: none }
}

/* Photos: keep the subject in view (faces sit in the upper part of most news photos). */
.np-fig img, .np-inl img, .np-mug img, .np-tz img, .np-ear-photo img, .np-card img { object-position: 50% 28% }
.np-lead .np-fig img { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06) }
/* Smaller stories: a photo of natural news shape, never stretched down a tall column. */
.np-blk:not(.np-lead):not(.np-side) .np-fig { flex: 0 0 auto; min-height: 0 }
.np-blk:not(.np-lead):not(.np-side) .np-fig img { flex: none; height: auto; aspect-ratio: 4 / 3; max-height: 420px }

/* Captions: small text on a very light band, marked with the section colour. */
.np-page figcaption, .np-clip figcaption {
    padding: 5px 9px 6px; background: var(--cap, #f1ece0); border-left: 3px solid var(--sc, var(--np-c));
    font-size: 12.5px; line-height: 1.45; color: #3f3b34;
}
.np-mug figcaption { padding: 3px 6px; border-left-width: 2px }
.np-inl figcaption { margin-bottom: 2px }

/* Numbered key points beside a story, as in the printed papers. */
.np-pts {
    flex: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 9px 10px 9px 8px;
    list-style: none; counter-reset: pt; background: var(--pts, #fff3df); border-top: 2px solid var(--sc, var(--np-c));
}
.np-pts li { position: relative; padding-left: 30px; counter-increment: pt; font: 600 14.5px/1.45 var(--np-body); color: #2a2721 }
.np-pts li::before {
    content: counter(pt, bengali); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--np-c); color: #fff; font: 700 13px/22px var(--np-body); text-align: center;
}

/* ---------- Front page ---------- */
.np-th-front { --cap: #f3ecdc }

/* Nameplate: day label above a logo of balanced size, never overlapping. */
.np-is-front .np-mast-mid { height: 128px; gap: 18px }
.np-is-front .np-mast-c { justify-content: center; gap: 6px }
.np-is-front .np-wday { margin: 0; font-size: 17px; letter-spacing: .02em }
.np-is-front .np-brand { height: auto }
.np-is-front .np-brand img { max-height: 64px; max-width: 400px }

/* Ears: framed boxes with a coloured top rule. */
.np-is-front .np-ear-wx, .np-is-front .np-ear-pr { border: 1px solid #e3d9c3; border-top: 3px solid var(--np-c); background: #fffaf0 }
.np-is-front .np-ear-photo { border: 1px solid #e3d9c3; border-top: 3px solid var(--np-c) }

/* Dateline: a cleaner double rule. */
.np-is-front .np-dateline { border-top: 3px double var(--np-ink); border-bottom: 1px solid var(--np-ink); padding: 8px 0 }

/* Teaser strip: cards with a coloured top edge and a sharper photo. */
.np-is-front .np-teasers { gap: 10px }
.np-is-front .np-tz { border-top: 3px solid var(--np-c) }
.np-is-front .np-tz2 { border-top-color: #e0a800 }
.np-is-front .np-tz3 { border-top-color: #8d6e63 }
.np-is-front .np-tz4 { border-top-color: #ef6c00 }
.np-is-front .np-tz1 { border-top-color: #1565c0 }
.np-is-front .np-tz b { font-size: 15.5px }

/* Lead story: the photo takes the free room (no pull quote), a strong rule under the headline. */
.np-front-lead .np-quote { display: none }
.np-front-lead h1.np-h { font-size: 46px; padding-bottom: 8px; border-bottom: 2px solid var(--np-ink) }
.np-front-lead .np-fig img { box-shadow: none }

/* "সংক্ষেপে" box: each brief fills its share of the box with as much text as fits, fading at the end. */
.np-brief { display: flex; flex-direction: column }
.np-brief p {
    flex: 1 1 0; min-height: 0; display: block; -webkit-line-clamp: unset; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent);
}

/* ---------- Inner pages ---------- */

/* Running head: page number in a coloured block, the section name in its colour, a double rule below. */
.np-run .np-sec-n { padding: 6px 13px 4px; background: var(--sc); color: #fff; font-size: 46px; -webkit-text-stroke: 0; border-radius: 2px }
.np-run .np-sec-n::after, .np-run-odd .np-sec-n::before { display: none }
.np-run::after { bottom: -9px; height: 5px; opacity: 1; background: linear-gradient(var(--sc) 0 3px, transparent 3px 4px, var(--sc) 4px 5px) }
.np-run .np-run-brand img { max-height: 30px }

/* Header box (weather, prayer times, rates …): framed, with the section colour on top. */
.np-run .np-wg { padding: 6px 4px; border: 1px solid #e3d9c3; border-top: 3px solid var(--sc); background: #fffaf0; max-height: 96px }
.np-run .np-wg-h { font-size: 18px }

/* Lead story on every page: the photo takes the free room (no pull quote), a strong rule under the headline. */
.np-lead .np-quote { display: none }
.np-lead h1.np-h { padding-bottom: 7px; border-bottom: 2px solid var(--np-ink) }

/* Pull quotes in smaller stories: lighter, in the section colour. */
.np-quote p { border-top-color: var(--sc, var(--np-c)); font-size: 20px }
.np-quote p::before { color: var(--sc, var(--np-c)) }

/* Shared page (ধর্ম, প্রবাস ও তথ্যপ্রযুক্তি): each story's section as a coloured tag. */
.np-page:not(.np-is-front) .np-kicker { align-self: flex-start; padding: 2px 8px; background: var(--sc); color: #fff; font-size: 12.5px; border: 0; border-radius: 0 }
.np-page:not(.np-is-front) .np-kicker::before { display: none }

/* A headline on a coloured band is always white (a page look must never colour it like its band). */
.np-page .np-fx-band .np-h { color: #fff !important }

/* Every front-page story: its section as a small coloured tag. */
.np-th-front .np-kicker { align-self: flex-start; padding: 2px 8px; background: var(--sc, var(--np-c)); color: #fff; font-size: 12.5px }
.np-th-front .np-kicker::before { display: none }
.np-th-front .np-fx-band .np-h { background: var(--sc, var(--np-c)) }
.np-th-front .np-fx-red .np-h { color: var(--sc, var(--np-c)) }

/* Look 1: warm captions, section labels as solid tags */
.np-th-0 { --cap: #f3ecdc; --pts: #fff3df }
.np-th-0 .np-kicker { align-self: flex-start; padding: 2px 8px; background: var(--sc); color: #fff }
.np-th-0 .np-kicker::before { display: none }

/* Look 2: blue captions, stronger rules between stories */
.np-th-1 { --cap: #e7f0f7; --pts: #e9f2f9 }
.np-th-1 .np-rt { border-top: 2px solid #bfb6a1 }
.np-th-1 .np-kicker { padding-bottom: 2px; border-bottom: 2px solid var(--sc); align-self: flex-start }
.np-th-1 .np-kicker::before { display: none }

/* Look 3: green captions, small headlines in the section colour */
.np-th-2 { --cap: #e8f3e8; --pts: #eef6e6 }
.np-th-2 .np-mini .np-h, .np-th-2 .np-small .np-h { color: var(--sc) }

/* Look 4: rose captions, framed photos */
.np-th-3 { --cap: #f8e9ec; --pts: #fbecef }
.np-th-3 .np-fig img, .np-th-3 .np-inl img { border: 4px solid #fff; box-shadow: 0 0 0 1px #d8cfbd }
.np-th-3 .np-kicker { color: var(--sc) }
.np-th-3 .np-kicker::before { background: var(--sc); border-radius: 50% }

/* Look 5: lavender captions, outlined labels, dotted rules */
.np-th-4 { --cap: #ede9f5; --pts: #f1ecf8 }
.np-th-4 .np-rl { border-left-style: dotted; border-left-color: #a99f88 }
.np-th-4 .np-kicker { align-self: flex-start; padding: 1px 8px; border: 1px solid var(--sc); color: var(--sc); border-radius: 10px }
.np-th-4 .np-kicker::before { display: none }