/* ============================================================================
   NewsPlatform Public Site — typography-first reader experience
   ============================================================================ */

:root {
    --pub-bg: #f3f5f7;
    --pub-text: #182431;
    --pub-text-muted: #6b7785;
    --pub-border: #dfe4e9;
    --pub-accent: #d71920;
    --pub-primary: #0d426c;
    --pub-navy: #092944;
    --pub-gold: #d8aa3d;
    --pub-font-sans: "Noto Sans Tamil", "Nirmala UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    --pub-font-serif: "Noto Serif Tamil", "Nirmala UI", Georgia, "Source Serif 4", "Times New Roman", serif;
    --pub-font-brand: "Playfair Display", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; }

body.np-public {
    margin: 0;
    background: var(--pub-bg);
    color: var(--pub-text);
    font-family: var(--pub-font-sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a.np-link { color: var(--pub-primary); }
a.np-link:hover { text-decoration: underline; }

.np-pub-container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* --- Header / chrome (Times of Puducherry masthead) ------------------------- */

.np-pub-topline {
    background: var(--pub-navy);
    color: #dbe7f1;
    font-size: 12px;
    padding: 0;
}
.np-pub-topline .np-pub-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 7px;
    padding-bottom: 7px;
}
.np-pub-live-datetime { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.np-pub-live-datetime b { opacity: .55; font-weight: 400; }
.np-pub-toplinks { display: flex; align-items: center; flex-wrap: wrap; }
.np-pub-toplinks a { color: #dbe7f1; text-decoration: none; margin-left: 16px; }
.np-pub-toplinks a:hover { color: #fff; }

.np-pub-header { background: #fff; border-bottom: 0; padding: 0; }
.np-pub-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 17px; padding-bottom: 17px; }

.np-pub-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.np-pub-mark {
    width: 52px; height: 52px; flex: none;
    background: var(--pub-navy); color: var(--pub-gold);
    display: grid; place-items: center; border-radius: 6px;
    font: 800 21px Georgia, serif;
}
.np-pub-brand { font: 800 29px var(--pub-font-brand); color: var(--pub-navy); line-height: 1; }
.np-pub-brand i { font-style: normal; color: var(--pub-accent); }
.np-pub-tagline { font-size: 10px; letter-spacing: 2px; color: var(--pub-text-muted); margin-top: 6px; text-transform: none; }
.np-pub-logo-img { max-height: 52px; width: auto; display: block; }

.np-pub-header-actions { display: flex; align-items: center; gap: 8px; font-size: 13px; flex: none; }
.np-pub-search { display: flex; align-items: center; }
.np-pub-search input {
    border: 1px solid var(--pub-border); border-radius: 6px;
    padding: 9px 12px; font-size: 13px; width: 160px;
    background: #fff; color: inherit; font-family: inherit;
}
.np-pub-btn {
    border: 1px solid var(--pub-border); background: #fff; color: var(--pub-text);
    border-radius: 6px; padding: 9px 12px; cursor: pointer; font-family: inherit; font-size: 13px;
}
.np-pub-btn-primary { background: var(--pub-accent); color: #fff; border-color: var(--pub-accent); font-weight: 600; }
.np-pub-toplinks .np-pub-admin-link { color: var(--pub-gold); font-weight: 600; }

.np-pub-nav {
    background: var(--pub-primary);
    position: sticky; top: 0; z-index: 50;
    box-shadow: 0 2px 8px #0002;
}
.np-pub-nav-inner {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: nowrap; overflow-x: auto; white-space: nowrap;
    gap: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.np-pub-nav-inner::-webkit-scrollbar { display: none; }
.np-pub-nav a {
    color: #fff; text-decoration: none;
    padding: 12px 10px; font-size: 13px; font-weight: 600;
    white-space: nowrap; flex: 0 0 auto;
}
.np-pub-nav a:hover, .np-pub-nav a.active { background: var(--pub-accent); color: #fff; }

.np-pub-ticker {
    background: #fff; color: var(--pub-text);
    border-bottom: 1px solid var(--pub-border);
    display: flex; align-items: center;
    font-size: 12px; padding: 0;
}
.np-pub-ticker .np-pub-container {
    display: flex; align-items: center; gap: 10px; min-height: 40px;
}
.np-pub-ticker .np-badge {
    background: var(--pub-accent); color: #fff;
    font-weight: 800; letter-spacing: .04em; font-size: 11px;
    padding: 5px 9px; border-radius: 3px; flex: none;
}
.np-pub-ticker a {
    color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Content ------------------------------------------------------------- */

.np-pub-main { padding: 18px 0 45px; }

.np-pub-hero-empty {
    border: 1px dashed var(--pub-border); border-radius: 10px; background: #fff;
    padding: 60px 24px; text-align: center; color: var(--pub-text-muted);
}
.np-pub-hero-empty h1 { font-family: var(--pub-font-serif); font-size: 30px; color: var(--pub-text); margin-bottom: 8px; }
.np-pub-hero-empty p { max-width: 520px; margin: 0 auto; font-size: 14.5px; }

.np-pub-page {
    background: #fff; border: 1px solid var(--pub-border); border-radius: 8px;
    padding: 25px; max-width: 800px;
}
.np-pub-page h1 { font-family: var(--pub-font-serif); font-size: 28px; margin: 0 0 12px; color: var(--pub-navy); }
.np-pub-page h2 { font-size: 18px; margin: 22px 0 8px; color: var(--pub-navy); }
.np-pub-page p { font-size: 15px; line-height: 1.9; margin: 0 0 1em; }
.np-pub-page a.np-link { color: var(--pub-primary); }

/* --- Footer ----------------------------------------------------------------- */

.np-pub-footer {
    background: #071b2e; color: #afbfcd;
    margin-top: 30px; padding: 0; border-top: 0; font-size: 12px;
}
.np-pub-foot {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px;
    padding-top: 35px; padding-bottom: 35px;
}
.np-pub-foot h3 { color: #fff; font-size: 15px; margin: 0 0 10px; font-weight: 700; }
.np-pub-foot p, .np-pub-foot a { font-size: 12px; color: #aebdca; text-decoration: none; line-height: 1.9; display: block; }
.np-pub-foot a:hover { color: #fff; }
.np-pub-foot-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.np-pub-foot-social a { display: inline; margin-right: 0; }
.np-pub-copy {
    border-top: 1px solid #ffffff22;
    padding: 12px 20px; text-align: center; font-size: 10px; color: #8ea0ae;
}

/* --- Dark mode --------------------------------------------------------------- */

body.np-dark {
    --pub-bg: #12141a;
    --pub-text: #e7e9ee;
    --pub-text-muted: #9aa1ae;
    --pub-border: #262b36;
    --pub-primary: #0d426c;
}
body.np-dark .np-pub-header { background: #0b1a28; }
body.np-dark .np-pub-brand { color: #e8ecef; }
body.np-dark .np-pub-search input,
body.np-dark .np-pub-btn { background: #0b1a28; color: var(--pub-text); border-color: var(--pub-border); }
body.np-dark .np-pub-btn-primary { background: var(--pub-accent); color: #fff; border-color: var(--pub-accent); }
body.np-dark .np-pub-ticker { background: #0b1a28; color: var(--pub-text); }
body.np-dark .np-pub-page,
body.np-dark .np-pub-hero-empty { background: #1a1e27; }

.np-theme-toggle {
    border: 1px solid var(--pub-border); background: none; color: var(--pub-text-muted);
    border-radius: 6px; padding: 5px 9px; cursor: pointer; font-size: 12px;
}
.np-theme-toggle.np-push-active { color: var(--pub-accent); border-color: var(--pub-accent); }

/* --- Share bar ------------------------------------------------------------------ */

.np-share-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 24px 0; padding-top: 18px; border-top: 1px solid var(--pub-border); }
.np-share-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--pub-text-muted); margin-right: 4px; }
.np-share-btn {
    border: 1px solid var(--pub-border); border-radius: 100px; padding: 6px 14px; font-size: 12.5px;
    background: none; color: inherit; cursor: pointer; text-decoration: none; display: inline-block;
}
.np-share-btn:hover { border-color: var(--pub-accent); color: var(--pub-accent); }

/* --- Advertisement slots ------------------------------------------------------- */

.np-ad-slot { text-align: center; margin: 22px 0; }
.np-ad-label {
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--pub-text-muted);
    margin-bottom: 6px;
}

/* --- Reading progress --------------------------------------------------------- */

.np-reading-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: var(--pub-accent); z-index: 50; transition: width .08s linear;
}

/* --- Article page ------------------------------------------------------------- */

.np-article-header { max-width: 760px; margin: 0 auto 20px; }
.np-article-kicker { color: var(--pub-accent); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.np-article-headline { font-family: var(--pub-font-serif); font-size: 34px; line-height: 1.2; font-weight: 700; margin: 0 0 10px; }
.np-article-subheadline { font-size: 17px; color: var(--pub-text-muted); margin: 0 0 14px; }
.np-article-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--pub-text-muted); border-top: 1px solid var(--pub-border); border-bottom: 1px solid var(--pub-border); padding: 10px 0; }
.np-article-meta .np-spacer { flex: 1; }
.np-font-controls { display: flex; gap: 4px; }
.np-font-controls button { border: 1px solid var(--pub-border); background: none; color: var(--pub-text-muted); border-radius: 4px; width: 26px; height: 26px; cursor: pointer; }

.np-article-hero { max-width: 900px; margin: 20px auto; }
.np-article-hero img { width: 100%; border-radius: 8px; display: block; }
.np-article-hero figcaption { font-size: 12.5px; color: var(--pub-text-muted); margin-top: 6px; }

.np-article-body { max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 1.8; }
.np-article-body.np-font-sm { font-size: 15px; }
.np-article-body.np-font-lg { font-size: 20px; }
.np-article-body p { margin: 0 0 1.2em; }
.np-article-body .np-block-heading { font-family: var(--pub-font-serif); margin: 1.4em 0 .6em; }
.np-article-body h2.np-block-heading { font-size: 1.65em; }
.np-article-body h3.np-block-heading { font-size: 1.4em; }
.np-article-body h4.np-block-heading { font-size: 1.2em; }
.np-article-body .np-block-figure { margin: 1.6em 0; }
.np-article-body .np-block-figure img { width: 100%; border-radius: 6px; }
.np-article-body .np-block-figure figcaption { font-size: .6em; color: var(--pub-text-muted); margin-top: 6px; }
.np-article-body blockquote.np-block-quote { border-left: 3px solid var(--pub-accent); margin: 1.6em 0; padding: 4px 0 4px 18px; font-style: italic; }
.np-article-body blockquote.np-block-pullquote { font-family: var(--pub-font-serif); font-size: 1.4em; font-weight: 600; text-align: center; margin: 1.8em 0; padding: 0 10%; }
.np-article-body hr.np-block-divider { border: none; border-top: 1px solid var(--pub-border); margin: 2em 0; }
.np-article-body .np-block-embed { margin: 1.6em 0; }
.np-article-body .np-block-embed iframe { max-width: 100%; }

.np-article-source {
    max-width: 760px; margin: 22px auto 0; padding-top: 14px; border-top: 1px solid var(--pub-border);
    font-size: 13.5px; line-height: 1.5; color: var(--pub-text-muted); word-break: break-word;
}
.np-article-source strong { color: var(--pub-text); font-weight: 600; margin-right: 6px; }
.np-article-source a { margin-left: 4px; }

.np-article-tags { max-width: 760px; margin: 24px auto; display: flex; flex-wrap: wrap; gap: 8px; }
.np-article-tags a { font-size: 12px; border: 1px solid var(--pub-border); border-radius: 100px; padding: 4px 10px; color: var(--pub-text-muted); }

.np-related-rail { max-width: 900px; margin: 40px auto 0; border-top: 1px solid var(--pub-border); padding-top: 20px; }
.np-related-rail h2 { font-family: var(--pub-font-serif); font-size: 20px; margin-bottom: 14px; }
.np-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.np-related-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 8px; background: var(--pub-border); }
.np-related-card .np-related-cat { font-size: 11px; color: var(--pub-accent); font-weight: 700; text-transform: uppercase; }
.np-related-card h3 { font-size: 14.5px; margin: 4px 0 0; line-height: 1.35; }

/* --- Listing pages (category / topic / search) -------------------------------- */

.np-listing-header { max-width: 900px; margin: 0 auto 24px; }
.np-listing-header h1 { font-family: var(--pub-font-serif); font-size: 28px; margin: 0; }
.np-listing-grid { max-width: 900px; margin: 0 auto; display: grid; gap: 20px; }
.np-listing-item { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--pub-border); }
.np-listing-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; background: var(--pub-border); }
.np-listing-item .np-related-cat { font-size: 11px; color: var(--pub-accent); font-weight: 700; text-transform: uppercase; }
.np-listing-item h2 { font-family: var(--pub-font-serif); font-size: 19px; margin: 4px 0; line-height: 1.3; }
.np-listing-item p { color: var(--pub-text-muted); font-size: 13.5px; margin: 0; }
.np-listing-pagination { max-width: 900px; margin: 24px auto; display: flex; gap: 10px; justify-content: center; }
.np-listing-pagination a { border: 1px solid var(--pub-border); border-radius: 6px; padding: 6px 14px; font-size: 13px; }

/* --- Homepage / section composer components ------------------------------------ */

.np-comp { max-width: 1180px; margin: 0 auto 36px; }
.np-comp-title { font-family: var(--pub-font-serif); font-size: 21px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--pub-text); display: inline-block; }
.np-comp-empty { display: none; }
.np-comp-ad { border: 1px dashed var(--pub-border); border-radius: 8px; padding: 30px; text-align: center; color: var(--pub-text-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }

.np-comp-hero-single a { color: inherit; display: block; }
.np-comp-hero-single img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; margin-bottom: 12px; }
.np-comp-hero-single h2 { font-family: var(--pub-font-serif); font-size: 30px; line-height: 1.2; margin: 6px 0; }

.np-hpf-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.np-hpf-hero { color: inherit; display: block; }
.np-hpf-hero img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; margin-bottom: 10px; }
.np-hpf-hero h3 { font-family: var(--pub-font-serif); font-size: 24px; line-height: 1.25; margin: 4px 0; }
.np-hpf-list { display: flex; flex-direction: column; gap: 12px; }
.np-hpf-list a { color: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.4; padding-bottom: 12px; border-bottom: 1px solid var(--pub-border); }

.np-comp-grid-track { display: grid; grid-template-columns: repeat(var(--np-cols, 3), 1fr); gap: 20px; }

.np-rail-track { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.np-rail-card { color: inherit; flex: 0 0 200px; }
.np-rail-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; margin-bottom: 6px; background: var(--pub-border); }
.np-rail-card h4 { font-size: 13.5px; line-height: 1.35; margin: 0; }

.np-ranked-list { list-style: none; counter-reset: np-rank; margin: 0; padding: 0; max-width: 480px; }
.np-ranked-list li { counter-increment: np-rank; display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--pub-border); }
.np-ranked-list li:last-child { border-bottom: none; }
.np-ranked-list li::before { content: counter(np-rank); font-family: var(--pub-font-serif); font-size: 22px; font-weight: 700; color: var(--pub-accent); flex: none; width: 26px; }
.np-ranked-list a { color: inherit; font-size: 14px; line-height: 1.4; font-weight: 600; }

.np-dense-feed-track { display: flex; flex-direction: column; }
.np-dense-feed-item { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--pub-border); color: inherit; }
.np-dense-feed-item img, .np-dense-feed-noimg { width: 100px; height: 72px; object-fit: cover; border-radius: 5px; flex: none; background: linear-gradient(135deg, var(--pub-border), #0002); }
.np-dense-feed-item h4 { font-size: 14.5px; line-height: 1.4; margin: 3px 0 0; }

.np-text-index-track { display: flex; flex-direction: column; }
.np-text-index-item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--pub-border); color: inherit; }
.np-text-index-item h4 { font-size: 15px; line-height: 1.4; margin: 0; font-weight: 600; }
.np-text-index-item .np-related-cat { flex: none; }

.np-tag-grid-track { display: grid; grid-template-columns: repeat(var(--np-cols, 3), 1fr); gap: 18px; }
.np-tag-grid-item { color: inherit; position: relative; display: block; }
.np-tag-grid-item img, .np-tag-grid-item .np-dense-feed-noimg { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; margin-bottom: 8px; }
.np-tag-grid-tag { position: absolute; top: 8px; left: 8px; background: var(--pub-accent); color: #fff; font-size: 10.5px; font-weight: 800; text-transform: uppercase; padding: 3px 9px; border-radius: 3px; }
.np-tag-grid-item h4 { font-size: 14.5px; line-height: 1.35; margin: 0; }

.np-comp-ticker-block { display: flex; align-items: center; gap: 12px; background: var(--pub-bg); border: 1px solid var(--pub-border); border-radius: 8px; padding: 10px 16px; overflow: hidden; }
.np-comp-ticker-badge { background: var(--pub-accent); color: #fff; font-size: 10.5px; font-weight: 800; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; flex: none; }
.np-comp-ticker-track { display: flex; gap: 28px; overflow-x: auto; }
.np-comp-ticker-track a { color: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; }

.np-comp-chips { max-width: 1180px; margin: 0 auto 36px; display: flex; flex-wrap: wrap; gap: 8px; }
.np-chip { border: 1px solid var(--pub-border); border-radius: 100px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: inherit; }
.np-chip:hover { border-color: var(--pub-accent); color: var(--pub-accent); }

@media (max-width: 720px) {
    .np-hpf-grid { grid-template-columns: 1fr; }
    .np-comp-grid-track { grid-template-columns: repeat(2, 1fr); }
    .np-tag-grid-track { grid-template-columns: repeat(2, 1fr); }
}

/* --- Live coverage page -------------------------------------------------------- */

.np-live-header { max-width: 760px; margin: 0 auto 24px; }
.np-live-header h1 { font-family: var(--pub-font-serif); font-size: 30px; margin: 8px 0; }
.np-live-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: 100px; }
.np-live-status.live { background: #fbe4e6; color: var(--pub-accent); }
.np-live-status.live .np-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pub-accent); animation: np-pulse 1.4s infinite; }
.np-live-status.closed { background: #eef0f3; color: var(--pub-text-muted); }
@keyframes np-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.np-live-timeline { max-width: 760px; margin: 0 auto; }
.np-live-item { display: grid; grid-template-columns: 70px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--pub-border); }
.np-live-time { font-size: 12.5px; color: var(--pub-text-muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.np-live-body { font-size: 15px; line-height: 1.7; }
.np-live-item.pinned { background: linear-gradient(90deg, rgba(200,30,44,.06), transparent); }
.np-live-item.highlighted .np-live-body { font-weight: 600; }
.np-live-badges { display: flex; gap: 6px; margin-bottom: 6px; }
.np-live-badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 100px; }
.np-live-badge.pin { background: #e7ecfb; color: var(--pub-primary); }
.np-live-badge.highlight { background: #fbf0dc; color: #a4720c; }
.np-live-badge.correction { background: #fbe4e6; color: var(--pub-accent); }
.np-live-body p { margin: 0 0 .8em; }

/* --- Chrome responsive ------------------------------------------------------- */

@media (max-width: 900px) {
    .np-pub-foot { grid-template-columns: 1fr 1fr; }
    .np-pub-brand { font-size: 22px; }
}

@media (max-width: 680px) {
    .np-pub-toplinks { display: none; }
    .np-pub-head { padding-top: 12px; padding-bottom: 12px; gap: 8px; }
    .np-pub-mark { width: 42px; height: 42px; font-size: 18px; }
    .np-pub-brand { font-size: 20px; white-space: nowrap; }
    .np-pub-tagline { font-size: 8px; letter-spacing: 1px; }
    .np-pub-search { display: none; }
    .np-pub-btn { padding: 7px 9px; font-size: 10px; }
    .np-pub-live-datetime { font-size: 10px; }
    .np-pub-nav { overflow: visible; }
    .np-pub-nav-inner {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
        white-space: normal;
        padding-top: 5px;
        padding-bottom: 5px;
        gap: 2px;
    }
    .np-pub-nav a {
        display: flex; align-items: center; justify-content: center;
        text-align: center; font-size: 11px; padding: 7px 4px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        min-width: 0;
    }
    .np-pub-foot { grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 24px; padding-bottom: 24px; }
}

@media (max-width: 420px) {
    .np-pub-brand { font-size: 17px; }
    .np-pub-tagline { display: none; }
    .np-pub-search-btn { display: none; }
    .np-pub-foot { grid-template-columns: 1fr; }
    .np-pub-nav a { font-size: 10px; padding: 6px 2px; }
}

/* --- Public galleries / videos ---------------------------------------------- */

.np-pub-crumb { font-size: 12px; color: var(--pub-text-muted); margin: 0 0 8px; }
.np-pub-crumb a { color: var(--pub-primary); }

.np-pub-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.np-pub-media-card {
    background: #fff; border: 1px solid var(--pub-border); border-radius: 8px; overflow: hidden;
    color: inherit; display: block;
}
body.np-dark .np-pub-media-card { background: #1a1e27; }
.np-pub-media-thumb {
    height: 180px; background: linear-gradient(135deg, #d8e4ee, #819caf);
    position: relative; overflow: hidden;
}
.np-pub-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-pub-media-thumb-video { background: linear-gradient(135deg, #163f5f, #10151b); }
.np-pub-play {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: #fff; font-size: 28px; text-shadow: 0 1px 8px #0008; pointer-events: none;
}
.np-pub-media-body { padding: 12px; }
.np-pub-media-body h2 { font-size: 16px; line-height: 1.4; margin: 0 0 6px; }
.np-pub-media-meta { font-size: 12px; color: var(--pub-text-muted); }

.np-pub-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.np-pub-photo { margin: 0; background: #fff; border: 1px solid var(--pub-border); border-radius: 8px; overflow: hidden; }
.np-pub-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.np-pub-photo figcaption { padding: 10px 12px; font-size: 13px; color: var(--pub-text-muted); }

.np-pub-video-player { background: #111; border-radius: 8px; overflow: hidden; aspect-ratio: 16/9; }
.np-pub-video-player iframe, .np-pub-video-player video { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 800px) {
    .np-pub-media-grid, .np-pub-photo-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .np-pub-media-grid, .np-pub-photo-grid { grid-template-columns: 1fr; }
}

.np-story-preview-banner {
    background: #b5760a;
    color: #fff;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.np-story-preview-banner a {
    color: #fff;
    text-decoration: underline;
    font-weight: 700;
}