/* ══════════════════════════════════════════
   BLOG SINGLE POST — Magazine Layout
   ══════════════════════════════════════════ */

/* ── Page wrapper ── */
.post-page {
    min-height: 100vh;
    background: var(--bg-primary, #fff);
    overflow-x: hidden;
}

/* ── Mobile hero — hidden on desktop ── */
.post-mobile-hero {
    display: none;
}

/* ── Desktop hero image ── */
.post-desktop-hero {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 36px;
}

.post-desktop-hero img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Mobile hero card (background image + overlay) ── */
.post-mobile-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.post-mobile-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.55) 50%,
        rgba(0, 0, 0, 0.85) 100%
    );
}

.post-mobile-hero__content {
    position: relative;
    z-index: 1;
    padding: 140px 20px 28px;
}

.post-mobile-hero__badges {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.post-mobile-hero__badge {
    display: inline-block;
    padding: 5px 14px;
    background: var(--primary, #4CAF50);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 20px;
    text-decoration: none;
}

.post-mobile-hero__read-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.post-mobile-hero__read-time i {
    margin-right: 2px;
}

.post-mobile-hero__title {
    font-size: 28px;
    font-weight: 500;
    line-height: 115%;
    letter-spacing: 0;
    color: #fff;
    margin: 0 0 20px;
}

.post-mobile-hero__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.post-mobile-hero__author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.post-mobile-hero__author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-mobile-hero__author-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    display: block;
    line-height: 1.3;
}

.post-mobile-hero__author-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    display: block;
    line-height: 1.3;
}

/* ── Mobile-only inline elements — hidden on desktop ── */
.post-inline-author,
.post-inline-related,
.post-more-category {
    display: none;
}

/* ── Post Header (centered on desktop) ── */
.post-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px 32px;
    max-width: 820px;
    margin: 0 auto;
}

/* Desktop: title before meta */
.post-header__badge { order: 1; }
.post-header__draft-badge { order: 0; }
.post-header__title { order: 2; }
.post-header__meta { order: 3; }
.post-header__edit-btn { order: 4; }

