/**
 * 이 파일은 코스모스 게시물 위젯의 일부입니다. (https://www.coursemos.co.kr)
 *
 * 인덱스 템플릿
 *
 * @file /modules/naddle/coursemos/widgets/articles/templates/index/styles/style.css
 * @author Arzz <arzz@arzz.com>
 * @license MIT License
 * @modified 2024. 9. 30.
 */
div[data-role='widget'][data-widget='articles'][data-module='naddle/coursemos'][data-template='index'] {
    > div[data-role='container'] {
        > h4 {
            font: var(--font-head-lg);
            margin-bottom: 40px;
            position: relative;

            > a {
                position: absolute;
                top: calc(50% - 0.5lh);
                right: 0;
                font: var(--font-label-md);
                color: var(--color-text-primary);

                &:hover {
                    color: var(--color-text-brand-primary);
                }
            }
        }

        > ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 48px;

            > li {
                border-bottom: 1px solid var(--color-border-secondary);
                position: relative;

                > a {
                    display: block;
                    padding-bottom: 24px;

                    > label {
                        display: block;
                        font: var(--font-label-md);
                        color: var(--color-text-brand-primary);
                    }

                    > b {
                        display: block;
                        font: var(--font-paragraph-2xlg);
                        color: var(--color-text-secondary);
                        width: calc(100% - 100px);
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }

                    > small {
                        font: var(--font-paragraph-md);
                        color: var(--color-text-secondary);
                        position: absolute;
                        top: calc(50% - 0.5lh);
                        right: 0;
                    }
                }

                &:hover {
                    border-color: var(--color-border-primary);

                    > a {
                        > b {
                            color: var(--color-text-primary);
                        }
                    }
                }
            }
        }

        > div[data-role='wrapper'] {
            --container-gap: calc((100vw - var(--container-small-width)) / 2);
            width: 100vw;
            margin-inline: calc(var(--container-gap) * -1);
            padding-inline: var(--container-gap);
            overflow: hidden;

            > div[data-role='swiper'] {
                --item-gap: 40px;
                width: calc(var(--item-gap) + var(--container-small-width));
                margin: 0 calc(var(--item-gap) * -0.5);

                > div.swiper-wrapper {
                    > div.swiper-slide {
                        max-width: 434px;
                        width: calc(100vw - 60px);
                        flex-shrink: 0;
                        flex-grow: 0;
                        padding: 0px calc(var(--item-gap) / 2);

                        > a {
                            display: block;
                            width: 100%;

                            > div.image {
                                width: 100%;
                                background-repeat: no-repeat;
                                background-position: 50% 50%;
                                background-size: cover;
                                overflow: hidden;
                            }

                            > div.text {
                                flex-grow: 1;
                                flex-shrink: 1;

                                > b {
                                    margin-top: 24px;
                                    margin-bottom: 16px;
                                    display: block;
                                    font: var(--font-paragraph-2xlg);
                                    color: var(--color-text-secondary);
                                    height: 2lh;
                                    -webkit-line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                    display: -webkit-box;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }

                                > small {
                                    display: flex;
                                    gap: 8px;
                                    font: var(--font-paragraph-md);
                                    color: var(--color-text-tertiary);

                                    > time {
                                        padding-left: 9px;
                                        position: relative;

                                        &::before {
                                            position: absolute;
                                            top: 4px;
                                            left: 0px;
                                            width: 1px;
                                            height: calc(100% - 8px);
                                            background: var(--color-text-tertiary);
                                            content: ' ';
                                        }
                                    }
                                }
                            }

                            &:hover {
                                > div.text {
                                    > b {
                                        color: var(--color-text-primary);
                                    }
                                }
                            }
                        }

                        &.interview {
                            max-width: 434px;
                            width: calc(100vw - 60px);

                            > a {
                                > div.image {
                                    aspect-ratio: 434/320;
                                }
                            }
                        }

                        &.research {
                            max-width: 900px;
                            width: calc(100vw - 80px);

                            > a {
                                > div.image {
                                    aspect-ratio: 900/320;
                                }
                            }
                        }
                    }
                }

                > div.controller {
                    padding: var(--item-gap) calc(var(--item-gap) / 2) 0 calc(var(--item-gap) / 2);
                    display: flex;
                    align-items: center;
                    gap: var(--item-gap);

                    > div.scrollbar {
                        width: 100%;
                        background: var(--color-border-secondary);
                        height: 4px;
                        border-radius: 2px;
                        flex-grow: 1;

                        > div {
                            background: var(--color-fg-brand-primary);
                            height: 4px;
                            border-radius: 2px;
                        }
                    }

                    > aside {
                        display: flex;
                        gap: 8px;
                        flex-shrink: 0;

                        > button {
                            flex-shrink: 0;
                            border-color: var(--color-border-secondary);
                        }
                    }
                }
            }
        }
    }
}

@container widget (width < 1080px) {
    div[data-role='widget'][data-widget='articles'][data-module='naddle/coursemos'][data-template='index'] {
        > div[data-role='container'] {
            > div[data-role='swiper'] {
                --item-gap: 20px;

                > div.controller {
                    > aside {
                        display: none;
                    }
                }
            }
        }
    }
}