/* ── OVERALL LAYOUT STYLING ── */
.works-page{
    display: flex;
    flex-direction: column;
    gap: var(--size-5xl);


    & section,
    hr{
    margin-left: var(--size-2xl);
    margin-right: var(--size-2xl);

        @media (min-width: 768px) {
            margin-left: var(--size-5xl);
            margin-right: var(--size-5xl);
        }
    }

    & hr{
        border: 0.5px solid var(--colour-primary);
    }
}

.hero-works{
    margin-top: -1.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--size-2xl);
}

.hero-works-img-container{
    padding: var(--size-2xl);
    background-color: var(--color-primary-pink);
    border: 1.5px solid var(--colour-primary);
    border-radius: var(--size-xxs);

    & img {
        width: 60%;
        height: auto;
        margin: 0 auto;
    }
}

/* ── ANIMATION STYLING ── */

.works-page div,
.works-page img,
.works-page h2,
.works-page h3,
.works-page p,
.works-page li{
    animation-name: appear;
	animation-duration: 0.6s;
	animation-fill-mode: forwards;
	animation-timeline: view();
	animation-range: entry 0%;
}

/* ── BUTTON STYLING ── */
.works-subheading{
    font-family: 'Anonymous Pro', sans-serif;
    -webkit-text-stroke: transparent;
    background-color: var(--colour-background);
    font-size: var(--size-sm);
    border: 2px solid var(--colour-primary);
    border-radius: 4px;

    width: fit-content;
    padding: var(--size-xxs) var(--size-xs);
}

.works-subheading-2{
    font-family: 'Anonymous Pro', sans-serif;
    -webkit-text-stroke: transparent;
    background-color: var(--colour-background);
    font-size: var(--size-sm);
    border: 2px solid var(--color-primary-dark-green);
    color: var(--color-primary-dark-green);
    border-radius: 4px;

    width: fit-content;
    padding: var(--size-xxs) var(--size-xs);
}

.works-subheading-3{
    font-family: 'Anonymous Pro', sans-serif;
    -webkit-text-stroke: transparent;
    background-color: var(--colour-background);
    font-size: var(--size-sm);
    border: 2px solid var(--color-primary-dark-blue);
    color: var(--color-primary-dark-blue);
    border-radius: 4px;

    width: fit-content;
    padding: var(--size-xxs) var(--size-xs);
}

/* ── HERO STYLING ── */

.hero-context{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--size-2xl);

    & h2 {
        font-family: 'Anonymous Pro', sans-serif;
        -webkit-text-stroke: transparent;
        font-size: var(--size-xs);
    }

    & div{
        width: 32%;
    }

    /* & div:nth-of-type(3){
        width: fit-content;
    } */
}

/* ── TESTING STYLING ── */
.context, 
.context-info, 
.testing, 
.testing div,
.sue-if-container,
.sue-if-content,
.lo-fi,
.feedback,
.hi-fi-container{
    display: flex;
    flex-direction: column;
    gap: var(--size-xs);
}

.sue-if-content,
.testing,
.lo-fi div{
    gap: var(--size-2xl);
}

.testing div{
    /* padding: var(--size-base) var(--size-base); */
    padding: var(--size-2xl);
    border-radius: var(--size-xxs);

    &:nth-of-type(1){
        background-color: var(--color-primary-pink);
    }

    &:nth-of-type(2){
        background-color: var(--color-primary-green);
    }

    &:nth-of-type(3){
        background-color: var(--color-primary-blue);

        & button{
            background-color: var(--color-primary-dark-blue);
            padding: var(--size-xxs) var(--size-xs);
            border-radius: 4px;
            
            & a{
                color: var(--colour-background);
                text-decoration: none;
                font-family: 'Anonymous Pro', sans-serif;
            }
        }
    }
}

.sue-if-content div{
    /* padding: var(--size-base) var(--size-base); */
    padding: var(--size-2xl);
    border-radius: var(--size-xxs);

    display: flex;
    flex-direction: column;
    gap: var(--size-xs);

    & ul {
        align-items: flex-start;

        & li{
            list-style: disc;
            margin-left: 14px;
            font-size: var(--size-xs);
            padding: 0;
        }
    }

    &:nth-of-type(1){
        background-color: var(--color-primary-green);
    }

    &:nth-of-type(2){
        background-color: var(--color-primary-pink);
    }

    &:nth-of-type(3){
        background-color: var(--color-primary-green);
    }
    
    &:nth-of-type(4){
        background-color: var(--color-primary-pink);
    }

    &:nth-of-type(5){
        background-color: var(--color-primary-blue);
    }
}


