/*
==================================================================
GUIDEHUB
Guide List
Inspired by Airbnb Experiences
==================================================================
*/

/* ==============================================================
   VARIABLES
================================================================= */

:root {

    --guide-radius: 1.25rem;

    --guide-shadow:
        0 10px 35px rgba(0, 0, 0, 0.08);

    --guide-shadow-hover:
        0 18px 45px rgba(0, 0, 0, 0.12);

    --guide-transition: 0.25s ease;

}


/* ==============================================================
   PAGE
================================================================= */

.guide-list-page{
    background:#fafafa;
    min-height:100vh;
}


/* ==============================================================
   HERO
================================================================= */

.guide-list-hero{

    padding:4rem 0 2rem;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f9fc 100%
        );

    border-bottom:1px solid #ececec;

}


/* ==============================================================
   FILTERS
================================================================= */

.guide-list-filters{

    position:sticky;

    top:72px;

    z-index:100;

    background:#fafafa;

    padding:1rem 0;

}


.guide-list-filters .card{

    border:none;

    border-radius:20px;

    box-shadow:var(--guide-shadow);

}


.guide-list-filters .form-control,
.guide-list-filters .form-select{

    height:48px;

    border-radius:12px;

}


.guide-list-filters .btn{

    height:48px;

    border-radius:12px;

}


/* ==============================================================
   RESULTS HEADER
================================================================= */

.guide-sort-select{

    min-width:190px;

}


.guide-results-count{

    font-size:1rem;

    color:#6c757d;

}


/* ==============================================================
   GUIDE GRID
================================================================= */

.guide-grid{

    display:grid;

    gap:2rem;

    grid-template-columns:

        repeat(
            auto-fill,
            minmax(300px,1fr)
        );

}


/* ==============================================================
   GUIDE CARD
================================================================= */

.guide-card{

    background:#fff;

    border-radius:var(--guide-radius);

    transition:all var(--guide-transition);

}


.guide-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--guide-shadow-hover);

}


/* ==============================================================
   IMAGE
================================================================= */

.guide-card-media{

    overflow:hidden;

    border-radius:var(--guide-radius);

    aspect-ratio:4/3;

    background:#f5f5f5;

}


.guide-card-image{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .35s ease;

}


.guide-card:hover .guide-card-image{

    transform:scale(1.05);

}


/* ==============================================================
   FAVORITE
================================================================= */

.guide-card-favorite{

    position:absolute;

    top:15px;

    right:15px;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.94);

    box-shadow:0 4px 15px rgba(0,0,0,.12);

    transition:.2s;

}


.guide-card-favorite:hover{

    transform:scale(1.08);

}


.guide-card-favorite i{

    font-size:1.2rem;

}


/* ==============================================================
   BADGES
================================================================= */

.guide-card-status,
.guide-card-verified{

    position:absolute;

    left:15px;

    display:inline-flex;

    align-items:center;

    gap:.35rem;

    padding:.45rem .75rem;

    border-radius:999px;

    font-size:.75rem;

    font-weight:700;

}


.guide-card-status{

    bottom:15px;

    color:#fff;

}


.guide-card-status.is-available{

    background:#198754;

}


.guide-card-status.is-unavailable{

    background:#6c757d;

}


.guide-card-verified{

    top:15px;

    color:#0d6efd;

    background:#fff;

}


/* ==============================================================
   BODY
================================================================= */

.guide-card-title{

    font-weight:700;

    font-size:1.15rem;

}


.guide-card-title a{

    color:#212529;

    text-decoration:none;

}


.guide-card-title a:hover{

    color:#0d6efd;

}


.guide-card-location{

    color:#6c757d;

    font-size:.9rem;

}


.guide-card-specialty{

    color:#0d6efd;

    font-weight:600;

    font-size:.92rem;

}


.guide-card-languages{

    color:#6c757d;

    font-size:.9rem;

}


/* ==============================================================
   RATING
================================================================= */

.guide-card-rating{

    display:flex;

    align-items:center;

    gap:.25rem;

    font-size:.95rem;

}


.guide-card-rating i{

    color:#ffb400;

}


/* ==============================================================
   CHIPS
================================================================= */

.guide-card-chip{

    display:inline-flex;

    align-items:center;

    gap:.35rem;

    padding:.45rem .75rem;

    border-radius:999px;

    background:#f8f9fa;

    border:1px solid #dee2e6;

    font-size:.78rem;

    font-weight:600;

}


/* ==============================================================
   FOOTER
================================================================= */

.guide-card-footer{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:1rem;

    margin-top:1rem;

    padding-top:1rem;

    border-top:1px solid #ececec;

}


.guide-card-price{

    display:flex;

    align-items:baseline;

    gap:.25rem;

}


.guide-card-price .fw-bold{

    font-size:1.15rem;

}


/* ==============================================================
   BUTTONS
================================================================= */

.guide-card .btn{

    border-radius:999px;

    padding:.55rem 1rem;

}


/* ==============================================================
   PAGINATION
================================================================= */

.pagination{

    gap:.35rem;

}


.pagination .page-link{

    border-radius:999px;

    border:none;

    min-width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 2px 8px rgba(0,0,0,.05);

}


.pagination .active .page-link{

    background:#0d6efd;

}


/* ==============================================================
   EMPTY STATE
================================================================= */

.guide-empty{

    text-align:center;

    padding:5rem 2rem;

}


.guide-empty i{

    font-size:4rem;

    color:#adb5bd;

}


.guide-empty h3{

    margin-top:1rem;

}


/* ==============================================================
   OFFCANVAS
================================================================= */

.guide-filters-offcanvas{

    border-top-left-radius:24px;

    border-top-right-radius:24px;

}


/* ==============================================================
   RESPONSIVE
================================================================= */

@media (max-width:991px){

    .guide-list-filters{

        position:static;

    }

}


@media (max-width:768px){

    .guide-grid{

        grid-template-columns:1fr;

    }

    .guide-card-footer{

        flex-direction:column;

        align-items:stretch;

    }

    .guide-card-footer .btn{

        width:100%;

    }

}


@media (max-width:576px){

    .guide-list-hero{

        padding:2rem 0;

    }

    .guide-card-title{

        font-size:1rem;

    }

}



.guide-card-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.guide-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--guide-radius);
    background: #f5f5f5;
}

.guide-card-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 1px;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 576px) {
    .guide-card-media {
        aspect-ratio: 4 / 3;
        min-height: 240px;
    }

    .guide-card-image {
        min-height: 240px;
    }
}