/* ==========================================================================
   News Feature Section
   Featured post band on light blue: content left (badge, title, excerpt,
   button), featured image right. Single column on mobile, image after
   the content.
   ========================================================================== */

.news-feature {
  background-color: var(--color-light-blue);
  padding-block: var(--section-padding);
}

.news-feature__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Left: content */
.news-feature__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.news-feature__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--color-navy);
  line-height: 1.25;
  margin-top: var(--space-sm);
}

.news-feature__excerpt {
  font-size: var(--font-size-body);
  color: var(--color-text-light);
  line-height: 1.75;
  margin-top: 1rem;
}

.news-feature__btn {
  margin-top: var(--space-md);
}

/* Right: featured image */
.news-feature__image-col {
  width: 100%;
}

.news-feature__image-link {
  display: block;
  overflow: hidden;
  /* GPU-rasterized clip - the scale zoom shimmers/jitters without it */
  transform: translateZ(0);
}

.news-feature__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: transform var(--transition-slow);
  will-change: transform;
  backface-visibility: hidden;
}

.news-feature__image-link:hover .news-feature__image {
  transform: scale(1.03);
}

/* ---- Desktop: content left ~55%, image right ~45%, centered ---- */
@media (min-width: 1024px) {
  .news-feature__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
  }

  .news-feature__content {
    flex: 1;
  }

  .news-feature__image-col {
    flex: 0 0 45%;
    max-width: 45%;
  }
}

/* ---- Wide desktop: open the gap out to match the design ---- */
@media (min-width: 1280px) {
  .news-feature__inner {
    gap: var(--space-xl);
  }
}