/**
**************************************************
* 作者: 文尼先生
* 站長資源: https://3dayseo.com
* 文尼模板網: https://wntheme.com
* 模組: 升級友連系統專用 - 文字/APP/Banner模組
**************************************************
*/

/* 預設樣式設定 */
:root {

    /* 通用 */
    --wn-block-container-width: 1200px;
    --wn-block-title-color: black;
    --wn-block-title-font-size: 1.5rem;
    --wn-block-title-mobile-font-size: 20px;
    --wn-block-title-text-align: center;
    --wn-block-title-margin: 30px 0 10px 0;
    --wn-block-title-padding: 0;

    /* App設定 */
    --wn-block-app-title-display: none;
    --wn-block-app-wrapper-display: flex;
    --wn-block-app-wrapper-justify-content: center;
    --wn-block-app-item-mobile-count: 5;
    --wn-block-app-item-mobile-max-count: 5;
    --wn-block-app-text-color: black;
    --wn-block-app-text-font-size: 0.875rem;
    --wn-block-app-text-mobile-font-size: inherit;
    --wn-block-app-image-border-radius: 12px;
    --wn-block-app-image-desktop-width: 70px;
    --wn-block-app-image-desktop-height: 70px;
    --wn-block-app-image-mobile-width: 60px;
    --wn-block-app-image-mobile-height: 60px;
    --wn-block-app-margin: 30px auto 50px auto;


    /* 文字友連設定 */
    --wn-block-link-title-display: block;
    --wn-block-link-text-color: #f7d0bf;
    --wn-block-link-item-background-color: #2e2e2e;
    --wn-block-link-item-background-hover-color: #515151;
    --wn-block-link-item-border-radius: 5px;

    --wn-block-link-wrapper-display: flex;
    --wn-block-link-desktop-count: 10;
    --wn-block-link-mobile-count: 4;
    --wn-block-link-item-margin: 5px;
    --wn-block-link-item-padding: 6px;
    --wn-block-link-item-desktop-font-size: 18px;
    --wn-block-link-item-mobile-font-size: 14px;


    /* 橫幅設定 */
    --wn-banner-block-title-display: none;
    --wn-block-banner-desktop-count: 2;
    --wn-block-banner-mobile-count: 1;
    --wn-block-banner-aspect-ratio: 728 / 90;

    /* Dark mode */
    --wn-block-title-color-dark: white;
    --wn-block-app-text-color-dark: white;
    --wn-block-link-text-color-dark: #f7d0bf;
    --wn-block-link-item-background-color-dark: #2e2e2e;
    --wn-block-link-item-background-hover-color-dark: #515151;

    /* Light mode */
    --wn-block-title-color-light: black;
    --wn-block-app-text-color-light: black;
    --wn-block-link-text-color-light: #f7d0bf;
    --wn-block-link-item-background-color-light: #2e2e2e;
    --wn-block-link-item-background-hover-color-light: #515151;

}

/* App 圖標 */
.wn_block_app {
    width: var(--wn-block-container-width);
    max-width: 100%;
    margin: var(--wn-block-app-margin);
}

.wn_block_app .wn_block_title {
    display: var(--wn-block-app-title-display);
    font-size: var(--wn-block-title-font-size);
    font-weight: bold;
}

.wn_block_app .wn_block_app_wrapper {
    display: var(--wn-block-app-wrapper-display);
    justify-content: var(--wn-block-app-wrapper-justify-content);
    flex-wrap: wrap;
}

.wn_block_app .wn_block_app_item {
    text-align: center;
}

.wn_block_app .wn_block_app_item_image {
    border-radius: var(--wn-block-app-image-border-radius);
    width: var(--wn-block-app-image-desktop-width);
    height: var(--wn-block-app-image-desktop-height);
    object-fit: cover;
    margin: 5px;
    /* border: 5px solid gray; */
}

.wn_block_app .wn_block_app_item_name {
    width: auto;
    display: block;
    text-align: center;
    font-size: var(--wn-block-app-text-font-size);
    color: var(--wn-block-app-text-color);
    white-space: nowrap;
    font-weight: bold;
}

.wn-dark-mode .wn_block_app .wn_block_app_item_name {
    color: var(--wn-block-app-text-color-dark);
}

.wn-light-mode .wn_block_app .wn_block_app_item_name {
    color: var(--wn-block-app-text-color-light);
}

