@layer reset {
    html, body, p, h1, h2, h3, h4, h5, h6, figure {
        margin: 0;
        padding: 0;
    }

    ul {
        margin-block: 0;
    }
}

@layer theme {
    :root {
        --text: hsl(0, 0%, 47%);
        --text-secondary: hsl(19, 41%, 41%);
        --text-light: hsl(0, 0%, 77%);
        --title: hsl(32, 82%, 46%);
        --title-light: hsl(32, 67%, 66%);
        --title-secondary: hsl(36, 88%, 52%);
        --bg: hsla(0, 0%, 0%, 0.193);
        --pad:  5px;
        --gap:  5px;
        --margin: 5px;
        --shadow-soft: 1px 1px 4px 1px rgba(52, 52, 85, 0.1);
        --border-color: hsl(0, 0%, 75%);
        --border-radius: 4px;
    }
}

@layer base {

    p, li, a {
        color: var(--text);
    }

    h1, h2 {
        color: var(--title);
    }

    h3, h4, h5, h6{
        color: var(--title-secondary);
    }

    a {
        color: currentColor;
    }

    img {
        max-width:  100%;
    }

    video {
        max-width:  100%;
    }

    hr /* horizontal rule */ {
        all: unset;
        margin-inline: var(--pad);
        margin-block: 1.5rem;
        height: 2px;
        background-color: var(--border-color);
        opacity: 0.25;
    }

    .float-left {
       float: left;
       margin-right: var(--margin);
    }

    .float-right {
       float: right;
       margin-left: var(--margin);
    }

    .container {
        display: grid;
        grid-template-columns: [grid-start] var(--pad) [content-start] 1fr [content-end] var(--pad)  [grid-end];
        transition: all 100ms; /* nice smooth resizing */
    }  

    .grid-4col {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: var(--gap);
        align-items: stretch;
        justify-content: center;
    }

    .grid-3col {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--gap);
        align-items: stretch;
        justify-content: center;
    }


    .grid-2col{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap);
        align-items: stretch;
        justify-content: center;
    }

    .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/background-cubes-en-filigramme.png);
        background-position: 0% 0%;
        background-size: 200px;
        background-attachment: scroll;
    }

    .align-items-center {
        align-items: center;
    }

    .justify-content-center {
        justify-content: center;
    }

    nav {
        
        ul {
            all: unset;
            display: flex;
            align-items: center;
        }   

        li {
            all: unset;
            padding: 0.75rem;
        }
        
        a {
            color: var(--text);

            text-decoration: none;

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

    header {
        background: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 31%,rgba(255,255,255, 0.5) 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;
        opacity: 0.33;
    }

    img[data-lightbox] {
        cursor: pointer;
    }

    .lightbox {
        position: fixed;
        inset: 0 0 0 0;
        pointer-events: none;
        padding: 20px;
        
        img  {
            opacity: 1;
            transition: all 0.5s;
            box-shadow: var(--shadow-soft);
            flex-basis: 100%;
            flex-grow: 0;
            flex-shrink: 1;
        }

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

    figure {
        padding: 4px;
        border-radius: 4px;

        img, iframe, video {
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-soft);
        }

        figcaption {
            color: var(--text);
            font-style: italic;
            font-size: small;
        }
    }

    .font-style-italic {
        font-style: italic;
    }

    .font-weight-bold {
        font-weight: bold;
    }        
}

@layer components {
    
    .content-title {
        margin-bottom: 1rem;
    }

    .pagination {
        display: flex;
        justify-content: center;
    }

    .content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .content-date {
        font-style: italic;
        color: var(--title-light);
        font-size: smaller;
    }

    .preview-items {
        display: grid;
    }

    .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 {
        column-gap: 0.5rem;
        align-items: start;

        img {
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
            float: left;
            box-shadow: var(--shadow-soft);
            margin: 0 10px 0 0;
            width: 128px;
        }
    }

    .preview-more {
        width: fit-content;
        white-space: nowrap;
        color: var(--btn-text);
        margin: 0px;
        border-radius: 5px;
        text-decoration: underline;
    }

    .social-icon {
        filter: contrast(0.1);
    }

    .link-container {
        .link-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            
            a {
                text-decoration: underline;
            };
        }
    }
}

@layer media {

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

    @media screen and (min-width: 600px) and (max-width: 1400px) {    
        .preview-items {
            grid-template-columns: 1fr;
        }   

        .container {
            grid-template-columns: [grid-start] 1fr [content-start] 550px [content-end] 1fr  [grid-end];
        }
    }

    @media screen and (max-width: 600px)  {  
        .preview-items {
            grid-template-columns: 1fr;
        }   

        .content {
            /* Avoids content to touch the side of the page */
            margin-inline: 0.25rem;
        }    
    }
}