/* =============================================
   BLOG HERO — Sticky horizontal featured scroll
   ============================================= */

.blog-hero-showcase {
  position: relative;
  background: var(--white);
  color: var(--black);
}

.blog-hero-showcase.is-passive {
  height: auto;
}

.blog-hero-pin {
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--white);
}

.blog-hero-showcase .blog-hero-inner {
  width: 100%;
}

.blog-hero-showcase .blog-hero-content {
  padding: 40px 0 32px;
}

.blog-featured-viewport {
  overflow: hidden;
  width: 100%;
}

.blog-featured-track {
  display: flex;
  flex-direction: row;
  gap: 22px;
  will-change: transform;
}

.blog-featured-track .blog-featured-card {
  flex: 0 0 calc((100% - 22px) * 0.72);
  min-width: min(520px, 85vw);
  min-height: 380px;
}

.blog-hero-showcase.is-passive .blog-hero-pin {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.blog-hero-showcase.is-passive:not(.is-marquee) .blog-featured-viewport {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.blog-hero-showcase.is-passive:not(.is-marquee) .blog-featured-viewport::-webkit-scrollbar {
  display: none;
}

.blog-hero-showcase.is-passive:not(.is-marquee) .blog-featured-track {
  transform: none !important;
  width: max-content;
  flex-wrap: nowrap;
  will-change: auto;
}

.blog-hero-showcase.is-marquee .blog-featured-viewport {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.blog-hero-showcase.is-marquee .blog-featured-viewport.is-marquee-paused {
  cursor: grabbing;
}

.blog-hero-showcase.is-marquee .blog-featured-track {
  width: max-content;
  flex-wrap: nowrap;
  will-change: transform;
}

.blog-hero-showcase.is-passive:not(.is-marquee) .blog-featured-card {
  scroll-snap-align: start;
}

@media (max-width: 1024px) {
  .blog-featured-track .blog-featured-card {
    flex: 0 0 calc((100% - 22px) * 0.82);
    min-width: 420px;
  }
}

@media (max-width: 640px) {
  .blog-hero-pin {
    height: auto;
    padding-bottom: 32px;
  }

  .blog-hero-showcase .blog-hero-content {
    padding: 32px 0 24px;
  }

  .blog-featured-track .blog-featured-card {
    flex: 0 0 88%;
    min-width: 280px;
    min-height: 320px;
  }

  .blog-hero-showcase.is-marquee .blog-featured-card {
    flex: 0 0 auto;
    min-width: 0;
  }
}