/* =====================================================
   MODULE: Single Blog Post — Premium Editorial
   File: pages/single-post.css
   Scope: .post-main
   Design: Matches EWI analysis single post aesthetic —
           dark theme, accent glows, hero image, editorial
           typography, full-bleed header, sidebar grid.
   ===================================================== */


/* =====================================================
   OUTER WRAPPER
   ===================================================== */

.post-main {
    padding-top: 0;
    padding-bottom: var(--space-16);
}


/* =====================================================
   HERO — FULL-BLEED FEATURED IMAGE WITH OVERLAY
   ===================================================== */

.post-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    min-height: 0px;
    max-height: 520px;
    overflow: hidden;
    background: var(--bg-alt);
}

.post-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.75);   /* was 0.55 — much too dark */
    transition: transform 6s ease;
}

.post-hero:hover .post-hero__img {
    transform: scale(1.03);
}

.post-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.15) 40%,
        var(--bg) 100%
    );
    pointer-events: none;
}

.post-hero--empty {
    display: none;
}


/* =====================================================
   POST INNER — CONTENT AREA
   ===================================================== */

.post-content-wrap {
    padding-top: var(--space-4);
}


/* =====================================================
   LAYOUT — NO SIDEBAR
   ===================================================== */

/* Was unconditional — silently capped every layout, including
   full-width/custom AND default "Contained", to the same 820px,
   overriding whatever width the outer .container/.container-full/
   .container-custom was actually meant to provide. Confirmed via post
   3214 twice: first with _page_layout='full-width' (fixed previously),
   then again after switching to 'contained' — Tony wants Contained to
   match the site header's width exactly (.header-inner, 1200px), but
   this 820px inner cap was silently narrowing it well below that.
   Narrow is the one deliberate exception — it's meant to be an
   even-tighter reading column than the header, not match it. */
.container-narrow .post-layout.no-sidebar {
    display: block;
    max-width: 820px;
    margin-inline: auto;
}

.container .post-layout.no-sidebar,
.container-full .post-layout.no-sidebar,
.container-custom .post-layout.no-sidebar {
    display: block;
    margin-inline: auto;
}

/* The column itself has no max-width for contained/full-width/custom
   (see above), so margin-inline:auto on it is a no-op — nothing to
   center within. The only remaining constraint is each text element's
   own 72ch cap, and their shorthand margins (e.g.
   "margin: 0 0 var(--space-5)") explicitly zero out left/right, so
   text sits flush against the column's left edge on a wide screen
   instead of centering in it. Overridden here for these three layouts
   — narrow is the one exception, keeping text flush-left against its
   own (already-narrow) column edge, matching the headings, by design. */
.container-full .post-body h2,
.container-full .post-body h3,
.container-full .post-body h4,
.container-full .post-body p,
.container-full .post-body ul,
.container-full .post-body ol,
.container-full .post-body blockquote,
.container-custom .post-body h2,
.container-custom .post-body h3,
.container-custom .post-body h4,
.container-custom .post-body p,
.container-custom .post-body ul,
.container-custom .post-body ol,
.container-custom .post-body blockquote {
    margin-inline: auto;
}

/* Contained: text elements were still capped at 72ch (the base rule,
   still applied for full-width/custom above, kept there deliberately
   for readability) even after the column itself was widened to match
   the header (previous commit). Tony wants Contained specifically to
   have text match the same full width as images/tables/the header —
   visual consistency prioritized over the 60-75 char reading-width
   guideline for this one layout. max-width:none removes the cap;
   margin-inline:auto is a no-op once there's no width left to center
   within, kept only for consistency with the other three rules above. */
.container .post-body h2,
.container .post-body h3,
.container .post-body h4,
.container .post-body p,
.container .post-body ul,
.container .post-body ol,
.container .post-body blockquote {
    max-width: none;
    margin-inline: auto;
}


/* =====================================================
   LAYOUT — WITH SIDEBAR
   ===================================================== */

.post-layout.has-sidebar {
    display: grid;
    gap: var(--space-10);
    align-items: start;
}

.post-layout.has-sidebar.sidebar-right {
    grid-template-columns: 1fr 300px;
}

.post-layout.has-sidebar.sidebar-left {
    grid-template-columns: 300px 1fr;
}


/* =====================================================
   POST HEADER
   ===================================================== */

.post-header {
    margin-bottom: var(--space-8);
}

.post-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.post-category-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-radius: var(--radius-full);
    background: rgba(77, 163, 255, 0.1);
    border: 1px solid rgba(77, 163, 255, 0.25);
    color: var(--accent);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.post-category-badge:hover {
    background: rgba(77, 163, 255, 0.2);
    border-color: var(--accent);
}

.post-title {
    font-size: clamp(1.7rem, 1rem + 3vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--text);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-5);
}

