/* Vialing Insights — cards, homepage section, single article.
   Loaded only on the homepage, /insights/ and insight articles. */

/* ── Shared ─────────────────────────────────────────────────────────────── */
.vi-pill {
  display: inline-block;
  background: #F3EEF8;
  color: #3A1D4D;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1.2;
}
.vi-pill--lg { font-size: 12px; padding: 8px 16px; margin-bottom: 20px; }

.vi-wrap { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 48px; padding-right: 48px; box-sizing: border-box; }
.vi-wrap--narrow { max-width: 816px; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.vi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.vi-card {
  background: #FFFFFF;
  border: 1px solid #EDE7F3;
  border-radius: 20px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.vi-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(58, 29, 77, 0.10); }
.vi-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.vi-card__media { aspect-ratio: 16 / 9; background: #F3EEF8; overflow: hidden; }
.vi-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vi-card__body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; align-items: flex-start; }
.vi-card__title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #1F2937;
  margin: 0;
}
.vi-card:hover .vi-card__title { color: #3A1D4D; }
.vi-card__excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: #6B7280;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vi-card__meta { font-size: 13px; color: #9CA3AF; margin: auto 0 0; padding-top: 4px; display: flex; gap: 8px; }

/* ── Homepage section ───────────────────────────────────────────────────── */
.vi-section { padding: 96px 48px; }
.vi-section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.vi-section__title { margin: 0 !important; }
.vi-section__all {
  font-size: 15px;
  font-weight: 700;
  color: #3A1D4D !important;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid #E3B034;
  padding-bottom: 4px;
}
.vi-section__all:hover { color: #1F2937 !important; }

/* ── Insights page intro (Elementor HTML widget) ────────────────────────── */
.vi-page-hero { padding: 120px 48px 56px; text-align: center; }
.vi-page-hero h1 { margin: 0 0 16px; font-size: var(--text-h1, clamp(32px, 4vw, 48px)); }
.vi-page-hero p { font-size: 17px; line-height: 1.6; color: #4B5563; max-width: 640px; margin: 0 auto; }
.vi-page-list { padding: 0 48px 96px; }

/* ── Single article ─────────────────────────────────────────────────────── */
.vi-article { background: #FFFFFF; }
.vi-article__hero { padding: 120px 0 40px; }
.vi-article__back {
  display: inline-flex; gap: 8px; align-items: center;
  font-size: 14px; font-weight: 600; color: #6B7280 !important; text-decoration: none;
  margin-bottom: 28px;
}
.vi-article__back:hover { color: #3A1D4D !important; }
.vi-article__hero .vi-pill { display: table; }
.vi-article__title { font-size: clamp(32px, 4.2vw, 50px); margin: 0 0 20px; color: #1F2937; }
.vi-article__subtitle { font-size: 19px; line-height: 1.6; color: #4B5563; margin: 0 0 24px; }
.vi-article__meta { font-size: 14px; color: #9CA3AF; margin: 0; display: flex; gap: 8px; }
.vi-article__image { max-width: 1100px; margin-bottom: 56px; }
.vi-article__image img { width: 100%; height: auto; display: block; border-radius: 24px; }

.vi-article__body { font-size: 17px; line-height: 1.8; color: #374151; }
.vi-article__body p { margin: 0 0 1.4em; }
.vi-article__body h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #1F2937;
  margin: 2.2em 0 0.7em;
}
.vi-article__body a { color: #3A1D4D; text-decoration: underline; text-decoration-color: #E3B034; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.vi-article__body a:hover { color: #1F2937; }

.vi-cta { margin-top: 64px; margin-bottom: 96px; max-width: 1100px; }
.vi-cta__inner {
  background: #3A1D4D; border-radius: 24px; padding: 56px;
  display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap;
}
.vi-cta__title { color: #FFFFFF !important; font-weight: 800 !important; font-size: clamp(22px, 2.4vw, 28px) !important; margin: 0 0 12px; max-width: 620px; }
.vi-cta__desc { color: #E4D9EE; font-size: 15px; line-height: 1.6; margin: 0; max-width: 620px; }
.vi-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.vi-btn { font-weight: 700; font-size: 15px; padding: 16px 28px; border-radius: 999px; white-space: nowrap; text-decoration: none; transition: background .2s ease; }
.vi-btn--gold { background: #E3B034; color: #1F2937 !important; }
.vi-btn--gold:hover { background: #D4A12B; }
.vi-btn--ghost { border: 1.5px solid rgba(255, 255, 255, 0.5); color: #FFFFFF !important; }
.vi-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }

.vi-more { padding-bottom: 96px; max-width: 1100px; }
.vi-more__title { margin: 0 0 32px !important; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .vi-grid { grid-template-columns: 1fr; gap: 20px; }
  .vi-section { padding: 64px 20px; }
  .vi-wrap { padding-left: 20px; padding-right: 20px; }
  .vi-page-hero { padding: 96px 20px 40px; }
  .vi-page-list { padding: 0 20px 64px; }
  .vi-article__hero { padding: 96px 0 28px; }
  .vi-article__subtitle { font-size: 17px; }
  .vi-article__body { font-size: 16px; }
  .vi-article__image { margin-bottom: 36px; }
  .vi-article__image img { border-radius: 16px; }
  .vi-cta__inner { padding: 36px 24px; }
  .vi-cta { margin-bottom: 64px; }
  .vi-more { padding-bottom: 64px; }
}