@charset "UTF-8";
/* ==========================================================================
   GK Visual —— v.geekfei.cn（eunice 主题）通用微调
   1) 桌面左侧栏：品牌图尺寸 + 10 项菜单的纵向空间（含矮屏滚动）
   2) 画廊网格间隙（Isotope fitRows 会读元素渲染尺寸，用 padding 内缩最稳）
   3) 手机端网格一行两图
   ========================================================================== */

/* ---------------- 1. 桌面左侧栏 ---------------- */
.header-area .logo-img img.gk-logo-desktop {
  display: block;
  width: 148px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

@media only screen and (min-width: 992px) {
  /* 菜单从 15 个 demo 页换成正式 10 项后内容变高：
     主题的 mCustomScrollbar 没把本容器包住，却留下了内联 overflow:hidden，
     矮屏会把最后几项直接切掉 → 这里强制恢复纵向滚动 */
  .header-area .header-content {
    padding: 44px 30px 24px;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .16) transparent;
  }
  .header-area .header-content::-webkit-scrollbar {
    width: 4px;
  }
  .header-area .header-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 4px;
  }
  /* 页脚改回文档流，不再绝对定位压住最后几项 */
  .header-area footer.footer {
    position: static;
    padding-top: 20px;
    margin-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .07);
  }
  /* 收紧纵向节奏，1366×768 笔记本一屏能放下 */
  .header-area .header {
    padding-bottom: 14px;
  }
  .header-area .navbar.main-menu > ul > li > a {
    padding: 12px 0;
  }
}

/* ---------------- 2. 画廊网格间隙 ----------------
   主题原本 .media-grid .grid-item{margin-bottom:-3px} 让图片互相咬合（无缝）。
   Isotope 用 fitRows + percentPosition 绝对定位，改 margin 会打乱它的算法，
   所以改用 item 内 padding：外框尺寸不变、图片四边内缩，邻居之间自然留出 2×padding。
*/
.media-grid .grid-item {
  padding: 5px;
  margin-bottom: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* 图片本身去掉可能存在的底部行内空隙 */
.media-grid .grid-item .single-img,
.media-grid .grid-item .single-img img {
  display: block;
}

/* ---------------- 3. 手机端一行两图 ---------------- */
@media only screen and (max-width: 767.98px) {
  .media-grid .grid-item,
  .media-grid .grid-item.three-columns,
  .media-grid .grid-item.five-columns {
    width: 50%;
  }
  /* 两列时图片更小，间隙收一点，视觉更均衡 */
  .media-grid .grid-item {
    padding: 3px;
  }
}

/* ---------------- 4. 手机端图册封面标题 ----------------
   主题里 h5 固定 20px、text-transform:uppercase、left:31px 定位，
   两列布局下卡片只有 ~195px 宽，长标题会顶到右边缘并糊在亮色照片上，看不全。
   手机端重排：更小的字号、两行截断、底部渐变衬底，并常显（触屏没有 hover）。
*/
@media only screen and (max-width: 991.98px) {
  .media-grid .grid-item .media-box-text {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding: 26px 10px 9px;
    box-sizing: border-box;
    text-align: left;
    z-index: 4;
  }
  .media-grid .media-box-text h5 {
    font-size: 13px;
    line-height: 1.34;
    letter-spacing: 0;
    text-transform: none;
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    /* 常显 */
    opacity: 1;
    visibility: visible;
    filter: none;
    -ms-filter: none;
  }
  /* 手机端副标题太挤，隐藏 */
  .media-grid .media-box-text h6 {
    display: none;
  }
  /* 底部渐变衬底，保证白字在任何照片上都读得清 */
  .media-grid .grid-item .single-img:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62%;
    background: linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 2;
  }
  .media-grid .grid-item .media-box-img-cation {
    z-index: 3;
  }
}

@media only screen and (max-width: 480.98px) {
  .media-grid .media-box-text h5 {
    font-size: 12.5px;
  }
}