/* Lexend Exa 400／500／600 由 index.html Google Fonts 載入 */
/* =====================================================================
共好行動 · ACTIONS · css/actions.css
▸ 所有選擇器以 #actions 開頭，避免污染其他區塊
▸ 版式：IRON Figma「iron to claude」共好行動 10759:14666（2026-09-13 改版）
標題列 1360 寬左右分散、底對齊 → 間距 24 → 560×560 方卡橫向軌道（gap 28，往右出血）
▸ 共用元件：.bt-title（base.css，與預告帶共用字級）、.ctrl、.go、.sr-only
▸ 時長 ≈ base.css --dur-*（這裡帶 fallback 數值），reduced motion 無動畫
▸ RWD 斷點：≤1100px、≤640px
===================================================================== */
#actions{
--act-x:40px; /* Figma 內容區 left 40 */
--act-gap:28px;
--act-card:560px;
--act-ease:var(--ease-out,cubic-bezier(.22,1,.36,1));
overflow:hidden; /* 軌道出血到視窗右緣，不讓頁面橫向溢出 */
/* 與舞台預告帶（#heroTeaser）同位置接手：padding-top 39px＝帶內標題 top；nav 在上方時標題落在 y＝100＋39＝139（Figma） */
padding-top:39px;
padding-bottom:64px; /* Figma 卡片底 836 → 畫框底 900 */
padding-inline:var(--act-x);
/* 淺底蓋淺底：只留一道 hairline 硬邊 */
box-shadow:0 -1px 0 rgba(21,37,26,.07);
}
html[data-hero="dark"] #actions{box-shadow:none}
/* ---------- 標題列 ---------- */
#actions .act-head{
display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
margin:0 0 24px;
}
/* 標題組：Figma 靠左對齊（base .bt-title 預設置中，這裡改成靠左） */
#actions .act-title{align-items:flex-start}
#actions .act-ctrls{display:flex;gap:16px;flex:0 0 auto}
#actions .act-ctrl{width:40px;height:40px;border-radius:100px}
#actions .act-ctrl svg{width:14px;height:14px}
#actions .act-prev svg{transform:scaleX(-1)}
#actions .act-ctrl svg path{stroke-width:1.3125px}
#actions .act-ctrl[aria-disabled="true"]{opacity:.2;pointer-events:none}
/* ---------- 軌道 ---------- */
#actions .act-track{
display:flex;gap:var(--act-gap);
margin:0 calc(-1 * var(--act-x));
padding:0 var(--act-x);
scroll-padding-inline:var(--act-x);
list-style:none;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;
overscroll-behavior-x:contain;
scrollbar-width:none;-ms-overflow-style:none;
cursor:grab;
outline:none;
padding-block:6px;margin-block:-6px; /* 讓卡片 focus ring 上下不被 overflow 裁掉 */
-webkit-user-select:none;user-select:none;
touch-action:pan-x pan-y;
}
#actions .act-track::-webkit-scrollbar{display:none}
#actions .act-track:focus-visible{box-shadow:inset 0 0 0 2px var(--ink);border-radius:12px}
/* 拖曳中與放開後的吸附滑行期間都關掉 snap，捲動停下才恢復 */
#actions .act-track.is-dragging{cursor:grabbing;scroll-snap-type:none}
#actions .act-track.is-dragging .act-card{pointer-events:none}
#actions .act-item{flex:0 0 var(--act-card);min-width:0;scroll-snap-align:start}
/* ---------- 方卡 560×560 ---------- */
#actions .act-card{
position:relative;display:block;
width:100%;aspect-ratio:1 / 1;max-width:100%;
border-radius:12px;overflow:hidden;isolation:isolate; /* 全站卡片圓角一律 12（IRON 2026-09-14） */
background:var(--paper-2,#E9E3D7);color:#FBF9F5;
-webkit-user-drag:none;
}
#actions .act-card__media{position:absolute;inset:0;margin:0;overflow:hidden}
#actions .act-card__media img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transform:scale(1.001);transition:transform var(--dur-3,.95s) var(--act-ease);
-webkit-user-drag:none;pointer-events:none;
}
#actions .act-card__media::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(21,37,26,.55) 0%,rgba(21,37,26,.2) 13%,rgba(21,37,26,0) 26%,rgba(21,37,26,0) 46%,rgba(21,37,26,.36) 68%,rgba(21,37,26,.82) 100%);
}
#actions .act-card:focus-visible .act-card__media img{transform:scale(1.03)}
@media (hover:hover) and (pointer:fine){#actions .act-card:hover .act-card__media img{transform:scale(1.03)}}
/* 自動相機畫面：底部有 CAMNAME／溫度浮水印，拉高由頂部對齊裁掉 */
#actions .act-card__media--crop img{height:114%;bottom:auto;object-position:40% 0}
/* 內容：由底往上排（標題固定佔兩行高），560 卡上日期 top≈429.7、標題 top≈470.4，與 Figma 429.6／470 對齊 */
#actions .act-card__body{
position:absolute;left:20px;bottom:20px;z-index:1;
width:min(428.4px,calc(100% - 92px));
display:flex;flex-direction:column;align-items:flex-start;gap:8.8px;
pointer-events:none;
}
#actions .act-card__date{
display:block;padding:4.2px 8.4px;border-radius:2px;
background:rgba(21,37,26,.36);-webkit-backdrop-filter:blur(11.2px);backdrop-filter:blur(11.2px);
font-family:var(--font-en,"Lexend Exa",system-ui,sans-serif);font-size:16px;line-height:23.52px;font-weight:400;
letter-spacing:0;text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap;
color:#FBF9F5;
}
#actions .act-card__title{
margin:0;width:100%;
font-family:var(--font-tc);font-size:24px;line-height:1.45;font-weight:500;letter-spacing:-.504px;
color:#FBF9F5;text-wrap:pretty;
min-height:2.9em; /* 兩行高：單行標題時日期標位置不變 */
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#actions .act-card__go{
position:absolute;right:20px;bottom:20px;z-index:2;
flex:none;width:40px;height:40px;background:#CFE6A6;color:#15251A;
}
#actions .act-card__go svg{width:14.7368px;height:14.7368px}
#actions .act-card__go svg path{stroke-width:1.38158px}
#actions .nobr{white-space:nowrap}
@media (hover:none){
#actions .act-track{cursor:auto}
}
/* ---------- RWD ---------- */
/* 641~1100 左緣維持 40px：與預告帶 .teaser（base.css 到 ≤640 才改 gutter）同位置接手，卡片也跟著對齊 */
@media (max-width:1100px){
#actions{--act-gap:20px;--act-card:min(78vw,560px)}
}
/* ≤640 標題字級沿用 base .bt-title__tc 44px（與預告帶一致，不另外覆寫） */
@media (max-width:640px){
#actions{--act-x:var(--gutter);--act-gap:12px;padding-bottom:28px}
#actions .act-head{gap:16px;margin-bottom:20px}
#actions .act-card__body{left:16px;bottom:16px;width:calc(100% - 80px);gap:8px}
#actions .act-card__date{font-size:13px;line-height:19px;padding:3px 7px}
#actions .act-card__title{font-size:19px;letter-spacing:-.3px}
#actions .act-card__go{right:16px;bottom:16px}
#actions .nobr{white-space:normal} /* 360 寬時「為水雉留下安心育雛的家」整段不斷行會超出卡片被切 */
}
@media (prefers-reduced-motion: reduce){
#actions .act-card__media img{transition:none}
#actions .act-card:focus-visible .act-card__media img{transform:none}
#actions .act-card:hover .act-card__media img{transform:none}
}
/* IRON 2026-09-14：左右箭頭 hover 時底變深色、箭頭本身要變白 */
@media (hover:hover) and (pointer:fine){
#actions .act-ctrl:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
#actions .act-ctrl:hover :is(svg,svg *){stroke:var(--white)}
}