/* 企業系統開發頁（enterprise-system-development.cshtml）
   分層示意圖 .system-stack：HTML 文字（可翻譯），放在深色區塊「為什麼選延電」右欄 */

.system-stack-layers {
    margin: 0;
    padding: 0;
    list-style: none;
}

.system-stack-layers > li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: none;
    padding: 1rem 1.25rem;
    border-inline-start: 4px solid var(--green-500);
    border-radius: var(--bs-border-radius);
    background: var(--bs-gray-800);
}

/* 層與層之間的上下雙向箭頭（裝飾：資料往上、控制往下） */
.system-stack-layers > li + li {
    margin-top: 2rem;
}

.system-stack-layers > li + li::before {
    content: "\2195";
    position: absolute;
    inset-inline-start: 50%;
    top: -1.75rem;
    transform: translateX(-50%);
    color: var(--green-300);
    font-size: 1.25rem;
    line-height: 1.5rem;
}

[dir="rtl"] .system-stack-layers > li + li::before {
    transform: translateX(50%);
}

.system-stack-layers .bi {
    flex-shrink: 0;
    color: var(--green-300);
    font-size: 1.75rem;
    line-height: 1;
}

.system-stack-name {
    display: block;
    color: #fff;
    font-size: var(--fs-h3);
    font-weight: 700;
}

.system-stack-examples {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--fs-small);
}

.system-stack figcaption {
    margin-top: 1.25rem;
    color: var(--green-300);
    font-weight: 700;
    text-align: center;
}

/* 深色區塊裡的內文連結改淺綠（預設綠在深底對比不足） */
.section-dark .system-dev-link {
    color: var(--green-300);
}

@media (min-width: 992px) {
    .system-stack {
        position: sticky;
        top: 110px;
    }
}

/* 服務卡片標題前的圖示 */
.system-dev-icon {
    color: var(--line-color);
    line-height: 1;
}