@import url(utility.css);

body {
    background-color: var(--bg-color);
    color: var(--text-color-primary);
    font-family: "Archivo", sans-serif;
}

img {
    max-width: 100%;
}

section header {
    border-top: 1px solid var(--stroke-color);
    padding-block: 12px 24px;

    a {
        justify-self: end;
        align-items: center;
        gap: 4px;

        span {
            background-image: url(../assets/icons/ArrowRight.svg);
            height: 16px;
            width: 16px;
        }

        &:hover span {
            background-image: url(../assets/icons/ArrowRight-hover.svg);
        }

        &:hover strong {
            color: var(--brand-color-light);
        }
    }

}

.container {
    max-width: 1280px;
    padding-inline: 32px;
    margin-inline: auto;
}

header #primary-menu {
    padding-block: 20px;

    div {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    div:nth-child(2) {
        margin-inline: auto;
    }

    div:last-child {
        justify-self: end;
    }
}

header #secondary-menu {
    padding-block: 14px;
    border: 1px solid var(--stroke-color);
    border-inline: none;
    justify-content: space-between;
}

main {
    margin-top: 40px;
    row-gap: 80px;
    column-gap: 32px;

    grid-template-columns: 2fr 1.5fr;

    grid-template-areas: 
    "featured featured" 
    "weekly weekly" 
    "ai aside";
}

main #featured {
    grid-area: featured;

    img {
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }

    .card {
        position: relative;
        border-radius: 4px;
        overflow: hidden;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            top: 50%;
            background: linear-gradient(180deg, transparent 0%, #020617 100%);
        }

        figcaption {
            position: absolute;
            bottom: 0;
            padding: 24px;

            &:has(.text-lg) {
                padding: 12px;
            }

            h2 {
                margin-top: 8px;
                font-weight: 700;

            }
        }
    }
}

main #weekly {
    grid-area: weekly;

    img {
        height: 160px;
    }

    header h3 {
        font-size: 14px;
        line-height: 145%;
        font-weight: 700;
        color: var(--text-color-secondary);
    }

    figure {
        position: relative;

        .content-tag {
            position: absolute;
            top: 8px;
            left: 8px;
        }

        p {
            margin-top: 8px;
            font-weight: 800;
            font-size: 16px;
            line-height: 140%;
        }
    }
}

#weekly div:nth-child(1) {
    grid-template-columns: repeat(4, 292px);
}

 .ai-header, .more-header {
    display: flex;
    justify-content: space-between;
}

#ai{
    grid-area: ai;

    img{
        width: 176px;
        aspect-ratio: 1/1;
        object-fit: cover;
    }
}

#ai{
    img{
        width: 176px;
        aspect-ratio: 1/1;
        object-fit: cover;
    }

    h3{
        font-size: 16px;
        line-height: 140%;
        font-weight: 800;
        margin-block: 8px 4px;
    }
}

.ai-header h4, .ai-header a {
    font-size: 14px;
    line-height: 145%;
    font-weight: 700;
    color: var(--text-color-secondary);
}

.more-header h4, .more-header a {
    font-size: 14px;
    line-height: 145%;
    font-weight: 700;
    color: var(--text-color-secondary);
}

aside{
    grid-area: aside;

    #ads{
        img{
            height: 280px;
            width: 488px;
        }
    }
}

#more{
    margin-top: 32px;
    height: 100%;

    h3{
        margin-top: 8px;
    }

    img{
        width: 72px;
        aspect-ratio: 1/1;
        object-fit: cover;
        border-radius: 4px;
    }

    article{
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    article div:last-child{
        flex: 1;
    }
}