/* =====================================================================
 * Article view — Enterprise newsroom-grade polish
 * Scoped under .article-page-shell so it only affects /article/* pages
 * (and adjacent /explainer/, /interview/ etc. that share the layout).
 *
 * Targets the existing shared partials' class names:
 *   - article-kicker-row
 *   - article-title-stack / blog-post-title / article-subheading
 *   - article-synopsis / article-dek
 *   - article-byline-card / article-byline-primary / article-byline-text
 *   - article-public-metadata-line / article-newsroom-meta-line
 *   - article-meta-actions
 *   - article-hero-stage / article-hero-image
 *   - article-reading-shell
 * No HTML changes required — covers all 26 story types via shared classes.
 * =====================================================================*/

/* ---- 1. Reading measure ---------------------------------------------- */
/* Let the lede stack (headline, deck, synopsis, byline) and hero use
 * the FULL column width so the headline reads visually wider than the
 * deck and synopsis beneath it — newsroom convention.
 * The reading-shell (body copy) gets its own narrower measure further
 * below to keep prose readable. */
.article-page-shell .article-primary-shell {
    --nt-measure: 68ch;
}
.article-page-shell .article-reading-document {
    max-inline-size: none;
    margin-inline: 0;
}
.article-page-shell .article-reading-shell {
    max-inline-size: var(--nt-measure);
}

/* Inline dateline prefix inside the lede paragraph.
 * Newsroom convention: "NEW DELHI:" / "सीकर:" sits bold at the start of
 * the first body paragraph, runs into the prose, never as a separate
 * line. Slight letter-spacing to match wire-service style. */
.article-page-shell .article-dateline-lede {
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.005em;
    margin-inline-end: 2px;
}

