/***** CSS BOOKI *****

- Reset
- Design System
- Header
- Info
    - headline
    - search bar
    - filter bar
    - info bar
- Offers
    - cards
    - sponsored cards
    - offers cards
- Footer

**********************/

/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/***** Design System *****/
:root {
    /* Colors */
    --blue: #0065FC;
    --light-blue: #DEEBFF;
    --grey: #F2F2F2;
    --black: #000000;
    --white: #FFFFFF;

    /* font */
    --font: 'Raleway';
}

body{
    font-family: var(--font), sans-serif;
}
h1, h2{
    font-size: 22px;
    font-weight: 700;
}
.fa-solid{color: var(--blue);}
.fa-solid.neutral-star{color: var(--grey);}
.euro{font-weight: 600;}
a{text-decoration: none; color: inherit;}

.main-container{
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 50px;
    background-color: var(--white);
}
main{padding: 30px 0;}

@media (max-width: 768px) {
    .main-container{padding: 0;}
}


/***** Header *****/
header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.logo{
    height: 79px;
    display: flex;
    align-items: center;

}
.logo img{width: 61px;}
.navbar ul{
    display: flex;
    flex-direction: row;
    gap: 70px;
}
.navbar li a{
    padding: 15px 0;
    display: block;
}
.navbar li a:hover{color: var(--blue);}

@media (min-width: 769px) {
    .navbar li a{border-top: 2px solid var(--white);}
    .navbar li a:hover{border-top: 2px solid var(--blue);}
}

@media (max-width: 768px) {
    header{flex-direction: column;}
    .logo{align-items: end; height: 49px; margin-bottom: 14px;}
    .logo a{margin: 0 auto;}
    .navbar ul{gap:0;}
    .navbar li{width: 50%; text-align: center;}
    .navbar li a{border-top: none; border-bottom: 2px solid var(--grey);}
    .navbar li a:hover{border-top: none; border-bottom: 2px solid var(--blue);}
}

/***** Info *****/

.info >div{margin-bottom: 35px;}

/* headline */
.headline h1{margin: 0 0 10px 0;}

/* search bar */
.searchbar form{
    display: flex;
    align-items: center;
    height: 50px;
    width: 377px;
    position: relative;
 }
.searchbar .icon{
    background-color: var(--grey);
    padding: 0 20px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px 0 0 15px;
}
.searchbar i{font-size: 18px;}

.searchbar input[type='text']{
    border: 1px solid var(--grey);
    height: 100%;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    padding-left: 15px;
}
.searchbar input:focus{outline: none;}
.searchbar button{
    background-color: var(--blue);
    color: var(--white);
    height: 100%;
    padding: 0 20px;
    font-size: 18px;
    font-weight: 500;
    border: none;
    border-radius: 0 15px 15px 0;
    filter: brightness(1);
}
.searchbar button:hover{
    filter: brightness(1.2);
    cursor: pointer;
}
.searchbar button i{
    font-size: 16px;
    display: none;
}

@media (max-width: 768px) {
    .info{padding: 0 20px;}
    .searchbar form{width: 100%;}
    .searchbar input[type='text']{width: 80%;}
    .searchbar button{border-radius: 15px; padding: 0 15px; position: absolute; right: 0; width: 14%;}
    .searchbar button span{display: none;}
    .searchbar button i{display: block;}
}

/* Filter bar */
.filterbar{
    display: flex;
    align-items: center;
    gap: 15px;
}
.filterbar .title-filter{
    font-size: 17px;
    font-weight: 600;
}
.filterbar ul{display: flex; gap: 15px;}
.filterbar li a{
    display: block;
    font-size: 17px;
    font-weight: 600;
    padding: 13px 20px;
    border: 2px solid #d9d9d9;
    border-radius: 25px;
    transition: 0.5s;
}
.filterbar li i{margin-right: 8px;}
.filterbar li a:hover{
    background-color: var(--light-blue);
}

@media (min-width: 769px) and (max-width: 1024px) {
    .filterbar{flex-direction: column; align-items: start;}
}
@media (max-width: 768px) {
    .filterbar{flex-direction: column; align-items: start;}
    .filterbar ul{width: 100%; flex-wrap: wrap; position: relative; gap: 13px; justify-content: space-between;}
    .filterbar li{width: 48%;}
    .filterbar li a{width: 100%; font-size: 14px; padding: 13px 15px;}
    .filterbar li i{font-size: 1.3rem; margin-right: 5px;}
}


