/* ==========================================================
   WICHRI
   STYLE.CSS
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@700&display=swap');

/* ==========================================================
   VARIABILI
========================================================== */

:root{

    --bg1:#46566f;
    --bg2:#5b6b86;

    --panel:#2d3442;
    --card:#384253;

    --red:#c9323d;
    --red-hover:#e04654;

    --text:#f5f5f5;
    --muted:#d6dbe2;

    --radius:12px;

    --shadow:0 10px 30px rgba(0,0,0,.18);

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:Inter,sans-serif;

    background:linear-gradient(180deg,var(--bg1),var(--bg2));

    color:var(--text);

}

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

header{

    position:sticky;

    top:0;

    z-index:999;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 40px;

    background:#232933ee;

    backdrop-filter:blur(10px);

    border-bottom:2px solid var(--red);

}

.logo{

    font-family:Merriweather,serif;

    font-size:32px;

    font-weight:700;

}

.logo span{

    color:var(--red);

}

/* ==========================================================
   MENU
========================================================== */

nav{

    display:flex;

    align-items:center;

    gap:24px;

}

nav a{

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

nav a:hover{

    color:#ff9aa2;

}

.search{

    width:290px;

    padding:12px 15px;

    border:none;

    border-radius:10px;

    background:#ffffff18;

    color:white;

    outline:none;

    transition:.25s;

}

.search::placeholder{

    color:#d9d9d9;

}

.search:focus{

    background:#ffffff28;

}

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

.hero{

    text-align:center;

    padding:80px 20px 50px;

}

.hero h1{

    font-family:Merriweather,serif;

    font-size:120px;

    line-height:1;

}

.hero h1 span{

    color:var(--red);

}

.hero p{

    max-width:900px;

    margin:20px auto;

    font-size:30px;

    line-height:1.6;

    color:var(--muted);

}

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

.container{

    max-width:1300px;

    margin:auto;

    padding:20px 25px 60px;

}

/* ==========================================================
   BOTTONI
========================================================== */

.btn{

    display:inline-block;

    margin-top:20px;

    padding:12px 24px;

    background:var(--red);

    color:white;

    text-decoration:none;

    border-radius:10px;

    font-weight:600;

    transition:.25s;

}

.btn:hover{

    background:var(--red-hover);

    transform:translateY(-2px);

}

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

.feature{

    background:rgba(45,52,66,.90);

    border-radius:var(--radius);

    padding:35px;

    border-left:5px solid var(--red);

    box-shadow:var(--shadow);

    margin:35px 0;

}

.feature h2{

    margin-bottom:15px;

}

.feature h3{

    font-size:34px;

    margin-bottom:15px;

}

.feature p{

    line-height:1.8;

    color:#dde2e9;

}

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

.grid{

    display:grid;

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

    gap:25px;

    margin-top:25px;

}

.card{

    background:var(--card);

    padding:25px;

    border-radius:var(--radius);

    border:1px solid rgba(255,255,255,.08);

    transition:.25s;

}

.card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow);

}

.card h3{

    color:white;

    margin-bottom:15px;

}

.card p{

    color:#dce1e8;

    line-height:1.7;

    margin-bottom:20px;

    min-height:90px;

}
/* ==========================================================
   PAGINA CATEGORIE
========================================================== */

.hero-small{

    text-align:center;

    padding:55px 20px 20px;

}

.hero-small h1{

    font-family:Merriweather,serif;

    font-size:64px;

    margin-bottom:15px;

}

.hero-small p{

    max-width:800px;

    margin:auto;

    color:var(--muted);

    font-size:22px;

    line-height:1.7;

}


/* ========================= */

.category-list{

    display:flex;

    flex-direction:column;

    gap:28px;

    margin-top:50px;

}


/* ========================= */

.category-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(45,52,66,.92);

    border-left:6px solid var(--red);

    border-radius:14px;

    padding:32px 35px;

    text-decoration:none;

    color:white;

    transition:.30s;

    box-shadow:var(--shadow);

}


/* Hover */

.category-card:hover{

    transform:translateY(-5px);

    border-left-color:#ff5c6b;

    background:#3a4558;

}


