/* ═══════════════════════════════════════════════════════════════
   PHASE 33 / 34 — Premium Article Detail
   Loaded only on article show pages via @push('styles').
   Overrides and extends article.css.
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   1. READING PROGRESS BAR
──────────────────────────────────────────────────────────── */
#art-progress {
    height: 4px !important;
    background: linear-gradient(90deg, var(--gold) 0%, #e8c86a 50%, var(--gold) 100%) !important;
}

/* ────────────────────────────────────────────────────────────
   2. ARTICLE HERO HEADER — PREMIUM
──────────────────────────────────────────────────────────── */
.np-art-header {
    background: linear-gradient(170deg, #010b15 0%, #03111F 50%, #071828 100%) !important;
    padding: 3rem 0 2.5rem !important;
    border-bottom: 1px solid rgba(201,162,74,.2) !important;
}
.np-art-header-inner {
    max-width: 820px !important;
}

/* Category kicker */
.np-art-kicker {
    display: inline-flex !important;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    letter-spacing: .24em !important;
    text-transform: uppercase !important;
    color: var(--gold) !important;
    text-decoration: none;
    margin-bottom: 1rem;
    border: none !important;
    padding: 0 !important;
}
.np-art-kicker::before {
    content: '';
    display: inline-block;
    width: 26px;
    height: 2px;
    background: var(--gold);
    flex-shrink: 0;
    border-radius: 1px;
}

/* Headline */
.np-art-title {
    font-size: clamp(1.9rem, 3.8vw, 3rem) !important;
    font-weight: 900 !important;
    line-height: 1.14 !important;
    letter-spacing: -.03em !important;
    color: var(--white) !important;
    margin-bottom: 1.1rem !important;
    max-width: 780px;
    text-shadow: 0 2px 24px rgba(0,0,0,.2);
}

/* Subtitle / excerpt */
.np-art-subtitle {
    font-size: 1.1rem !important;
    line-height: 1.58 !important;
    color: rgba(255,255,255,.65) !important;
    font-weight: 400 !important;
    max-width: 640px;
    margin-bottom: 1.5rem !important;
}

/* Byline row */
.np-art-byline {
    border-top: 1px solid rgba(255,255,255,.1) !important;
    padding-top: 1rem !important;
    gap: 0.55rem !important;
    font-size: 0.78rem !important;
}
.np-art-byline-author a,
.np-art-byline-author {
    color: rgba(255,255,255,.85) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-decoration: none;
}
.np-art-byline-author a:hover { color: var(--gold) !important; }
.np-art-byline-date {
    color: rgba(255,255,255,.42) !important;
    font-size: 0.74rem !important;
}
.np-art-byline-sep { opacity: .28 !important; }
.np-art-read-time {
    font-size: 0.72rem !important;
    color: rgba(255,255,255,.4) !important;
}

/* ────────────────────────────────────────────────────────────
   3. HERO IMAGE — CINEMATIC
──────────────────────────────────────────────────────────── */
.np-art-hero-img {
    padding-bottom: 0 !important;
    background: #01080f !important;
    line-height: 0;
}
.np-art-figure {
    position: relative !important;
    margin: 0 !important;
    max-width: none !important;
    overflow: hidden;
}
.np-art-figure img {
    max-height: 580px !important;
    min-height: 200px;
    object-fit: cover !important;
    width: 100% !important;
    border-radius: 0 !important;
    display: block !important;
    line-height: 0;
}
/* Gradient overlay at bottom of image */
.np-art-figure::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(1,8,21,.55) 0%, transparent 100%);
    pointer-events: none;
}
/* Caption: dark, inline with image */
.np-art-caption {
    display: block;
    font-size: 0.68rem !important;
    color: rgba(255,255,255,.38) !important;
    background: #01080f;
    padding: 0.4rem 0.75rem !important;
    border-inline-start: 2px solid rgba(201,162,74,.2) !important;
    line-height: 1.4;
    margin-top: 0 !important;
}
/* No-image fallback */
.np-art-hero-img--noimg {
    min-height: 8px !important;
    background: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, transparent 100%);
    line-height: initial;
}

