/* Budget Friendly section
   Layout is driven by classes written from the theme-builder settings:
   .bf-layout-{grid|slider} .bf-cols-{2..6} .bf-ratio-{auto|square|portrait|landscape}
   .bf-card-{plain|rounded|shadow|border} .bf-title-{below|overlay|hidden} */

.budget-friendly-section {
    width: 100%;
}

.budget-friendly-section .budget-friendly-description {
    margin-bottom: 25px;
}

/* ---------- grid layout ---------- */
.budget-friendly-list.bf-layout-grid {
    display: grid;
    gap: 20px;
}

.bf-layout-grid.bf-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bf-layout-grid.bf-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bf-layout-grid.bf-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bf-layout-grid.bf-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bf-layout-grid.bf-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ---------- slider layout (slick) ---------- */
.budget-friendly-list.bf-layout-slider .budget-friendly-item {
    padding: 0 10px;
}

.budget-friendly-list.bf-layout-slider:not(.slick-initialized) {
    display: flex;
    overflow: hidden;
}

.budget-friendly-list.bf-layout-slider:not(.slick-initialized) .budget-friendly-item {
    flex: 0 0 auto;
    width: 25%;
}

.budget-friendly-list.bf-layout-slider .slick-prev,
.budget-friendly-list.bf-layout-slider .slick-next {
    z-index: 2;
}

/* ---------- item ---------- */
.budget-friendly-item a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.budget-friendly-img-block {
    position: relative;
    overflow: hidden;
    background: #f6f6f6;
}

.budget-friendly-img {
    width: 100%;
    display: block;
    transition: transform 0.35s ease;
}

.budget-friendly-item a:hover .budget-friendly-img {
    transform: scale(1.04);
}

/* ---------- image ratio ---------- */
.bf-ratio-auto .budget-friendly-img      { height: auto; }
.bf-ratio-square .budget-friendly-img    { aspect-ratio: 1 / 1;   object-fit: cover; height: 100%; }
.bf-ratio-portrait .budget-friendly-img  { aspect-ratio: 3 / 4;   object-fit: cover; height: 100%; }
.bf-ratio-landscape .budget-friendly-img { aspect-ratio: 16 / 9;  object-fit: cover; height: 100%; }

/* fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
    .bf-ratio-square .budget-friendly-img-block,
    .bf-ratio-portrait .budget-friendly-img-block,
    .bf-ratio-landscape .budget-friendly-img-block {
        height: 0;
        padding-bottom: 100%;
    }

    .bf-ratio-portrait .budget-friendly-img-block  { padding-bottom: 133.33%; }
    .bf-ratio-landscape .budget-friendly-img-block { padding-bottom: 56.25%; }

    .bf-ratio-square .budget-friendly-img,
    .bf-ratio-portrait .budget-friendly-img,
    .bf-ratio-landscape .budget-friendly-img {
        position: absolute;
        inset: 0;
        height: 100%;
        object-fit: cover;
    }
}

/* ---------- card style ---------- */
.bf-card-plain .budget-friendly-img-block   { border-radius: 0; }
.bf-card-rounded .budget-friendly-img-block { border-radius: 8px; }
.bf-card-shadow .budget-friendly-img-block  { border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.bf-card-border .budget-friendly-img-block  { border-radius: 8px; border: 1px solid #e6e6e6; }

/* ---------- title placement ---------- */
.budget-friendly-title {
    margin: 12px 0 0;
    text-align: center;
    font-size: 16px;
    line-height: 1.4;
}

.bf-title-hidden .budget-friendly-title {
    display: none;
}

.budget-friendly-overlay {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 14px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}

.bf-title-overlay .budget-friendly-overlay .budget-friendly-title {
    margin: 0;
    color: #fff;
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .bf-layout-grid.bf-cols-3,
    .bf-layout-grid.bf-cols-4,
    .bf-layout-grid.bf-cols-5,
    .bf-layout-grid.bf-cols-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .budget-friendly-list.bf-layout-grid {
        gap: 12px;
    }

    .bf-layout-grid.bf-cols-2,
    .bf-layout-grid.bf-cols-3,
    .bf-layout-grid.bf-cols-4,
    .bf-layout-grid.bf-cols-5,
    .bf-layout-grid.bf-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .budget-friendly-list.bf-layout-slider:not(.slick-initialized) .budget-friendly-item {
        width: 50%;
    }

    .budget-friendly-title {
        font-size: 14px;
    }
}