.post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 0.82rem;
    color: var(--text-muted);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border);
}

.post-meta__author {
    font-weight: 600;
    color: var(--text);
}

.post-meta__sep {
    opacity: 0.35;
}

.post-meta__date,
.post-meta__read-time {
    color: var(--text-muted);
}

.post-meta__read-time::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 6px;
    vertical-align: middle;
    opacity: 0.7;
}


/* =====================================================
   POST BODY — EDITORIAL TYPOGRAPHY
   ===================================================== */

.post-body {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text);
}

.post-body > p:first-of-type {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text);
    font-weight: 400;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-6);
}

.post-body h2 {
    font-size: clamp(1.2rem, 1rem + 1.2vw, 1.65rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    margin: var(--space-10) 0 var(--space-3);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
    letter-spacing: -0.01em;
    max-width: 72ch;
}

.post-body h3 {
    font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    margin: var(--space-8) 0 var(--space-2);
    max-width: 72ch;
}

.post-body h4 {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: var(--space-6) 0 var(--space-2);
    max-width: 72ch;
}

/* 72ch (~60-75 characters/line, standard comfortable reading width) —
   applied to every text element (headings above, p/ul/ol/blockquote
   below), not just <p>. Previously only <p> was constrained, so a
   heading's full-width border-top sat visibly wider than the text
   directly under it. Images/tables deliberately excluded — they keep
   the full 820px column width for visual impact, per explicit design
   decision. */
.post-body p {
    margin: 0 0 var(--space-5);
    max-width: 72ch;
}

.post-body a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.post-body a:hover {
    color: var(--accent-hover);
}

.post-body ul,
.post-body ol {
    margin: 0 0 var(--space-5);
    padding-left: var(--space-6);
    max-width: 72ch;
}

.post-body li {
    margin-bottom: var(--space-2);
    line-height: 1.75;
    color: var(--text);
}

.post-body blockquote {
    position: relative;
    margin: var(--space-10) 0;
    padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
    background: rgba(77, 163, 255, 0.04);
    border: 1px solid rgba(77, 163, 255, 0.15);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    max-width: 72ch;
}

.post-body blockquote::before {
    content: '\201C';
    position: absolute;
    top: -8px;
    left: var(--space-5);
    font-size: 3rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.4;
    font-family: Georgia, serif;
}

.post-body blockquote p {
    margin: 0;
    font-size: 1.05rem;
    font-style: italic;
    color: var(--text-muted);
    line-height: 1.75;
}

.post-body img {
    /* Was max-width:100% alone — only ever shrinks an oversized image
       down to fit, never stretches a smaller one (e.g. a native ~500px
       chart screenshot) up to fill the column, leaving dead space to
       the right (post 3214). width:100% deliberately fills the column
       regardless of the source image's native size. */
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--space-8) 0;
    display: block;
    border: 1px solid var(--border);
}

.post-body code {
    font-size: 0.85rem;
    font-family: 'Courier New', Courier, monospace;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    color: var(--accent);
}

.post-body pre {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    overflow-x: auto;
    margin: var(--space-6) 0;
    font-size: 0.875rem;
    line-height: 1.65;
}

.post-body pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--text);
}

.post-body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-6) 0;
    font-size: 0.875rem;
}

.post-body th,
.post-body td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.post-body th {
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.02);
}

.post-body tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.post-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-10) 0;
}

.post-callout {
    padding: var(--space-4) var(--space-5);
    background: rgba(77, 163, 255, 0.06);
    border: 1px solid rgba(77, 163, 255, 0.2);
    border-radius: var(--radius-md);
    color: var(--text) !important;
    font-size: 0.92rem !important;
    line-height: 1.7 !important;
    margin: var(--space-6) 0 !important;
}

.post-body figcaption,
.post-body .wp-caption-text {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: calc(-1 * var(--space-5));
    margin-bottom: var(--space-6);
    font-style: italic;
}


/* =====================================================
   POST LOCKED — PREMIUM TEASER
   ===================================================== */

.post-locked {
    margin-top: var(--space-6);
    padding: var(--space-5);
    text-align: center;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.post-locked__message {
    margin: 0 0 var(--space-4);
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* .post-locked sits inside .post-body (the else-branch of single.php's
   the_content() gate), so .post-body a further up this file — (0,1,1):
   one class + the "a" element — outranks a plain .post-locked__cta
   class selector (0,1,0) regardless of source order, silently painting
   this button's text the same var(--accent) as its own background
   (text and background identical = invisible, not the earlier #fff-
   on-blue contrast bug, which is why the color:#000 fix alone didn't
   visibly take effect). Scoping under .post-body raises this rule's
   specificity to (0,2,0)/(0,2,1), enough to win. */
.post-body .post-locked__cta {
    display: inline-block;
    padding: 10px 24px;
    background: var(--accent);
    color: #000;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
}

.post-body .post-locked__cta:hover {
    background: var(--accent-hover);
}


/* =====================================================
   POST FOOTER — TAGS
   ===================================================== */

.post-footer {
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.post-tags__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-right: var(--space-1);
}

.post-tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--text-muted);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.post-tag:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(77, 163, 255, 0.06);
}