/* ────────────────────────────────────────────────────────────
   4. BODY LAYOUT — SPACING SYSTEM
──────────────────────────────────────────────────────────── */
.np-art-layout {
    grid-template-columns: 1fr 300px !important;
    gap: 3rem !important;
    padding-top: 3rem !important;
}
.np-art-layout:not(.np-art-layout--nosidebar) .np-art-body {
    max-width: none !important;
}

/* ────────────────────────────────────────────────────────────
   5. BODY TYPOGRAPHY — 18px, FT-GRADE
──────────────────────────────────────────────────────────── */
.np-art-body {
    font-size: 1.2rem !important;
    line-height: 1.87 !important;
    color: #1a202c;
}
.np-art-body p        { margin: 0 0 1.4em !important; }
.np-art-body h2       {
    font-size: 1.45rem !important; font-weight: 800 !important;
    margin: 2.5em 0 0.7em !important;
    border-bottom: 2px solid rgba(201,162,74,.22) !important;
    padding-bottom: 0.45em !important;
}
.np-art-body h3       {
    font-size: 1.18rem !important; font-weight: 700 !important;
    margin: 2em 0 0.5em !important;
    padding-inline-start: 0.7rem !important;
    border-inline-start: 3px solid var(--gold) !important;
}
.np-art-body h4       { font-size: 1.04rem !important; margin: 1.6em 0 0.4em !important; }
.np-art-body ul,
.np-art-body ol       { padding-inline-start: 1.75rem !important; margin: 0 0 1.4em !important; }
.np-art-body li       { margin-bottom: 0.45em !important; }

/* Drop cap */
.np-art-body > p:first-child::first-letter {
    font-size: 3.8em !important; font-weight: 900 !important; line-height: .78 !important;
    float: inline-start;
    margin-inline-end: .1em; margin-top: .12em;
    color: var(--gold) !important;
    font-family: Georgia, 'Times New Roman', serif;
}

/* Blockquote — fix invalid gradient from older CSS */
.np-art-body blockquote {
    background: rgba(201,162,74,.05) !important;
    border-inline-start: 5px solid var(--gold) !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 1.25rem 1.5rem !important;
    font-size: 1.06rem !important;
    line-height: 1.7 !important;
    font-style: italic;
    margin: 2em 0 !important;
}

/* ────────────────────────────────────────────────────────────
   6. EDITORIAL AD BLOCKS
──────────────────────────────────────────────────────────── */

