/**
 * Villa Amenities section — centred header and grouped amenity pill chips.
 * Depends on villa-home.css.
 *
 * @package Villa_Addon
 */

.vo-amenities { padding-block: var(--sp-160); padding-inline: var(--pad-x); }
.vo-amenities__inner { text-align: center; width: 100%; margin-inline: auto; }
.vo-amenities__h2 { margin-top: .4rem; }
.vo-amenities__sub { max-width: 62ch; margin: 1.4rem auto 0; }

.amen-groups { display: flex; flex-direction: column; gap: clamp(1.6rem, 2.6vw, 2.4rem); margin-top: 3rem; }
.amen-group__label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #0a6a5f; font-weight: 700; margin: 0 0 .9rem; }

.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 1000px; margin: 0 auto; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  border-radius: 100px;
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--dark);
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.pill svg { width: 24px; height: 24px; color: var(--teal); flex: none; }
.pill:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(18, 53, 54, .5); border-color: var(--teal); }

@media (max-width: 640px) {
  .pill { padding: 12px 20px; font-size: 16px; gap: 9px; }
  .pills { gap: 12px; }
}