/* Features Final Uniform Height - Definitive solution */

/* Force uniform heights using CSS Grid with intrinsic sizing */
@media screen and (min-width: 768px) {
  /* Container setup */
  .interactive-features {
    width: 100% !important;
  }

  .interactive-features .container {
    max-width: 100% !important;
  }

  /* Grid container for equal height rows */
  .feature-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: max-content !important;
    gap: 0 !important;
    width: 100% !important;
  }

  /* Each feature item fills its grid cell */
  a.feature-item,
  .feature-item {
    display: grid !important;
    width: 100% !important;
    min-height: 350px !important; /* Base minimum height */
    align-items: stretch !important; /* Stretch all children */
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    border-bottom: 1px solid #e0e0e0 !important;
    margin: 0 !important;
  }

  /* Grid columns within each item */
  a.feature-item,
  .feature-item {
    grid-template-columns: 0.8fr 1.4fr 2.3fr !important; /* Text, Video, Title proportions */
    gap: 2rem !important;
  }

  /* Text column */
  .feature-description {
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 100% !important;
  }

  .feature-description p {
    margin: 0 0 1rem 0 !important;
    flex-grow: 0 !important;
  }

  .feature-number {
    margin-top: auto !important;
    flex-grow: 0 !important;
  }

  /* Video column */
  .feature-video-container {
    grid-column: 2 !important;
    position: relative !important;
    min-height: 200px !important;
    height: 100% !important;
  }

  .feature-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Title column */
  .feature-title {
    grid-column: 3 !important;
    display: flex !important;
    align-items: flex-start !important;
  }
}

/* Specific minimum heights based on content requirements */
@media screen and (min-width: 1440px) {
  a.feature-item,
  .feature-item {
    min-height: 300px !important;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
  a.feature-item,
  .feature-item {
    min-height: 320px !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  a.feature-item,
  .feature-item {
    min-height: 340px !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  a.feature-item,
  .feature-item {
    min-height: 360px !important;
  }
}

/* Ensure uniformity with data attribute trigger */
@media screen and (min-width: 768px) {
  /* When JavaScript adds this class, all items match tallest */
  .features-uniform .feature-item {
    min-height: var(--features-height, 350px) !important;
  }
}

/* Override any conflicting styles */
@media screen and (min-width: 768px) {
  a.feature-item,
  .feature-item {
    height: auto !important; /* Let content determine height */
    max-height: none !important; /* No maximum restriction */
    overflow: visible !important; /* Content never hidden */
  }

  .feature-description,
  .feature-video-container,
  .feature-title {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Ensure text is never cut off */
  .feature-description p {
    overflow: visible !important;
    text-overflow: initial !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
    max-height: none !important;
  }
}

/* High specificity overrides */
.interactive-features .feature-list a.feature-item,
.interactive-features .feature-list .feature-item {
  min-height: 350px !important;
}

/* Fallback for browsers without grid support */
@supports not (display: grid) {
  @media screen and (min-width: 768px) {
    a.feature-item,
    .feature-item {
      display: flex !important;
      min-height: 350px !important;
    }
  }
}