/* Top banner — sits between image and body */
.ad-wrap--article-top {
    margin: 0 0 2.5rem !important;
    padding: 1.25rem 0 !important;
    background: #fafaf8 !important;
    border-top: 1px solid #eeecea !important;
    border-bottom: 1px solid #eeecea !important;
    text-align: center !important;
}
.ad-wrap--article-top .ad-slot {
    max-width: 728px !important;
    margin: 0 auto !important;
    border-radius: 6px !important;
    overflow: hidden;
    padding: 0 !important;
    background: transparent !important;
}
.ad-wrap--article-top .ad-slot--leaderboard {
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
.ad-wrap--article-top .ad-slot-placeholder {
    max-width: 728px !important;
    margin: 0 auto !important;
    border-radius: 6px !important;
    min-height: 72px !important;
    max-height: 90px !important;
}

/* Inline mid-content ads */
.ad-wrap--inline {
    margin: 2.5rem 0 !important;
    padding: 1.25rem 0 !important;
    background: #fafaf8 !important;
    border-top: 1px solid #eeecea !important;
    border-bottom: 1px solid #eeecea !important;
    text-align: center !important;
}
.ad-wrap--inline .ad-slot {
    max-width: 728px !important;
    margin: 0 auto !important;
    border-radius: 6px !important;
    overflow: hidden;
    padding: 0.5rem !important;
    background: transparent !important;
    border: none !important;
}
.ad-wrap--inline .ad-slot--inline {
    border-top: none !important;
    border-bottom: none !important;
    margin: 0 !important;
}
.ad-wrap--inline .ad-slot-placeholder {
    max-width: 728px !important;
    margin: 0 auto !important;
    border-radius: 6px !important;
    min-height: 72px !important;
    max-height: 90px !important;
}

/* Sponsored label — discrete, newspaper-style */
.ad-sponsored-label {
    display: block !important;
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: #aaa !important;
    opacity: 1 !important;
    text-align: center !important;
    margin-bottom: 0.45rem !important;
    padding: 0 !important;
}

/* ────────────────────────────────────────────────────────────
   7. BODY-INJECTED AD — borderless, no label, content-feel
──────────────────────────────────────────────────────────── */
.ad-slot--body-injected {
    display: block !important;
    margin: 2.5rem auto !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-top: none !important;
    border-bottom: none !important;
}
.ad-slot--body-injected .ad-sponsored-label { display: none !important; }
.ad-slot--body-injected img {
    max-width: 100% !important;
    height: auto !important;
    display: inline-block !important;
    border-radius: 4px;
}

/* ────────────────────────────────────────────────────────────
   9. TAGS
──────────────────────────────────────────────────────────── */
.np-art-tags {
    margin-top: 2rem !important;
    padding-top: 1.25rem !important;
    border-top: 1px solid var(--border) !important;
    gap: 0.4rem !important;
}
.np-art-tag {
    font-size: 0.68rem !important;
    padding: 0.22rem 0.65rem !important;
    border-radius: 3px !important;
    transition: background .18s, color .18s !important;
}

/* ────────────────────────────────────────────────────────────
   8. SHARE BAR
──────────────────────────────────────────────────────────── */
.np-art-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap !important;
    gap: 0.45rem !important;
    margin-top: 2rem !important;
    padding: 0.85rem 1.1rem !important;
    background: #f8f7f3 !important;
    border: 1px solid #e8e5e0 !important;
    border-radius: 5px !important;
}
.np-art-share-label {
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    margin-inline-end: 0.2rem;
    flex-shrink: 0;
}
.np-share-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
}
.np-share-btn.np-share-fb:hover {
    background: #1877F2 !important;
    border-color: #1877F2 !important;
    color: #fff !important;
}
.np-share-btn.np-share-copy.is-copied {
    background: var(--green) !important;
    border-color: var(--green) !important;
    color: #fff !important;
}

/* ────────────────────────────────────────────────────────────
   9. NEWSLETTER CTA
──────────────────────────────────────────────────────────── */
.np-art-newsletter {
    border-radius: 8px !important;
    border: 1px solid rgba(201,162,74,.18) !important;
    border-top: 3px solid var(--gold) !important;
    margin: 2.5rem 0 0 !important;
    padding: 1.75rem 2rem !important;
}

/* ────────────────────────────────────────────────────────────
   10. AUTHOR BOX
──────────────────────────────────────────────────────────── */
.np-art-author-box {
    display: block !important;         /* fix Phase 1 display:flex bug */
    background: var(--deep-navy) !important;
    border: none !important;
    border-top: 3px solid var(--gold) !important;
    border-inline-start: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 1.6rem 1.75rem !important;
    border-radius: 0 0 6px 6px !important;
    margin-top: 2.5rem !important;
}

/* ────────────────────────────────────────────────────────────
   11. SIDEBAR — BLOOMBERG RAIL STYLE
──────────────────────────────────────────────────────────── */
.np-art-sidebar {
    position: sticky !important;
    top: calc(var(--topbar-h, 36px) + var(--header-h, 80px) + var(--nav-h, 44px) + 1.5rem) !important;
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(201,162,74,.2) transparent !important;
    align-self: start !important;
}
/* Sidebar ad wrapper */
.np-sidebar-ad-wrap {
    margin-bottom: 2rem !important;
    border-radius: 6px;
    overflow: hidden;
}
.np-sidebar-ad-wrap .ad-slot,
.np-sidebar-ad-wrap .ad-slot-placeholder {
    border-radius: 6px !important;
}

