/* ==========================================================================
   Amenities strip — the gold-ruled band of icon columns under the hero.
   Metrics taken from the template at its 1920px design width.
   ========================================================================== */

.amenities {
    border-block: 2px solid var(--bb-gold-600);
    background-color: var(--bb-black);
}

.amenities__list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: var(--bb-shell);
    margin-inline: auto;
    padding: clamp(1.75rem, 2vw, 2.5rem) var(--bb-gutter);
}

.amenities__item {
    position: relative;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem clamp(0.9rem, 1.15vw, 1.4rem);
    text-align: center;
}

.amenities__title,
.amenities__text {
    display: block;
}

.amenities__icon {
    display: block;
    color: var(--bb-gold-500);
}

.amenities__icon svg {
    width: clamp(2.5rem, 3.3vw, 4rem);
    height: clamp(2.5rem, 3.3vw, 4rem);
}

.amenities__title {
    margin-top: clamp(1.1rem, 1.7vw, 2.0625rem);
    color: var(--bb-text);
    font-size: clamp(0.8125rem, 0.74rem + 0.16vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.2;
    /* No text-transform: the template caps every label except "WiFi", so the
       casing comes from the content itself. */
}

.amenities__text {
    /* Wraps at roughly the same points as the template. */
    max-width: 11rem;
    margin-top: clamp(0.65rem, 1vw, 1.1875rem);
    color: var(--bb-text-dim);
    font-size: clamp(0.75rem, 0.72rem + 0.09vw, 0.875rem);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Items with photos are buttons that open their album in the lightbox. The
   button takes over the item's column layout so the copy sits exactly where
   it does on the plain items.
   -------------------------------------------------------------------------- */

.amenities__link {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

.amenities__link .amenities__icon {
    transition: transform var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease);
}

.amenities__photos {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.85rem;
    color: var(--bb-gold-500);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: color var(--bb-dur) var(--bb-ease);
}

.amenities__photos svg {
    width: 1rem;
    height: 1rem;
}

.amenities__link:hover .amenities__icon,
.amenities__link:focus-visible .amenities__icon {
    color: var(--bb-gold-300);
    transform: translateY(-3px);
}

.amenities__link:hover .amenities__photos,
.amenities__link:focus-visible .amenities__photos {
    color: var(--bb-gold-200);
}

.amenities__link:focus-visible {
    outline: 1px solid var(--bb-gold-500);
    outline-offset: 6px;
}

/* --------------------------------------------------------------------------
   Dividers. Only drawn once the seven columns sit on a single line — on a
   wrapped layout a border-inline-start would land at the start of a row.
   -------------------------------------------------------------------------- */

@media (min-width: 1240px) {
    .amenities__item + .amenities__item::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 1px;
        background-color: rgba(233, 225, 205, 0.15);
    }
}

@media (max-width: 1239px) {
    .amenities__item {
        flex-basis: 13rem;
        padding-block: clamp(0.85rem, 1.6vw, 1.4rem);
    }
}