h4 {
    margin: 0;
}
main section  {
	padding: var(--padding-medium) 0;
  }




/*********************/    /*********************/
/******        Event   section 1         ******/
/*********************/   /*********************/

h1 {
    margin:0;
    text-align: center;
    font-size: 1.75rem;
    color: #fff; 
    /* geen variabele want moet altijd wit blijven */

    @media (width > 48em) {
        font-size: 3.5rem;
        text-wrap: balance;
    }
}

main section:nth-child(1) {
    background-image: url('../images/e_neighbourhoodcover.webp');
    /* achtergrond blur kan niet met bg img */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border: 1px solid var(--color-stroke);

    img{
        aspect-ratio: 16 / 9;
        border-radius: 1rem;
        object-fit: cover;
        max-inline-size: 320px;
    
        @media (width > 48em) {
            max-inline-size: 375px;
        }
    
    }


    ul {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        flex-wrap: wrap;

        li {
            display: flex;
            align-items: center;
            gap: .5rem;

            a {
                text-decoration: underline color-mix(in srgb, var(--color-secondary-text) 50%, transparent);
                text-underline-offset: 0.25rem;
                text-decoration-thickness: 2px;
                text-decoration-skip-ink: none;
            }   
                main section:nth-child(1) a:hover{
                    text-decoration: underline var(--color-secondary-text);
                } 
        }
    }   
}

main section:nth-child(1) svg, main section:nth-child(1) li {
    fill: var(--color-secondary-text);
    color: var(--color-secondary-text);
}

main section:nth-child(1) button {
    color: var(--color-extra);
    /* de color mix code van de ticketmaster website gekopierd */
    background-color:  color-mix(in srgb, var(--color-extra),transparent calc(100% - (16% * 1)));
    border-radius: 1rem;
    border: none;
    padding-inline: .75rem;
    block-size: 2rem;

    svg {
        fill: var(--color-extra);
    }
}
    main section:nth-child(1) button:hover {
        background-color:  color-mix(in srgb, var(--color-extra),transparent calc(100% - (25% * 1)));
    }


    


/*********************/    /*********************/
/******     main   section 2   tickets      ******/
/*********************/   /*********************/
main > section:nth-of-type(2) {
    padding: 0;
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr;

    grid-template-areas:
        "titel button"
        "info  button";


    h2 {
        grid-area: titel;
    }

    h3 {
        margin-bottom: .5rem;
    }

    > ul:first-of-type {
        grid-area: info;
        display: flex;

        li:not(:first-child)::before {
            content: "·";
            margin: .5rem;
            color: var(--color-secondary-text);
        }
    }

    > button:first-of-type {
        grid-area: button;
        height: fit-content;
        background-color: var(--color-extra);
        color: var(--color-text_reverse);
        border: none;
        border-radius: 1rem;
        padding: .2rem var(--padding-small);
    }

    section {
        grid-column-start: span 2 ;
    }

    /* ticket alerts */
    section:nth-of-type(1) {
        margin-top: 2rem;
        border: 1px solid var(--color-stroke);
        border-radius: 1rem;

        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
        "icon titel button"
        "icon info  button";
        column-gap  : 1rem;
        padding: var(--padding-medium);

        > svg:first-of-type{
            fill: var(--color-text_reverse);
            background-color: var(--color-extra);
            width: 2rem;
            height: 2rem;
            border-radius: .5rem;
            padding: var(--padding-small);
            grid-area: icon;
        }

        h3 {
            grid-area: titel;
        }

        p {
            color: var(--color-secondary-text);
            grid-area: info;
        }

        /* geen idee hoe ik hier een slide knop van moet maken */
        button {
            grid-area: button;
            background-color: var(--color-background_reverse);
            border-radius: 1rem;
            border: none;
            height: fit-content;
            width: fit-content;

            svg {
                fill: var(--color-extra-background);
                height: 1.2rem;
                width: 1.2rem;
            }
        }
        button:active {
            background-color: var(--color-extra);
            svg {
                fill: var(--color-background_reverse);
            }
        }
    }

    /* entreetickets */
    section:nth-of-type(2){
        ul {
            display: grid;
            gap: 1rem;
        }
        li {
            a {
                background-color: var(--color-elevated-background);
                border-radius: 0.75rem;
                padding: var(--padding-medium);

                display: grid;
                grid-template-areas:
                "titel extra"
                "tekst extra";

                h4{
                    grid-area: titel;
                }
                p:nth-of-type(1) {
                    grid-area: tekst;

                    color: var(--color-secondary-text);
                    margin: 0;
                    font-size: var(--fontsize-s);
                }
                p:nth-of-type(2) {
                    grid-area: extra;
                    justify-self: right;
                    align-self: center;

                    display: flex;
                    align-items: center;
                    background-color: var(--color-extra);
                    border-radius: 1rem;
                    padding: .25rem var(--padding-small);
                    height: fit-content; 
                    width: fit-content;
                    font-size: var(--fontsize-xs);
                    color: var(--color-text_reverse);

                    svg {
                        fill: var(--color-text_reverse);
                    } 
                }
            }
        }

        li:hover, a:focus {
            background-color: var(--color-extra-background);
        }

        li:nth-child(1), li:nth-child(3), li:nth-child(5){
            p:nth-of-type(2) {
                background-color: var(--color-secondary-text);
                color: var(--color-elevated-background);

                svg {
                    fill: var(--color-elevated-background);
                } 
            }
        }
    }

    /* overige tickets */
    section:nth-of-type(3) {
        display: grid;

        p {
            display: flex;
            gap: .5rem;
        }
        span {
            display: flex;
            align-items: center;
            border-radius: 1rem;
            padding: .25rem var(--padding-small);
            height: fit-content; 
            width: fit-content;
            font-size: var(--fontsize-xs);
            background-color: var(--color-secondary-text);
            color: var(--color-elevated-background);

            svg {
                fill: var(--color-elevated-background);
            } 
        }
    }
}




