/*
 * "Key features" polish. The layout and the card design are unchanged — the
 * animated orbit and the .feature-item cards stay exactly as they were. This
 * fixes the spacing, which was not doing anything at all.
 *
 * Two Bootstrap 5 class names in markup running Bootstrap 4:
 *   - `row g-4` on the list of features, so the four cards had a 0px gap and
 *     sat flush against one another at every width.
 *   - `gap-4` on each card, so only the icon's 8px margin separated the icon
 *     from the heading next to it.
 * Neither class exists in this build, so both resolve to nothing.
 *
 * Loaded after home.css, which declares .feature-item. Those classes are used
 * by this section and nowhere else in the app.
 */

/* ---------- Gutters between the feature cards ---------- */

/*
 * Scoped to .row.g-4 so it cannot touch the outer `row align-items-center`
 * that holds the orbit and the list side by side. Bootstrap 4 technique:
 * padding on the columns, cancelled by a negative margin on the row.
 */
#key-features .row.g-4 {
  margin-bottom: -1.75rem;
}

#key-features .row.g-4 > [class*='col-'] {
  padding-bottom: 1.75rem;
}

/* ---------- Card ---------- */

/* The `gap-4` in the markup does not exist here; this is the space it was
   meant to create between the icon tile and the text. */
#key-features .feature-item {
  gap: 1.25rem;
}

/*
 * Only where the card is a row. Below 992px home.css turns it into a centred
 * column, and an unscoped flex-start here shoves the icon to the left edge
 * while the heading under it stays centred.
 */
@media (min-width: 992px) {
  #key-features .feature-item {
    align-items: flex-start;
  }
}

/*
 * home.css lifts and scales this card on hover. The scale resamples the text
 * mid-transition and leaves it looking soft, and no other card on the page
 * does it — keep the lift, drop the zoom.
 */
#key-features .feature-item:hover {
  transform: translateY(-6px);
}

/* 1.5rem competed with the section heading. Matched to the step cards. */
#key-features .feature-item h4 {
  margin-bottom: 0.35rem;
  font-size: 1.15rem;
}

#key-features .feature-item p {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---------- Heading ---------- */

#key-features .features-subtitle {
  max-width: 40rem;
  margin: 0 auto;
  color: #6b7280;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ---------- Small screens ---------- */

@media (max-width: 575.98px) {
  /* The icon tile is 64px wide and fixed; on a narrow phone it and the 1.25rem
     gap eat the line length the heading needs. */
  #key-features .feature-item {
    gap: 0.9rem;
    padding: 1.35rem !important;
  }

  #key-features .feature-icon-wrapper {
    width: 52px;
    height: 52px;
    min-width: 52px;
    margin: 0 !important;
    font-size: 1.4rem;
  }

  /* No hover to undo on a touch screen: a tap would leave the card raised. */
  #key-features .feature-item:hover {
    transform: none;
  }
}