/**
 * Card Image Fix - 買取品目カードの画像表示修正
 * Phase 2 - Image Display Fix
 * Updated: 画像上部配置 + グラデーション透過効果
 */

/* カード基本設定 - 背景色を統一 */
.card {
    background-color: #fafafa !important;
}

/* カードスパン基本設定 */
.card-span {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    background-color: #fafafa !important;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s ease;
}

.card-span:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* 画像コンテナ */
.card-span-img {
    position: relative;
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* 画像の下半分に透過グラデーションを追加 */
.card-span-img::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom, rgba(250,250,250,0) 0%, rgba(250,250,250,0.95) 100%);
    pointer-events: none;
}

/* ホバー時のズームエフェクト - 画像のみ */
.card-span:hover .card-span-img {
    transform: scale(1.05);
}

/* カードボディを画像の下に配置 */
.card-span .card-body {
    position: relative;
    z-index: 2;
    background-color: transparent;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 1.5rem !important;
}

/* テキストの可読性を向上 - 文字色を暗く */
.card-span .card-body {
    color: #2c3e50 !important;
}

.card-span .card-body h5 {
    color: #1a2332 !important;
    font-weight: 600;
}

.card-span .card-body p {
    color: #5a6c7d !important;
}

.card-span .card-body .text-white-50,
.card-span .card-body .text-uppercase {
    color: #7a8c9d !important;
    opacity: 0.8;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .card-span-img {
        height: 200px;
    }
}

@media (max-width: 576px) {
    .card-span-img {
        height: 180px;
    }
}