/******    INFORMATIE      ******/
main > section:nth-of-type(3) {

    /* wie gaan er */
    section:nth-child(2) {
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: auto 1fr;
        column-gap: .5rem;
        grid-template-areas: 
        "h3  button1"
        "p p "
        "h4 h4 "
        "button2 button3 ";

        h3 {
            grid-area: h3;
        }
        p {
            grid-area: p;
        }
        button:first-of-type {
            grid-area: button1;
            justify-self: right;
            height: fit-content;
        }
        button:nth-of-type(2) {
            grid-area: button2;
        }
        button:last-of-type {
            grid-area: button3;
            height: fit-content;
        }

        button {
            background-color: var(--color-extra-background);
            color: var(--color-extra);
            padding: .5rem 1rem;
            border-radius: 1rem;
            border: none;
            font-size: var(--fontsize-s);
            width: fit-content;
        }
            button:hover {
                background-color: var(--color-elevated-background);
            }

        p {
            color: var(--color-secondary-text);
        }
    }

    /* artiesten */
    section:nth-child(3) {
        article {
            background-color: var(--color-elevated-background);
            padding: 1rem;
            border-radius: 1rem;
            display: grid;
            grid-template-columns: 1fr;
            gap: .5rem;
            align-items: center;
            justify-items: center;

            font-size: var(--fontsize-s);

            img {
                height: 5rem;
                border-radius: 50%;
                aspect-ratio: 1/1;
                object-fit: cover;
            }
            p {
                color: var(--color-secondary-text);
            }

            button {
                background-color: var(--color-extra);
                color: var(--color-text_reverse);
                height: fit-content;
                padding: var(--padding-small) var(--padding-medium);
                border-radius: 1rem;
                border: none;
            }
                

            @media (width > 30em) {
                grid-template-areas: 
                "img h4 button"
                "img p  button";
                grid-template-columns: auto 1fr auto;
                column-gap: 1rem;
                justify-items: start;
                img {
                    grid-area: img;
                }
                h4 {
                    grid-area: h4;
                }
                p {
                    grid-area: p;
                }
    
                button {
                    grid-area: button;
                }
            }
        }
    }

    /* locatie */
    section:nth-child(4) {
        font-size: var(--fontsize-s);
        display: grid;
        gap: 1rem;
        img {
            width: 100%;
            border-radius: 1rem;
        }
        h4 {
            color: var(--color-secondary-text);
        }
        li {
            color: var(--color-secondary-text);
            display: flex;
            align-items: center;
            gap: .5rem;
        }
        li:nth-child(2){
            color: var(--color-extra);
        }
        svg {
            height: 1.5rem;
        }

        @media (width > 30em) {
            display: grid;
            grid-template-columns: 1fr 1fr;

            img, h4, ul{
                grid-row-start: 2;
            }
            h4, ul{
                grid-column-start: 2;
            }
            ul {
                margin-top: 2rem;
            }
        }
    }

    /* genres */
    section:nth-child(5) {
        h3 {
            margin-bottom: .5rem;
        }
        
        ul {
            display: flex;
            gap: .5rem;
        }
        a {
            font-size: var(--fontsize-xs);
            background-color: var(--color-extra-background);
            color: var(--color-extra);
            padding: .25rem .7rem;
            border-radius: 1rem;

            @media (width > 40rem) {
                font-size: var(--fontsize-s);
            }
        }
    }
}