/* ══ Player 產品頁的「相關連結」區塊（Meg 2026-10-13）══
   放在各 Player 頁內文：對應的 CMS 伺服器、客戶案例、Solution。class 一律 pl- 前綴。
   用在 player/smp-2200、smp-2210、smp-2400、smp-8100、cayin-signage-player。
   第二版：三個區塊上下排列，各用不同設計。
   Servers = 三張 icon 卡；Customer stories = 首頁 Testimonials 的版型（大圖文 + 右側縮圖，切換在 player-related.js）；Solutions = 漸層色塊。 */
.pl-related { display: block; padding: 60px 20px; box-sizing: border-box; background: #fff; color: #595959; clear: both; }
.pl-related *, .pl-related *::before, .pl-related *::after { box-sizing: border-box; }
.pl-related__inner { max-width: 1200px; margin: 0 auto; }
.pl-related__title { margin: 0 0 8px; padding: 0; font-weight: 500; line-height: 1.3; color: #595959; text-align: center; }
.pl-related__title .gt { font-family: good-times, 'Poppins', sans-serif; }
.pl-related__lead { max-width: 760px; margin: 0 auto 44px; font-size: 17px; line-height: 1.6; text-align: center; }
.pl-related__more { display: inline-block; margin-top: 18px; color: #007ed4; font-size: 15px; text-decoration: none; }
.pl-related__more:hover { text-decoration: underline; }

.pl-block { margin-bottom: 56px; text-align: left; }
.pl-block:last-child { margin-bottom: 0; }
.pl-block__head { margin-bottom: 20px; }
.pl-block__head h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding: 0; font-size: 24px; font-weight: 500; line-height: 1.35; color: #333; text-align: left; }
.pl-block__head h3 svg { flex: none; width: 28px; height: 28px; color: #007ed4; } /* icon 直接放在標題前（Meg 2026-10-13：不要另外的 Servers／Customer Stories／Solutions 字樣） */
.pl-block__head > p:last-child { margin: 0; font-size: 15px; line-height: 1.6; text-align: left; }

/* ── Servers：三張 icon 卡 ── */
.pl-srv__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pl-srv__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 792px; } /* 只有兩台伺服器的頁面（CAYIN Signage Player）：卡片寬度維持跟三欄時一樣 */
.pl-srv__card { display: flex; flex-direction: column; align-items: center; padding: 32px 24px 26px; border: 1px solid #e2e8ee; border-radius: 14px; background: #fff; color: #595959; text-align: center; text-decoration: none; transition: box-shadow .25s, transform .25s, border-color .25s; }
.pl-srv__card:hover { transform: translateY(-4px); border-color: #b9dcf3; box-shadow: 0 12px 30px rgba(0, 126, 212, .14); }
.pl-srv__card img { display: block; width: 88px; height: 88px; margin-bottom: 18px; object-fit: contain; }
.pl-srv__card img.is-photo { width: 150px; } /* CMS-60 是硬體，放小張產品圖，不放 icon */
.pl-srv__card strong { display: block; margin-bottom: 6px; font-size: 20px; font-weight: 500; line-height: 1.3; color: #333; }
.pl-srv__card strong.gt { font-family: good-times, 'Poppins', sans-serif; font-size: 19px; letter-spacing: .02em; }
.pl-srv__card span { display: block; flex: 1; margin-bottom: 14px; font-size: 15px; line-height: 1.55; }
.pl-srv__card em { font-style: normal; font-size: 15px; color: #007ed4; }

/* ── Customer stories：同首頁 Testimonials（index.css 的 .contents.testimonial）── */
.pl-stories__box { position: relative; display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 1fr); column-gap: 20px; align-items: start; }
.pl-stories__main { min-width: 0; }
.pl-stories__slide { display: none; grid-template-columns: 1.3fr 1.2fr; column-gap: 20px; align-items: center; }
.pl-stories__slide.is-active { display: grid; animation: pl-fade .45s ease; }
@keyframes pl-fade { from { opacity: 0; } to { opacity: 1; } }
.pl-stories__img { display: block; width: 100%; height: 300px; overflow: hidden; border-radius: 5px; }
.pl-stories__img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.pl-stories__text { display: flex; flex-direction: column; align-items: flex-start; row-gap: 12px; min-width: 0; }
.pl-stories__text h4 { margin: 0; padding: 0; font-size: 28px; font-weight: 500; line-height: 1.35; color: #595959; text-align: left; }
.pl-stories__text p { margin: 0; font-size: 15px; line-height: 1.65; color: #595959; text-align: left; }
.pl-stories__text a { font-size: 16px; color: #007ed4; text-decoration: none; }
.pl-stories__text a:hover { text-decoration: underline; }
.pl-stories__thumbs { display: grid; grid-template-rows: repeat(3, 1fr); row-gap: 10px; height: 300px; }
.pl-stories__thumb { position: relative; display: block; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 5px; overflow: hidden; background: none; opacity: .4; cursor: pointer; transition: opacity .25s; }
.pl-stories__thumb:hover { opacity: .75; }
.pl-stories__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pl-stories__thumb.is-active { opacity: 1; }
.pl-stories__thumb.is-active::before { content: url('/images/index/icon-magnifier.svg'); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-color: #007fd44b; }
/* 同首頁 .all_cases_link：藍色膠囊按鈕，壓在縮圖欄右上角 */
.pl-stories__all { position: absolute; top: 0; right: 0; z-index: 2; display: inline-block; padding: 8px 26px; border-radius: 50px; background: #00A0E9; font-size: 15px; font-weight: 500; color: #fff; text-decoration: none; white-space: nowrap; transform: translate(0, -135%); transition: background .3s; }
.pl-stories__all:hover { background: #007ed4; color: #fff; }

/* ── Solutions：漸層色塊 ── */
.pl-sol__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pl-sol__tile { position: relative; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--pl-c1, #007ed4) 0%, var(--pl-c2, #00b3a6) 100%); color: #fff; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.pl-sol__tile::before { content: ''; position: absolute; right: -50px; bottom: -70px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .13); transition: transform .5s cubic-bezier(.2, 0, 0, 1); }
.pl-sol__tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }
.pl-sol__tile:hover::before { transform: scale(1.25); }
.pl-sol__pic { position: relative; z-index: 1; display: block; aspect-ratio: 16 / 9; margin: 12px 12px 0; border-radius: 8px; overflow: hidden; }
.pl-sol__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, 0, 0, 1); }
.pl-sol__tile:hover .pl-sol__pic img { transform: scale(1.05); }
.pl-sol__body { position: relative; display: block; flex: 1; padding: 18px 26px 26px; }
.pl-sol__body strong { display: block; margin: 0 0 6px; font-size: 22px; font-weight: 500; line-height: 1.3; color: #fff; }
.pl-sol__body > span { display: block; max-width: 80%; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .92); }
.pl-sol__body em { position: absolute; right: 22px; bottom: 20px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; font-style: normal; font-size: 18px; line-height: 1; color: var(--pl-c1, #007ed4); transition: transform .25s; }
.pl-sol__tile:hover .pl-sol__body em { transform: translateX(4px); }

@media only screen and (max-width: 1024px) {
	.pl-stories__box { grid-template-columns: 1fr; row-gap: 16px; }
	.pl-stories__thumbs { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); column-gap: 10px; height: 110px; }
	.pl-stories__all { position: static; justify-self: end; transform: none; }
	.pl-stories__text h4 { font-size: 24px; }
}
@media only screen and (max-width: 768px) {
	.pl-srv__grid, .pl-sol__grid { grid-template-columns: 1fr; gap: 16px; }
	.pl-srv__card { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 20px; text-align: left; }
	.pl-srv__card img { grid-row: 1 / span 3; width: 64px; height: 64px; margin: 0; }
	.pl-srv__card img.is-photo { width: 64px; }
	.pl-srv__card strong, .pl-srv__card span, .pl-srv__card em { grid-column: 2; }
	.pl-srv__card span { margin-bottom: 8px; }
	.pl-stories__slide { grid-template-columns: 1fr; row-gap: 14px; }
	.pl-stories__img { height: 220px; }
	.pl-stories__thumbs { height: 80px; }
	.pl-stories__text h4 { font-size: 21px; }
	.pl-sol__body strong { font-size: 20px; }
}
@media only screen and (max-width: 600px) {
	.pl-related { padding: 48px 16px; }
	.pl-related__lead { margin-bottom: 32px; font-size: 15px; }
	.pl-block { margin-bottom: 44px; }
	.pl-block__head h3 { font-size: 21px; }
}