/* "Also Read" heading */
.np-sidebar-related {
    padding-top: 0 !important;
    border-top: none !important;
}
.np-sidebar-section-title {
    display: block;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    color: var(--deep-navy) !important;
    border-inline-start: 4px solid var(--gold) !important;
    padding-inline-start: 0.65rem !important;
    margin-bottom: 0 !important;
    padding-bottom: 0.8rem !important;
    border-bottom: 1px solid #eae8e3;
}

/* Sidebar article items */
.np-sidebar-item {
    display: flex;
    gap: 0.75rem !important;
    align-items: flex-start;
    padding: 0.9rem 0 !important;
    border-bottom: 1px solid #f0ede8 !important;
    text-decoration: none;
    position: relative;
    transition: padding-inline-start .2s ease !important;
}
/* Gold left-bar reveal on hover */
.np-sidebar-item::before {
    content: '';
    position: absolute;
    inset-inline-start: -2px;
    top: 0.9rem;
    bottom: 0.9rem;
    width: 3px;
    background: var(--gold);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .22s ease;
    border-radius: 2px;
}
.np-sidebar-item:hover::before   { transform: scaleY(1); }
.np-sidebar-item:hover           { opacity: 1 !important; padding-inline-start: 0.55rem !important; }
.np-sidebar-item:last-child      { border-bottom: none !important; padding-bottom: 0 !important; }

/* Thumbnail */
.np-sidebar-thumb {
    flex: 0 0 72px !important;
    height: 54px !important;
    border-radius: 3px !important;
    overflow: hidden;
    background: #ece9e3;
}
.np-sidebar-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .35s ease !important;
}
.np-sidebar-item:hover .np-sidebar-thumb img { transform: scale(1.06) !important; }

/* Item text */
.np-sidebar-item-body    { flex: 1; min-width: 0; }
.np-sidebar-item-title {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.38 !important;
    color: var(--navy) !important;
    margin: 0 0 0.28rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.np-sidebar-item:hover .np-sidebar-item-title { color: var(--gold) !important; }
.np-sidebar-item-date {
    font-size: 0.65rem !important;
    color: var(--muted) !important;
    letter-spacing: .02em;
}

/* ────────────────────────────────────────────────────────────
   12. RELATED ARTICLES — PREMIUM CARD GRID
──────────────────────────────────────────────────────────── */
.np-art-related {
    background: #f7f6f2 !important;
    border-top: 1px solid rgba(201,162,74,.28) !important;
    padding: 2.75rem 0 3.5rem !important;
    margin-top: 0 !important;
}
.np-art-related-hd {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(201,162,74,.18) !important;
}
.np-art-related-title {
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: var(--deep-navy) !important;
    border-inline-start: 4px solid var(--gold) !important;
    padding-inline-start: 0.7rem !important;
}
.np-art-related-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
}

/* Related card */
.np-rel-card {
    background: var(--white) !important;
    border: 1px solid #e8e5e0 !important;
    border-radius: 5px !important;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 3px 12px rgba(0,0,0,.05) !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.np-rel-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.1) !important;
    border-color: rgba(201,162,74,.35) !important;
}
.np-rel-img {
    display: block !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
}
.np-rel-img img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .55s ease !important;
}
.np-rel-card:hover .np-rel-img img { transform: scale(1.05) !important; }
.np-rel-body { padding: 0.85rem 1rem 1rem !important; }
/* Category badge */
.np-rel-body .eg-cat {
    display: block !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--gold) !important;
    margin-bottom: 0.35rem !important;
}
.np-rel-title {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--text) !important;
    margin: 0 0 0.4rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.np-rel-title a { color: inherit !important; text-decoration: none; }
.np-rel-title a:hover { color: var(--gold) !important; }
.np-rel-body .eg-card-date {
    font-size: 0.67rem !important;
    color: var(--muted) !important;
    display: block !important;
}

