@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Marcellus&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root{
    /* palette*/
    --bg-dark: oklch(0.1 0.05 340);
    --bg: oklch(0.15 0.05 340);
    --bg-light: oklch(0.2 0.05 340);
    --text: oklch(0.96 0.1 340);
    --text-muted: oklch(0.76 0.1 340);
    --highlight: oklch(0.5 0.1 340);
    --border: oklch(0.4 0.1 340);
    --border-muted: oklch(0.3 0.1 340);
    --primary: oklch(0.76 0.1 340);
    --secondary: oklch(0.76 0.1 160);
    --danger: oklch(0.7 0.1 30);
    --warning: oklch(0.7 0.1 100);
    --success: oklch(0.7 0.1 160);
    --info: oklch(0.7 0.1 260);

    /* gradient */
    --gradient: linear-gradient(0deg, var(--bg) 97%, var(--bg-light));
    --gradient-hover: linear-gradient(0deg, var(--bg), var(--bg-light));

    /* type */
    --ff: 'IBM Plex Mono', 'Plus Jakarta Sans', sans-serif;
    --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
    --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
    --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
    --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
    --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
    --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
    --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);

    /* space */
    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
    --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
}

@media (prefers-color-scheme: light){
    :root{
        /* palette */
        --bg-dark: oklch(0.92 0.05 340);
        --bg: oklch(0.96 0.05 340);
        --bg-light: oklch(1 0.05 340);
        --text: oklch(0.15 0.1 340);
        --text-muted: oklch(0.4 0.1 340);
        --highlight: oklch(1 0.1 340);
        --border: oklch(0.6 0.1 340);
        --border-muted: oklch(0.7 0.1 340);
        --primary: oklch(0.4 0.1 340);
        --secondary: oklch(0.4 0.1 160);
        --danger: oklch(0.5 0.1 30);
        --warning: oklch(0.5 0.1 100);
        --success: oklch(0.5 0.1 160);
        --info: oklch(0.5 0.1 260);
    }
}

/* global */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--ff);
}

h1{
    font-size: var(--step-3);
}
h2{
    font-size: var(--step-2);
}
h3{
    font-size: var(--step-1);
}
h4{
    font-size: var(--step-0);
}
p{
    font-size: var(--step--1);
    margin-bottom: var(--space-xs);
}

body{
    height: 100dvh;

    display: grid;
    grid-template-rows: auto 1fr auto;

    background-color: var(--bg-dark);
    color: var(--text);

    & a{
        color: var(--text);
        text-decoration: none;
    }
}

/* header */
.home-header{
    padding: var(--space-2xs) var(--space-xs);

    display: flex;
    justify-content: center;
    align-items: center;

    & h1{
        font-size: var(--step-2);
        text-align: right;
        vertical-align: middle;
        text-align-last: left;
    }

    & span{
        font-size: var(--step-5);
        color: var(--primary);
        vertical-align: middle;
        position: relative;
    }

    & span::before{
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: .2rem;
        background-color: var(--secondary);
        border-radius: .5rem;

        z-index: -1;
    }
}

/* main */
main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin: var(--space-s) 0;
}

/* home page */
.home-page-grid{
    display: flex;
    flex-direction: column;
    width: min(1000px, 90%);
    gap: var(--space-2xs)
}

.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    justify-content: center;

    gap: var(--space-2xs);
}

.post-card{
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    z-index: 1;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: .5rem;

    text-align: center;
    flex-direction: column;
}

.post-card-text{
    transition: scale .2s ease;
}

.post-card:hover .post-card-text{
    color: var(--secondary);
    scale: 1.025;
}

.post-card #date{
    color: var(--text-muted);
}

.post-card::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: var(--card-bg-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    scale: 1.2;
    filter: blur(3px) brightness(0.8);

    z-index: -1;
}


.post-card::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: color-mix(in oklch, var(--bg) 50%, transparent);
    scale: 1.2;

    z-index: -1;
}

.grid-controls{
    font-size: var(--step--1);
    display: flex;
    gap: var(--space-3xs) var(--space-l);
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    vertical-align: middle;
}

.grid-controls select{
    width: fit-content;
    background-color: var(--bg-light);
    color: var(--text);
    border: solid 1px var(--border-muted);
    border-bottom-color: var(--border);
    border-radius: .5rem;
    padding: var(--space-3xs) var(--space-2xs);
}

/* post page */
.header-bg{
    width: 100%;
    background-color: var(--bg);
}

.post-header{
    position: relative;
    width: min(1200px, 95%);
    color: var(--text-muted);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: var(--space-s) 0;
    gap: var(--space-2xs);
}

.home-icon{
    fill: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover{
        fill: var(--secondary);
    }
}

.header-title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    & time{
        color: var(--secondary);
    }
}

.post-header ul{
    display: flex;
    justify-content: end; /* i tag restano ancorati a destra */
    align-items: center;
    gap: var(--space-2xs);
    list-style: none;

    & a{
        font-size: var(--step--1);
        text-decoration: none;
        color: var(--text);
        background-color: var(--bg-light);
        padding: var(--space-3xs);
        border-radius: var(--space-3xs);
        border: solid 1px var(--border-muted);
        border-bottom-color: var(--border);
        vertical-align: middle;
        text-align: center;
    }
}

.post{
    width: min(1000px, 90%);
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
}

.post img{
    width: max(250px, 40vw);
    height: auto;
}

.post h1{
    margin-bottom: var(--space-s);
}

/* list */
.list-header{
    width: min(1200px, 95%);
    color: var(--text-muted);
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg);
    padding: var(--space-s) 0;
    gap: var(--space-2xs);
}

.post-preview{
    width: min(1200px, 95%);
    margin: var(--space-3xs) 0;
    padding: var(--space-2xs) var(--space-3xs);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    border: solid 1px var(--border);
    border-radius: .5rem;
    position: relative;
    overflow: hidden;
}

.post-preview:nth-child(2n+1){
    align-items: end;
}

.post-preview::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: var(--card-bg-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    scale: 1.2;
    filter: blur(3px) brightness(0.80);

    z-index: -1;
}

.post-preview::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: color-mix(in oklch, var(--bg) 50%, transparent);
    scale: 1.2;

    z-index: -1;
}

.category-title{
    position: relative;

    &::before{
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: .2rem;
        background-color: var(--secondary);
        border-radius: .5rem;
    }
}

.preview-date{
    color: var(--secondary);
}

/* footer */
footer{
    width: min(1200px, 95%);
    margin-inline: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    grid-template-areas: 
    "previous next";

    padding: var(--space-s) 0;
}

#next{
    grid-area: next;
}
#previous{
    grid-area: previous;
}

.next-button{
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    background-color: var(--bg-light);
    border: solid 1px var(--border-muted);
    border-bottom-color: var(--border);
    border-radius: .5rem;
    padding: var(--space-3xs);
    gap: var(--space-3xs)
}