/* ============================================================
   Azaad — BLOG POST PAGE  (blog-post.css)
   Page-specific styles for /blog/*.html article pages
   Load order: AFTER all global CSS files AND blog.css
   (blog.css is reused here for .blog-grid / .blog-card in the
   "Related Articles" section, and for .blog-newsletter).
   Depends on: variables.css for all --color-*, --space-*,
               --font-*, --radius-*, --shadow-*, --duration-* tokens.

   Sections:
     1.  Breadcrumb
     2.  Article Hero
     3.  Share Bar
     4.  Article Body / Prose
     5.  Pull Quote
     6.  Buying Checklist Card
     7.  Author Bio
     8.  Related Articles
     9.  Responsive Overrides
    10.  Reduced Motion
   ============================================================ */


/* =====================================================
   1. BREADCRUMB
===================================================== */

.post-breadcrumb {
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

.post-breadcrumb__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.post-breadcrumb__inner a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.post-breadcrumb__inner a:hover {
    color: var(--color-brand-gold-dark);
}

.post-breadcrumb__sep {
    color: var(--color-gray-400);
}

.post-breadcrumb__current {
    color: var(--color-text-primary);
    font-weight: var(--weight-medium);
    /* Truncate long titles in the breadcrumb on narrow layouts */
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =====================================================
   2. ARTICLE HERO
===================================================== */

.post-hero {
    background: var(--color-bg-primary);
    padding: var(--space-12) 0 0;
}

.post-hero__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.post-hero__category {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-brand-gold-dark);
    margin-bottom: var(--space-4);
}

.post-hero__title {
    font-family: var(--font-serif);
    font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl));
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-5);
    font-style: normal;
}

.post-hero__excerpt {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    max-width: 600px;
    margin: 0 auto var(--space-6);
}

.post-hero__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-10);
}

.post-hero__meta span[aria-hidden="true"] {
    color: var(--color-gray-400);
}

.post-hero__image-wrap {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-bg-tertiary);
}

.post-hero__image {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    display: block;
}

.post-hero__caption {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
    max-width: 920px;
    margin: var(--space-3) auto 0;
}


/* =====================================================
   3. SHARE BAR
===================================================== */

.post-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--space-8) auto 0;
}

.post-share__label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.post-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    background: var(--color-bg-primary);
    transition:
        border-color var(--duration-base) var(--ease-in-out),
        color var(--duration-base) var(--ease-in-out),
        background-color var(--duration-base) var(--ease-in-out);
}

.post-share__link:hover {
    border-color: var(--color-brand-gold);
    color: var(--color-brand-gold-dark);
    background: rgba(201, 169, 110, 0.08);
}


/* =====================================================
   4. ARTICLE BODY / PROSE
===================================================== */

.post-body-section {
    background: var(--color-bg-primary);
    padding: var(--space-10) 0 var(--space-4);
}

.post-prose {
    max-width: 700px;
    margin: 0 auto;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.post-prose p {
    margin: 0 0 var(--space-5);
}

.post-prose h2 {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    line-height: var(--leading-snug);
    margin: var(--space-10) 0 var(--space-4);
    font-style: normal;
}

.post-prose h3 {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    margin: var(--space-7) 0 var(--space-3);
}

.post-prose ul,
.post-prose ol {
    margin: 0 0 var(--space-5);
    padding-left: var(--space-6);
}

.post-prose li {
    margin-bottom: var(--space-2);
}

.post-prose li::marker {
    color: var(--color-brand-gold-dark);
}

.post-prose strong {
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}

.post-prose a {
    color: var(--color-brand-gold-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.post-prose a:hover {
    color: var(--color-brand-black);
}

.post-inline-image {
    margin: var(--space-8) 0;
}

.post-inline-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    display: block;
}

.post-inline-image figcaption {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-2);
}


/* =====================================================
   5. PULL QUOTE
===================================================== */

.post-pullquote {
    max-width: 700px;
    margin: var(--space-8) auto;
    padding: var(--space-2) 0 var(--space-2) var(--space-6);
    border-left: 3px solid var(--color-brand-gold);
}

.post-pullquote p {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--color-text-primary);
    line-height: var(--leading-snug);
    margin: 0;
}


/* =====================================================
   6. BUYING CHECKLIST CARD
===================================================== */

.post-checklist {
    max-width: 700px;
    margin: var(--space-8) auto;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-7);
}

.post-checklist__title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4);
    font-style: normal;
}

.post-checklist__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.post-checklist__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.post-checklist__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--color-brand-gold-dark);
}

.post-checklist__list strong {
    color: var(--color-text-primary);
}


/* =====================================================
   7. AUTHOR BIO
===================================================== */

.post-author {
    max-width: 700px;
    margin: var(--space-10) auto 0;
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.post-author__avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-brand-black);
    color: var(--color-brand-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
}

.post-author__name {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 2px;
}

.post-author__role {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: 0;
}


/* =====================================================
   8. RELATED ARTICLES
   (reuses .blog-grid / .blog-card from blog.css)
===================================================== */

.post-related {
    background: var(--color-bg-secondary);
}

.post-related .blog-grid {
    grid-template-columns: repeat(3, 1fr);
}

.post-related-header {
    text-align: center;
    max-width: 500px;
    margin: 0 auto var(--space-8);
}


/* =====================================================
   9. RESPONSIVE OVERRIDES
===================================================== */

@media (max-width: 1024px) {

    .post-hero {
        padding-top: var(--space-10);
    }

    .post-related .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .post-hero__excerpt {
        font-size: var(--text-base);
    }

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

    .post-body-section {
        padding-top: var(--space-8);
    }

    .post-prose h2 {
        font-size: var(--text-xl);
    }

    .post-checklist {
        padding: var(--space-5);
    }

    .post-author {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {

    .post-breadcrumb__current {
        max-width: 160px;
    }

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


/* =====================================================
   10. REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .post-share__link {
        transition: none;
    }
}