/* info bar */
.infobar{display: flex; align-items: center;}
.infobar i{
    border: 1px solid #d9d9d9;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px; height: 24px;
    border-radius: 11px;
    margin-right: 10px;
    padding: 0 0 2px 1px;
}


/***** Offers *****/
article.card a, article.card-activity a{width: 100%;}
.offers{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.offers section{
    background-color: var(--grey);
    border-radius: 20px;
    padding: 30px;
}
.offers-main{width: 65%;}
.offers-sponsored{width: 32%;}

.offers .title, .activity-main .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.offers .title a:hover, .activity-main .title a:hover{
    color: var(--blue);
}
.offers-main a.bt{
    font-size: 18px;
    font-weight: 700;
}
.offers-main a.bt:hover{color: var(--blue);}

@media (max-width: 1024px) {
    .offers section{width: 100%;}
    .offers .title{margin-bottom: 20px;} 
}
@media (min-width: 769px) and (max-width: 1024px) {
    .offers{flex-direction: column; gap: 50px;}  
}
@media (max-width: 768px) {
    .offers{flex-direction: column-reverse; gap: 20px;}
    .offers section{padding: 20px; border-radius: 0;}
    section.offers-main{background-color: var(--white);}   
}


/* cards */
.cards{display: flex;}
.card{
    display: flex;
    background-color: var(--white);
    padding: 5px;
    border-radius: 20px;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1);
}
.card-content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.card h3{
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 110%;
}
.card p{font-size: 14px;}
.card-rating{display: flex;}

/* sponsored cards */
.offers-sponsored .cards{flex-direction: column; gap: 30px;}
.card-sponsored{height: 144px;}
.card-sponsored a{display: flex;}
.card-sponsored .card-content{
    width: 67%;
    padding: 10px 0px 10px 15px;
}
.card-sponsored img{
    width: 33%;
    border-radius: 15px 0 0 15px;
    object-fit: cover;
}

/* offers cards */
.offers-main .cards{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.card-offer{
    width: 31%;
    margin-bottom: 30px;
    justify-content: space-between;
    height: 210px;
}
.card-offer .card-content{
    width: 100%;
    height: 45%;
    padding: 5px 0px 15px 10px;
}
.card-offer img{
    width: 100%;
    border-radius: 15px 15px 0 0;
    height: 55%;
    object-fit: cover;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .offers-sponsored .cards{flex-direction: row; gap: 20px; justify-content: space-between;}
    .offers-sponsored .card{width: 31%;}
}

@media (max-width: 768px) {
    .offers-sponsored .cards{gap: 15px;}
    .offers-main .cards{flex-direction: column;}
    .card-offer{width: 100%; margin-bottom: 15px; height: 207px;}
    .card-offer img{height: 60%;}
    .card-offer .card-content{height: 40%;}
    .card a{width: 100%;}
}

/* activity cards */
.activity-main{
    padding: 30px;
}
.activity-main .cards{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.card-activity{
    border: none;
    width: 23%;
    height: 439px;
    display: flex;
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1);
}
.card-activity a{
    display: flex;
    flex-direction: column;
}
.card-activity h3{
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 110%;
}
.card-activity img{
    width: 100%;
    border-radius: 15px 15px 0 0;
    height: 86%;
    object-fit: cover;
}
.card-activity .card-content{
    padding: 0 15px;
    justify-content: center;
    height: 14%;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .card-activity{height: 270px; width: 22.4%;} 
    .card-activity img{height: 74%;}
    .card-activity .card-content{height: 26%;}
}

@media (max-width: 768px) {
    .activity-main{margin-top: 35px;}
    .activity-main .cards{flex-direction: column; gap: 15px;}
    .card-activity{width: 100%; height: 200px;}
    .card-activity a{width: 100%;}
    .card-activity img{height: 70%;}
    .card-activity .card-content{height: 30%;}
}

/***** Footer *****/

footer{
    background-color: var(--grey);
    padding: 20px;
    display: flex;
    justify-content: space-between;
}
footer h4{
    font-weight: 700;
    font-size: 18px;
}
footer li{margin-top: 12px;}
footer li a{font-size: 16px;}
footer li a:hover{text-decoration: underline;}
footer .column{width: 30%;}

@media (max-width: 768px) {
    footer{flex-direction: column; gap: 40px; padding: 30px;}
    footer .column{width: 100%;}
}