/* ==========================================================================
   Viqsa Blog — listing (blog.html) and article pages (/blog/*.html)
   Uses the brand tokens defined in style.css (--orange, --cream, --font-family…)
   ========================================================================== */

.vb-page {
     background: #fff;
     color: var(--text-primary, #121212);
}

/* ---------- Hero (listing + article) ---------- */
.vb-hero {
     position: relative;
     margin: 13px 16px 0;
     border-radius: 30px;
     overflow: hidden;
     padding: 170px 24px 72px;
     background:
          linear-gradient(180deg, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.72) 55%, rgba(141, 75, 0, 0.55) 100%),
          url("/image/home/hero-bg.webp") center / cover no-repeat;
     color: #fff;
     text-align: center;
}

.vb-hero-inner {
     max-width: 880px;
     margin: 0 auto;
}

.vb-breadcrumb {
     font-size: 14px;
     font-weight: 500;
     letter-spacing: 0.3px;
     color: rgba(255, 255, 255, 0.78);
     margin: 0 0 18px;
}

.vb-breadcrumb a {
     color: #fff;
     text-decoration: none;
}

.vb-breadcrumb a:hover {
     color: var(--orange-light, #F8B05E);
}

.vb-breadcrumb span[aria-hidden] {
     margin: 0 8px;
     opacity: 0.6;
}

.vb-hero h1 {
     font-family: var(--font-family);
     font-size: clamp(30px, 4vw, 52px);
     font-weight: 600;
     line-height: 1.18;
     letter-spacing: -0.01em;
     margin: 0 0 16px;
     color: #fff;
}

.vb-hero--post h1 {
     font-size: clamp(26px, 3.4vw, 44px);
}

.vb-hero-sub {
     font-size: clamp(15px, 1.4vw, 18px);
     line-height: 1.6;
     color: rgba(255, 255, 255, 0.85);
     margin: 0 auto;
     max-width: 680px;
}

.vb-hero-meta {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 8px 18px;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.85);
     margin-top: 8px;
}

.vb-hero-meta span+span::before {
     content: "•";
     margin-right: 18px;
     color: var(--orange-light, #F8B05E);
}

/* ---------- Search ---------- */
.vb-search {
     position: relative;
     max-width: 520px;
     margin: 28px auto 0;
}

.vb-search input {
     width: 100%;
     box-sizing: border-box;
     padding: 16px 20px 16px 50px;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, 0.28);
     background: rgba(255, 255, 255, 0.12);
     backdrop-filter: blur(8px);
     color: #fff;
     font: 500 15px var(--font-family);
     outline: none;
     transition: border-color .2s, background .2s;
}

.vb-search input::placeholder {
     color: rgba(255, 255, 255, 0.7);
}

