/* ══ Industry Solution Guides（digital-signage-solutions/industry-solution-guides.html）══
   版型沿用 products-overview.css（.po-page）與 player-selection-guide.css（.psg-page：區塊、FAQ、按鈕、Contact），
   本檔只放這頁新增的部分：CAYIN 藍主色、產業快速導覽、各產業區塊（情境／建議組合／客戶案例）、三步驟。class 一律 isg- 前綴。 */

/* 主色：CAYIN 藍 #007ED4（MainWrap 加 .isg-page、body 用 .po-industry、hero 用 .po-hero--industry） */
#MainWrap.psg-page.isg-page {
	--psg-accent: #007ed4;
	--psg-accent-2: #2aa9e0;
	--psg-grad: linear-gradient(225deg, #2aa9e0 0%, #007ed4 100%);
	--psg-soft: #eaf5fc;
	--psg-line: #dde8ef;
}
.isg-page .psg-btn:hover { background: #0067ad; }
.isg-page .psg-btn--ghost:hover { background: var(--psg-soft); }
.isg-page .menubackground.device-seeker-sol { background: linear-gradient(225deg, #2aa9e0 0%, #007ed4 100%); }
.smpBanner-section.smpBanner-section--slant.device-seeker-sol.po-hero--industry {
	--smp-right-bg: linear-gradient(225deg, #2aa9e0 0%, #007ed4 100%);
	--smp-purple: linear-gradient(225deg, #2aa9e0 0%, #007ed4 100%);
	--smp-stripe: rgba(0, 126, 212, 0.7);
	background: linear-gradient(225deg, #2aa9e0 0%, #007ed4 100%);
}
.smpBanner-section--slant.device-seeker-sol.po-hero--industry .smpBanner-stripe--primary {
	background: linear-gradient(180deg, rgba(42, 169, 224, 0.7) 0%, rgba(0, 126, 212, 0.7) 100%);
}
@media screen and (max-width: 600px) {
	.smpBanner-section--slant.device-seeker-sol.po-hero--industry { background: linear-gradient(135deg, #2aa9e0 0%, #007ed4 100%); }
}
@media only screen and (max-width: 762px) {
	.po-industry .whiteSelector,
	.po-industry .subButtonAll { background-color: #007ed4; }
}

/* 產業快速導覽 */
.isg-nav {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.isg-nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 20px 8px 16px;
	box-sizing: border-box;
	border: 1px solid var(--psg-line);
	border-radius: 12px;
	background: #fff;
	color: #333;
	font-size: 15px;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.isg-nav a:hover { border-color: var(--psg-accent); box-shadow: 0 6px 18px rgba(0, 126, 212, .14); transform: translateY(-2px); }
.isg-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--psg-soft);
	color: var(--psg-accent);
}
.isg-icon svg { width: 28px; height: 28px; }

/* 各產業區塊 */
.isg-ind__head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.isg-ind__head .isg-icon { width: 60px; height: 60px; background: var(--psg-grad); color: #fff; }
.isg-ind__head .isg-icon svg { width: 32px; height: 32px; }
.isg-ind__head h2 { margin: 0 0 4px; padding: 0; font-size: 30px; font-weight: 500; line-height: 1.25; color: #333; text-align: left; }
.isg-ind__head p { margin: 0; color: var(--psg-text); font-size: 17px; line-height: 1.55; }
.isg-ind__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: start; }

.isg-uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; margin: 0; padding: 0; list-style: none; }
.isg-uses li { padding-left: 16px; border-left: 3px solid var(--psg-accent); }
.isg-uses h3 { margin: 0 0 6px; font-size: 18px; font-weight: 500; color: #333; }
.isg-uses p { margin: 0; color: var(--psg-text); font-size: 15px; line-height: 1.65; }

.isg-setup { padding: 22px 24px; border: 1px solid var(--psg-line); border-radius: 12px; background: #fff; }
.psg-band .isg-setup { background: #f8fafc; }
.isg-setup h3 { margin: 0 0 14px; font-size: 18px; font-weight: 500; color: #333; }
.isg-setup dl { margin: 0; }
.isg-setup dt { margin: 14px 0 8px; font-size: 13px; color: #888; }
.isg-setup dt:first-child { margin-top: 0; }
.isg-setup dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.isg-setup dd a {
	padding: 5px 10px;
	border: 1px solid #cfdde7;
	border-radius: 4px;
	background: #fff;
	color: #333;
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color .2s, background .2s;
}
.isg-setup dd a:hover { border-color: var(--psg-accent); background: var(--psg-soft); }
.isg-setup dd a.gt { font-size: 12px; letter-spacing: .02em; }

/* 客戶案例 */
.isg-case {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	margin-top: 32px;
	padding: 20px;
	border-radius: 12px;
	background: var(--psg-soft);
}
.isg-case img { display: block; width: 100%; height: auto; border-radius: 8px; }
.isg-case__label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--psg-accent); letter-spacing: .04em; text-transform: uppercase; }
.isg-case h3 { margin: 0 0 8px; font-size: 19px; font-weight: 500; line-height: 1.4; color: #333; }
.isg-case p { margin: 0 0 12px; color: var(--psg-text); font-size: 15px; line-height: 1.65; }
.isg-case__links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.isg-case__links a { color: var(--psg-accent); font-size: 15px; text-decoration: none; }
.isg-case__links a:hover { text-decoration: underline; }

/* 三步驟 */
.isg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: isgstep; }
.isg-steps li {
	display: flex;
	flex-direction: column;
	padding: 28px 24px 24px;
	border: 1px solid var(--psg-line);
	border-radius: 12px;
	background: #fff;
	counter-increment: isgstep;
}
.isg-steps li::before {
	content: counter(isgstep);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--psg-grad);
	color: #fff;
	font-size: 18px;
	font-weight: 500;
}
.isg-steps h3 { margin: 0 0 8px; font-size: 19px; font-weight: 500; color: #333; }
.isg-steps p { flex: 1; margin: 0 0 16px; color: var(--psg-text); font-size: 15px; line-height: 1.65; }
.isg-steps a { color: var(--psg-accent); font-size: 15px; text-decoration: none; }
.isg-steps a:hover { text-decoration: underline; }

@media only screen and (max-width: 1100px) {
	.isg-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.isg-ind__body { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 800px) {
	.isg-steps { grid-template-columns: 1fr; }
	.isg-case { grid-template-columns: 1fr; }
	.isg-case img { max-width: 350px; }
}
@media only screen and (max-width: 600px) {
	.isg-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.isg-uses { grid-template-columns: 1fr; }
	.isg-ind__head { align-items: flex-start; }
	.isg-ind__head h2 { font-size: 24px; }
	.isg-ind__head p { font-size: 15px; }
}

/* ── 產業區塊樣式 A / C（Meg 2026-10-13：Retail 用 A，Food & Beverage 用 C；其餘產業維持原樣式）── */
.isg-kicker { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--psg-accent); }
.isg-tags, .isg-a__setup dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.isg-tags a, .isg-a__setup dd a {
	padding: 5px 10px;
	border: 1px solid #cfdde7;
	border-radius: 4px;
	background: #fff;
	color: #333;
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color .2s, background .2s;
}
.isg-tags a:hover, .isg-a__setup dd a:hover { border-color: var(--psg-accent); background: var(--psg-soft); }
.isg-tags a.gt, .isg-a__setup dd a.gt { font-size: 12px; letter-spacing: .02em; }
.isg-morecases { display: inline-block; margin-top: 18px; color: var(--psg-accent); font-size: 15px; text-decoration: none; }
.isg-morecases:hover { text-decoration: underline; }

/* A：案例照片主視覺，左右分割 */
.isg-a__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: stretch; }
.isg-a__photo { position: relative; display: block; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; }
.isg-a__photo img { display: block; width: 100%; height: 100%; min-height: 520px; object-fit: cover; transition: transform .4s; }
.isg-a__photo:hover img { transform: scale(1.03); }
.isg-a__cap { position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: 70px 24px 22px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 70%); }
.isg-a__cap > * { display: block; }
.isg-a__label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.isg-a__cap strong { margin: 4px 0 6px; font-size: 20px; font-weight: 500; line-height: 1.35; }
.isg-a__text { font-size: 14px; line-height: 1.6; }
.isg-a__more { margin-top: 8px; font-size: 14px; text-decoration: underline; }
.isg-a__copy { align-self: center; }
.isg-a__copy h2 { margin: 6px 0 8px; padding: 0; font-size: 34px; font-weight: 500; line-height: 1.2; color: #333; text-align: left; }
.isg-a__lead { margin: 0 0 20px; font-size: 17px; line-height: 1.6; color: var(--psg-text); }
.isg-a__list { margin: 0 0 22px; padding: 0; list-style: none; }
.isg-a__list li { position: relative; padding: 12px 0 12px 38px; border-top: 1px solid var(--psg-line); }
.isg-a__list li:last-child { border-bottom: 1px solid var(--psg-line); }
.isg-a__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 14px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--psg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007ed4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.isg-a__list h3 { margin: 0 0 2px; font-size: 16px; font-weight: 500; color: #333; }
.isg-a__list p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--psg-text); }
.isg-a__setup { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px 12px; align-items: start; margin: 0; }
.isg-a__setup dt { padding-top: 6px; font-size: 13px; color: #888; }

/* C：藍色標題帶＋照片，編號情境卡，底部產品與案例 */
.isg-c__banner { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: stretch; border-radius: 16px 16px 0 0; overflow: hidden; background: var(--psg-grad); color: #fff; }
.isg-c__copy { padding: 34px 36px; }
.isg-c__copy .isg-kicker { color: #fff; opacity: .85; }
.isg-c__copy h2 { margin: 6px 0 8px; padding: 0; font-size: 34px; font-weight: 500; line-height: 1.2; color: #fff; text-align: left; }
.isg-c__copy p { margin: 0; font-size: 17px; line-height: 1.6; }
.isg-c__banner img { display: block; width: 100%; height: 100%; min-height: 190px; object-fit: cover; }
.isg-c__body { padding: 28px 36px 32px; border-radius: 0 0 16px 16px; background: #fff; }
.isg-c__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: isgc; }
.isg-c__cards li { padding-top: 14px; border-top: 3px solid var(--psg-accent); counter-increment: isgc; }
.isg-c__cards li::before { content: '0' counter(isgc); display: block; margin-bottom: 8px; font-size: 22px; font-weight: 500; color: #9fcbe8; }
.isg-c__cards h3 { margin: 0 0 6px; font-size: 17px; font-weight: 500; color: #333; }
.isg-c__cards p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--psg-text); }
.isg-c__foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 20px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--psg-line); }
.isg-c__foot h4 { margin: 0 0 8px; font-size: 13px; font-weight: 400; color: #888; }
.isg-c__story { padding: 16px 18px; border-radius: 10px; background: var(--psg-soft); }
.isg-c__story strong { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 500; color: #333; }
.isg-c__story p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--psg-text); }
.isg-c__story .isg-case__links a { font-size: 13px; }

@media only screen and (max-width: 1100px) {
	.isg-a__grid { grid-template-columns: 1fr; gap: 28px; }
	.isg-a__photo img { min-height: 0; height: 360px; }
	.isg-c__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.isg-c__foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.isg-c__story { grid-column: 1 / -1; }
}
@media only screen and (max-width: 700px) {
	.isg-c__banner { grid-template-columns: 1fr; }
	.isg-c__banner img { height: 180px; min-height: 0; }
	.isg-c__copy { padding: 24px 20px; }
	.isg-c__body { padding: 22px 20px 24px; }
	.isg-c__foot { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 600px) {
	.isg-a__photo img { height: 300px; }
	.isg-a__copy h2, .isg-c__copy h2 { font-size: 26px; }
	.isg-a__lead, .isg-c__copy p { font-size: 15px; }
	.isg-a__setup { grid-template-columns: 1fr; gap: 4px; }
	.isg-a__setup dt { padding-top: 8px; }
	.isg-c__cards { grid-template-columns: 1fr; }
}

/* A 樣式左右交錯：偶數產業照片在右（只在並排時對調，堆疊時照片仍在上）*/
@media only screen and (min-width: 1101px) {
	.isg-a--flip .isg-a__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
	.isg-a--flip .isg-a__photo { order: 2; }
}

/* 共用架構圖（Build Your Setup 區塊，三步驟上方）*/
.isg-arch { max-width: 960px; margin: 0 auto 40px; padding: 32px 36px 24px; box-sizing: border-box; border: 1px solid var(--psg-line); border-radius: 12px; background: #fff; text-align: center; }
.psg-band .isg-arch { background: #f8fafc; }
.isg-arch img { display: block; width: 100%; height: auto; }
.isg-arch figcaption { max-width: 720px; margin: 20px auto 0; color: var(--psg-text); font-size: 15px; line-height: 1.65; }
@media only screen and (max-width: 600px) {
	.isg-arch { padding: 20px 14px 16px; margin-bottom: 28px; }
	.isg-arch figcaption { font-size: 14px; }
}

/* 系統架構區塊（FAQ 前；inline SVG 取自 smp-2400-structure.html，class cmp-arch）*/
.isg-archs { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: 1080px; margin: 0 auto; }
.isg-archs__item { margin: 0; padding: 28px 28px 20px; box-sizing: border-box; border: 1px solid var(--psg-line); border-radius: 12px; background: #fff; }
.isg-archs__item h3 { margin: 0 0 16px; font-size: 20px; font-weight: 500; line-height: 1.4; color: #333; text-align: center; }
.isg-page .cmp-arch { width: 100%; margin: 0 auto; overflow: visible; }
.isg-page .cmp-arch-svg { display: block; width: 100%; min-width: 0; height: auto; }
.isg-page .cmp-arch-svg text.gt-svg, .isg-page .cmp-arch-svg tspan.gt-svg { font-family: good-times, "Poppins", sans-serif !important; }
@media only screen and (max-width: 600px) {
	.isg-archs__item { padding: 18px 10px 12px; }
	.isg-archs__item h3 { font-size: 17px; }
}

/* industry-solution-guides_banner 往右移（Meg 2026-10-14）：原本跟著 Player Selection Guide 的規則右移 150px（1700px 以上 50px），
   使用者看到的位置再往右 100px → 250px（1700px 以上 150px）；手機版上下堆疊不套用 */
@media screen and (min-width: 601px) {
	.isg-page .smpBanner-section--slant .smpBanner-media img {
		object-position: calc(var(--smp-image-position-x) + 250px) var(--smp-image-position-y);
	}
}
@media screen and (min-width: 1700px) {
	.isg-page .smpBanner-section--slant .smpBanner-media img {
		object-position: calc(var(--smp-image-position-x) + 150px) var(--smp-image-position-y);
	}
}