/* ============================================
   Breadcrumb Navigation
   ============================================ */

.breadcrumb {
    background-color: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-md) 0;
}

.breadcrumb a,
.breadcrumb span {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.breadcrumb a {
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

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

.breadcrumb span {
    color: var(--color-text-dark);
    font-weight: 500;
}

/* ============================================
   Blog Header
   ============================================ */

.blog-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-bg-white);
    padding: var(--spacing-2xl);
    text-align: center;
}

.page-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-md);
    font-weight: 400;
}

.page-subtitle {
    font-size: var(--font-size-lg);
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   Search and Filter Controls
   ============================================ */

.blog-controls {
    background-color: var(--color-bg-white);
    padding: var(--spacing-xl) 0;
}

.controls-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.search-box {
    position: relative;
    max-width: 600px;
}

.search-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-right: 40px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    font-family: var(--font-sans);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1);
}

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.5;
}

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.filter-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    border: 2px solid var(--color-border);
    background-color: var(--color-bg-white);
    color: var(--color-text-dark);
    border-radius: 20px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
    text-transform: capitalize;
}

.filter-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.filter-btn.active {
    background-color: var(--color-accent);
    color: var(--color-bg-white);
    border-color: var(--color-accent);
}

.sort-options {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.sort-options label {
    font-weight: 500;
    color: var(--color-text-dark);
}

.sort-select {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-white);
    color: var(--color-text-dark);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-sans);
}

.sort-select:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* ============================================
   Blog Listing
   ============================================ */

.blog-listing {
    background-color: var(--color-bg-light);
}

.blogs-count {
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.blog-grid.large {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
}

.blog-listing .blog-card {
    background-color: var(--color-bg-white);
    display: flex;
    flex-direction: column;
}

.blog-listing .blog-card-image {
    height: 250px;
    font-size: var(--font-size-lg);
}

.blog-listing .blog-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-listing .blog-card p {
    flex: 1;
    margin-bottom: var(--spacing-md);
}

.blog-card-read-more {
    display: inline-block;
    color: var(--color-accent);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    letter-spacing: 0.5px;
    transition: all var(--transition-fast);
    margin-top: var(--spacing-md);
}

.blog-card-read-more:hover {
    transform: translateX(4px);
}

.no-results {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
}

/* ============================================
   Blog Card Tags
   ============================================ */

.blog-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin: var(--spacing-md) 0;
}

.tag {
    display: inline-block;
    padding: 4px 10px;
    background-color: rgba(212, 165, 116, 0.1);
    color: var(--color-accent);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

/* ============================================
   Responsive Design - Blog Page
   ============================================ */

@media (max-width: 768px) {
    .blog-header {
        padding: var(--spacing-xl);
    }

    .page-title {
        font-size: var(--font-size-2xl);
    }

    .page-subtitle {
        font-size: var(--font-size-base);
    }

    .controls-wrapper {
        gap: var(--spacing-md);
    }

    .filter-tags {
        gap: var(--spacing-xs);
    }

    .filter-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.75rem;
    }

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

    .sort-options {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: var(--font-size-xl);
    }

    .page-subtitle {
        font-size: var(--font-size-sm);
    }

    .search-input {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 16px;
    }

    .filter-tags {
        gap: 6px;
    }

    .filter-btn {
        padding: 4px 10px;
        font-size: 0.7rem;
    }
}

/* ── v24.1 · Shared blog layout (from Vedanta & Quantum Physics): lead quote,
   "In this article" index with one-liners, and foldable parts. ── */


.toc-box{
  background:var(--bg-surface);
  padding:1.75rem;
  border-radius:var(--radius-lg);
  margin:2rem 0 3rem;
}
.toc-box h3{margin:0 0 1rem;color:var(--accent);}
.toc-box ul{list-style:none;padding:0;margin:0;}
.toc-box li{margin:.6rem 0;list-style:none;}
.toc-box a{color:var(--text);text-decoration:none;}
.toc-box a:hover{color:var(--accent);}

.science-note{
  background:#fff8ee;
  border:1px solid #f0d8b5;
  border-radius:var(--radius-lg);
  padding:1.25rem;
  margin:2rem 0;
}

.lead-quote{
  font-family:var(--font-heading);
  font-size:1.2rem;
  font-style:italic;
  color:var(--accent);
  border-left:3px solid var(--accent);
  padding-left:1.25rem;
  margin-bottom:2rem;
}

.bridge-box{
  background:var(--accent-light);
  border-left:4px solid var(--accent);
  padding:1.25rem 1.5rem;
  border-radius:0 var(--radius) var(--radius) 0;
  margin:1.25rem 0;
}
.bridge-box strong{color:var(--accent-dark);}

.hero-quote{
  text-align:center;font-style:italic;color:var(--accent);
  margin-top:2rem;font-size:1.1rem;
}

/* ===== Folding sections ===== */
details.fold{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg-card);
  margin:1.5rem 0;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
