/* ============================================================
   BLOG-STYLE.CSS — SpiritSurface Blog Pages
   Shared styles for blog.html and blog-detail.html
   ============================================================ */

/* ── Page Banner ─────────────────────────────────────────── */
.page-banner,
.article-banner {
    background: linear-gradient(160deg, #0a0500 0%, #1a0800 30%, #2d1200 60%, #0a0500 100%);
    padding: 9rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.page-banner-deco {
    position: absolute;
    border-radius: 50%;
    opacity: 0.06;
    background: radial-gradient(circle, #D4AF37, transparent 70%);
}

.page-banner-deco--1 { width: 500px; height: 500px; top: -120px; right: -100px; }
.page-banner-deco--2 { width: 300px; height: 300px; bottom: -80px; left: -60px; }

.page-banner-badge {
    display: inline-block;
    background: rgba(184, 134, 11, 0.18);
    border: 1px solid rgba(184, 134, 11, 0.4);
    color: #D4AF37;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    padding: 5px 18px;
    border-radius: 20px;
    margin-bottom: 1rem;
}

.page-banner-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #FAF3E0;
    text-shadow: 0 0 30px rgba(184, 134, 11, 0.3);
    margin-bottom: 0.75rem;
}

.page-banner-subtitle {
    color: rgba(250, 243, 224, 0.7);
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 1.25rem;
}

.page-breadcrumb {
    font-size: 0.82rem;
    font-family: 'Poppins', sans-serif;
}

.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(184, 134, 11, 0.5); }
.page-breadcrumb a { color: var(--vedic-gold, #B8860B); text-decoration: none; }
.page-breadcrumb a:hover { color: #FAF3E0; }
.page-breadcrumb .active { color: rgba(250, 243, 224, 0.6); }

/* Article banner specific */
.article-banner { padding: 9rem 0 3rem; text-align: left; }
.article-banner-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 700;
    color: #FAF3E0;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.article-banner-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    color: rgba(250, 243, 224, 0.6);
    font-size: 0.82rem;
    font-family: 'Poppins', sans-serif;
}

/* ── Blog Page Wrapper ───────────────────────────────────── */
.blog-page-wrapper {
    background: #FAF8F5;
    padding: 4rem 0 5rem;
}

/* ── Category Filter ─────────────────────────────────────── */
.blog-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-filter-btn {
    background: #fff;
    border: 1px solid rgba(184, 134, 11, 0.25);
    color: #5D4037;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.blog-filter-btn:hover,
.blog-filter-btn.active {
    background: linear-gradient(90deg, #B8860B, #CD853F);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 12px rgba(184, 134, 11, 0.35);
}

/* ── Blog Card ───────────────────────────────────────────── */
.blog-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(184, 134, 11, 0.12);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(93, 64, 37, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(93, 64, 37, 0.14);
}

/* Featured card — horizontal layout on md+ */
.blog-card--featured {
    flex-direction: row;
    height: auto;
}

@media (max-width: 767px) {
    .blog-card--featured { flex-direction: column; }
}

.blog-card--featured .blog-thumb {
    width: 300px;
    min-width: 300px;
    flex-shrink: 0;
    min-height: 240px;
}

@media (max-width: 767px) {
    .blog-card--featured .blog-thumb { width: 100%; min-width: unset; min-height: 200px; }
}

/* Small card variant */
.blog-card--small .blog-thumb { min-height: 120px; }
.blog-card--small .blog-card-title { font-size: 0.88rem; }

/* ── Blog Card Thumbnail ─────────────────────────────────── */
.blog-thumb {
    position: relative;
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.blog-thumb--love    { background: linear-gradient(135deg, #8B0000 0%, #C0392B 50%, #E74C3C 100%); }
.blog-thumb--career  { background: linear-gradient(135deg, #0d3380 0%, #1565C0 50%, #1976D2 100%); }
.blog-thumb--wealth  { background: linear-gradient(135deg, #1a5c2e 0%, #27AE60 50%, #2ECC71 100%); }
.blog-thumb--health  { background: linear-gradient(135deg, #006064 0%, #00838F 50%, #00ACC1 100%); }
.blog-thumb--spirit  { background: linear-gradient(135deg, #4a2800 0%, #B8860B 50%, #D4AF37 100%); }

.blog-thumb-icon {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
}

/* Subtle Om watermark on each thumb */
.blog-thumb::after {
    content: 'ॐ';
    position: absolute;
    bottom: -0.5rem;
    right: 0.5rem;
    font-family: 'Kalam', cursive;
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.06);
    line-height: 1;
    pointer-events: none;
}

.blog-card--small .blog-thumb-icon { font-size: 2rem; }

.blog-cat-badge {
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
}

/* standalone badge (not on image) */
.blog-cat-badge.d-inline-block {
    position: static;
    font-size: 0.75rem;
    padding: 5px 14px;
}

.blog-cat--love    { background: rgba(220,53,69,0.15); color: #C0392B; border: 1px solid rgba(220,53,69,0.3); }
.blog-cat--career  { background: rgba(13,110,253,0.15); color: #1565C0; border: 1px solid rgba(13,110,253,0.3); }
.blog-cat--wealth  { background: rgba(25,135,84,0.15); color: #1a5c2e; border: 1px solid rgba(25,135,84,0.3); }
.blog-cat--health  { background: rgba(13,202,240,0.15); color: #006064; border: 1px solid rgba(13,202,240,0.3); }
.blog-cat--spirit  { background: rgba(184,134,11,0.2); color: #7a5800; border: 1px solid rgba(184,134,11,0.35); }

/* ── Blog Card Body ──────────────────────────────────────── */
.blog-card-body {
    padding: 1.25rem 1.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    font-size: 0.75rem;
    color: #999;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 0.6rem;
}

.blog-featured-label {
    color: #B8860B;
    font-weight: 600;
}

.blog-card-title {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    color: #2d1200;
    line-height: 1.4;
    margin-bottom: 0.6rem;
}

.blog-card--featured .blog-card-title { font-size: 1.25rem; }

.blog-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.blog-card-title a:hover { color: #B8860B; }

.blog-card-excerpt {
    font-size: 0.88rem;
    color: #666;
    line-height: 1.7;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 1rem;
    flex: 1;
}

.blog-read-more {
    font-size: 0.82rem;
    font-weight: 600;
    color: #B8860B;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    margin-top: auto;
    transition: color 0.2s;
}

.blog-read-more:hover { color: #2d1200; }

/* ── Pagination ──────────────────────────────────────────── */
/* .blog-pagination is a <div> wrapping Laravel's <nav><ul class="pagination"> */
.blog-pagination .pagination {
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}

.blog-pagination .page-link {
    border-color: rgba(184, 134, 11, 0.25);
    color: #B8860B;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    border-radius: 8px !important;
    padding: 0.45rem 0.85rem;
    transition: all 0.2s ease;
}

.blog-pagination .page-item.active .page-link {
    background: linear-gradient(90deg, #B8860B, #CD853F);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px rgba(184, 134, 11, 0.35);
}

.blog-pagination .page-link:hover {
    background: rgba(184, 134, 11, 0.1);
    border-color: rgba(184, 134, 11, 0.4);
    color: #2d1200;
}

.blog-pagination .page-item.disabled .page-link {
    color: #ccc;
    border-color: rgba(184, 134, 11, 0.1);
    background: transparent;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.blog-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sidebar-widget {
    background: #fff;
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 18px rgba(93, 64, 37, 0.06);
}

.sidebar-widget-title {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    color: #2d1200;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid rgba(184, 134, 11, 0.2);
}

/* Search */
.sidebar-search { position: relative; }

.sidebar-search-input {
    border: 1px solid rgba(184, 134, 11, 0.3);
    border-radius: 25px;
    padding: 0.55rem 3rem 0.55rem 1rem;
    font-size: 0.85rem;
    font-family: 'Poppins', sans-serif;
    background: #FAF8F5;
}

.sidebar-search-input:focus {
    outline: none;
    border-color: #B8860B;
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.12);
}

.sidebar-search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #B8860B;
    cursor: pointer;
    font-size: 0.9rem;
}

/* CTA Widget */
.sidebar-cta {
    background: linear-gradient(160deg, #1a0800 0%, #2d1200 100%);
    border-color: rgba(184, 134, 11, 0.35);
    text-align: center;
}

.sidebar-cta-icon {
    font-size: 2.5rem;
    color: #D4AF37;
    margin-bottom: 0.75rem;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4));
}

.sidebar-cta h5 {
    color: #FAF3E0;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.sidebar-cta p {
    color: rgba(250, 243, 224, 0.7);
    font-size: 0.82rem;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 1rem;
}

.sidebar-cta-price {
    color: rgba(212, 175, 55, 0.7);
    font-size: 0.75rem;
    font-family: 'Poppins', sans-serif;
    margin-top: 0.6rem;
    margin-bottom: 0;
}

/* Categories */
.sidebar-categories {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-cat-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #5D4037;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.2s;
}

.sidebar-cat-link:hover { background: rgba(184, 134, 11, 0.08); color: #2d1200; }
.sidebar-cat-icon { width: 18px; text-align: center; flex-shrink: 0; }

.sidebar-cat-count {
    margin-left: auto;
    background: rgba(184, 134, 11, 0.12);
    color: #B8860B;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
}

/* Popular Posts */
.popular-posts { display: flex; flex-direction: column; gap: 12px; }

.popular-post-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 1px solid rgba(184, 134, 11, 0.1);
    transition: opacity 0.2s;
}

.popular-post-item:last-child { border-bottom: none; }
.popular-post-item:hover { opacity: 0.75; }

.popular-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
}

.popular-thumb--love    { background: linear-gradient(135deg, #C0392B, #E74C3C); }
.popular-thumb--career  { background: linear-gradient(135deg, #1565C0, #1976D2); }
.popular-thumb--wealth  { background: linear-gradient(135deg, #27AE60, #2ECC71); }
.popular-thumb--health  { background: linear-gradient(135deg, #00838F, #00ACC1); }
.popular-thumb--spirit  { background: linear-gradient(135deg, #B8860B, #D4AF37); }

.popular-post-info { flex: 1; min-width: 0; }

.popular-post-title {
    font-size: 0.8rem;
    font-family: 'Poppins', sans-serif;
    color: #2d1200;
    font-weight: 500;
    margin: 0 0 3px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.popular-post-meta {
    font-size: 0.7rem;
    color: #999;
    font-family: 'Poppins', sans-serif;
}

/* Tags */
.sidebar-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.sidebar-tag {
    background: rgba(184, 134, 11, 0.08);
    border: 1px solid rgba(184, 134, 11, 0.2);
    color: #7a5800;
    font-size: 0.75rem;
    font-family: 'Poppins', sans-serif;
    padding: 4px 12px;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.2s;
}

.sidebar-tag:hover {
    background: #B8860B;
    border-color: transparent;
    color: #fff;
}

/* ── Article Body ────────────────────────────────────────── */
.article-share-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(184, 134, 11, 0.15);
    margin-bottom: 2rem;
}

.share-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    color: #999;
    font-weight: 600;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 18px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    transition: opacity 0.2s;
}

.share-btn:hover { opacity: 0.82; }

.share-btn--whatsapp { background: #25D366; color: #fff; }
.share-btn--copy     { background: rgba(184,134,11,0.12); color: #7a5800; border: 1px solid rgba(184,134,11,0.3); }
.share-btn--twitter  { background: #000; color: #fff; }

.article-body {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    line-height: 1.85;
    color: #3d2200;
}

.article-lead {
    font-size: 1.08rem;
    line-height: 1.8;
    color: #2d1200;
    margin-bottom: 1.5rem;
}

.article-h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.35rem;
    color: #1a0800;
    margin: 2.5rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid rgba(184, 134, 11, 0.2);
}

.article-h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    color: #2d1200;
    margin: 1.75rem 0 0.6rem;
}

.article-body p { margin-bottom: 1rem; }

/* ── Rendered Markdown Content ──────────────────────────── */
.blog-md-content h1,
.blog-md-content h2,
.blog-md-content h3,
.blog-md-content h4 {
    font-family: 'Cinzel', serif;
    color: #1a0800;
    margin: 2rem 0 0.65rem;
    line-height: 1.3;
}
.blog-md-content h1 { font-size: 1.5rem; border-bottom: 2px solid rgba(184,134,11,0.25); padding-bottom: 0.4rem; }
.blog-md-content h2 { font-size: 1.3rem; border-bottom: 1px solid rgba(184,134,11,0.18); padding-bottom: 0.3rem; }
.blog-md-content h3 { font-size: 1.08rem; color: #2d1200; }
.blog-md-content h4 { font-size: 0.97rem; color: #3d1a00; }

.blog-md-content p  { margin-bottom: 1rem; line-height: 1.85; }

.blog-md-content strong { color: #1a0800; font-weight: 700; }

.blog-md-content ul,
.blog-md-content ol {
    padding-left: 1.4rem;
    margin-bottom: 1.1rem;
}
.blog-md-content ul li,
.blog-md-content ol li {
    margin-bottom: 0.45rem;
    line-height: 1.75;
}
.blog-md-content ul li::marker { color: #B8860B; }
.blog-md-content ol li::marker { color: #B8860B; font-weight: 600; }

.blog-md-content blockquote {
    border-left: 3px solid #B8860B;
    background: rgba(184,134,11,0.06);
    padding: 0.75rem 1.25rem;
    margin: 1.25rem 0;
    border-radius: 0 8px 8px 0;
    color: #2d1200;
    font-style: italic;
}

.blog-md-content hr {
    border: none;
    border-top: 1px solid rgba(184,134,11,0.2);
    margin: 2rem 0;
}

/* Insight Boxes */
.article-insight-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(184, 134, 11, 0.07);
    border: 1px solid rgba(184, 134, 11, 0.25);
    border-left: 4px solid #B8860B;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    margin: 1.5rem 0;
    font-size: 0.9rem;
    color: #2d1200;
}

.article-insight-box--gold {
    background: linear-gradient(135deg, rgba(184,134,11,0.1), rgba(205,133,63,0.08));
    border-left-color: #D4AF37;
}

.article-insight-icon {
    font-size: 1.4rem;
    color: #B8860B;
    flex-shrink: 0;
    margin-top: 2px;
}

.article-cta-link {
    color: #B8860B;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}

.article-cta-link:hover { color: #2d1200; }

/* Pull Quote */
.article-pullquote {
    font-family: 'Kalam', cursive;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #1a0800;
    border-left: 4px solid #D4AF37;
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    background: rgba(212, 175, 55, 0.06);
    border-radius: 0 10px 10px 0;
}

.article-pullquote cite {
    display: block;
    font-size: 0.78rem;
    color: #B8860B;
    font-style: normal;
    font-family: 'Poppins', sans-serif;
    margin-top: 0.5rem;
}

/* Bottom CTA */
.article-bottom-cta {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: linear-gradient(135deg, #1a0800, #2d1200);
    border-radius: 16px;
    padding: 1.75rem;
    margin: 2.5rem 0;
}

.article-cta-icon {
    font-size: 2.5rem;
    color: #D4AF37;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(212,175,55,0.4));
}

.article-bottom-cta h4 {
    font-family: 'Cinzel', serif;
    color: #FAF3E0;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.article-bottom-cta p {
    color: rgba(250,243,224,0.75);
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

.article-cta-price {
    color: rgba(212,175,55,0.8);
    font-size: 0.82rem;
    font-family: 'Poppins', sans-serif;
}

/* Article Tags */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.article-tag-label {
    color: #999;
    font-size: 0.82rem;
    font-family: 'Poppins', sans-serif;
}

/* Author Bio */
.author-bio-box {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: #fff;
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 2.5rem;
    box-shadow: 0 4px 18px rgba(93, 64, 37, 0.07);
}

.author-bio-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #B8860B, #D4AF37);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #0a0500;
    flex-shrink: 0;
}

.author-bio-name {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #1a0800;
    margin-bottom: 2px;
}

.author-bio-role {
    font-size: 0.78rem;
    color: #B8860B;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 0.5rem;
}

.author-bio-desc {
    font-size: 0.85rem;
    color: #666;
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    margin: 0;
}

/* Related Articles */
.related-articles-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: #1a0800;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(184, 134, 11, 0.2);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
    .blog-sidebar { position: static; }
}

@media (max-width: 575px) {
    .page-banner, .article-banner { padding: 8rem 0 3rem; }
    .article-banner-meta { gap: 0.75rem; }
    .article-bottom-cta { flex-direction: column; }
    .article-bottom-cta .article-cta-icon { margin: 0 auto; }
    .author-bio-box { flex-direction: column; }
    .author-bio-avatar { margin: 0 auto; }
}