/* ========================================
   BASIC FEATURE GRID - DESKTOP
   ======================================== */

[data-component="basic_feature_grid"] {
  position: relative;
}

/* Header section */
[data-component="basic_feature_grid"] [data-name="feature_grid_heading"] {
  margin-bottom: 1rem;
}

[data-component="basic_feature_grid"] [data-name="feature_grid_container"] {
  max-width: 100%;
}

/* Three-column grid layout */
[data-component="basic_feature_grid"] .card-container.three-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

/* Feature cards */
[data-component="basic_feature_grid"] [data-name="feature_grid_card"] {
  display: flex;
  flex-direction: column;
  height: 100%;
}

[data-component="basic_feature_grid"] [data-name="feature_grid_card_body"] {
  display: flex;
  flex-direction: column;
  padding: 2rem !important;
  border-radius: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[data-component="basic_feature_grid"] [data-name="feature_grid_card_body"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

/* Icon styling */
[data-component="basic_feature_grid"] [data-name="feature_grid_card_icon"] {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 1rem;
}

[data-component="basic_feature_grid"] [data-name="feature_grid_card_icon"] i {
  font-size: inherit;
}

/* Card heading */
[data-component="basic_feature_grid"] [data-name="feature_grid_card_heading"] {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  line-height: 1.3;
}

/* Card description */
[data-component="basic_feature_grid"] [data-name="feature_grid_card_description"] {
  font-size: 1rem;
  line-height: 1.6;
  color: #6b7280;
  flex-grow: 1;
  margin-bottom: 1.5rem;
}

/* CTA button */
[data-component="basic_feature_grid"] [data-name="feature_grid_card_body"] .btn {
  margin-top: auto;
}

/* ========================================
   TABLET RESPONSIVE (768px - 991px)
   ======================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
  /* Two-column grid on tablet */
  [data-component="basic_feature_grid"] .card-container.three-columns {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem;
  }

  [data-component="basic_feature_grid"] [data-name="feature_grid_card_body"] {
    padding: 1.5rem !important;
  }

  [data-component="basic_feature_grid"] [data-name="feature_grid_card_icon"] {
    font-size: 2rem !important;
  }

  [data-component="basic_feature_grid"] [data-name="feature_grid_card_heading"] {
    font-size: 1.15rem !important;
  }

  [data-component="basic_feature_grid"] [data-name="feature_grid_card_description"] {
    font-size: 0.95rem;
  }
}

/* ========================================
   MOBILE RESPONSIVE (< 768px)
   ======================================== */

@media (max-width: 767.98px) {
  /* Section padding adjustments */
  [data-component="basic_feature_grid"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  [data-component="basic_feature_grid"] [data-name="feature_grid_container"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Header adjustments */
  [data-component="basic_feature_grid"] [data-name="feature_grid_heading"] {
    font-size: 2rem !important;
  }

  [data-component="basic_feature_grid"] .fs-sm {
    font-size: 1rem !important;
  }

  [data-component="basic_feature_grid"] .w-75 {
    width: 100% !important;
  }

  /* Single-column stack on mobile */
  [data-component="basic_feature_grid"] .card-container.three-columns {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

  /* Card adjustments */
  [data-component="basic_feature_grid"] [data-name="feature_grid_card"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  [data-component="basic_feature_grid"] [data-name="feature_grid_card_body"] {
    padding: 1.5rem;
  }

  /* Icon sizing */
  [data-component="basic_feature_grid"] [data-name="feature_grid_card_icon"] {
    font-size: 2rem !important;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: center;
  }

  /* Typography adjustments */
  [data-component="basic_feature_grid"] [data-name="feature_grid_card_heading"] {
    font-size: 1.1rem !important;
    margin-bottom: 0.75rem;
  }

  [data-component="basic_feature_grid"] [data-name="feature_grid_card_description"] {
    font-size: 0.9rem !important;
    line-height: 1.5;
    margin-bottom: 1rem;
  }

  /* Button adjustments */
  [data-component="basic_feature_grid"] [data-name="feature_grid_card_body"] .btn {
    width: 100%;
    padding: 0.75rem 1.5rem;
  }
}