/* ========================= */

.category-info{

    flex:1;

    padding-right:30px;

}


/* TITOLO */

.category-info h2{

    color:var(--red);

    font-family:Merriweather,serif;

    font-size:34px;

    margin-bottom:14px;

    transition:.25s;

}

.category-card:hover h2{

    color:#ff6673;

}


/* DESCRIZIONE */

.category-info p{

    color:#dbe0e8;

    line-height:1.8;

    font-size:18px;

}


/* ========================= */

.category-right{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:18px;

}


/* CONTATORE */

.category-count{

    color:#ffd2d6;

    font-weight:700;

    font-size:18px;

}


/* FRECCIA */

.arrow{

    font-size:34px;

    color:var(--red);

    transition:.30s;

}

.category-card:hover .arrow{

    transform:translateX(10px);

    color:#ff6673;

}


/* ==========================================================
   PAGINA CURIOSITA'
========================================================== */

.breadcrumb{

    margin-bottom:35px;

    font-size:15px;

    color:#cfd5de;

}

.breadcrumb a{

    color:var(--red);

    text-decoration:none;

}

.breadcrumb a:hover{

    text-decoration:underline;

}


/* CARD CURIOSITA' */

.curiosita-card{

    background:rgba(45,52,66,.92);

    border-left:6px solid var(--red);

    border-radius:14px;

    padding:35px;

    margin-bottom:35px;

    box-shadow:var(--shadow);

    transition:.30s;

}

.curiosita-card:hover{

    transform:translateY(-4px);

}


/* TITOLO */

.curiosita-card h2{

    font-family:Merriweather,serif;

    font-size:36px;

    color:white;

    margin-bottom:25px;

}


/* TESTO */

.curiosita-card p{

    font-size:19px;

    line-height:1.9;

    color:#e6e6e6;

}


/* ==========================================================
   ULTIME CURIOSITA'
========================================================== */

.latest{

    display:grid;

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

    gap:20px;

    margin-top:25px;

}

.latest div{

    background:rgba(45,52,66,.92);

    border-radius:12px;

    padding:20px;

    border-left:5px solid var(--red);

    transition:.25s;

    cursor:pointer;

}

.latest div:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow);

}


/* ==========================================================
   LINK
========================================================== */

a{

    transition:.25s;

}

a:hover{

    text-decoration:none;

}


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

footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-top:70px;

    padding:35px 45px;

    background:#232933;

    border-top:2px solid var(--red);

}

footer div{

    color:#cfd5de;

    line-height:1.7;

}

footer a{

    color:#ffffff;

    text-decoration:none;

}

footer a:hover{

    color:#ff7c87;

}

.admin{

    color:#cfcfcf;

    font-size:14px;

}


/* ==========================================================
   ANIMAZIONI
========================================================== */

.card,
.category-card,
.curiosita-card,
.feature,
.latest div{

    transition:all .30s ease;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#303847;

}

::-webkit-scrollbar-thumb{

    background:var(--red);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#e04654;

}


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

@media(max-width:1100px){

    .grid{

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

    }

    .latest{

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

    }

    .hero h1{

        font-size:90px;

    }

}

@media(max-width:850px){

    header{

        flex-direction:column;

        gap:20px;

        padding:20px;

    }

    nav{

        flex-wrap:wrap;

        justify-content:center;

    }

    .search{

        width:100%;

    }

    .category-card{

        flex-direction:column;

        align-items:flex-start;

        gap:25px;

    }

    .category-right{

        width:100%;

        align-items:flex-start;

    }

}

@media(max-width:700px){

    .grid{

        grid-template-columns:1fr;

    }

    .latest{

        grid-template-columns:1fr;

    }

    .hero{

        padding-top:60px;

    }

    .hero h1{

        font-size:62px;

    }

    .hero p{

        font-size:20px;

    }

    .hero-small h1{

        font-size:42px;

    }

    .feature{

        padding:25px;

    }

    .curiosita-card{

        max-width:800px;

        margin:25px 0;  

        padding:25px;

    }

    .curiosita-card h2{

        font-size:28px;

    }

    footer{

        flex-direction:column;

        text-align:center;

    }

}