/* ---- 2. Kicker (section · read time · premium) ----------------------- */
.article-page-shell .article-kicker-row {
    gap: 10px;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 18px !important;
}
.article-page-shell .article-kicker-item {
    text-transform: uppercase;
    font-weight: 700;
}
.article-page-shell .article-kicker-row > a.article-kicker-item {
    color: var(--accent-brand, #c8102e);
}
.article-page-shell .article-kicker-separator {
    color: #cbd5e1;
    margin: 0 2px;
}
.article-page-shell .article-kicker-item-premium {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #fcd34d;
}

/* ---- 3. Headline stack ---------------------------------------------- */
.article-page-shell .article-title-stack {
    margin-bottom: 18px;
}
/* Keep the existing site-typography font-size for the title (Indic
 * scripts already get tuned line-height from indic-typography.css).
 * Only nudge weight, color, balance for cleaner line-breaks. */
.article-page-shell .blog-post-title {
    color: #0f172a;
    margin: 0 0 14px 0;
    /* No text-wrap:balance — balance shortens lines to equalize them,
     * which makes the headline visually narrower than the deck and
     * synopsis beneath it. Newsroom convention: title must read as the
     * widest element of the lede stack. */
    text-wrap: normal;
    max-inline-size: none !important;
    max-width: none !important;
}
.article-page-shell .article-subheading {
    font-weight: 500;
    color: #334155;
    margin: 0;
    text-wrap: normal;
}

/* ---- 4. Synopsis / dek ---------------------------------------------- */
.article-page-shell .article-synopsis {
    margin: 18px 0 22px;
    padding-inline-start: 14px;
    border-inline-start: 3px solid var(--accent-brand, #c8102e);
}
.article-page-shell .article-dek {
    font-family: var(--font-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
    font-size: 1.05rem;
    line-height: 1.55;
    color: #475569;
    font-weight: 500;
}

/* ---- 5. Status flag (Breaking / Live) ------------------------------- */
.article-page-shell .article-status-flag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.article-page-shell .article-status-flag-breaking {
    background: #c8102e;
    color: #fff;
}
.article-page-shell .article-status-flag-live {
    background: #dc2626;
    color: #fff;
    position: relative;
    padding-inline-start: 22px;
}
.article-page-shell .article-status-flag-live::before {
    content: "";
    position: absolute;
    inset-inline-start: 9px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: nt-live-pulse 1.4s ease-in-out infinite;
}
@keyframes nt-live-pulse {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50% { opacity: 0.45; transform: translateY(-50%) scale(0.78); }
}

/* ---- 6. Byline card -------------------------------------------------- */
.article-page-shell .article-byline-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 20px;
    row-gap: 10px;
    padding: 16px 0;
    margin-block: 22px;
    border-block: 1px solid #e5e7eb;
}
.article-page-shell .article-byline-primary {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
/* Avatar group — supports stacked overlapping circles for co-authors.
 * Single-author article: one circle. Two: two circles overlapping by
 * 16px. Three: three. 4+: three plus a "+N" chip on the right.
 * Each avatar has a brand-tint gradient by default; image overrides
 * the gradient when an avatar URL exists. Guest authors carry a small
 * "G" chip in the bottom-right; verified authors get a blue tick.
 */
.article-page-shell .article-byline-avatar-group {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    isolation: isolate; /* keep z-index contained */
}
.article-page-shell .article-byline-avatar-group .article-byline-avatar {
    position: relative;
    margin-inline-start: -14px;
}
.article-page-shell .article-byline-avatar-group .article-byline-avatar:first-child {
    margin-inline-start: 0;
}
.article-page-shell .article-byline-avatar-group[data-byline-avatar-count="1"] .article-byline-avatar {
    margin-inline-start: 0;
}
.article-page-shell .article-byline-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: visible;
    background: linear-gradient(135deg, var(--accent-brand, #c8102e) 0%, #7f1d1d 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ntcms-font-family-serif, Georgia, serif);
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e5e7eb;
}
.article-page-shell .article-byline-avatar.is-guest {
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
}
.article-page-shell .article-byline-avatar.is-agency {
    background: linear-gradient(135deg, #475569 0%, #1e293b 100%);
}
.article-page-shell .article-byline-avatar.article-byline-avatar-more {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.95rem;
    font-weight: 700;
}
.article-page-shell .article-byline-avatar-glyph {
    font-size: 1.3rem;
}
.article-page-shell .article-byline-avatar-badge {
    position: absolute;
    inset-block-end: -2px;
    inset-inline-end: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #6366f1;
    color: #fff;
    font-family: var(--ntcms-font-family-sans, system-ui, sans-serif);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    z-index: 2;
}
.article-page-shell .article-byline-avatar-verified {
    position: absolute;
    inset-block-end: -2px;
    inset-inline-end: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    z-index: 2;
}
.article-page-shell .article-byline-avatar-image,
.article-page-shell .article-byline-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.article-page-shell .article-byline-avatar-placeholder {
    /* Hide bootstrap-icons placeholder, surface the initial letter
     * via JS instead (article-newsroom-grade.js). */
    display: none;
}
.article-page-shell .article-byline-avatar[data-initial]::before {
    content: attr(data-initial);
}

.article-page-shell .article-byline-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.article-page-shell .article-byline-name-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.98rem;
}
.article-page-shell .article-byline-prefix {
    color: #6b7280;
    font-weight: 500;
}
.article-page-shell .article-byline-name-link {
    color: #0f172a;
    font-weight: 700;
    text-decoration: none;
}
.article-page-shell .article-byline-name-link:hover {
    color: var(--accent-brand, #c8102e);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.article-page-shell .article-byline-name-separator {
    color: #94a3b8;
    margin-inline-end: 2px;
}
.article-page-shell .article-byline-social {
    color: #64748b;
    margin-inline-start: 6px;
    text-decoration: none;
}
.article-page-shell .article-byline-social:hover { color: #0f172a; }

/* Public metadata line — stacked three-row layout:
 *   Row 1: DATELINE city (small, uppercase, brand-tinted)
 *   Row 2: By Author Name (primary text, bold)
 *   Row 3: Published / Updated  · Date · IST (muted secondary)
 * Order is fixed by byline_meta.php: dateline → byline → date.
 * Newsroom convention: published / updated time sits BELOW the byline,
 * never crammed inline with it. */
.article-page-shell .article-public-metadata-line {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.4;
}
.article-page-shell .article-public-metadata-line > span {
    display: block;
}
.article-page-shell .article-public-metadata-line > span:first-child {
    color: #475569;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    margin-bottom: 2px;
}
.article-page-shell .article-public-metadata-line > span:nth-child(2) {
    color: #0f172a;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
}
.article-page-shell .article-public-metadata-line > span:nth-child(3) {
    color: #6b7280;
    font-weight: 500;
    font-size: 0.82rem;
    margin-top: 2px;
}
/* Two-row variant (no dateline) — first child becomes the byline. */
.article-page-shell .article-public-metadata-line > span:only-child {
    color: #0f172a;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
}

/* Newsroom-grade credit block — "Reported by: X | Edited by: Y" with
 * underlined names. Sits between dateline and timestamp inside the
 * byline card. */
.article-page-shell .article-byline-credit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.4;
}
.article-page-shell .article-byline-credit-dateline {
    color: #475569;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    margin-bottom: 2px;
}
.article-page-shell .article-byline-credit-roles {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.95rem;
    color: #0f172a;
}
.article-page-shell .article-byline-credit-role {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.article-page-shell .article-byline-credit-label {
    color: #334155;
    font-weight: 600;
}
.article-page-shell .article-byline-credit-name {
    color: #0f172a;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #cbd5e1;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.article-page-shell .article-byline-credit-sep {
    color: #cbd5e1;
    font-weight: 400;
    user-select: none;
}
.article-page-shell .article-byline-credit-comma {
    color: #94a3b8;
    margin-inline-end: 1px;
}
.article-page-shell .article-byline-credit-and {
    color: #94a3b8;
    font-weight: 600;
    margin-inline: 2px;
}
.article-page-shell .article-byline-credit-chip {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: middle;
}
.article-page-shell .article-byline-credit-verified {
    display: inline-block;
    vertical-align: middle;
    margin-inline-start: 4px;
}
.article-page-shell .article-byline-credit-date {
    color: #6b7280;
    font-weight: 500;
    font-size: 0.82rem;
    margin-top: 2px;
}

/* Newsroom meta line (desk / agency / inputs-from) — quiet chips below
 * the byline. Hidden entirely if it would only repeat the dateline. */
.article-page-shell .article-newsroom-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.72rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.article-page-shell .article-newsroom-meta-line > span {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 2px 8px;
    font-weight: 600;
}

.article-page-shell .article-byline-dates {
    font-size: 0.86rem;
    color: #6b7280;
}
.article-page-shell .article-byline-date-label { font-weight: 600; color: #475569; }
.article-page-shell .article-byline-date-value { color: #6b7280; }

/* ---- 7. Story action icons (save / follow / listen / share) ---------- */
.article-page-shell .article-meta-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.article-page-shell .article-meta-action {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: #475569;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
}
.article-page-shell .article-meta-action:hover,
.article-page-shell .article-meta-action:focus-visible {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #e2e8f0;
}
.article-page-shell .article-meta-action.is-listening,
.article-page-shell .article-meta-action[aria-pressed="true"] {
    background: #fff7ed;
    color: var(--accent-brand, #c8102e);
    border-color: #fed7aa;
}
.article-page-shell .article-meta-action .bi-bookmark-check-fill,
.article-page-shell .article-meta-action .bi-person-check-fill,
.article-page-shell .article-meta-action .bi-bell-fill {
    color: var(--accent-brand, #c8102e);
}

/* ---- 8. Hero stage --------------------------------------------------- */
.article-page-shell .article-hero-stage {
    margin: 22px 0 28px;
}
.article-page-shell .article-hero-stage figure,
.article-page-shell .article-hero-stage .article-hero-figure {
    margin: 0;
}
.article-page-shell .article-hero-stage img,
.article-page-shell .article-hero-stage picture img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 6px 24px rgba(15, 23, 42, 0.06);
}
.article-page-shell .article-hero-caption,
.article-page-shell .article-hero-stage figcaption {
    margin-top: 10px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #475569;
    font-style: italic;
}
.article-page-shell .article-hero-credit,
.article-page-shell .article-hero-stage .credit {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-style: normal;
}

/* ---- 9. Body typography --------------------------------------------- */
.article-page-shell .article-reading-shell {
    font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
    font-size: 1.125rem;
    line-height: 1.75;
    color: #1f2937;
}
.article-page-shell .article-reading-shell p {
    margin: 0 0 1.15em;
}
.article-page-shell .article-reading-shell p:first-of-type::first-letter {
    /* Editorial drop-cap on the lede. Subtle, only on lg+ to avoid
       awkward wrapping on phones. */
}
@media (min-width: 992px) {
    .article-page-shell .article-reading-shell p.has-dropcap::first-letter,
    .article-page-shell .article-reading-shell > .article-body > p:first-of-type::first-letter {
        font-family: var(--font-display, var(--font-serif, Georgia, serif));
        font-size: 3.6em;
        font-weight: 800;
        line-height: 0.92;
        float: inline-start;
        margin: 0.08em 0.12em 0 0;
        color: var(--accent-brand, #c8102e);
    }
}
.article-page-shell .article-reading-shell h2,
.article-page-shell .article-reading-shell h3 {
    font-family: var(--font-display, var(--font-serif, Georgia, serif));
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin: 2em 0 0.6em;
}
.article-page-shell .article-reading-shell h2 { font-size: 1.55rem; font-weight: 800; }
.article-page-shell .article-reading-shell h3 { font-size: 1.25rem; font-weight: 700; }
.article-page-shell .article-reading-shell blockquote,
.article-page-shell .article-reading-shell .article-pull-quote {
    margin: 1.6em 0;
    padding: 6px 0 6px 22px;
    border-inline-start: 4px solid var(--accent-brand, #c8102e);
    font-family: var(--font-display, var(--font-serif, Georgia, serif));
    font-size: 1.32rem;
    line-height: 1.45;
    color: #0f172a;
    font-style: italic;
}
.article-page-shell .article-reading-shell a {
    color: var(--accent-brand, #c8102e);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.article-page-shell .article-reading-shell a:hover {
    text-decoration-thickness: 2px;
}
.article-page-shell .article-reading-shell figure {
    margin: 1.6em 0;
}
.article-page-shell .article-reading-shell figure img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}
.article-page-shell .article-reading-shell figure figcaption {
    margin-top: 8px;
    font-size: 0.86rem;
    color: #64748b;
    font-style: italic;
    line-height: 1.4;
}
.article-page-shell .article-reading-shell ul,
.article-page-shell .article-reading-shell ol {
    padding-inline-start: 1.5em;
    margin: 0 0 1.15em;
}
.article-page-shell .article-reading-shell li { margin-bottom: 0.4em; }

/* ---- 10. Sticky vertical share rail (desktop) ----------------------- */
@media (min-width: 1200px) {
    .article-page-shell .article-primary-shell {
        position: relative;
    }
    .article-page-shell .article-share-rail {
        position: absolute;
        inset-inline-start: -72px;
        inset-block-start: 220px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 5;
    }
    .article-page-shell .article-share-rail.is-sticky {
        position: fixed;
        inset-inline-start: max(24px, calc((100vw - 760px) / 2 - 72px));
        inset-block-start: 120px;
    }
    .article-page-shell .article-share-rail a,
    .article-page-shell .article-share-rail button {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #e2e8f0;
        color: #475569;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 1.05rem;
        transition: transform 0.12s, box-shadow 0.12s, color 0.12s;
        padding: 0;
    }
    .article-page-shell .article-share-rail a:hover,
    .article-page-shell .article-share-rail button:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
        color: #0f172a;
    }
    .article-page-shell .article-share-rail .nt-share-wa:hover { color: #25D366; }
    .article-page-shell .article-share-rail .nt-share-x:hover { color: #000; }
    .article-page-shell .article-share-rail .nt-share-fb:hover { color: #1877F2; }
    .article-page-shell .article-share-rail .nt-share-in:hover { color: #0A66C2; }
}
@media (max-width: 1199.98px) {
    .article-page-shell .article-share-rail { display: none; }
}

/* ---- 11. Reading progress bar polish -------------------------------- */
#reading-progress-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    height: 3px;
    width: 100%;
    z-index: 1080;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--accent-brand, #c8102e);
}
#reading-progress-bar::-webkit-progress-bar { background: transparent; }
#reading-progress-bar::-webkit-progress-value {
    background: var(--accent-brand, #c8102e);
    transition: width 0.08s linear;
}
#reading-progress-bar::-moz-progress-bar {
    background: var(--accent-brand, #c8102e);
    transition: width 0.08s linear;
}
#reading-progress-bar.reading-progress-bar-locked { opacity: 0; }

/* ---- 12. Public notes (correction / premium) ------------------------ */
.article-page-shell .article-public-note {
    grid-column: 1 / -1;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.5;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.article-page-shell .article-public-note--correction {
    background: #fff7ed;
    border-inline-start: 4px solid #f97316;
    color: #7c2d12;
}
.article-page-shell .article-public-note--premium {
    background: #fef3c7;
    border-inline-start: 4px solid #f59e0b;
    color: #78350f;
}
.article-page-shell .article-public-note strong {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
}

/* ---- 13. Responsive byline ------------------------------------------ */
@media (max-width: 575.98px) {
    .article-page-shell .article-byline-card {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }
    .article-page-shell .article-meta-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .article-page-shell .blog-post-title {
        font-size: 1.65rem;
    }
}