/* ── LO-FI & FEEDBACK STYLING ── */
.lo-fi div,
.feedback{
    display: flex;
    flex-direction: column;

    &:nth-child(3){
        margin-top: var(--size-2xl);
    }
}

.feedback{
    & ul {
        align-items: flex-start;

        & li{
            list-style: disc;
            margin-left: 14px;
            font-size: var(--size-xs);
            padding: 0;
        }
    }
}

.hi-fi-container > div{
    /* padding: var(--size-base) var(--size-base); */
    padding: var(--size-2xl);
    border-radius: var(--size-xxs);

    display: flex;
    flex-direction: column;
    gap: var(--size-xs);
    background-color: var(--color-primary-pink);

    &:nth-of-type(2){
        background-color: var(--color-primary-pink);
    }

    &:nth-of-type(3){
        background-color: var(--color-primary-green);
    }

    &:nth-of-type(4){
        background-color: var(--color-primary-blue);
    }

    &:nth-of-type(5){
        background-color: var(--color-primary-pink);
    }

    & div{
        display: flex;
        flex-direction: column;
        gap: var(--size-xs);
    }
}

.works-page .ticker-bottom{
    margin-top: 0;
}

.works-page .ticker-track {
    animation: ticker 20s linear infinite;

}

/* ── DUNKIN' STYLING ── */
.dunkin .hero-context{
    gap: 0;
}

.dunkin .hi-fi-container > div {
    &:nth-of-type(2){
        background-color: var(--color-primary-green);
    }
    &:nth-of-type(3){
        background-color: var(--color-primary-blue);
    }

    & video{
        width: 100%;
        height: auto;
    }
}

/* ── CONTENT DELIVERY STYLING ── */
.context:nth-of-type(3){
    background-color: var(--color-primary-pink);
    padding: var(--size-2xl);
    border-radius: var(--size-xxs);
}

.content .hi-fi-container > div {
    &:nth-of-type(2){
        background-color: var(--color-primary-green);
    }
    &:nth-of-type(3){
        background-color: var(--color-primary-blue);
    }
    &:nth-of-type(4){
        background-color: var(--color-primary-pink);
    }
}

/* ── CLOSETFY STYLING ── */
.closetfy .hero-works-img-container{
    & img {
        width: 100%;
        height: auto;
    }
}

.context:nth-of-type(4){
    background-color: var(--color-primary-pink);
    padding: var(--size-2xl);
    border-radius: var(--size-xxs);
}

.closetfy .hi-fi-container > div {
    &:nth-of-type(2){
        background-color: var(--color-primary-green);
    }
    &:nth-of-type(3){
        background-color: var(--color-primary-green);
    }
    &:nth-of-type(4){
        background-color: var(--color-primary-blue);
    }
}

/* ── BEYOND STYLING ── */
.beyond .hero-works-img-container{
    & img {
        width: 100%;
        height: auto;
    }
}

.beyond .testing ul li{
    list-style: disc;
    margin-left: 14px;
    font-size: var(--size-xs);
    padding: 0;
}

.beyond .testing div:nth-of-type(4){
    background-color: var(--color-primary-pink);
}

.beyond .sue-if-content{
    & div:nth-of-type(3){
        background-color: var(--color-primary-blue);
    }
}

.beyond .feedback div{
    display: flex;
    flex-direction: column;
    gap: var(--size-xs);
}

.beyond .hi-fi-container > div {
    &:nth-of-type(2){
        background-color: var(--color-primary-green);
    }
    &:nth-of-type(3){
        background-color: var(--color-primary-blue);
    }
}

/* ── MORE STYLING ── */
.more .testing{
    & div:nth-of-type(1),
     div:nth-of-type(6){
        background-color: var(--color-primary-green);
    }

    & div:nth-of-type(2),
    div:nth-of-type(3){
        background-color: var(--color-primary-pink);
    }

    & div:nth-of-type(4),
     div:nth-of-type(5){
        background-color: var(--color-primary-blue);
    }
}

.more .testing:nth-of-type(1) {
    margin-top: -3rem;
}

