﻿/* 讓卡片本身能讓內部內容填滿並置中 */
/* ⭐ 強制移除全幅卡片內部可能存在的垂直分隔線 ⭐ */
.grid-card.full-width-card .card-image-wrapper,
.grid-card.full-width-card .card-content,
.grid-card.full-width-card .card-info {
    border: none !important; /* 移除所有邊框 */
    border-left: none !important; /* 特別確保左邊框移除 */
    border-right: none !important; /* 特別確保右邊框移除 */
    box-shadow: none !important; /* 有時候看起來像線其實是陰影，一併移除 */
}

/* card-info 核心置中排版 */
.card-info {
    display: flex;
    flex-direction: column; /* 垂直排列：圖標 -> 標題 -> 按鈕 */
    align-items: center; /* 水平絕對置中 */
    justify-content: center; /* 垂直絕對置中 */
    text-align: center; /* 確保多行文字也能置中 */
    padding: 20px;
    width: 100%;
}

    /* 圖標容器微調 */
    .card-info .card-image-wrapper {
        margin-bottom: 15px; /* 圖標與標題的距離 */
    }

        /* 圖標大小限制 (避免圖片過大撐破排版，可依需求微調) */
        .card-info .card-image-wrapper img {
            max-width: 80px;
            height: auto;
            display: block;
        }

    /* 標題微調 */
    .card-info h3 {
        margin: 0 0 15px 0; /* 標題與下方按鈕的距離 */
        color: #333;
        font-size: 1.5rem;
        font-weight: bold;
    }

    /* 假按鈕置中與樣式設計 (改成黃底黑字) */
    .card-info .fake-btn {
        display: inline-block;
        padding: 10px 25px;
        background-color: #ffc72c; /* 改成與上方相同的黃色 */
        color: #222; /* 改成深黑色文字 */
        border-radius: 30px; /* 圓角按鈕 */
        font-weight: bold;
        font-size: 1rem;
        transition: all 0.3s ease;
    }

/* 增加滑鼠懸停 (Hover) 效果，微調陰影顏色搭配黃色 */
.grid-card:hover .card-info .fake-btn {
    background-color: #e5b227; /* 滑鼠移過去稍微變深的黃色 */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 199, 44, 0.4); /* 陰影也改成黃色系 */
}
