/* VisionaryCue Blog Grid — front-end (scoped under .vcb, dark theme) */

.vcb {
  --vcb-accent: #7c7bff;
  --vcb-radius: 18px;
  --vcb-gap: 20px;
  --vcb-cols: 3;
  --vcb-bg: #0f0f17;
  --vcb-bg-2: #14141f;
  --vcb-text: #f4f4f7;
  --vcb-dim: #a8acb8;
  --vcb-muted: #6a6f7c;
  --vcb-border: rgba(255, 255, 255, 0.08);
  --vcb-border-2: rgba(255, 255, 255, 0.16);
  --vcb-font: "Sora", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vcb-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vcb-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  font-family: var(--vcb-body);
  color: var(--vcb-text);
}
.vcb *, .vcb *::before, .vcb *::after { box-sizing: border-box; }
.vcb--empty { padding: 40px; text-align: center; color: var(--vcb-dim); }

/* filter */
.vcb-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.vcb-filter__btn {
  background: transparent; color: var(--vcb-dim);
  border: 1px solid var(--vcb-border);
  padding: 8px 16px; border-radius: 999px;
  font-family: var(--vcb-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: 0.2s;
}
.vcb-filter__btn:hover { color: var(--vcb-text); border-color: var(--vcb-border-2); }
.vcb-filter__btn.is-on { background: color-mix(in srgb, var(--vcb-accent) 16%, transparent); color: var(--vcb-accent); border-color: var(--vcb-accent); }

/* ---- LAYOUTS ---- */

/* Grid: equal cards */
.vcb--grid .vcb-grid {
  display: grid;
  gap: var(--vcb-gap);
  grid-template-columns: repeat(var(--vcb-cols), 1fr);
}

/* Featured: first card spans full width as a horizontal hero, rest in a grid */
.vcb--featured .vcb-grid {
  display: grid;
  gap: var(--vcb-gap);
  grid-template-columns: repeat(var(--vcb-cols), 1fr);
}
.vcb--featured .vcb-card--feature {
  grid-column: 1 / -1;
}
.vcb--featured .vcb-card--feature .vcb-card__link {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: stretch;
}
.vcb--featured .vcb-card--feature .vcb-card__media { height: 100%; aspect-ratio: auto; min-height: 320px; }
.vcb--featured .vcb-card--feature .vcb-card__body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.vcb--featured .vcb-card--feature .vcb-card__title { font-size: clamp(24px, 2.6vw, 34px); }
.vcb--featured .vcb-card--feature .vcb-card__excerpt { font-size: 15px; -webkit-line-clamp: 4; }
@media (max-width: 720px) {
  .vcb--featured .vcb-card--feature .vcb-card__link { grid-template-columns: 1fr; }
  .vcb--featured .vcb-card--feature .vcb-card__media { min-height: 0; }
}

/* Masonry: CSS columns */
.vcb--masonry .vcb-grid {
  column-count: var(--vcb-cols);
  column-gap: var(--vcb-gap);
}
.vcb--masonry .vcb-card {
  break-inside: avoid;
  margin-bottom: var(--vcb-gap);
  display: inline-block;
  width: 100%;
}

/* responsive collapse */
@media (max-width: 980px) {
  .vcb--grid .vcb-grid, .vcb--featured .vcb-grid { grid-template-columns: repeat(2, 1fr); }
  .vcb--masonry .vcb-grid { column-count: 2; }
}
@media (max-width: 600px) {
  .vcb--grid .vcb-grid, .vcb--featured .vcb-grid { grid-template-columns: 1fr; }
  .vcb--masonry .vcb-grid { column-count: 1; }
}

/* ---- CARD ---- */
.vcb-card {
  border-radius: var(--vcb-radius);
  overflow: hidden;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.vcb-card__link { display: block; text-decoration: none; color: inherit; height: 100%; }

/* card styles */
.vcb--card-elevated .vcb-card { background: var(--vcb-bg); border: 1px solid var(--vcb-border); }
.vcb--card-bordered .vcb-card { background: transparent; border: 1px solid var(--vcb-border-2); }
.vcb--card-minimal  .vcb-card { background: transparent; border: 0; border-radius: 0; }
.vcb--card-minimal  .vcb-card__media { border-radius: var(--vcb-radius); overflow: hidden; }
.vcb--card-minimal  .vcb-card__body { padding-left: 0; padding-right: 0; }

/* hover */
.vcb--hover .vcb-card:hover { transform: translateY(-4px); }
.vcb--hover.vcb--card-elevated .vcb-card:hover { border-color: var(--vcb-border-2); box-shadow: 0 22px 48px -20px rgba(0,0,0,0.6); }
.vcb--hover.vcb--card-bordered .vcb-card:hover { border-color: var(--vcb-accent); }

/* media */
.vcb-card__media { position: relative; overflow: hidden; background: var(--vcb-bg-2); }
.vcb--ratio-16-9  .vcb-card__media { aspect-ratio: 16 / 9; }
.vcb--ratio-16-10 .vcb-card__media { aspect-ratio: 16 / 10; }
.vcb--ratio-4-3   .vcb-card__media { aspect-ratio: 4 / 3; }
.vcb--ratio-1-1   .vcb-card__media { aspect-ratio: 1 / 1; }
/* masonry keeps natural image height for the staggered look */
.vcb--masonry .vcb-card__media { aspect-ratio: auto; }

.vcb-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.vcb--masonry .vcb-card__img { height: auto; }
.vcb--hover .vcb-card:hover .vcb-card__img { transform: scale(1.04); }

.vcb-card__img--ph {
  display: grid; place-items: center;
  background: linear-gradient(135deg, #1b1f3a, #3b2f8a);
  color: #c8c4ff; font-family: var(--vcb-font); font-weight: 700; font-size: 48px;
  min-height: 180px;
}

.vcb-card__cat {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 11px;
  background: rgba(6,6,10,0.7); backdrop-filter: blur(8px);
  border: 1px solid var(--vcb-border-2);
  border-radius: 999px;
  font-family: var(--vcb-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--vcb-text);
}
.vcb-card__cat--inline { position: static; display: inline-flex; background: color-mix(in srgb, var(--vcb-accent) 14%, transparent); border-color: var(--vcb-accent); color: var(--vcb-accent); width: max-content; }

/* body */
.vcb-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.vcb-card__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--vcb-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vcb-muted);
}
.vcb-dot { opacity: 0.5; }
.vcb-card__title {
  font-family: var(--vcb-font);
  font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -0.015em;
  margin: 0; color: var(--vcb-text);
  transition: color 0.2s;
}
.vcb-card:hover .vcb-card__title { color: var(--vcb-accent); }
.vcb-card__excerpt {
  font-size: 14px; line-height: 1.55; color: var(--vcb-dim); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vcb-card__more {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--vcb-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--vcb-accent);
}
.vcb-card__more svg { transition: transform 0.2s; }
.vcb-card:hover .vcb-card__more svg { transform: translateX(3px); }

/* filtered out */
.vcb-card[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vcb-card, .vcb-card__img { transition: none; }
}

.vcb-pagination {
  display: flex;
  justify-content: center;
  margin-top: 26px;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--vcb-mono);
}
.vcb-pagination a,
.vcb-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 10px 14px;
  color: var(--vcb-text);
  border: 1px solid var(--vcb-border);
  border-radius: 999px;
  text-decoration: none;
  transition: 0.2s;
}
.vcb-pagination a:hover {
  border-color: var(--vcb-border-2);
}
.vcb-pagination .current {
  background: var(--vcb-accent);
  color: #111;
  border-color: var(--vcb-accent);
}
.vcb-pager {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  gap: 12px;
  align-items: center;
}
.vcb-load-more {
  padding: 12px 20px;
  border: 1px solid var(--vcb-border);
  border-radius: 999px;
  background: transparent;
  color: var(--vcb-text);
  cursor: pointer;
  transition: 0.2s;
}
.vcb-load-more:hover {
  border-color: var(--vcb-border-2);
}
.vcb-load-more:disabled {
  opacity: 0.55;
  cursor: default;
}
.vcb-pager__sentinel {
  width: 1px;
  height: 1px;
  visibility: hidden;
}