#viewzine{
    display: flex;
    flex-direction: row;
    gap: var(--size-xxs);
    align-items: flex-start;
    padding: 0;

    background-color: var(--color-primary-blue);

    & button{
        background-color: var(--color-primary-dark-blue);
        padding: 0;
        height: 100%;
        & a{
            color: var(--colour-background);
            text-decoration: none;
            padding: var(--size-xxs) var(--size-xs);
        }
    }
}


/* @media (min-width: 768px) {
	.container{
		max-width: 768px;
	}
}

@media (min-width: 1024px) {
	.container{
		max-width: 1024px;
	}
}

@media (min-width: 1280px) {
	.container{
		max-width: 1280px;
	}
} */

/* ── RESPONSIVE STYLING ── */

@media (min-width: 768px) {
	.container{
		max-width: 768px;
	}

    .context, 
    .context-info, 
    .testing, 
    .testing div,
    .sue-if-container,
    .sue-if-content,
    .lo-fi,
    .feedback,
    .hi-fi-container{
        gap: var(--size-2xl);
    }

    .hero-works-img-container img{
        width: 40%;
    }

    .context-info{
        flex-direction: row;
        gap: var(--size-5xl);
    }

    /* ── TESTING STYLING ── */
    .testing{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* grid-template-rows: repeat(5, 1fr); */
        gap: var(--size-base);

        & div:nth-of-type(1){
            grid-column: 1 / 2;
            grid-row: 1 / 3;
        }

        & div:nth-of-type(2){
            grid-column: 2 / 3;
            grid-row: 1 / 2;
        }

        & div:nth-of-type(3){
            grid-column: 2 / 3;
            grid-row: 2 / 4;
        }
    }

    .sue-if-content{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--size-base);

        & div:nth-of-type(1){
            grid-column: 1 / 2;
            grid-row: 1 / 3;
        }

        & div:nth-of-type(2){
            grid-column: 2 / 3;
            grid-row: 1 / 2;
        }

        & div:nth-of-type(3){
            grid-column: 1 / 2;
            grid-row: 3 / 4;
        }

        & div:nth-of-type(4){
            grid-column: 2 / 3;
            grid-row: 2 / 4;
        }

        & div:nth-of-type(5){
            grid-column: 1 / 3;
            grid-row: 4 / 5;
        }
    }

    .lo-fi div,
    .feedback div{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--size-base);

        & ul{
            justify-content: flex-start;

            & li:hover{
                border: 1px solid transparent;
                cursor: default;
            }
        }
    }

    .sue-if-content div ul{
        justify-content: flex-start;

        & li:hover{
            border: 1px solid transparent;
            cursor: default;
        }
    }

    .hi-fi-container{
        & div:nth-of-type(2),
        & div:nth-of-type(3),
        & div:nth-of-type(4){
            flex-direction: row;
            gap: var(--size-5xl);

            & img{
                width: 40%;
                height: auto;
            }
        }

        & div:nth-of-type(3){
            flex-direction: row-reverse;
            text-align: right;

            & div{
                align-items: flex-end;
            }
        }

        & div:nth-of-type(5) div{
            align-items: center;
            text-align: center;
        }
    }

    /* ── DUNKIN STYLING ── */

    .dunkin .hi-fi-container{
        align-items: center;
    }

    .dunkin .context-info p{
        width: 50%;
    }

    .dunkin .hi-fi-container > div {
        width: 70%;

        & video{
            width: 30%;
            height: auto;
        }

        &:nth-of-type(2){
            flex-direction: row-reverse;

            & div{
                align-items: flex-end;
                text-align: right;
            }
        }

        &:nth-of-type(3){
            flex-direction: row;

            & div{
                align-items: flex-start;
                text-align: left;
            }
        }
    }

    .dunkin .hi-fi-container > div:nth-of-type(1) {
        flex-direction: row;
    }

    /* ── CONTENT STYLING ── */
    .content .hi-fi-container > div:nth-of-type(1) {
        flex-direction: row;
    }

    .content .hi-fi-container > div:nth-of-type(1) img{
        width: 40%;
        height: auto;
    }

    .content .hi-fi-container > div{
        &:nth-of-type(2),
        &:nth-of-type(4){
            flex-direction: row-reverse;
            text-align: right;
            
            & div{
                align-items: flex-end;
            }
        }

        &:nth-of-type(3){
            flex-direction: row;
            text-align: left;

            & div{
                align-items: flex-start;
            }
        }
    }

    /* ── CLOSETFY STYLING ── */
    #closetfy-div{
        flex-direction: row-reverse;
        gap: var(--size-5xl);

        & img{
            width: 40%;
            height: auto
        }
    }

    .closetfy .hi-fi-container > div:has(#closetfy-div) div{
        gap: var(--size-5xl);
    }

    /* ── BEYOND STYLING ── */
    .beyond .hero-works-img-container{
        & img {
            width: 60%;
            height: auto;
        }
    }

    .beyond .testing{
        & div:nth-of-type(1){
            grid-column: 1 / 2;
            grid-row: 1 / 2;
        }

        & div:nth-of-type(2){
            grid-column: 2 / 3;
            grid-row: 1 / 3;
        }

        & div:nth-of-type(3){
            grid-column: 1 / 2;
            grid-row: 2 / 4;
        }

        & div:nth-of-type(4){
            grid-column: 2 / 3;
            grid-row: 3 / 4;
        }
    }

    .test-img{
            grid-column: 1 / 3;
            grid-row: 5 / 6;
    }

    .beyond .sue-if-content{
        & div:nth-of-type(1){
            grid-column: 1 / 2;
            grid-row: 1 / 2;
        }

        & div:nth-of-type(3){
            grid-column: 1 / 3;
            grid-row: 2 / 3;
        }
    }

    .beyond .hi-fi-container > div{
        &:nth-of-type(1){
            flex-direction: row;
            gap: var(--size-5xl);

            & img{
                width: 40%;
                height: auto;
            }
        }

        &:nth-of-type(2){
            flex-direction: row-reverse;

            & div {
                align-items: flex-end;
                text-align: right;
            }
        }
    }

    .beyond .context-info p {
        width: 50%;
    }

    .more .testing:nth-of-type(1) {
        & h1{
            grid-column: 1 / 3;
            grid-row: 1 / 2;
        }

        & div:nth-of-type(1){
            grid-column: 1 / 2;
            grid-row: 2 / 4;
        }

        & div:nth-of-type(2){
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }

        & div:nth-of-type(3){
            grid-column: 1 / 2;
            grid-row: 4 / 5;
        }

        & div:nth-of-type(4){
            grid-column: 2 / 3;
            grid-row: 3 / 5;
        }

        & div:nth-of-type(5){
            grid-column: 1 / 2;
            grid-row: 5 / 6;
        }

        & div:nth-of-type(6){
            grid-column: 2 / 3;
            grid-row: 5 / 6;
        }
    }

    .more .testing:has(h2){
        & h2{
            grid-column: 1 / 3;
            grid-row: 1 / 2;
        }

        & div:nth-of-type(1){
            grid-column: 1 / 2;
            grid-row: 2 / 3;
        }

        & div:nth-of-type(2){
            grid-column: 2 / 3;
            grid-row: 2 / 4;
        }

        & div:nth-of-type(3){
            grid-column: 1 / 2;
            grid-row: 3 / 5;
        }

        & div:nth-of-type(4){
            grid-column: 2 / 3;
            grid-row: 4 / 5;
        }
    }
}

@media (min-width: 1024px) {
	.container{
		max-width: 1024px;
	}

    .works-page h1{
        font-size: var(--size-5xl);
    }

    .hero-works-img-container img{
        width: 30%;
        padding: var(--size-3xl) 0;
    }

    .works-page p,
    .feedback ul li{
        font-size: var(--size-base);
    }

    .sue-if-content div{
        & ul li{
            font-size: var(--size-base);
        }
    }
    
    .works-subheading,
    .works-subheading-2,
    .works-subheading-3{
        font-size: var(--size-lg);
    }

    .testing div,
    .sue-if-content div,
    .hi-fi-container > div{
        padding: var(--size-4xl);
        /* gap: var(--size-3xl); */
    }

    .hi-fi-container div:nth-of-type(5){
        gap: var(--size-3xl);
    }

    .testing{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--size-base);

        & div:nth-of-type(1){
            grid-column: 1 / 2;
            grid-row: 1 / 4;
        }

        & div:nth-of-type(2){
            grid-column: 2 / 3;
            grid-row: 1 / 3;
        }

        & div:nth-of-type(3){
            grid-column: 2 / 3;
            grid-row: 3 / 4;
        }
    }
}

@media (min-width: 1280px) {
	.container{
		max-width: 1280px;
	}
}