/* ==========================================================================
   Component · Feature row
   Alternating copy + media sections.
   Variants:
     .feature--media-left   screenshot left, copy right   (wide container)
     .feature--media-right  copy left, screenshot right   (wide container)
     .feature--narrow       copy left, custom media right (1130 container)
   ========================================================================== */

.feature {
  padding-block: calc(var(--section-pad) / 2);
}

.feature__grid {
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 1.5rem + 4vw, 6rem);
}

.feature--media-left  .feature__grid { grid-template-columns: minmax(0, 57%) minmax(0, 1fr); }
.feature--media-right .feature__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 57%); }
.feature--narrow      .feature__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); }

.feature__copy {
  max-width: 24rem;
  margin-inline: auto;
}

.feature--narrow .feature__copy {
  max-width: 28rem;
  margin-inline: 0;
}

.feature__title {
  margin-top: 0.875rem;
  font-size: var(--text-headline);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.feature__body {
  margin-top: 1.25rem;
}

/* Screenshot frame — no box, no clipping: the WebP assets carry their own
   rounded corners and transparency, and the drop-shadow filter traces that
   alpha shape (invisible in dark, soft in light). The filter lives on the
   img so the reveal engine's transition on the figure can't override its
   theme cross-fade. */
.media-frame img {
  width: 100%;
  filter: var(--shadow-media);
  transition: filter var(--duration-theme) var(--ease-gentle);
}

/* ---- Stacked layout ------------------------------------------------------ */
@media (max-width: 66.75em) {
  .feature--media-left .feature__grid,
  .feature--media-right .feature__grid,
  .feature--narrow .feature__grid {
    grid-template-columns: 1fr;
  }

  /* Copy always reads first when stacked */
  .feature__copy {
    order: -1;
    max-width: 35rem;
    margin-inline: 0;
  }

  .media-frame {
    max-width: 46rem;
  }
}