/* =========================================================================
   Shared Components - Clarity Growth
   Canonical styles for Related Insights carousel, HubSpot forms, and platform logos
   ========================================================================= */

/* Related Insights Carousel
   ========================================================================= */

/* Container */
.related-section { 
  position: relative; 
}

.related-carousel { 
  position: relative; 
  overflow: hidden; 
  margin-top: 36px; 
}

.related-carousel__track-container { 
  overflow: hidden; 
}

.related-carousel__track {
  display: flex;
  gap: 20px;
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
}

.related-carousel__slide {
  flex: 0 0 calc(33.333% - 14px);
  min-width: 0;
}

/* Carousel Controls */
.related-carousel__controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

.carousel-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-200);
  border-radius: 50%;
  color: var(--midnight-950);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.carousel-button:hover:not(:disabled) {
  border-color: var(--blue-500);
  background: var(--cloud-050);
  transform: scale(1.06);
}

.carousel-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.carousel-button svg {
  width: 20px;
  height: 20px;
}

/* Insight Cards */
.insight-card { 
  overflow: hidden; 
  border: 1px solid var(--line-200); 
  border-radius: 16px; 
  background: var(--white); 
  transition: transform var(--transition), box-shadow var(--transition); 
  text-decoration: none; 
  display: flex;
  flex-direction: column;
  height: 100%;
}

.insight-card:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 22px 50px rgba(6,20,38,.09); 
}

.insight-card__visual { 
  position: relative;
  width: 100%;
  min-height: 190px; 
  background: radial-gradient(circle at 70% 30%, rgba(10,100,255,.42), transparent 22%), linear-gradient(145deg, #061426, #0b2745); 
}

.insight-card__visual--grid { 
  background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), 
              linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), 
              radial-gradient(circle at 65% 35%, rgba(10,100,255,.45), transparent 23%), 
              #061426; 
  background-size: 26px 26px, 26px 26px, auto, auto; 
}

.insight-card__visual--flow { 
  background: linear-gradient(125deg, transparent 0 35%, rgba(102,179,255,.24) 35% 39%, transparent 39% 58%, rgba(10,100,255,.32) 58% 64%, transparent 64%), 
              radial-gradient(circle at 30% 70%, rgba(10,100,255,.45), transparent 26%), 
              #061426; 
}

.insight-card__body { 
  padding: 24px; 
  flex: 1;
  display: flex;
  flex-direction: column;
}

.insight-card h3 { 
  margin-top: 12px; 
  font-size: 1.28rem; 
  line-height: 1.22; 
  color: var(--midnight-950); 
}

.article-meta { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 10px; 
  color: var(--slate-500); 
  font-size: .78rem; 
  font-weight: 650; 
}

.article-meta span:first-child { 
  color: var(--blue-700); 
}

/* CTA Card (View all) */
.insight-card--cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
  color: var(--white);
}

.insight-card--cta__content {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 32px;
  color: var(--white);
  font-size: 1.6rem;
  font-weight: 660;
}

.insight-card--cta h3 {
  color: var(--white);
  font-size: 1.6rem;
  margin: 0;
}

.insight-card--cta svg {
  width: 28px;
  height: 28px;
  transition: transform var(--transition);
}

.insight-card--cta:hover svg {
  transform: translateX(6px);
}

/* Responsive Behavior */
@media (max-width: 1080px) {
  .related-carousel__slide {
    flex: 0 0 calc(50% - 10px);
  }
}

@media (max-width: 640px) {
  /* Mobile: native horizontal scroll */
  .related-carousel__track-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .related-carousel__track-container::-webkit-scrollbar {
    display: none !important;
  }
  
  .related-carousel__track {
    padding: 0 20px;
    transform: none !important;
    touch-action: pan-x !important;
    will-change: auto !important;
  }
  
  .related-carousel__slide {
    flex: 0 0 calc(100% - 40px);
    scroll-snap-align: start;
  }
  
  .related-carousel__controls {
    display: none !important;
  }
}

/* HubSpot Form Embeds
   ========================================================================= */

.cta-form {
  margin-top: 18px;
  padding: 16px 16px 8px;
  border-radius: 14px;
  background: #fff;
  color: #415168;
  overflow: visible;
}

.cta-form .hs-form-frame { 
  min-height: 420px; 
  width: 100%; 
}

.cta-form iframe { 
  display: block; 
  width: 100% !important; 
  min-height: 420px; 
}

/* Mobile adjustments for forms */
@media (max-width: 900px) {
  .cta-form { 
    padding: 12px 12px 6px; 
  }
}

@media (max-width: 640px) {
  .cta-form {
    margin: 14px -14px 0;
    padding: 12px 12px 8px;
    border-radius: 0;
  }
  
  .cta-form .hs-form-frame,
  .cta-form iframe { 
    min-height: 560px; 
  }
}

/* Platform Logos Auto-Scroll (Optional)
   ========================================================================= */

.platforms-strip {
  position: relative;
  overflow: hidden;
}

.platforms-strip__track {
  display: flex;
  gap: 48px;
  align-items: center;
  scroll-behavior: smooth;
}

.platforms-strip__track[data-auto-scroll] {
  animation: platformsScroll 30s linear infinite;
}

@keyframes platformsScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Pause animation on hover/focus */
.platforms-strip__track[data-auto-scroll]:hover,
.platforms-strip__track[data-auto-scroll]:focus-within {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .platforms-strip__track[data-auto-scroll] {
    animation: none;
  }
}