/***
=============================================
    Large Img / Orbit Diagram Style
    01 DESIGN -> 02 DEPLOY -> 03 DATA -> 01 循環流程圖
=============================================
***/

.large-img {
    padding: 100px 0;
    background-size: cover;
    background-position: center;
}

.orbit-diagram__heading-title {
    margin-left: 10%;
    font-size: 30px;
    font-weight: 700;
    color: #1a2b3c;
    line-height: 1.4;
}

.orbit-diagram__heading-subtitle {
    margin-left: 10%;
    font-size: 30px;
    font-weight: 700;
    color: #ffb81c;
    line-height: 1.4;
}

.orbit-diagram {
    position: relative;
    margin: 200px 0 140px;
}

/* .orbit-stage：block 的定位錨點，寬度限制在此，高度隨內容（不鎖死），
   避免 block 在窄螢幕變成 static 流式排版時，被塞進固定高度的圓形區域裡 */
.orbit-stage {
    position: relative;
    width: 100%;
    max-width: 310px;
    margin: 0 auto;
}

/* 固定正方形的圓形視覺區：中心圓 + 弧形箭頭 + 光球都畫在這裡，
   不管三個 block 展開多高、或變成 static 排版，都不會影響這塊的大小與座標 */
.orbit-circle {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.orbit-diagram__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.orbit-diagram__badge-ring {
    fill: none;
    stroke: #cbd6de;
    stroke-width: 4;
}

.orbit-diagram__badge-ring-outer {
    fill: none;
    stroke: #eef2f9;
    stroke-width: 2;
}

.orbit-diagram__ring {
    fill: none;
    stroke: #cbd6de;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1 9;
}

.orbit-diagram__track {
    fill: none;
    stroke: none;
}

.orbit-diagram__arrow {
    fill: none;
    stroke: #1785c0;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 1 9;
}

.orbit-diagram__connector {
    fill: none;
    stroke: #7fb2dd;
    stroke-width: 2;
    stroke-linecap: round;
}

.orbit-diagram__badge circle {
    fill: #ffffff;
    stroke: #1785c0;
    stroke-width: 3;
}

.orbit-diagram__badge text {
    font-size: 36px;
    font-weight: 700;
    fill: #1785c0;
}

.orbit-diagram__ball {
    filter: drop-shadow(0 0 8px rgba(255, 167, 51, 1));
}

/* 中心圖片/文字，疊在 SVG 正中央，走 CMS 圖片欄位 */
.orbit-diagram__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 53%;
    text-align: center;
    z-index: 1;
}

/* block 永遠疊在最上面，不受 DOM 順序影響（SVG=0、中心圖片=1、block=2） */
.orbit-block {
    z-index: 2;
}

.orbit-diagram__center img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
}

.orbit-diagram__center-text {
    position: absolute;
    margin-top: 8px;
    font-size: 13px;
    color: #4a5a68;
    z-index: 9;
}

/* 三個內容 block：用 position:absolute 錨定在舞台外緣，
   長高只會往外（遠離圓心）延伸，不會推動 SVG 或彼此 */
.orbit-block {
    position: absolute;
    width: 260px;
}

.orbit-block--0 {
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    padding-bottom: 6px;
}

.orbit-block--1 {
    top: 62%;
    left: 100%;
    padding-left: 0px;
}

.orbit-block--2 {
    top: 62%;
    right: 100%;
    padding-right: 0px;
}

.orbit-block__category {
    display: block;
    text-align: center;
    margin-bottom: 6px;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #c0cbd5;
    text-transform: uppercase;
    letter-spacing: 0px;
}

.orbit-block__inner {
    background: #ffffff;
    border-radius: 14px;
    padding: 9px 20px;
    box-shadow: 0 6px 24px rgba(23, 133, 192, 0.1);
    text-align: center;
}

.orbit-block__title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: #1785c0;
}

.orbit-block__items-wrap {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.3s ease;
}

.orbit-block__items-wrap > .orbit-block__items {
    min-height: 0;
}

.orbit-block.is-expanded .orbit-block__items-wrap {
    grid-template-rows: 1fr;
}

.orbit-block__item {
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    color: #ec7d1b;
    background: #fef4e8;
    border-radius: 4px;
    padding: 4px 8px;
    margin-bottom: 4px;
}

.orbit-block__toggle {
    border: none;
    background: none;
    padding: 0;
    font-size: 18px;
    color: #1785c0;
    cursor: pointer;
}

.orbit-block__toggle-less {
    display: none;
}

.orbit-block.is-expanded .orbit-block__toggle-more {
    display: none;
}

.orbit-block.is-expanded .orbit-block__toggle-less {
    display: inline;
}

/* 版面較窄時，三個 block 改回一般文件流排列在圓形下方 */
@media (max-width: 767px) {
    .orbit-diagram {
        margin: 20px;
    }
    .orbit-diagram__connector,
    .cross-domain__divider {
        display: none;
    }
    .orbit-stage {
        max-width: 320px;
    }
    .cross-domain__title {
        margin-top: 35px;
    }
    .cross-domain__title span {
        border-top-style: none !important;
    }
    .orbit-block {
        position: static;
        transform: none !important;
        width: 100%;
        max-width: 320px;
        margin: 16px auto 0;
        padding: 0 !important;
    }

    .col-12:has(> .solution-card) {
        margin-bottom: 15px;
    }
}