/**
* 作者: 文尼先生
* 模組: 升級友連系統專用 - 文字/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: 8;
  --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));
  }

}