/* Features Full Width - Extend items and hover to screen edges */

@media screen and (min-width: 768px) {
  /* Remove container restrictions */
  .interactive-features {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

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

  /* Make feature list full width */
  .feature-list {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Feature items extend full width with internal padding */
  a.feature-item,
  .feature-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* Hover background extends full width */
  a.feature-item::before,
  .feature-item::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    background-color: transparent !important;
    transition: background-color 0.3s ease !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }

  a.feature-item:hover::before,
  .feature-item:hover::before {
    background-color: #f8f8f8 !important;
  }

  /* Alternative: Direct hover without pseudo-element */
  a.feature-item:hover,
  .feature-item:hover {
    background-color: #f8f8f8 !important;
  }
}

/* Adjust internal padding based on screen size */
@media screen and (min-width: 1440px) {
  a.feature-item,
  .feature-item {
    padding-left: 160px !important;
    padding-right: 160px !important;
  }
}

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

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

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

/* Ensure the grid columns stay within the padded area */
@media screen and (min-width: 768px) {
  a.feature-item,
  .feature-item {
    display: grid !important;
    /* Grid is contained within the padding */
    grid-template-columns: 0.8fr 1.4fr 2.3fr !important;
    gap: 2rem !important;
  }
}

/* Fix any overflow issues */
@media screen and (min-width: 768px) {
  /* Ensure nothing overflows horizontally */
  .interactive-features,
  .interactive-features * {
    max-width: 100% !important;
  }

  /* But allow vertical overflow for content */
  a.feature-item,
  .feature-item,
  .feature-description,
  .feature-title {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
}

/* Edge-to-edge hover visual indicator */
@media screen and (min-width: 768px) {
  a.feature-item,
  .feature-item {
    position: relative !important;
  }

  /* Optional: Add edge indicators on hover */
  a.feature-item:hover::after,
  .feature-item:hover::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 4px !important;
    background: linear-gradient(180deg, #007bff 0%, #0056b3 100%) !important;
    opacity: 0.5 !important;
  }
}

/* Ensure consistent hover across entire width */
@media screen and (min-width: 768px) {
  a.feature-item,
  .feature-item {
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
  }

  /* Make sure the entire area is clickable */
  a.feature-item {
    display: grid !important;
    text-decoration: none !important;
    color: inherit !important;
  }
}

/* Override any conflicting margin/padding from other CSS files */
.interactive-features .feature-list {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* High specificity override to ensure full width */
body .interactive-features .container .feature-list a.feature-item,
body .interactive-features .container .feature-list .feature-item {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}