/* ==========================================
   GLOBAL RESET
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f4f7fb;
}

/* ==========================================
   GRID CONTAINER
========================================== */

#addtrips{

    width:90%;
    max-width:1500px;

    margin:130px auto 50px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    align-items:start;

}

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

.trip-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    display:flex;

    
    flex-direction:column;

    min-height:680px;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

    transition:.35s;

}

.trip-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.18);

}

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

.buy-image{

    width:100%;

    height:240px;

    object-fit:cover;

    display:block;

    background:#ececec;

}

/* ==========================================
   DURATION BADGE
========================================== */

.duration{

    display:inline-block;

    width:max-content;

    margin:18px 20px 10px;

    padding:8px 16px;

    background:#eaf3ff;

    color:#1565c0;

    border-radius:30px;

    font-size:13px;

    font-weight:bold;

    letter-spacing:2px;

}

/* ==========================================
   TITLE
========================================== */

.buy-h2{

    margin:0 20px;

    font-size:22px;

    line-height:1.5;

    color:#222;

    min-height:100px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}
/* ==========================================
   PRICE SECTION
========================================== */

.price-box{

    margin:20px;

    margin-top:auto;

    padding-top:20px;

    border-top:1px solid #ececec;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

}

/* ==========================================
   PRICE INFO GRID
========================================== */

.price-info{

    width:100%;

    display:grid;

    grid-template-columns:auto auto;

    grid-template-areas:
        "date from"
        "date price"
        "date small";

    column-gap:25px;

    row-gap:5px;

}

/* ==========================================
   DATE BOX
========================================== */

.date{

    grid-area:date;

    background:#eef7ff;

    border-left:5px solid #1565c0;

    border-radius:10px;

    padding:12px 15px;

    min-width:180px;

}

.date span{

    display:block;

    font-size:13px;

    color:#666;

}

.date strong{

    display:block;

    margin-top:6px;

    font-size:17px;

    color:#1565c0;

    font-weight:bold;

}

/* ==========================================
   PRICE
========================================== */

.from{

    grid-area:from;

    justify-self:end;

    font-size:12px;

    color:#888;

    letter-spacing:1px;

}

.price{

    grid-area:price;

    justify-self:end;

    color:#0f766e;

    font-size:32px;

    font-weight:bold;

}

.price-info small{

    grid-area:small;

    justify-self:end;

    color:#666;

    font-size:13px;

}

/* ==========================================
   DELETE BUTTON
========================================== */

.delete-btn{

    width:100%;
    margin: 20px;
    margin-left:3px;

    margin-top:auto;

    padding:14px;

    border:none;

    border-radius:10px;

    background:#ef4444;

    color:#fff;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

.delete-btn:hover{

    background:#dc2626;

    transform:translateY(-2px);

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

@media (max-width:1200px){

    #addtrips{

        grid-template-columns:repeat(2,1fr);

        gap:30px;

    }

}

@media (max-width:768px){

    #addtrips{

        width:95%;

        grid-template-columns:1fr;

        gap:25px;

    }

    .trip-card{

        min-height:auto;

    }

    .buy-image{

        height:220px;

    }

    .buy-h2{

        font-size:20px;

        min-height:auto;

        -webkit-line-clamp:3;

    }

    .price-box{

        flex-direction:column;

        align-items:stretch;

        gap:20px;

    }

    .price-info{

        grid-template-columns:1fr;

        grid-template-areas:

            "date"
            "from"
            "price"
            "small";

        row-gap:10px;

    }

    .from,
    .price,
    .price-info small{

        justify-self:start;

        text-align:left;

    }

    .price{

        font-size:26px;

    }

    .date{

        min-width:100%;

    }

    .delete-btn{

        width:100%;

        margin:15px 0 0;

    }

}

/* ==========================================
   SCROLLBAR (OPTIONAL)
========================================== */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#f1f1f1;
}

::-webkit-scrollbar-thumb{
    background:#b7b7b7;
    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
    background:#888;
}

/* ==========================================
   SMOOTH ANIMATIONS
========================================== */

.trip-card,
.delete-btn,
.buy-image{

    transition:all .3s ease;

}

.trip-card:hover .buy-image{

    transform:scale(1.03);

}

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

.no-trips{

    width:100%;

    text-align:center;

    padding:80px 20px;

    color:#666;

    font-size:22px;

    font-weight:bold;

}