.post-header__badge {
    display: inline-block;
    padding: 6px 18px;
    background: var(--primary, #4CAF50);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 20px;
    margin-bottom: 20px;
    text-decoration: none;
}

.post-header__badge:hover {
    opacity: 0.9;
}

.post-header__title {
    font-size: 42px;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: 0;
    color: var(--text-primary, #111827);
    margin: 0 0 24px;
}

.post-header__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-tertiary, #6b7280);
}

.post-header__meta-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.post-header__meta-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-header__meta-author {
    font-weight: 600;
    color: var(--text-primary, #111827);
    text-decoration: none;
}

.post-header__meta-author:hover {
    color: var(--primary, #4CAF50);
}

.post-header__meta-sep {
    color: var(--text-quaternary, #d1d5db);
}

.post-header__draft-badge {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.post-header__edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary, #6b7280);
    border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
    border-radius: 8px;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
    margin-top: 12px;
}

.post-header__edit-btn:hover {
    color: var(--primary, #4CAF50);
    border-color: var(--primary, #4CAF50);
}

/* ── Main Layout ── */
.post-layout {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px 64px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    align-items: start;
}

.post-content-area {
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ── Article Prose ── */
.post-prose {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-secondary, #374151);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.post-prose h1,
.post-prose h2,
.post-prose h3,
.post-prose h4,
.post-prose h5,
.post-prose h6 {
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 0;
    color: var(--text-primary, #111827);
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}

.post-prose h2 { font-size: 28px; }
.post-prose h3 { font-size: 22px; }
.post-prose h4 { font-size: 18px; }

.post-prose p {
    margin: 0 0 1.2em;
}

.post-prose strong, .post-prose b {
    font-weight: 600;
}

.post-prose em, .post-prose i {
    font-style: italic;
}

.post-prose ul, .post-prose ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.post-prose ul { list-style-type: disc; }
.post-prose ol { list-style-type: decimal; }

.post-prose li {
    margin: 0.3em 0;
}

.post-prose blockquote {
    border-left: 3px solid var(--primary, #4CAF50);
    padding: 20px 24px;
    margin: 28px 0;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-primary, #111827);
}

.post-prose a {
    color: var(--primary, #4CAF50);
    text-decoration: underline;
}

.post-prose a:hover {
    color: var(--primary-hover, #43A047);
}

.post-prose img {
    border-radius: 12px;
    margin: 24px 0;
    max-width: 100%;
    height: auto;
}

.post-prose pre, .post-prose code {
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 6px;
    font-family: monospace;
}

.post-prose code {
    padding: 2px 6px;
    font-size: 0.9em;
}

.post-prose pre {
    padding: 16px 20px;
    overflow-x: auto;
    margin: 1.2em 0;
    max-width: 100%;
}

.post-prose hr {
    border: none;
    border-top: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
    margin: 2.5em 0;
}

.post-prose iframe.ql-video {
    display: inline-block;
    vertical-align: top;
    border: none;
    border-radius: 12px;
    margin: 0.2em;
    aspect-ratio: 16 / 9;
    max-width: 100%;
}

.post-prose iframe.ql-video { width: calc(50% - 0.5em); }
.post-prose iframe.ql-video[data-size="small"] { width: calc(25% - 0.5em); }
.post-prose iframe.ql-video[data-size="medium"] { width: calc(50% - 0.5em); }
.post-prose iframe.ql-video[data-size="large"] { width: calc(100% - 0.5em); }

/* ── Reactions ── */
.post-reactions {
    padding: 32px 0;
    border-top: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
    margin-top: 40px;
}

.post-reactions__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-quaternary, #9ca3af);
    margin-bottom: 14px;
}

.post-reactions__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.post-reactions__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
    border-radius: 20px;
    background: var(--card-background, #fff);
    color: var(--text-secondary, #374151);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.post-reactions__btn:hover {
    background: var(--bg-secondary, #f9fafb);
}

.post-reactions__btn--active {
    background: var(--primary, #4CAF50);
    color: #fff;
    border-color: var(--primary, #4CAF50);
}

.post-reactions__btn-label {
    font-weight: 500;
}

/* ── Tags ── */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 0;
    border-bottom: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
}

.post-tags__item {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #374151);
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.post-tags__item:hover {
    background: var(--primary, #4CAF50);
    color: #fff;
}

/* ── Share / Bookmark Row ── */
.post-actions-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 0;
}

.post-actions-row__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--text-quaternary, #9ca3af);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    transition: color 0.2s, background 0.2s;
}

.post-actions-row__btn:hover {
    color: var(--primary, #4CAF50);
    background: var(--bg-secondary, #f3f4f6);
}

/* ── Comments Section ── */
.post-comments {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
}

.post-comments__title {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 100%;
    color: var(--text-primary, #111827);
    margin: 0 0 24px;
}

/* ── Sidebar ── */
.post-sidebar {
    position: sticky;
    top: 100px;
}

/* Author Card */
.post-sidebar__author {
    background: var(--bg-secondary, #f9fafb);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    margin-bottom: 24px;
}

.post-sidebar__author-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 14px;
}

.post-sidebar__author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-sidebar__author-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin: 0 0 6px;
}

.post-sidebar__author-name a {
    color: inherit;
    text-decoration: none;
}

.post-sidebar__author-name a:hover {
    color: var(--primary, #4CAF50);
}

.post-sidebar__author-bio {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-tertiary, #6b7280);
    margin: 0 0 18px;
}

.post-sidebar__author-btn {
    display: inline-block;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    border: 1.5px solid var(--text-primary, #111827);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.post-sidebar__author-btn:hover {
    background: var(--primary, #4CAF50);
    color: #fff;
    border-color: var(--primary, #4CAF50);
}

/* Related Reading */
.post-sidebar__section {
    background: var(--bg-secondary, #f9fafb);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 24px;
}

.post-sidebar__heading {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.post-sidebar__related-item {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--card-border, rgba(0, 0, 0, 0.06));
    text-decoration: none;
}

.post-sidebar__related-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.post-sidebar__related-item:first-child {
    padding-top: 0;
}

.post-sidebar__related-thumb {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.post-sidebar__related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-sidebar__related-body {
    flex: 1;
    min-width: 0;
}

.post-sidebar__related-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    line-height: 1.4;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-sidebar__related-item:hover .post-sidebar__related-title {
    color: var(--primary, #4CAF50);
}

.post-sidebar__related-meta {
    font-size: 12px;
    color: var(--text-quaternary, #9ca3af);
}

/* ══════════════════════════════════════════
   TABLET (1024px)
   ══════════════════════════════════════════ */

@media (max-width: 1024px) {
    .post-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .post-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .post-sidebar__author,
    .post-sidebar__section {
        margin-bottom: 0;
    }
}

/* ══════════════════════════════════════════
   MOBILE (768px)
   ══════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Show mobile dark hero, hide desktop header + desktop hero */
    .post-mobile-hero {
        display: block;
    }

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

    .post-header {
        display: none;
    }

    /* Layout: single column, no grid */
    .post-layout {
        display: block;
        padding: 0 16px 40px;
        max-width: 100%;
    }

    /* Content area: prevent overflow */
    .post-content-area {
        max-width: 100%;
        overflow: hidden;
    }

    /* Drop cap on first paragraph */
    .post-prose > p:first-of-type::first-letter {
        float: left;
        font-size: 3.2em;
        line-height: 0.85;
        font-weight: 600;
        color: var(--text-primary, #111827);
        margin: 4px 8px 0 0;
        padding: 0;
    }

    .post-prose {
        font-size: 15px;
        line-height: 1.75;
    }

    .post-prose h2 { font-size: 20px; }
    .post-prose h3 { font-size: 17px; }
    .post-prose h4 { font-size: 15px; }

    .post-prose blockquote {
        padding: 14px 16px;
        font-size: 15px;
        margin: 20px 0;
    }

    .post-prose img {
        border-radius: 8px;
        margin: 16px 0;
        max-width: 100%;
    }

    .post-prose pre {
        max-width: 100%;
        overflow-x: auto;
        font-size: 13px;
    }

    .post-prose iframe.ql-video,
    .post-prose iframe.ql-video[data-size="small"],
    .post-prose iframe.ql-video[data-size="medium"],
    .post-prose iframe.ql-video[data-size="large"] {
        width: 100%;
    }

    .post-prose table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    /* Reactions: wrap */
    .post-reactions {
        padding: 20px 0;
        margin-top: 24px;
    }

    .post-reactions__buttons {
        flex-wrap: wrap;
        gap: 6px;
    }

    .post-reactions__btn {
        padding: 6px 12px;
        font-size: 13px;
    }

    /* Tags */
    .post-tags {
        padding: 14px 0;
    }

    .post-tags__item {
        padding: 5px 12px;
        font-size: 12px;
    }

    /* Share row */
    .post-actions-row {
        padding: 12px 0;
    }

    /* More from category link — visible on mobile */
    .post-more-category {
        display: block;
        text-align: center;
        padding: 16px 0;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
    }

    .post-more-category a {
        color: var(--text-quaternary, #9ca3af);
        text-decoration: none;
    }

    .post-more-category a:hover {
        color: var(--primary, #4CAF50);
    }

    /* Inline author card — visible on mobile */
    .post-inline-author {
        display: block;
        margin: 24px 0;
    }

    /* Inline related posts — visible on mobile */
    .post-inline-related {
        display: block;
        margin: 24px 0;
    }

    .post-inline-related__title {
        font-size: 20px;
        font-weight: 500;
        color: var(--text-primary, #111827);
        margin: 0 0 16px;
    }

    .post-inline-related__list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .post-inline-related__card {
        display: block;
        text-decoration: none;
    }

    .post-inline-related__img {
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .post-inline-related__img img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
    }

    .post-inline-related__card-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary, #111827);
        line-height: 1.35;
        margin: 0 0 4px;
    }

    .post-inline-related__card:hover .post-inline-related__card-title {
        color: var(--primary, #4CAF50);
    }

    .post-inline-related__card-excerpt {
        font-size: 13px;
        line-height: 1.5;
        color: var(--text-tertiary, #6b7280);
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Hide sidebar on mobile (replaced by inline elements) */
    .post-sidebar {
        display: none;
    }

    /* Comments */
    .post-comments {
        margin-top: 24px;
        padding-top: 24px;
    }

    .post-comments__title {
        font-size: 20px;
        margin-bottom: 16px;
    }

    /* Newsletter on mobile */
    .blog-newsletter {
        padding: 24px 20px;
    }
}