/* === Amenities === */

.amenities-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}


.amenity-header {
  position: relative;
  color: white;
  border-radius: 15px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  min-height: 120px;            /* Ensures it's never too short on mobile */
  display: flex;                /* Enables flexbox for easy centering */
  align-items: center;          /* Vertically centers the text */
  justify-content: center;      /* Horizontally centers the text */
  padding: 1rem;                /* Use padding for inner spacing */
}

.amenity-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.8) 100%);
  z-index: 1;
}

..amenity-header h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: 'Raleway', sans-serif; /* Use the more elegant heading font */
  font-weight: 400;                   /* A clean, medium weight */
  font-size: 1.3rem;                  /* Make text slightly larger */
  text-transform: uppercase;          /* A strong, modern design choice */
  letter-spacing: 1.5px;              /* Adds some breathing room */
  text-align: center;                 /* Ensures text centers if it wraps */
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); /* A more pronounced shadow */
}

.amenity-icon { 
  width: 24px; 
  height: 24px; 
  vertical-align: middle; 
  margin-right: 0.5rem; 
}


.general .amenity-header { 
  background-image: url(../../images/entrance.jpg); 
}


.kitchen .amenity-header { 
  background-image: url('../../images/kitchen.jpg'); 
}


.outdoor .amenity-header { 
  background-image: url('../../images/outdoor.jpg'); 
}


.livingarea .amenity-header { 
  background-image: url('../../images/livingroom.jpg'); 
}


.bathroom .amenity-header { 
  background-image: url('../../images/bathroom.jpg'); 
}


.amenity-column ul { 
  padding: 0 1rem 1rem 1rem; 
}


.amenity-column h3 { 
  margin-bottom: 0.5rem; 
}


.amenity-list, .amenity-more { 
  list-style: none; 
  padding-left: 0; 
  margin: 0.5rem 0; 
}


.amenity-list li, .amenity-more li { 
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
  padding: 0.5rem 0; 
  list-style: none; 
}


.amenity-more.hidden { 
  display: none; 
}


.toggle-btn {
  background: rgba(255, 255, 255, 0.1); 
  color: #000; 
  padding: 0.75rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.3); 
  border-radius: 0.75rem;
  font-size: 1rem; 
  cursor: pointer; 
  backdrop-filter: blur(10px);
}


.toggle-btn:hover { 
  background: rgba(255, 255, 255, 0.2); 
}