@charset "UTF-8";
/* skin/nstyle_video.css — 影音專區 video 頁「專屬」CSS
   共用層在 css/nstyle_base.css（banner、.nstyle_page、.nstyle_section__head/__title/__deco）。
   路徑基準：css/skin/ → 圖片為 ../../images/ */

/* banner 換圖 */
.nstyle_pagebanner--video {
  background-image: url(../../images/page_title_video_pc.jpg);
}
@media (max-width: 767.98px) {
  .nstyle_pagebanner--video {
    background-image: url(../../images/page_title_video_mo.jpg);
  }
}

/* 影片卡（點擊開 BS5 modal 播放 YouTube）*/
.nstyle_video__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid #f4e3cf;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(146, 88, 20, 0.08);
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nstyle_video__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(146, 88, 20, 0.16);
}
.nstyle_video__cat {
  padding: 16px 18px 0;
  font-size: var(--nstyle_font-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #d96a00;
}
.nstyle_video__thumb {
  position: relative;
  display: block;
  margin: 12px 0;
}
.nstyle_video__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.nstyle_video__thumb .material-icons-round {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition: transform 0.2s ease, color 0.2s ease;
}
.nstyle_video__card:hover .nstyle_video__thumb .material-icons-round {
  transform: translate(-50%, -50%) scale(1.1);
  color: #f67e11;
}
.nstyle_video__title {
  padding: 0 18px 20px;
  font-size: var(--nstyle_font-title-sm);
  font-weight: 800;
  line-height: 1.4;
  color: #161a22;
}