/*
 * Blog index + details (Figma 941:5248 / 941:5565).
 * Layout, spacing and components come from Bootstrap (container/row/col, card, badge,
 * pagination, breadcrumb, accordion). This file only carries the design tokens.
 */
body.blog-page { background: #fff; }

/* Header (same pattern as the other inner pages) */
.blog-header { background: #fff; padding-top: 72px; }
.blog-header .site-nav { background: #fff; }
.blog-header .nav-links a,
.blog-header .nav-actions > a:not(.button) { color: #292929; }
.blog-header .nav-links a.active { color: #0068ff; }
.blog-header .nav-toggle span { background: #292929; }
@media (max-width: 991.98px) {
  .blog-header .main-menu { background: #fff; box-shadow: 0 12px 30px rgba(7,26,51,.14); }
}

@media (min-width: 1400px) {
  .reve-blog-page-results .container,
  .reve-blog-details .container { max-width: 1256px; }
}

/* ---------- Index ---------- */
.reve-blog-page-banner { padding: 70px 0; }
.reve-blog-page-banner-title span { color: #0068ff; }
.reve-blog-page-banner-title { color: #0a0d12; font: 800 58px/1.2 "Manrope", sans-serif; letter-spacing: -.5px; margin: 0; min-height: 77px; }
.reve-blog-page-results { padding-bottom: 70px; }
.reve-blog-page-results .row { --bs-gutter-y: 50px; }
.reve-blog-empty { color: #545454; }

.reve-blog-card { --tone: #0068ff; --tone-bg: rgba(0,104,255,.08); border: 1px solid rgba(0,104,255,.1); border-radius: 16px; overflow: hidden; }
.reve-blog-card--orange { --tone: #ff6b35; --tone-bg: rgba(255,107,53,.08); }
.reve-blog-card--green { --tone: #10b981; --tone-bg: rgba(16,185,129,.08); }
.reve-blog-card-image { background: #eff6ff; display: block; }
.reve-blog-card .card-body { padding: 20px; }
.reve-blog-card-image img { height: 176px; width: 100%; }
.reve-blog-card-tag { background: var(--tone-bg); color: var(--tone); font: 600 12px/16px "Manrope", sans-serif; padding: 4px 10px; text-decoration: none; }
.reve-blog-card-tag:hover { color: var(--tone); }
.reve-blog-card-time { color: #bebebe; font: 400 12px/16px "Inter", sans-serif; }
.reve-blog-card .card-title { font-family: "Manrope", sans-serif; line-height: 1.4; margin-top: 12px; }
.reve-blog-card-title { -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #252525; display: -webkit-box; font-size: 14px; overflow: hidden; text-decoration: none; }
.reve-blog-card-title:hover { color: var(--tone); }
.reve-blog-card-excerpt { -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #545454; display: -webkit-box; font: 400 12px/19.2px "Inter", sans-serif; overflow: hidden; }
.reve-blog-card-link { color: var(--tone); font: 600 12px/16px "Manrope", sans-serif; text-decoration: none; }
.reve-blog-card-link:hover { color: var(--tone); text-decoration: underline; }
.reve-blog-arrow { background: currentColor; display: inline-block; height: 16px; -webkit-mask: url("../assets/blog/arrow.svg") center / 16px 16px no-repeat; mask: url("../assets/blog/arrow.svg") center / 16px 16px no-repeat; width: 16px; }

/* Pagination (Bootstrap .pagination, flattened to the design's plain text style) */
.reve-blog-pagination { margin-top: 50px; }
.reve-blog-pagination .pagination { --bs-pagination-bg: transparent; --bs-pagination-border-width: 0; --bs-pagination-color: #717680; --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: #717680; --bs-pagination-focus-bg: transparent; --bs-pagination-focus-box-shadow: none; --bs-pagination-hover-bg: transparent; --bs-pagination-hover-color: #0068ff; --bs-pagination-active-bg: transparent; --bs-pagination-active-color: #181d27; --bs-pagination-padding-x: .5rem; --bs-pagination-padding-y: .25rem; --bs-pagination-font-size: 16px; gap: 8px; }
.reve-blog-pagination .page-link { font-family: "Instrument Sans", "Inter", sans-serif; }
.reve-blog-pagination .page-item.active .page-link { font-weight: 500; }
.reve-blog-pagination .page-item.disabled .page-link { opacity: .6; }

/* ---------- Details ---------- */
.reve-blog-details { padding: 72px 0 70px; }
.reve-blog-details-row { --bs-gutter-x: 32px; --bs-gutter-y: 32px; }

.reve-blog-toc { top: 96px; }
@media (min-width: 992px) { .position-lg-sticky { position: sticky !important; } }
.reve-blog-toc-card { background: #fff; border-radius: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.25); padding: 33px 30px; }
.reve-blog-toc-title { color: #0f0f10; font: 500 20px/46.63px "Inter", sans-serif; margin: 0 0 12px; }
@media (min-width: 1200px) { .reve-blog-toc-col { width: 356px; } .reve-blog-article-col { flex: 0 0 679px; max-width: 679px; } }
.reve-blog-toc-list { color: #000; font: 400 14px/20px "Inter", sans-serif; padding-left: 21px; }
.reve-blog-toc-list li { margin-bottom: 7px; }
.reve-blog-toc-list li:last-child { margin-bottom: 0; }
.reve-blog-toc-list a { color: inherit; text-decoration: none; }
.reve-blog-toc-list a:hover { color: #0068ff; }
.reve-blog-toc-list a.active { color: inherit; font-weight: 500; }

.reve-blog-breadcrumb { --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23373737' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --bs-breadcrumb-item-padding-x: 8px; align-items: center; font: 700 14px/1.4 "Inter", sans-serif; letter-spacing: -.14px; }
.reve-blog-breadcrumb .breadcrumb-item { align-items: center; display: flex; }
.reve-blog-breadcrumb .breadcrumb-item + .breadcrumb-item::before { align-items: center; display: flex; padding-right: 8px; }
.reve-blog-breadcrumb .breadcrumb-item a { color: #373737; display: inline-block; padding: 5px 9px; text-decoration: none; }
.reve-blog-breadcrumb .breadcrumb-item.active span { background: #e0f2fe; border-radius: 6px; color: #2c2c2c; display: inline-block; font-weight: 500; padding: 5px 9px; }
.reve-blog-article-title { color: #253748; font: 600 40px/1.4 "Inter", sans-serif; margin: 20px 0 16px; }
.reve-blog-article-meta { color: #4d5761; font: 400 14px/20px "Inter", sans-serif; }
.reve-blog-meta-left { align-items: center; display: flex; gap: 12px; }
.reve-blog-meta-item { align-items: center; display: inline-flex; gap: 7px; }
.reve-blog-listen { align-items: center; display: flex; gap: 7px; color: #4d5761; font: 400 14px/20px "Inter", sans-serif; }
.reve-blog-listen[hidden] { display: none; }
.reve-blog-listen:hover, .reve-blog-listen.is-playing { color: #0068ff; }
.reve-blog-article-image { --bs-aspect-ratio: 52.33%; border-radius: 20px; margin: 36px 0; overflow: hidden; }

.reve-blog-article-content { color: #1f1f1f; font: 400 18px/28px "Inter", sans-serif; overflow-wrap: anywhere; }
.reve-blog-article-content > * { margin-bottom: 18px; }
.reve-blog-article-content > h2 ~ * { margin-bottom: 32px; }
.reve-blog-article-content > h2:first-child { margin-top: 0; }
.reve-blog-article-content > :last-child { margin-bottom: 0 !important; }
.reve-blog-article-content h2 { color: #191919; font: 600 36px/1.4 "Inter", sans-serif; margin: 48px 0 32px; scroll-margin-top: 96px; }
.reve-blog-article-content > h2 ~ h3 { color: #191919; font: 600 18px/28px "Inter", sans-serif; margin-bottom: 10px; }
.reve-blog-article-content h3 { color: #191919; font: 600 18px/28px "Inter", sans-serif; }
.reve-blog-article-content ul, .reve-blog-article-content ol { color: #191919; font-weight: 500; padding-left: 27px; }
.reve-blog-article-content img { border-radius: 12px; height: auto; max-width: 100%; }
.reve-blog-article-content a { color: #0068ff; }

/* FAQ (Bootstrap accordion, flush) */
.reve-blog-faq { margin-top: 70px; }
.reve-blog-faq h2 { color: #191919; font: 600 36px/1.4 "Inter", sans-serif; margin: 0 0 32px; }
.reve-blog-faq .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: #d5d7da; --bs-accordion-btn-bg: transparent; --bs-accordion-active-bg: transparent; --bs-accordion-active-color: #1f1f1f; --bs-accordion-btn-color: #1f1f1f; --bs-accordion-btn-padding-x: 0; --bs-accordion-btn-padding-y: 0; --bs-accordion-body-padding-x: 0; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-btn-icon: url("../assets/blog/chevron.svg"); --bs-accordion-btn-active-icon: url("../assets/blog/chevron.svg"); --bs-accordion-btn-icon-width: 20px; }
.reve-blog-faq .accordion-button { font: 400 20px/28px "Inter", sans-serif; gap: 32px; justify-content: space-between; padding: 32px 0 24px; }
.reve-blog-faq .accordion-item:first-child .accordion-button { padding-top: 0; }
.reve-blog-faq .accordion-button::after { margin-left: 0; }
.reve-blog-faq .accordion-button:not(.collapsed) { box-shadow: none; }
.reve-blog-faq .accordion-body { color: #1f1f1f; font: 400 18px/28px "Inter", sans-serif; padding-top: 0; }
.reve-blog-faq .accordion-item:last-child { border-bottom: 0; }

/* Author */
.reve-blog-author { background: #f1fbff; border-radius: 14px; margin-top: 70px; padding: 0 24px 24px; }
.reve-blog-author .d-flex.py-3 { padding-block: 16px !important; }
.reve-blog-author-text { padding-top: 8px; }
.reve-blog-author-avatar { flex: 0 0 72px; height: 72px; width: 72px; }
.reve-blog-author-name { color: #1f2a37; font: 400 24px/20px "Inter", sans-serif; }
.reve-blog-author-follow { align-items: center; color: #1f2a37; display: flex; font: 400 14px/20px "Inter", sans-serif; gap: 13px; margin-top: 13px; }
.reve-blog-author-icons { align-items: center; display: flex; gap: 12px; }
.reve-blog-author-bio { color: #000; font: 400 18px/28px "Inter", sans-serif; margin-top: 12px; }

/* Listen player (bottom popup) */
.reve-listen-player { background: #fff; border: 1px solid rgba(0,104,255,.14); border-radius: 16px; bottom: 16px; box-shadow: 0 10px 40px rgba(7,26,51,.2); left: 12px; opacity: 0; padding: 12px 16px; position: fixed; right: 12px; transform: translateY(24px); transition: opacity .25s ease, transform .25s ease; z-index: 1040; }
.reve-listen-player[hidden] { display: none; }
.reve-listen-player.is-open { opacity: 1; transform: translateY(0); }
body.reve-listen-open { padding-bottom: 96px; }
.reve-listen-toggle { background: #0068ff; color: #fff; height: 44px; width: 44px; }
.reve-listen-toggle:hover { background: #0058da; color: #fff; }
.reve-listen-toggle .reve-icon-pause, .reve-listen-toggle.is-playing .reve-icon-play { display: none; }
.reve-listen-toggle.is-playing .reve-icon-pause { display: block; }
.reve-listen-title { color: #253748; font: 600 14px/20px "Inter", sans-serif; }
.reve-listen-player .progress { background: #e0f2fe; cursor: pointer; height: 8px; }
.reve-listen-player .progress-bar { background: #0068ff; transition: width .2s linear; }
.reve-listen-player .progress:focus-visible { outline: 2px solid #0068ff; outline-offset: 2px; }
.reve-listen-time { color: #4d5761; font: 400 13px/20px "Inter", sans-serif; font-variant-numeric: tabular-nums; }
.reve-listen-speed { width: 76px; }
.reve-min-w-0 { min-width: 0; }
@media (max-width: 575.98px) {
  .reve-listen-player-inner { flex-wrap: wrap; gap: 10px !important; }
  .reve-listen-player .flex-grow-1 { flex-basis: calc(100% - 100px); }
  .reve-listen-time { order: 5; }
  body.reve-listen-open { padding-bottom: 140px; }
}

@media (max-width: 991.98px) {
  .reve-blog-page-banner-title { font-size: 46px; }
}
@media (max-width: 575.98px) {
  .reve-blog-page-banner { padding: 40px 0; }
  .reve-blog-page-banner-title { font-size: 34px; }
  .reve-blog-details { padding-top: 40px; }
  .reve-blog-article-title { font-size: 30px; }
  .reve-blog-article-content h2, .reve-blog-faq h2 { font-size: 28px; }
  .reve-blog-faq .accordion-button { font-size: 18px; }
}