@charset 'utf-8';
/* ============================================================
   news.html 集團新訊頁專屬樣式
   命名規範：使用 .news-* prefix 避免與其他頁面樣式互相干擾
   結構：base = Mobile (XD 390×1504)，PC 寫在 @media (min-width:1025px) (XD 1920×868)
   依 XD 規格：大標 News(Bronova Bold) + 小標 GS GROUP（對齊 e 字母）；
   交錯白色膠囊卡片、圓形縮圖、酒紅分類膠囊、日期、酒紅圓形箭頭
   ============================================================ */

/* ---------- section 外框 ---------- */
.news-section{ position: relative; padding: calc(var(--header-h-m) + 30px) 20px 70px; }
.news-inner{ position: relative; width: 100%; }

/* ---------- 標題區：News + 疊放的 GS GROUP ---------- */
/* News：Bronova Bold 132px / 酒紅 (mobile X18 Y110) */
.news-head{ position: relative; margin: 0 0 18px 0; }
.news-title{ position: relative; display: inline-block; color: var(--gs-primary); font-family: 'Bronova','PingFang TC',sans-serif; font-size: min(13.2rem, 32vw); font-weight: 700; line-height: .8; letter-spacing: -.05em; }
/* GS GROUP：Bronova Bold 23px，起點對齊 News 的 e 字母（XD x414-300=114 ≒ 標題寬 32%）、
   頂部低於標題頂 7px（≒ 自身字級 .3em） */
.news-title-sub{ position: absolute; top: -.4em; left: 32%; font-size: 2.3rem; letter-spacing: .05em; line-height: 1; white-space: nowrap; }

/* ---------- 新訊列表 ---------- */
/* 每則上下間距 15px */
.news-list{ margin-top: 26px; display: flex; flex-direction: column; gap: 15px; }

/* 卡片：白色圓角、柔和陰影；縮圖與外框間距 15px
   mobile = 縮圖左上 + meta 右側 + 內文整列在下 */
.news-card{
	position: relative;
	display: grid;
	grid-template-columns: 180px 1fr;
	grid-template-areas: "thumb meta" "text text";
	column-gap: 20px; row-gap: 20px;
	padding: 15px 15px 70px;
	background: var(--gs-white);
	border-radius: 100px;
	box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

/* .news-body 為語意包裹層，用 display:contents 讓 meta/text 直接參與卡片 grid */
.news-body{ display: contents; }

/* 圓形縮圖 180×180 */
.news-thumb{ grid-area: thumb; width: 180px; height: 180px; border-radius: 50%; overflow: hidden; background: #e7e3e0; }
.news-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.news-card:hover .news-thumb img{ transform: scale(1.06); }

/* meta：分類膠囊 + 日期（mobile 直向堆疊在縮圖右側） */
.news-meta{ grid-area: meta; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; }
/* 分類膠囊：酒紅底、白字 PingFang TC Medium 16px */
.news-tag{ display: inline-flex; align-items: center; height: 40px; padding: 0 15px; background: var(--gs-primary); border-radius: 999px; color: var(--gs-white); font-size: 1.6rem; font-weight: 500; letter-spacing: .08em; line-height: 1; }
/* 日期：PingFang TC Light 14px、灰 */
.news-date{ color: #535353; font-size: 1.4rem; font-weight: 300; letter-spacing: .04em; line-height: 1; }

/* 內文：PingFang TC Light 20px #555、箭頭接在文末；左右內縮讓文字落在 100px 圓弧內 */
.news-text{ grid-area: text; padding: 0 16px; color: #555555; font-size: 2rem; font-weight: 300; letter-spacing: .04em; line-height: 1.5; }

/* 酒紅圓形箭頭：18×18、白色 chevron 以 border 繪製、與文字垂直置中 */
.news-arrow{ display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 8px; vertical-align: middle; background: var(--gs-primary); border-radius: 50%; transition: transform .25s ease; }
.news-arrow::before{ content: ''; width: 6px; height: 6px; margin-left: -2px; border-top: 2px solid var(--gs-white); border-right: 2px solid var(--gs-white); transform: rotate(45deg); }
.news-card:hover .news-arrow{ transform: translateX(4px); }

/* ---------- Mobile 回到頂端 (top) ---------- */
.news-top{ position: absolute; right: 14px; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; display: none; }
.news-top-line{ width: 1px; height: 46px; background: #9a9a9a; transform: rotate(30deg); transform-origin: bottom center; }
.news-top-txt{ color: #767676; font-size: 2rem; letter-spacing: 1px; line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); }




/* $Pc
--------------------------------------------------------------------------------------
   XD 1920×868 實測座標：
   News 143px x300 y254、GS GROUP 23px x414 y261（= 左偏 .8em、頂 .05em）
   卡片：縮圖 180 內距 15 → 卡高 210、圓角 105；卡寬 906 (右緣對齊內容右緣 x1620)
   R1 img x729(卡靠右)、R2 img x316(卡靠左)、R3 img x736(卡靠右)
   縮圖→文字欄 40px；meta(膠囊34) 與內文(22px lh30) 上下間距 42、垂直置中
   第一張卡頂部 y223 比標題頂 y254 高 31px → head 絕對定位 top:31px
--------------------------------------------------------------------------------------*/
@media screen and (min-width: 1025px){

/* section：第一張卡頂部 y223（透明 header 浮在上方） */
.news-section{ padding: 223px 60px 90px; }
.news-inner{ max-width: 1320px; margin: 0 auto; }

/* 標題區：絕對定位，標題頂 = 卡1頂 +31px */
.news-head{ position: absolute; left: 0; top: 31px; margin: 0; z-index: 2; }
.news-title{ font-size: 14.3rem; line-height: .9; letter-spacing: -.05em; }
.news-title-sub{ top: -.2em; left: 32%; font-size: 2.3rem; }

/* 列表：交錯卡片、每則間距 15px */
.news-list{ margin-top: 0; gap: 15px; }
.news-item{ width: min(906px, 70%); }
.news-item:nth-child(odd){ margin-left: auto; }      /* R1 / R3 靠右 */
.news-item:nth-child(even){ margin-right: auto; }     /* R2 靠左 */

/* 卡片：單列（縮圖左、meta 上、內文下）、內距 15、圓角 105（膠囊） */
.news-card{
	grid-template-columns: 180px 1fr;
	grid-template-areas: "thumb meta" "thumb text";
	align-content: center;
	column-gap: 40px; row-gap: 42px;
	padding: 15px 80px 15px 15px;
	border-radius: 105px;
	box-shadow: 0 18px 40px rgba(0,0,0,.07);
}

/* meta：分類膠囊 + 日期 水平排列，左緣與下方內文切齊；貼齊列底（XD 膠囊頂 y262） */
.news-meta{ flex-direction: row; align-items: center; justify-content: flex-start; gap: 22px; align-self: end; }
.news-date{ font-size: 1.6rem; }

/* 內文 22px / 行距30 / 寬612，左緣與 meta 切齊 */
.news-text{ padding: 0; font-size: 2.2rem; line-height: 1.36; letter-spacing: .05em; max-width: 612px; }

/* top 按鈕僅手機版顯示 */
.news-top{ display: none; }

}