/* insights.css — page-specific styles for insights.html */
/* Global shared styles live in assets/css/veloryn.css */

/* Base typography */
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  font-family: 'Sora', sans-serif;
}

/* Hero — background image (responsive) */

.insights-hero {
  background-image: url('../images/hero/insights-1280.webp');
  background-size: cover;
  background-position: center -3%;
  background-repeat: no-repeat;
}

@media (min-width: 1280px) {
  .insights-hero {
    background-image: url('../images/hero/insights-1920.webp');
  }
}

@media (min-width: 1920px) {
  .insights-hero {
    background-image: url('../images/hero/insights-2560.webp');
  }
}

@media (max-width: 639px) {
  .insights-hero {
    background-position: center 50%;
  }
}

/* Category tags */
.insights-category-tag {
  text-decoration: none;
  font-weight: 400;
  transition: font-weight 0.15s ease, text-decoration-color 0.2s ease;
}

.insights-category-tag:hover {
  font-weight: 700;
  text-decoration: underline dashed;
  text-decoration-color: #2EE6D6;
  text-underline-offset: 3px;
}

/* Title links */
.insights-title-link {
  text-decoration: none;
  transition: color 0.2s ease;
}

.insights-title-link:hover {
  color: #4AA3FF !important;
}

/* Read More arrow */
.insights-read-more .insights-arrow {
  transition: transform 0.2s ease;
}

.insights-read-more:hover .insights-arrow {
  transform: translateX(5px);
}

/* Technical grid overlay */
.insights-technical-grid {
  background-size: 50px 50px;
  background-image:
    linear-gradient(to right, rgba(30, 95, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 95, 255, 0.05) 1px, transparent 1px);
}

/* Hero — entrance animations */

@keyframes insightsFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.insights-fade-up-1 {
  animation: insightsFadeUp 0.7s ease both;
  animation-delay: 0.10s;
}

.insights-fade-up-2 {
  animation: insightsFadeUp 0.7s ease both;
  animation-delay: 0.28s;
}

/* Article cards */

.insights-article-card:hover {
  border-color: rgba(30, 95, 255, 0.45) !important;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(30, 95, 255, 0.10);
}

.insights-article-card:hover .insights-card-accent {
  transform: scaleX(1) !important;
}

/* Side cards (articles 2 & 3) */

.insights-side-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.insights-side-card {
  display: flex;
  flex-direction: row;
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
}

.insights-side-img {
  width: 160px;
  min-width: 160px;
  flex-shrink: 0;
  display: block;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s ease;
}

.insights-side-card:hover .insights-side-img {
  transform: scale(1.05);
}

.insights-side-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  min-width: 0;
  background-color: #161e2e;
}

/* Compact cards (articles 4+) */

.insights-compact-card {
  display: flex;
  flex-direction: row;
  border-radius: 8px;
  overflow: hidden;
  min-height: 140px;
}

.insights-compact-img {
  width: 38%;
  min-width: 120px;
  flex-shrink: 0;
  display: block;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s ease;
}

.insights-compact-card:hover .insights-compact-img {
  transform: scale(1.05);
}

.insights-compact-content {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  background-color: #161e2e;
}

/* Mobile (below 640px) — single column, image on top */

@media (max-width: 639px) {

  .insights-side-card {
    flex-direction: column;
    flex: unset;
  }

  .insights-side-img {
    width: 100%;
    min-width: unset;
    height: 200px;
  }

  .insights-side-content {
    padding: 20px;
  }

  .insights-compact-card {
    flex-direction: column;
    min-height: unset;
  }

  .insights-compact-img {
    width: 100%;
    min-width: unset;
    height: 160px;
  }
}

/* Tablet (640px – 1023px) — 2-col grid, image on top */

@media (min-width: 640px) and (max-width: 1023px) {

  .insights-side-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .insights-side-card {
    flex-direction: column;
    flex: unset;
  }

  .insights-side-img {
    width: 100%;
    min-width: unset;
    height: 200px;
  }

  .insights-side-content {
    padding: 20px;
  }

  .insights-compact-card {
    flex-direction: column;
    min-height: unset;
  }

  .insights-compact-img {
    width: 100%;
    min-width: unset;
    height: 160px;
  }
}

/* Scroll reveal */

.insights-scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.insights-scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.insights-reveal-delay-1 { transition-delay: 0.15s; }
.insights-reveal-delay-2 { transition-delay: 0.30s; }
.insights-reveal-delay-3 { transition-delay: 0.45s; }
.insights-reveal-delay-4 { transition-delay: 0.60s; }

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .insights-fade-up-1,
  .insights-fade-up-2 {
    animation: none !important;
    opacity: 1 !important;
  }

  .insights-scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Get Started CTA section */

.insights-cta-section {
  background-color: #0D1627;
  border-top: 1px solid rgba(57, 65, 86, 0.2);
}

.insights-cta-btn {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.insights-cta-btn:hover {
  transform: scale(1.03);
  background-color: #3B7BFF !important;
}

/* Tag filter dropdown — remove everything below if reverting */

.insights-tag-bar {
  display: flex;
  justify-content: center;
  margin-top: 48px;
  margin-bottom: 0;
}

.insights-tag-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.insights-tag-select {
  appearance: none;
  -webkit-appearance: none;
  height: 56px;
  width: 220px;
  padding: 0 48px 0 24px;
  background-color: transparent;
  color: #F5F7FF;
  border: 1px solid #26304A;
  border-radius: 5px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.25s ease-out, border-color 0.25s ease-out;
  outline: none;
}

.insights-tag-select:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.04);
}

.insights-tag-select:focus {
  border-color: rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.04);
}

.insights-filter-empty {
  color: #AEB6D3;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  text-align: center;
  padding: 48px 0;
  grid-column: 1 / -1;
}

/* End tag filter dropdown */

/* Load More button */

.insights-load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  min-width: 220px;
  padding: 0 32px;
  background-color: transparent;
  color: #F5F7FF;
  border: 1px solid #26304A;
  border-radius: 5px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.25s ease-out, border-color 0.25s ease-out;
  -webkit-user-select: none;
  user-select: none;
}

.insights-load-more-btn:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.04);
}

.insights-load-more-btn:focus-visible {
  outline: 2px solid rgba(30, 95, 255, 0.65);
  outline-offset: 3px;
  border-radius: 5px;
}