@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
}

@layer theme {
    :root {
        --text: hsl(0, 0%, 47%);
        --text-secondary: hsl(0, 41%, 41%);
        --text-light: hsl(0, 0%, 77%);
        --title: hsl(32, 82%, 46%);
        --title-secondary: hsl(36, 88%, 52%);
        --bg: hsla(0, 0%, 0%, 0.193);
        --pad:  10px;
        --shadow-soft: 0px 0px 10px 10px rgba(52, 52, 85, 0.1);
    }
}

@layer base {

    p, h1, h2, h3, h4, h5, h6, li, a {
        color: var(--text);
    }

    a {
        color: currentColor;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

    img {
        max-width:  100%;
    }

    .grid {
        display: grid;
        grid-template-columns: [grid-start] var(--pad) [content-start] 1fr [content-end] var(--pad)  [grid-end];
    }  

    .full-width {
        grid-column: grid-start / grid-end;
    }

    .content-width {
        grid-column: content-start / content-end;
    }

    .date {
        font-size: small;
        font-style: italic;
        color: var(--text-light);
    }

    .row {
        display: flex;
        flex-direction: row;
    }

    .filigram-bg {
        background-image: url(public/common/background-cubes-en-filigramme.png);
        background-position: 0% 0%;
        background-size: 200px;
        background-attachment: scroll;
    }

    nav {
        a {
            color: var(--text);
        }

        ul {
            display: flex;
            height: 100%;
            align-items: center;
        }

        li {
            all: unset;
            padding: var(--pad);
        }
    }

    header {
        background: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgb(255,255,255) 31%,rgb(255,255,255) 65%,rgba(255,255,255,0) 100%);
        box-shadow: var(--shadow-soft);
        margin-bottom: 1rem;
    }

    footer {
        display: flex;
        justify-content: center;
        padding-top: 2rem;
        padding-bottom: 0.5rem;
    }

    .lightbox {
        position: fixed;
        inset: 0 0 0 0;
        pointer-events: none;
        padding: 5px;
        border: 5px solid white;
        
        img  {
            opacity: 1;
            transition: all 0.5s;
            box-shadow: var(--shadow-soft);
        }

        &.show {
            pointer-events: all;
            background-color: hsl(0, 0%, 100%, 0.5);
            transition: all 0.2s;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }
}

@layer components {
    .content-title {
        h1, h2, h3, h4, h5, h6, a {
            color: var(--title);
        }
        margin-bottom: 1rem;
    }
    .pagination {
        display: flex;
        justify-content: center;
    }

    .preview-items {
        display: flex;
        flex-direction: column;
        row-gap: 2rem;
    }

    .preview-title {
        color: var(--title-secondary);
        margin-bottom: 0.5rem;
    }
    
    .preview-date {
        color: var(--text-light);
        font-size: small;
        margin-bottom: 0.5rem;
    }

    .preview-content {
        display: flex;
        column-gap: 0.5rem;
        align-items: start;
        img {
            display: inline-block;
        }
    }

    .preview-more {
        display: block;
        width: fit-content;
        background-color: hsl(0, 0%, 0%, 0.05);
        white-space: nowrap;
        color: var(--btn-text);
        margin: 0px;
        padding: 2px 10px;
        border-radius: 5px;
        font-style: normal;
    }
}

@layer media {

    @media screen and (min-width: 1200px)  {        
        .grid {
            grid-template-columns: [grid-start] 1fr [content-start] 800px [content-end] 1fr  [grid-end];
        }        
    }

    @media screen and (min-width: 600px) and (max-width: 1200px) {        
        .grid {
            grid-template-columns: [grid-start] 1fr [content-start] 550px [content-end] 1fr  [grid-end];
        }        
    }
}