.vb-search input:focus {
     border-color: var(--orange-light, #F8B05E);
     background: rgba(255, 255, 255, 0.18);
}

.vb-search svg {
     position: absolute;
     left: 18px;
     top: 50%;
     width: 18px;
     height: 18px;
     transform: translateY(-50%);
     color: rgba(255, 255, 255, 0.8);
     pointer-events: none;
}

/* ---------- Shared bits ---------- */
.vb-container {
     max-width: 1240px;
     margin: 0 auto;
     padding: 0 24px;
}

.vb-badge {
     display: inline-block;
     padding: 6px 12px;
     border-radius: 999px;
     background: var(--cream, #F5EBDE);
     color: var(--orange-dark, #8D4B00);
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.4px;
     text-transform: uppercase;
     text-decoration: none;
}

.vb-hero .vb-badge {
     background: rgba(215, 146, 60, 0.22);
     color: var(--orange-light, #F8B05E);
     margin-bottom: 18px;
}

.vb-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 6px 14px;
     font-size: 13px;
     color: var(--text-muted, rgba(18, 18, 18, 0.7));
}

.vb-meta span+span::before {
     content: "•";
     margin-right: 14px;
     color: var(--orange, #D7923C);
}

/* ---------- Category filter ---------- */
.vb-filters {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 10px;
     margin: 48px 0 36px;
}

.vb-chip {
     border: 1px solid rgba(18, 18, 18, 0.14);
     background: #fff;
     color: var(--text-primary, #121212);
     padding: 10px 18px;
     border-radius: 999px;
     font: 500 14px var(--font-family);
     cursor: pointer;
     transition: all .2s;
}

.vb-chip:hover {
     border-color: var(--orange, #D7923C);
     color: var(--orange-dark, #8D4B00);
}

.vb-chip.is-active {
     background: var(--orange-gradient, linear-gradient(135deg, #8D4B00, #F8B05E));
     border-color: transparent;
     color: #fff;
}

.vb-chip .vb-count {
     opacity: 0.7;
     margin-left: 4px;
     font-size: 12px;
}

/* ---------- Cards ---------- */
.vb-card {
     display: flex;
     flex-direction: column;
     background: #fff;
     border: 1px solid rgba(18, 18, 18, 0.08);
     border-radius: 20px;
     overflow: hidden;
     text-decoration: none;
     color: inherit;
     transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}

.vb-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 18px 40px rgba(18, 18, 18, 0.1);
     border-color: rgba(215, 146, 60, 0.4);
}

.vb-card-img {
     aspect-ratio: 16 / 9;
     overflow: hidden;
     background: var(--light-gray, #F3F3F3);
}

.vb-card-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform .5s ease;
}

.vb-card:hover .vb-card-img img {
     transform: scale(1.04);
}

.vb-card-body {
     display: flex;
     flex-direction: column;
     gap: 12px;
     padding: 22px 22px 24px;
     flex: 1;
}

.vb-card h2,
.vb-card h3 {
     font-family: var(--font-family);
     font-size: 19px;
     font-weight: 600;
     line-height: 1.35;
     margin: 0;
     color: var(--text-primary, #121212);
}

.vb-card p {
     margin: 0;
     font-size: 14.5px;
     line-height: 1.65;
     color: var(--text-muted, rgba(18, 18, 18, 0.7));
}

.vb-read {
     margin-top: auto;
     padding-top: 4px;
     font-size: 14px;
     font-weight: 600;
     color: var(--orange-dark, #8D4B00);
}

.vb-card:hover .vb-read {
     color: var(--orange, #D7923C);
}

.vb-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 28px;
     margin-bottom: 72px;
}

/* Featured (first) post */
.vb-featured {
     display: grid;
     grid-template-columns: 1.15fr 1fr;
     margin-bottom: 36px;
     background: var(--cream, #F5EBDE);
     border-color: transparent;
}

.vb-featured .vb-card-img {
     aspect-ratio: auto;
     min-height: 320px;
}

.vb-featured .vb-card-body {
     padding: 40px;
     justify-content: center;
     gap: 16px;
}

.vb-featured h2 {
     font-size: clamp(22px, 2.2vw, 30px);
     line-height: 1.25;
}

.vb-featured p {
     font-size: 16px;
}

.vb-empty {
     text-align: center;
     padding: 40px 0 80px;
     color: var(--text-muted, rgba(18, 18, 18, 0.7));
}

/* ---------- Article layout ---------- */
.vb-article-wrap {
     display: grid;
     grid-template-columns: minmax(0, 1fr) 320px;
     gap: 56px;
     align-items: start;
     padding-top: 56px;
     padding-bottom: 40px;
}

.vb-figure {
     margin: 0 0 36px;
     border-radius: 20px;
     overflow: hidden;
     background: var(--light-gray, #F3F3F3);
}

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

.vb-content {
     font-size: 17px;
     line-height: 1.8;
     color: var(--text-soft, rgba(18, 18, 18, 0.9));
     max-width: 760px;
}

.vb-content>*:first-child {
     margin-top: 0;
}

.vb-content p {
     margin: 0 0 20px;
}

.vb-content h2 {
     font-family: var(--font-family);
     font-size: clamp(22px, 2vw, 28px);
     font-weight: 600;
     line-height: 1.3;
     margin: 44px 0 16px;
     color: var(--text-primary, #121212);
     scroll-margin-top: 24px;
}

.vb-content h3 {
     font-family: var(--font-family);
     font-size: 19px;
     font-weight: 600;
     line-height: 1.4;
     margin: 30px 0 10px;
     color: var(--text-primary, #121212);
}

.vb-content ul,
.vb-content ol {
     margin: 0 0 22px;
     padding-left: 24px;
}

.vb-content li {
     margin-bottom: 8px;
     padding-left: 4px;
}

.vb-content ul li::marker {
     color: var(--orange, #D7923C);
}

.vb-content ol li::marker {
     color: var(--orange-dark, #8D4B00);
     font-weight: 600;
}

.vb-content strong {
     color: var(--text-primary, #121212);
     font-weight: 600;
}

.vb-content a {
     color: var(--orange-dark, #8D4B00);
     text-decoration: underline;
     text-decoration-color: rgba(215, 146, 60, 0.5);
     text-underline-offset: 3px;
}

.vb-content a:hover {
     color: var(--orange, #D7923C);
}

.vb-content blockquote {
     margin: 36px 0;
     padding: 24px 28px;
     border-radius: 16px;
     background: var(--cream, #F5EBDE);
     border-left: 4px solid var(--orange, #D7923C);
}

.vb-content blockquote p {
     margin: 0;
}

/* Share row */
.vb-share {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 10px;
     margin: 40px 0 0;
     padding-top: 28px;
     border-top: 1px solid rgba(18, 18, 18, 0.1);
     font-size: 14px;
     font-weight: 600;
}

.vb-share a,
.vb-share button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 40px;
     height: 40px;
     padding: 0 14px;
     border-radius: 999px;
     border: 1px solid rgba(18, 18, 18, 0.14);
     background: #fff;
     color: var(--text-primary, #121212);
     font: 500 13px var(--font-family);
     text-decoration: none;
     cursor: pointer;
     transition: all .2s;
}

.vb-share a:hover,
.vb-share button:hover {
     border-color: var(--orange, #D7923C);
     color: var(--orange-dark, #8D4B00);
}

/* Sidebar */
.vb-sidebar {
     position: sticky;
     top: 24px;
     display: flex;
     flex-direction: column;
     gap: 24px;
}

.vb-box {
     border: 1px solid rgba(18, 18, 18, 0.08);
     border-radius: 20px;
     padding: 24px;
     background: #fff;
}

.vb-box h2 {
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 0.8px;
     text-transform: uppercase;
     color: var(--orange-dark, #8D4B00);
     margin: 0 0 14px;
}

.vb-toc ol {
     list-style: none;
     margin: 0;
     padding: 0;
     counter-reset: toc;
}

.vb-toc li {
     counter-increment: toc;
     border-top: 1px solid rgba(18, 18, 18, 0.06);
}

.vb-toc li:first-child {
     border-top: 0;
}

.vb-toc a {
     display: flex;
     gap: 10px;
     padding: 9px 0;
     font-size: 14px;
     line-height: 1.45;
     color: var(--text-muted, rgba(18, 18, 18, 0.7));
     text-decoration: none;
}

.vb-toc a::before {
     content: counter(toc, decimal-leading-zero);
     font-weight: 600;
     font-size: 12px;
     color: var(--orange, #D7923C);
     padding-top: 1px;
}

.vb-toc a:hover,
.vb-toc a.is-active {
     color: var(--text-primary, #121212);
}

.vb-cta-box {
     background:
          linear-gradient(160deg, rgba(18, 18, 18, 0.94), rgba(18, 18, 18, 0.86)),
          url("/image/home/hero-bg-sm.webp") center / cover;
     color: #fff;
     border: 0;
}

.vb-cta-box h2 {
     color: var(--orange-light, #F8B05E);
}

.vb-cta-box p {
     font-size: 18px;
     font-weight: 600;
     line-height: 1.4;
     margin: 0 0 8px;
}

.vb-cta-box small {
     display: block;
     font-size: 14px;
     line-height: 1.55;
     color: rgba(255, 255, 255, 0.75);
     margin-bottom: 18px;
}

.vb-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     width: 100%;
     box-sizing: border-box;
     padding: 13px 18px;
     border-radius: 999px;
     background: var(--orange-gradient, linear-gradient(135deg, #8D4B00, #F8B05E));
     color: #fff;
     font: 600 14px var(--font-family);
     text-decoration: none;
     transition: filter .2s, transform .2s;
}

.vb-btn:hover {
     filter: brightness(1.08);
     transform: translateY(-1px);
}

.vb-btn--ghost {
     margin-top: 10px;
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Related posts */
.vb-related {
     padding: 40px 0 80px;
}

.vb-related-head {
     display: flex;
     align-items: end;
     justify-content: space-between;
     gap: 16px;
     margin-bottom: 26px;
}

.vb-related-head h2 {
     font-family: var(--font-family);
     font-size: clamp(22px, 2.2vw, 30px);
     font-weight: 600;
     margin: 0;
}

.vb-related-head a {
     font-size: 14px;
     font-weight: 600;
     color: var(--orange-dark, #8D4B00);
     text-decoration: none;
     white-space: nowrap;
}

.vb-related .vb-grid {
     margin-bottom: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
     .vb-article-wrap {
          grid-template-columns: minmax(0, 1fr) 280px;
          gap: 36px;
     }
}

@media (max-width: 980px) {
     .vb-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     .vb-featured {
          grid-template-columns: 1fr;
     }

     .vb-featured .vb-card-img {
          min-height: 0;
          aspect-ratio: 16 / 9;
     }

     .vb-featured .vb-card-body {
          padding: 28px;
     }

     .vb-article-wrap {
          grid-template-columns: 1fr;
     }

     .vb-sidebar {
          position: static;
     }

     .vb-toc {
          display: none;
     }
}

@media (max-width: 640px) {
     .vb-hero {
          margin: 8px 8px 0;
          border-radius: 22px;
          padding: 130px 18px 48px;
     }

     .vb-container {
          padding: 0 16px;
     }

     .vb-grid {
          grid-template-columns: 1fr;
          gap: 20px;
     }

     .vb-filters {
          justify-content: flex-start;
          flex-wrap: nowrap;
          overflow-x: auto;
          margin: 28px -16px 24px;
          padding: 0 16px 6px;
          scrollbar-width: none;
     }

     .vb-filters::-webkit-scrollbar {
          display: none;
     }

     .vb-chip {
          flex: 0 0 auto;
     }

     .vb-article-wrap {
          padding-top: 32px;
     }

     .vb-content {
          font-size: 16px;
     }

     .vb-content h2 {
          margin-top: 34px;
     }

     .vb-related-head {
          flex-direction: column;
          align-items: flex-start;
     }
}

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

     .vb-card,
     .vb-card-img img,
     .vb-btn {
          transition: none;
     }
}