details.fold > summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:baseline;gap:14px;
  padding:1.25rem 1.5rem;
  transition:background var(--transition);
}
details.fold > summary::-webkit-details-marker{display:none;}
details.fold > summary:hover{background:var(--accent-light);}
.fold-num{
  font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;color:var(--accent);white-space:nowrap;
  text-transform:uppercase;padding-top:.3rem;
}
.fold-title{
  font-family:var(--font-heading);font-weight:500;
  font-size:1.35rem;line-height:1.3;flex:1;color:var(--text);
}
.fold-chev{color:var(--accent);font-size:.8rem;transition:transform .25s ease;}
details.fold[open] > summary .fold-chev{transform:rotate(90deg);}
details.fold[open] > summary{border-bottom:1px solid var(--border-light);}
.fold-body{padding:1.25rem 1.5rem 1.75rem;}
.fold-body > p{margin-bottom:18px;}

/* sub-folds */
details.sub{
  border-left:3px solid var(--border);
  margin:.9rem 0;border-radius:0 var(--radius) var(--radius) 0;
}
details.sub > summary{
  list-style:none;cursor:pointer;padding:.55rem 1rem;
  font-family:var(--font-heading);font-weight:600;font-size:1.05rem;
  color:var(--text);
}
details.sub > summary::-webkit-details-marker{display:none;}
details.sub > summary::before{content:"❧ ";color:var(--accent);font-weight:400;}
details.sub[open]{border-left-color:var(--accent);}
details.sub[open] > summary{color:var(--accent-dark);}
details.sub .sub-body{padding:.25rem 1rem .9rem 1.6rem;font-size:.98rem;}
details.sub .sub-body p{margin-bottom:14px;}
details.sub .sub-body ul{padding-left:1.2rem;margin-bottom:14px;}
details.sub .sub-body li{list-style:disc;margin-bottom:7px;}

/* ===== Comparison tables ===== */
.comparison-table-wrapper{margin:1.5rem 0;overflow-x:auto;}
.comparison-table{width:100%;border-collapse:collapse;min-width:700px;}
.comparison-table th{
  background:var(--accent);color:#fff;text-align:left;
  padding:.9rem 1rem;font-family:var(--font-heading);font-weight:500;
}
.comparison-table td{
  padding:1rem;border:1px solid var(--border);
  vertical-align:top;background:#fff;font-size:.93rem;line-height:1.65;
}
.comparison-table td.point{font-weight:600;font-family:var(--font-heading);background:var(--bg-surface);}
.comparison-table .src{display:block;font-size:.78rem;color:var(--text-light);margin-top:6px;font-style:italic;}
.comparison-table h4{color:var(--accent);margin-bottom:.6rem;}

/* two-voice callouts */
.voice{border-left:4px solid;padding:.9rem 1.1rem;margin:1rem 0;background:var(--bg-surface);border-radius:0 var(--radius) var(--radius) 0;font-size:.96rem;}
.voice b{display:block;font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px;}
.voice.p{border-color:#2E4057;} .voice.p b{color:#2E4057;}
.voice.v{border-color:var(--accent);} .voice.v b{color:var(--accent-dark);}

/* statistic highlight */
.stat-row{display:flex;flex-wrap:wrap;gap:12px;margin:1.25rem 0;}
.stat{
  flex:1;min-width:120px;background:var(--accent-light);
  border:1px solid #f0d8b5;border-radius:var(--radius);
  padding:.9rem .8rem;text-align:center;
}
.stat .n{font-family:var(--font-heading);font-size:1.35rem;color:var(--accent-dark);font-weight:600;}
.stat .l{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-top:3px;}

/* scripture citation card */
.shastra{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.1rem 1.35rem;margin:1.1rem 0;
  box-shadow:var(--shadow-sm);
}
.shastra .san{font-family:var(--font-heading);color:var(--accent-dark);font-size:1.02rem;margin-bottom:4px;font-style:italic;}
.shastra .tr{font-size:.95rem;}
.shastra .ref{display:block;margin-top:6px;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-light);}

.refs{padding-left:1.4rem;}
.refs li{list-style:decimal;margin-bottom:10px;font-size:.9rem;color:var(--text-muted);}
.refs a{color:var(--accent);text-decoration:none;border-bottom:1px dotted var(--accent);word-break:break-word;}
.refs a:hover{color:var(--accent-dark);}

summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.fold-chev{transition:none;}}

.toc-box li{ display:flex; flex-direction:column; gap:2px; margin:.75rem 0; }
.toc-box li a{ font-weight:600; }
.toc-line{ font-size:.86rem; color:var(--text-muted); line-height:1.5; }
.post-close{ font-family:var(--font-heading); font-style:italic; font-size:1.1rem; color:var(--accent);
  text-align:center; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border); }

.fold-lede{ font-style:italic; color:var(--text-muted); margin:0 0 1rem; }
.post-intro{ font-size:1.08rem; line-height:1.85; margin-bottom:1.6rem; }