/* ────────────────────────────────────────────────────────────
   INITIATIVE / EVENT ENGAGEMENT BLOCK
   Editorial engagement card — NOT an ad, NOT sponsored.
   Sits after author box, before bottom paid slot.
──────────────────────────────────────────────────────────── */
.np-art-initiative {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: linear-gradient(105deg, #010c18 0%, #03111F 55%, #071a2d 100%);
    border-top: 3px solid rgba(201,162,74,.5);
    border-radius: 6px;
    padding: 1.5rem 1.75rem;
    margin: 2.5rem 0 0;
}
.np-art-initiative-badge {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.1rem;
    display: inline-block;
    padding: 0.22rem 0.7rem;
    background: rgba(201,162,74,.12);
    border: 1px solid rgba(201,162,74,.32);
    color: var(--gold, #c9a24a);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 2px;
    white-space: nowrap;
}
.np-art-initiative-body {
    flex: 1;
    min-width: 0;
}
.np-art-initiative-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.35rem;
    line-height: 1.3;
}
.np-art-initiative-sub {
    font-size: 0.82rem;
    color: rgba(255,255,255,.55);
    margin: 0;
    line-height: 1.5;
}
.np-art-initiative-cta {
    flex-shrink: 0;
    display: inline-block;
    padding: 0.55rem 1.35rem;
    background: transparent;
    border: 1.5px solid rgba(201,162,74,.6);
    color: var(--gold, #c9a24a);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.np-art-initiative-cta:hover {
    background: var(--gold, #c9a24a);
    color: #03111F;
    border-color: var(--gold, #c9a24a);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE-FIRST CORRECTIONS
═══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .np-art-layout {
        grid-template-columns: 1fr 280px !important;
        gap: 2.25rem !important;
    }
}

@media (max-width: 1024px) {
    .np-art-layout {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding-top: 2rem !important;
    }
    .np-art-sidebar {
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
        margin-top: 2.5rem;
    }
}

@media (max-width: 768px) {
    .np-art-initiative      { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.25rem; }
    .np-art-initiative-cta  { width: 100%; text-align: center; }
    .np-art-header          { padding: 2rem 0 1.75rem !important; }
    .np-art-title           { font-size: 1.65rem !important; letter-spacing: -.025em !important; max-width: 100% !important; }
    .np-art-subtitle        { font-size: 0.95rem !important; max-width: 100% !important; }
    .np-art-body            { font-size: 1.04rem !important; line-height: 1.78 !important; }
    .np-art-body p          { margin: 0 0 1.1em !important; }
    .np-art-body h2         { font-size: 1.22rem !important; margin-top: 1.75em !important; }
    .np-art-body h3         { font-size: 1.05rem !important; }
    .np-art-body > p:first-child::first-letter { font-size: 3.2em !important; }
    .np-art-figure img      { max-height: 240px !important; min-height: unset !important; }
    .np-art-figure::after   { height: 25%; }
    .np-art-layout          { padding-top: 1.5rem !important; }
    .np-art-related-grid    { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
    .np-art-share           { padding: 0.75rem 0.9rem !important; }
    .np-art-newsletter      {
        padding: 1.25rem 1.1rem !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    .np-art-newsletter-input { width: 100% !important; }
    .np-art-newsletter-form  { width: 100% !important; flex-direction: column !important; }
    .np-art-newsletter-btn   { width: 100% !important; }
    .ad-wrap--article-top,
    .ad-wrap--inline        { margin: 1.5rem 0 !important; padding: 0.85rem 0 !important; }
    .ad-wrap--article-top .ad-slot,
    .ad-wrap--inline .ad-slot { max-width: 100% !important; }
    .ad-wrap--inline .ad-slot-placeholder { min-height: 60px !important; max-height: 75px !important; }
    .np-art-body table      { font-size: 0.8rem !important; }
    .np-art-body            { overflow-x: hidden; }
}

@media (max-width: 480px) {
    .np-art-title           { font-size: 1.45rem !important; }
    .np-art-related-grid    { grid-template-columns: 1fr !important; }
    .np-art-share           { padding: 0.7rem 0.8rem !important; gap: 0.35rem !important; }
    .np-art-author-box      { padding: 1.25rem 1.15rem !important; }
    .np-art-newsletter      { padding: 1rem !important; }
    .np-art-body img        { max-width: 100% !important; }
    .np-sidebar-thumb       { flex: 0 0 60px !important; height: 46px !important; }
}