/* =====================================================
   AUTHOR BOX
   ===================================================== */

.post-author-box {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    padding: var(--space-6);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-top: var(--space-10);
    transition: border-color 0.2s ease;
}

.post-author-box:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.post-author-box__avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border);
}

.post-author-box__role {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 4px;
}

.post-author-box__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 var(--space-1);
}

.post-author-box__bio {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
}


/* =====================================================
   POST NAVIGATION — PREV / NEXT
   ===================================================== */

.post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
}

.post-nav-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.post-nav-link:hover {
    border-color: var(--accent);
    background: rgba(77, 163, 255, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.post-nav-link--next {
    text-align: right;
}

.post-nav-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    opacity: 0.8;
}

.post-nav-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* =====================================================
   SIDEBAR
   ===================================================== */

.sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    position: sticky;
    top: var(--space-8);
}

/* .sidebar-widget/.sidebar-widget__title/.sidebar-recent-posts/
   .sidebar-categories retired — a competing card system that never
   matched any real markup (nothing outputs those classes anywhere).
   The active sidebar content (ewi_render_sidebar_for_current_user(),
   sidebars/sidebar-modules.php) uses .sidebar-box/.sidebar-links/
   .sidebar-partners instead, styled in modules/sidebar-modules.css.
   .sidebar itself (above) is kept — it's the real outer <aside
   class="sidebar"> wrapper from single.php, still active layout. */


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1100px) {
    .post-layout.has-sidebar.sidebar-right,
    .post-layout.has-sidebar.sidebar-left {
        grid-template-columns: 1fr 260px;
    }
}

@media (max-width: 820px) {
    .post-hero {
        aspect-ratio: 16 / 9;
        max-height: 360px;
    }

    .post-layout.has-sidebar.sidebar-right,
    .post-layout.has-sidebar.sidebar-left {
        grid-template-columns: 1fr;
    }

    .post-layout.has-sidebar.sidebar-left .sidebar {
        order: 2;
    }

    .sidebar {
        position: static;
    }

    .post-navigation {
        grid-template-columns: 1fr;
    }

    .post-nav-link--next {
        text-align: left;
    }
}

@media (max-width: 600px) {
    .post-hero {
        aspect-ratio: 4 / 3;
        max-height: 260px;
    }

    .post-title {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }

    .post-body > p:first-of-type {
        font-size: 1rem;
    }

    .post-body h2 {
        font-size: 1.2rem;
    }

    .post-body blockquote {
        padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
    }

    .post-author-box {
        flex-direction: column;
        gap: var(--space-3);
    }

    .post-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   LIGHT MODE FIXES — single-post.css
   ========================================================= */

body.light-mode .post-body code {
    background: rgba(0, 0, 0, 0.05);
}

body.light-mode .post-body th {
    /* Was 0.03 — nearly invisible against the light-mode #f7f7f7
       background, read as "no header styling at all" (post 3214). */
    background: rgba(0, 0, 0, 0.06);
}

body.light-mode .post-body tr:hover td {
    background: rgba(0, 0, 0, 0.02);
}

body.light-mode .post-tag {
    background: rgba(0, 0, 0, 0.04);
}

body.light-mode .post-author-box:hover {
    border-color: rgba(0, 0, 0, 0.15);
}

/* body.light-mode .sidebar-widget:hover retired with .sidebar-widget above */

/* =====================================================
   SHARE ROW — copied from analysis-plugin's analysis.css
   (.as-share-row/.as-share-btn*, ~40 lines, self-contained,
   no other dependencies there). That stylesheet is never enqueued for
   native blog posts (single.php, a separate theme template from the
   plugin's own single-post view), so reusing the same class names
   without also bringing this CSS here would render unstyled raw
   links. Kept as an exact copy — same class names, same visual
   result — rather than a cross-plugin CSS dependency just for this.
   ===================================================== */

.as-share-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.as-share-row__label {
    font-size: 0.75rem;
    color: var(--text-muted, rgba(255,255,255,.5));
    margin-right: 4px;
}

.as-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}

.as-share-btn:hover { opacity: 0.85; }

.as-share-btn--facebook { background: #1877f2; }
.as-share-btn--x        { background: #000; }
.as-share-btn--linkedin { background: #0a66c2; }
.as-share-btn--reddit   { background: #ff4500; }
.as-share-btn--telegram { background: #26a5e4; }
.as-share-btn--whatsapp { background: #25d366; }
.as-share-btn--email    { background: #6b7280; }