下手 */
.NewsCards > div
{
position: relative; /* 給整卡連結與箭頭當定位基準 */
display: flex;
align-items: center;
gap: 1rem;
min-width: 0;
padding: .875rem 3rem .875rem .875rem; /* 右邊留給箭頭 */
margin-bottom: 0 !important; /* 蓋掉 .mb-3，間距改由 gap 統一 */
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .06);
border-radius: .75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}
.NewsCards > div:hover,
.NewsCards > div:focus-within
{
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
transform: translateY(-1px);
}
/* 日期徽章 ----------------------------------------------------------------
.text-muted 的 color 帶 !important（Bootstrap 5 的 utility 都是），
所以這裡也要 !important 才蓋得掉。 */
.NewsCards > div > .small
{
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 4.25rem;
min-height: 4.25rem;
padding: .35rem;
margin-bottom: 0;
border-radius: .625rem;
background-color: #EEF3E0;
color: #6E8B3D !important;
line-height: 1.15;
text-align: center;
}
.NewsCards .NewsDay
{
font-size: 1.6rem;
font-weight: 700;
color: #5C7A2B;
}
.NewsCards .NewsYm
{
/* 不低於 12px —— 再小在手機上難以辨識 */
font-size: .78rem;
color: #8AA359;
}
/* 標題 --------------------------------------------------------------------
min-width:0 不能省 —— flex 項目的最小尺寸預設是內容寬度，
長標題會把卡片撐破。 */
.NewsCards > div > a
{
flex: 1 1 auto;
min-width: 0;
text-decoration: none;
}
.NewsCards h3
{
margin: 0;
font-size: 1rem;
line-height: 1.55;
font-weight: 700;
color: #212529;
}
.NewsCards a:hover h3,
.NewsCards a:focus-visible h3
{
color: #5C7A2B;
}
/* 整張卡片可點 —— 連結原本只包住
，用一層覆蓋把感應範圍放大到整張卡。
這是 Bootstrap .stretched-link 的做法，但 class 由 code-behind 決定，
所以在這裡自己實作。 */
.NewsCards > div > a::after
{
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* 右側箭頭 —— 用邊框轉 45 度畫出來，不需要圖檔或字型圖示 */
.NewsCards > div::after
{
content: "";
position: absolute;
top: 50%;
right: 1.25rem;
width: .5rem;
height: .5rem;
border-top: 2px solid #C2C8D0;
border-right: 2px solid #C2C8D0;
transform: translateY(-50%) rotate(45deg);
transition: border-color .15s ease-in-out;
}
.NewsCards > div:hover::after
{
border-color: #5C7A2B;
}
/* 偏好減少動態效果的使用者不做位移 */
@media (prefers-reduced-motion: reduce)
{
.NewsCards > div
{
transition: none;
}
.NewsCards > div:hover,
.NewsCards > div:focus-within
{
transform: none;
}
}
/* ==========================================================================
4. 重點提示卡片
--------------------------------------------------------------------------
Home/Default.aspx.cs 為每則提示輸出:
改版前是一整塊 Bootstrap .card，裡面每則提示包在 且置中對齊。
實際內容是 50~60 字的法規說明（資料庫實測 56 / 63 字），用 h3 的
1.75rem 置中排出來會變成一大團，是這次要改掉的主因:
置中 -> 靠左 中文長句置中時每一行的起點都不一樣，很難連著讀
h3 -> p 它是內文不是標題，字級降到 .95rem、行高拉到 1.85
一塊 -> 一則一卡 多則提示原本黏在一起，分不出哪裡是一則的結尾
配色與左欄的新聞卡片成對: 同樣是白底圓角卡 + 左側彩色徽章，
新聞用綠色（日期），提示用暖琥珀色（燈泡），兩欄並排時能一眼分辨，
又不會和導覽列的品牌色 #34B7A7 打架。
卡片不可點，所以刻意不做 hover 位移與陰影變化 —— 會讓人以為點得下去。
========================================================================== */
.PromptCards
{
display: flex;
flex-direction: column;
gap: .75rem;
}
.PromptCard
{
display: flex;
align-items: flex-start; /* 圖示對齊第一行，不隨內容長度浮動 */
gap: .875rem;
padding: 1rem 1.125rem;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .06);
border-left: 4px solid #E0A93B;
border-radius: .75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.PromptIcon
{
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
margin-top: .1rem; /* 與內文第一行的視覺中線對齊 */
border-radius: 50%;
background-color: #FDF3DC;
color: #B4801F;
font-size: 1.05rem;
line-height: 1;
}
/* min-width:0 不能省 —— flex 項目的最小尺寸預設是內容寬度，
沒有空格可斷的長句會把卡片撐破（與第 3 節的標題同一個道理）。 */
.PromptText
{
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-size: .95rem;
line-height: 1.85; /* 中文長句需要比預設 1.5 更鬆 */
color: #3F4650;
overflow-wrap: anywhere;
}
/* ==========================================================================
5. 觸控裝置的可點範圍
--------------------------------------------------------------------------
條件用 pointer:coarse 而不是螢幕寬度 —— 判斷依據是「用手指點」而不是
「螢幕小」，滑鼠使用者把視窗縮窄時版面不會變鬆。
新聞卡片與「開始檢測」那類卡片不在此列 —— 它們的連結有覆蓋整塊的
::after，實際可點範圍就是整張卡片。
========================================================================== */
@media (pointer: coarse)
{
/* 分類標籤（NewsDetail 的 News）實測 46x20 */
a.badge
{
padding: .5em .75em;
}
/* SelectDetail 的「編輯履歷表」是一般的 ，實測 80x21。
這是條件顯示的動作連結（SelectDetail.aspx.cs 依權限決定 Visible）。
用結尾比對而不是 #EditLink —— Home/ 的頁面都套 MasterPage，
伺服器控制項的 id 會被加上命名容器前綴（ctl00_..._EditLink）。 */
a[id$="EditLink"]
{
display: inline-block;
padding: .35rem .5rem;
}
}