/**
* 作者: 文尼先生
* 模組: 升級友連系統專用 - 文字/APP/Banner模組
* 系統: maccms v10
* 官網: https://3dayseo.com
* 更多: https://wntheme.com
*/

/* 預設樣式設定 */
: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;

    /* 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-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: 100px 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-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:8px;
    --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;

    /* 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-top:40px;
    margin-bottom: 20px;
}

.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;
}

.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: 10px;
    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));
}

.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-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);
    }
    
    /* 文字 */
    .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));
    }
    
}