/*
 * Package Gallery With Status (Elementor tag "Package Gallery With Status").
 * Thumbnails/frame basics come from cart.css (.twicely-package-gallery,
 * .twicely-gallery-*); availability badge colors from packages-grid.css.
 * This file only adds what the merged tag needs: the badge overlay and the
 * info pills.
 */

/* Fixed-ratio frame the image is absolutely filled into, so the image's own
   dimensions can't move the badge or leave an empty band under the photo.
   !important beats theme/Elementor global `img { height:auto }` rules. */
.twicely-package-gallery--with-status .twicely-gallery-main {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;
    background: #f5f5f5;
}

.twicely-package-gallery--with-status .twicely-gallery-main-image {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    border-radius: 0 !important;
}

.twicely-package-gallery--with-status .twicely-gallery-placeholder {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-45deg, #f0f0f0 0 14px, #f7f7f7 14px 28px);
}

/* Availability badge overlaid on the image, top-left */
.twicely-package-gallery--with-status .twicely-gallery-main .twicely-package-availability-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
}

/* Info pills */
.twicely-gallery-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.twicely-gallery-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #000000;
    font-family: 'Recoleta', 'Recoleta Alt', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.twicely-gallery-pill__icon {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .twicely-package-gallery--with-status .twicely-gallery-main {
        border-radius: 12px;
    }

    .twicely-package-gallery--with-status .twicely-gallery-main .twicely-package-availability-badge {
        top: 10px;
        left: 10px;
        padding: 5px 10px;
        font-size: 11px;
    }

    .twicely-gallery-pill {
        padding: 7px 12px;
        font-size: 13px;
    }
}