/* Wrapper */
.iec-wrapper {
    display: flex;
    width: 100%;
    overflow: hidden;
    gap: var(--column-gap, 0px);
    /* 高度由 Elementor 控制項的 inline style 控制 */
}

/* Column Item */
.iec-item {
    position: relative;
    flex: 1; /* 初始均分寬度 */
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: flex var(--animation-speed, 0.5s) cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none; /* 移除 a 標籤底線 */
}

/* Overlay */
.iec-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: background-color var(--animation-speed, 0.5s) ease;
    /* 顏色由 Elementor 控制項的 inline style 控制 */
}

/* Title */
.iec-item-title {
    position: relative; /* 或 z-index: 2 */
    /* writing-mode: vertical-rl; 實現垂直文字，由右至左排列 */
    /* text-orientation: upright; 確保所有字符（包括英文）保持直立 */
    writing-mode: vertical-rl;
    text-orientation: upright;
    padding: 1rem;
    color: #fff; /* 預設顏色，會被 Elementor 控制項覆蓋 */
    opacity: 1;
    transition: opacity calc(var(--animation-speed, 0.5s) / 2) ease, background-color var(--animation-speed, 0.5s) ease, color var(--animation-speed, 0.5s) ease;
}

/* --- Hover Effects (Desktop Only) --- */
@media (min-width: 768px) {
    /* 當滑鼠懸停在 Wrapper 上時 */
    .iec-wrapper:hover .iec-item:hover {
        flex: var(--expand-ratio, 5); /* 放大被懸停的欄位 */
    }

    .iec-wrapper:hover .iec-item:hover .iec-item-overlay {
        background-color: rgba(0, 0, 0, 0) !important; /* 遮罩變透明 */
    }

    /* (可選) 讓未被懸停的項目標題變淡，突出顯示效果 */
    .iec-wrapper:hover .iec-item:not(:hover) .iec-item-title {
        opacity: 0.5;
    }
}

/* --- Mobile Styles --- */
@media (max-width: 767px) {
    .iec-wrapper {
        flex-direction: column;
        /* 高度現在完全由 PHP selectors 控制，
           這裡不需要再設定 height: auto */
    }
    
    .iec-item {
        flex: auto;
        width: 100%;
    }
    
    /* (其他 .iec-item-title, .iec-item-overlay 的手機樣式...) */
    .iec-item-title {
        writing-mode: horizontal-tb;
        transform: none;
        text-align: center;
        width: 100%;
    }
    .iec-wrapper:hover .iec-item:hover {
        flex: auto;
    }
    .iec-wrapper:hover .iec-item:hover .iec-item-overlay {
        background-color: var(--overlay-color, rgba(0, 0, 0, 0.5));
    }
}