@import "../component-link-card/style.css";

.single-brand-content{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
    gap: 24px;
    padding-bottom: 80px;
    >.sidebar{
        grid-column: span 2;
        position: sticky;
        top: calc(var(--nav-height) + 40px);
        z-index: 1;
        background-color: white;
        >button{
            width: 100%;
            padding: 8px 0;
            display: flex;
            align-items: center;
            gap: 10px;
            >h4{
                flex-grow: 1;
                text-align: start;
                color: var(--color-primary-1);
            }
            >.arrow{
                transition: transform 0.5s;
                &.active{
                    transform: rotate(180deg);
                }
            }
        }
        >.dropdown{
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .5s;
            >div{
                overflow: hidden;
                >div{
                    padding-top: 45px;
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    >a{
                        padding: 4px 0;
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        color: var(--color-gray-3);
                        transition: color 0.3s, background-color 0.3s;
                        >*{
                            color: inherit;
                        }
                        &:hover,
                        &.active{
                            color: white;
                            background-color: var(--color-secondary-1);
                        }
                    }
                }
            }
            &.active{
                grid-template-rows: 1fr;
            }
        }
    }
    >.content{
        grid-column: span 9;
        grid-column-end: -1;
    }
}

@media screen and (width < 1248px) {
    .single-brand-content > .content{
        grid-column: span 10;
    }
}

@media screen and (width < 1024px) {
    .single-brand-content{
        grid-template-columns: 100%;
        >.sidebar{
            display: none;
            /* top: var(--nav-height);
            grid-column: auto;
            >button{
                display: none;
            }
            >.dropdown{
                display: block;
                > div > div{
                    padding-top: 0;
                    flex-direction: row;
                    width: fit-content;
                    margin: 0 auto;
                    overflow: auto;
                    >a{
                        flex-shrink: 0;
                        padding: 10px 30px 10px 6px;
                    }
                }
            } */
        }
        > .content{
            grid-column: auto;
        }
    }
}

#single-brand-content-header{
    margin-bottom: 80px;
    >h1{
        text-align: center;
        margin-bottom: 80px;
    }
    >h4{
        text-align: center;
        margin: 0 auto 40px;
        max-width: 690px;
    }
    >.iframe{
        position: relative;
        aspect-ratio: 16 / 9;
        >iframe{
            display: block;
            width: 100%;
            height: 100%;
        }
    }
}

@media screen and (width < 768px) {
    #single-brand-content-header{
        margin-bottom: 60px;
        >h1{
            margin-bottom: 40px;
        }
    }
}

#single-brand-content-intro{
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    align-items: center;
    gap: 24px;
    margin-bottom: 80px;
    >div:nth-child(1){
        grid-column: span 4;
        >img{
            width: 100%;
            max-width: 326px;
        }
    }
    >div:nth-child(2){
        grid-column: span 5;
    }
}

@media screen and (width < 768px) {
    #single-brand-content-intro{
        margin-bottom: 60px;
        grid-template-columns: 100%;
        >div:nth-child(1),>div:nth-child(2){
            grid-column: auto;
        }
    }
}

#single-brand-content-product{
    >.title{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
        margin-bottom: 20px;
        >h2{
            color: var(--color-primary-1);
        }
        >img{
            width: 48px;
        }
    }
    >p{
        text-align: center;
        white-space: pre-line;
        margin-bottom: 80px;
    }
    >.products{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 24px;
    }
}

@media screen and (width < 768px) {
    #single-brand-content-product{
        >.title{
            margin-bottom: 40px;
            >img{
                width: 36px;
            }
        }
        >p{
            margin-bottom: 60px;
        }
    }
}