@charset "UTF-8";

/* ===================================
   News Section
=================================== */

.news-section{
  padding:32px 0 76px;
}

.news-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:720px;
  overflow:hidden;
  border-radius:42px;
  background:
  linear-gradient(
    135deg,
    rgba(17,28,39,.95),
    rgba(5,5,5,.95)
  );
  backdrop-filter:blur(24px);
  box-shadow:0 30px 100px rgba(0,0,0,.45);
}

.news-copy{
  padding:34px;
}

.news-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  padding:9px 16px;
  border-radius:999px;
  border:1px solid rgba(216,181,109,.32);
  background:rgba(216,181,109,.09);
  color:#f7df9b;
  font-size:13px;
  font-weight:950;
  letter-spacing:.12em;
}

.news-copy h2{
  margin:0 0 14px;
  color:#fff3c2;
  font-family:"Noto Serif TC","Noto Sans TC",serif;
  font-size:clamp(30px,4vw,48px);
  line-height:1.22;
  text-shadow:0 0 30px rgba(216,181,109,.22);
}

.news-lead{
  margin:0 0 20px;
  color:#e8dcc2;
  line-height:1.95;
  font-size:17px;
}

.news-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

/* ===================================
   News Video
=================================== */

.news-video{
  position:relative;
  min-height:100%;
  background:#05070b;
}

.news-video video{
  width:100%;
  height:100%;
  min-height:520px;
  display:block;
  object-fit:cover;
  background:#000;
}

.news-video-fallback{
  position:absolute;
  inset:auto 20px 20px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(216,181,109,.26);
  color:#f7df9b;
  line-height:1.7;
  font-weight:900;
}

/* ===================================
   News Highlight
=================================== */

.news-highlight{
  display:grid;
  gap:12px;
  margin:22px 0;
}

.news-highlight div{
  padding:15px 16px;
  border-radius:18px;
  border:1px solid rgba(216,181,109,.18);
  background:rgba(255,255,255,.045);
  color:#d5dde8;
  line-height:1.75;
}

.news-highlight b{
  color:#f7df9b;
}

.news-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}

.news-tags span{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(216,181,109,.10);
  border:1px solid rgba(216,181,109,.18);
  color:#cfc3a8;
  font-size:13px;
  font-weight:800;
}

/* ===================================
   News Review Card
=================================== */

.news-review-card{
  overflow:hidden;
  border-radius:34px;
  border:1px solid rgba(216,181,109,.24);
  background:
  radial-gradient(
    circle at 88% 0%,
    rgba(247,223,155,.15),
    transparent 34%
  ),
  linear-gradient(
    135deg,
    rgba(17,28,39,.94),
    rgba(7,10,15,.98)
  );

  box-shadow:0 24px 70px rgba(0,0,0,.42);
}

.news-review-inner{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:26px;
  align-items:center;
  padding:34px;
}

/* ===================================
   Carousel
=================================== */

.news-carousel{
  gap:0;
}

.news-slide{
  min-width:100%;
  flex:0 0 100%;
  scroll-snap-align:start;
}

.news-slider-wrap{
  position:relative;
}

.news-nav{
  margin-top:18px;
}

.news-prev,
.news-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  z-index:10;
  color:#f7df9b;
  background:rgba(0,0,0,.75);
  border:1px solid rgba(216,181,109,.28);
}

.news-prev{
  left:12px;
}

.news-next{
  right:12px;
}

/* ===================================
   Hover
=================================== */

.news-card,
.news-review-card{
  transition:
  transform .35s ease,
  box-shadow .35s ease,
  border-color .35s ease;
}

.news-card:hover,
.news-review-card:hover{
  transform:
  translateY(-10px)
  scale(1.02);

  border-color:
  rgba(255,240,184,.6);

  box-shadow:
  0 30px 90px rgba(0,0,0,.4),
  0 0 40px rgba(216,181,109,.15);
}

/* ===================================
   Mobile
=================================== */

@media(max-width:980px){

  .news-card,
  .news-review-inner{
    grid-template-columns:1fr;
  }

  .news-video video{
    min-height:720px;
  }

}

@media(max-width:640px){

  .news-section{
    padding:18px 0 54px;
  }

  .news-copy{
    padding:24px 20px;
  }

  .news-video video{
    min-height:360px;
  }

  .news-actions .btn{
    width:100%;
  }

  .news-review-inner{
    padding:20px;
  }

}