/* =========================================
   Amenities (mobile-first, rem breakpoints)
   Columns: 2 (base), 3 @40rem, 4 @48rem, 5 @64rem
   ========================================= */

/* Base (mobile) */
.amenities {
  margin-block: .5rem;
}

.amenities-header {
  font-weight: 500;
  color: var(--dark-blue, #3f525b);
  margin-bottom: .5rem;
}

/* Outer grid: fixed column count per breakpoint */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns on mobile */
  gap: .75rem; /* 12px */
  align-items: start;
}

/* Card groups icon + label */
.amenity {
  display: grid;
  grid-template-columns: 1.75rem 1fr; /* 28px | text */
  gap: .5rem; /* 8px */
  align-items: center;
  padding: .5rem .625rem; /* 8px 10px */
  color: var(--grey-900, #3a3a3a); /* enables currentColor if SVGs are inlined */
}

.amenity-icon {
  width: 1.5rem;  /* 28px */
  height: 1.5rem; /* 28px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.amenity-icon img,
.amenity-icon svg {
  display: block;
  width: 1.5rem;   /* 24px */
  height: 1.5rem;  /* 24px */
}

.amenity-name {
  font-size: .8rem;
  line-height: 1.25;
  color: var(--grey-600, #727272);
}


/* ===========================
   ≥ 40rem (~640px): 3 columns
   =========================== */
@media (min-width: 40rem) {
  .amenities-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .875rem 1rem; /* 14px 16px */
  }

  .amenity {
    grid-template-columns: 2rem 1fr; /* 32px | text */
    padding: .5625rem .75rem; /* 9px 12px */
  }

  .amenity-icon {
    width: 1.75rem;   /* 32px */
    height: 1.75rem;  /* 32px */
  }

  .amenity-icon img,
  .amenity-icon svg {
    width: 1.625rem;  /* 26px */
    height: 1.625rem; /* 26px */
  }
}

/* ===========================
   ≥ 48rem (~768px): 4 columns
   =========================== */
@media (min-width: 48rem) {
  .amenities-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.125rem; /* 16px 18px */
  }

  .amenity {
    padding: .625rem .875rem; /* 10px 14px */
  }

  .amenity-name {
    font-size: .9rem;
  }
}

/* ===========================
   ≥ 64rem (~1024px): 5 columns
   =========================== */
@media (min-width: 64rem) {
  .amenities-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.125rem 1.25rem; /* 18px 20px */
  }

  .amenity {
    grid-template-columns: 2.25rem 1fr; /* 36px | text */
    padding: .75rem 1rem; /* 12px 16px */
  }

  .amenity-icon {
    width: 1.75rem;  /* 36px */
    height: 1.75rem; /* 36px */
  }

  .amenity-icon img,
  .amenity-icon svg {
    width: 1.75rem;  /* 28px */
    height: 1.75rem; /* 28px */
  }
}

/* Optional: dark mode polish (keeps your minimal aesthetic) */
@media (prefers-color-scheme: dark) {
  .amenity-name {
    color: #cfd3d6;
  }
}