/* 文字友連 */
.wn_block_link {
    width: var(--wn-block-container-width);
    max-width: 100%;
    margin: 30px auto;
}

.wn_block_link .wn_block_title {
    display: var(--wn-block-link-title-display);
    text-align: var(--wn-block-title-text-align);
    ;
    font-size: var(--wn-block-title-font-size);
    color: var(--wn-block-title-color);
    font-weight: bold;
    margin:  var(--wn-block-title-margin);
    padding: var(--wn-block-title-padding);
}

.wn-light-mode .wn_block_title {
    color: var(--wn-block-title-color-light);
}

.wn-dark-mode .wn_block_title {
    color: var(--wn-block-title-color-dark);
}

.wn_block_link .wn_block_link_wrapper {
    display: var(--wn-block-link-wrapper-display);
    flex-wrap: wrap;
    margin-left: calc(var(--wn-block-link-item-margin) * -1);
    margin-right: calc(var(--wn-block-link-item-margin) * -1);
}

.wn_block_link .wn_block_link_item {
    font-size: var(--wn-block-link-item-desktop-font-size);
    width: calc(calc(100% / var(--wn-block-link-desktop-count)) - calc(var(--wn-block-link-item-margin) * 2) - calc(var(--wn-block-link-item-padding) * 2));
    margin: var(--wn-block-link-item-margin);
    padding: var(--wn-block-link-item-padding);
    text-align: center;
    background-color: var(--wn-block-link-item-background-color);
    border-radius: var(--wn-block-link-item-border-radius);
    white-space: nowrap;
    overflow: hidden;
    box-sizing: content-box;
}

.wn-dark-mode .wn_block_link .wn_block_link_item {
    background-color: var(--wn-block-link-item-background-color-dark);
}

.wn-light-mode .wn_block_link .wn_block_link_item {
    background-color: var(--wn-block-link-item-background-color-light);
}

.wn_block_link .wn_block_link_item:hover {
    background-color: var(--wn-block-link-item-background-hover-color);
}

.wn-dark-mode .wn_block_link .wn_block_link_item:hover {
    background-color: var(--wn-block-link-item-background-hover-color-dark);
}

.wn-light-mode .wn_block_link .wn_block_link_item:hover {
    background-color: var(--wn-block-link-item-background-hover-color-light);
}

.wn_block_link .wn_block_link_item_name {
    color: var(--wn-block-link-text-color);
}

/* Banner */
.wn_block_banner {
    width: var(--wn-block-container-width);
    max-width: 100%;
    margin: 30px auto;
}

.wn_block_banner .wn_block_banner_wrapper {
    display: flex;
    flex-wrap: wrap;
}

.wn_block_banner .wn_block_banner_item {
    width: calc(100% / var(--wn-block-banner-desktop-count));
    aspect-ratio: var(--wn-block-banner-aspect-ratio);
    height: auto;
}

.wn_block_banner .wn_block_banner_item a {}

.wn_block_banner .wn_block_banner_item img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* 平版電腦 */
@media only screen and (max-width: 1200px) {}

/* 手機版 */
@media only screen and (max-width: 768px) {

    /* App 圖標 */
    .wn_block_app .wn_block_title {
        font-size: var(--wn-block-title-mobile-font-size);
    }

    .wn_block_app .wn_block_app_item {
        max-width: calc(100% / var(--wn-block-app-item-mobile-max-count));
        width: calc(100% / var(--wn-block-app-item-mobile-count));
    }

    .wn_block_app .wn_block_app_item_name {
        font-size: var(--wn-block-app-text-mobile-font-size);
    }

    .wn_block_app .wn_block_app_item_image {
        width: var(--wn-block-app-image-mobile-width);
        height: var(--wn-block-app-image-mobile-height);
        margin: 5px auto;
    }

    /* 文字 */
    .wn_block_link .wn_block_link_item {
        font-size: var(--wn-block-link-item-mobile-font-size);
        width: calc(calc(100% / var(--wn-block-link-mobile-count)) - calc(var(--wn-block-link-item-margin) * 2) - calc(var(--wn-block-link-item-padding) * 2));
    }

    .wn_block_link .wn_block_title {
        font-size: var(--wn-block-title-mobile-font-size);
    }

    /* Banner */
    .wn_block_banner .wn_block_banner_item {
        width: calc(100% / var(--wn-block-banner-mobile-count));
    }

}