/**
 * 餃子リスト表示 スタイル
 * 説明: 餃子商品一覧をカード形式で表示するためのスタイル
 */

/* 餃子リスト全体のスタイル */
.gyoza-list-wrapper {
    /* カラー設定 - ローカル変数（カスタムプロパティ）*/
    --gyoza-card-bg      : #ffffff;        /* 背景色:     白 */
    --gyoza-text-color   : #333333;        /* 文字色:     ダークグレー */
    --gyoza-border-color : #e0e0e0;        /* ボーダー色: ライトグレー */
    --gyoza-shadow-color : rgba(0,0,0,0.1); /* 影の色 */
    
    display        : flex;
    flex-direction : column;
    width          : 100%;
    max-width      : 1200px;
    margin         : 0 auto;
    padding        : 20px 0;
    
    /* コンテナ */
    .gyoza-list-container {
        display               : grid;
        grid-template-columns : repeat(1, 1fr);
        gap                   : 20px;
        width                 : 100%;
    }
    
    /* カード */
    .gyoza-list-card {
        display         : flex;
        flex-direction  : column;
        background-color: var(--gyoza-card-bg);
        border-radius   : 8px;
        overflow        : hidden;
        box-shadow      : 0 2px 10px var(--gyoza-shadow-color);
        height          : 100%;
    }
    
    /* 画像ラッパー */
    .gyoza-list-image-wrapper {
        position   : relative;
        width      : 100%;
        padding-top: 75%; /* 4:3のアスペクト比 */
        overflow   : hidden;
    }
    
    /* 画像 */
    .gyoza-list-image {
        position           : absolute;
        top                : 0;
        left               : 0;
        width              : 100%;
        height             : 100%;
        background-size    : cover;
        background-position: center center;
        background-repeat  : no-repeat;
    }
    
    /* コンテンツ部分 */
    .gyoza-list-content {
        padding       : 16px;
        flex-grow     : 1;
        display       : flex;
        flex-direction: column;
    }
    
    /* タイトル */
    .gyoza-list-title {
        font-size     : 18px;
        font-weight   : 600;
        margin-bottom : 10px;
        color         : var(--gyoza-text-color);
        line-height   : 1.4;
    }
    
    /* 説明文 */
    .gyoza-list-description {
        font-size     : 14px;
        color         : var(--gyoza-text-color);
        line-height   : 1.6;
        margin-bottom : 0;
    }
}

/* タブレット以上の表示 */
@media screen and (min-width: 768px) {
    .gyoza-list-wrapper {
        padding: 30px 0;
        
        /* コンテナ - 列数に応じたグリッド設定 */
        &.gyoza-list-columns-2 .gyoza-list-container {
            grid-template-columns: repeat(2, 1fr);
        }
        
        &.gyoza-list-columns-3 .gyoza-list-container {
            grid-template-columns: repeat(3, 1fr);
        }
        
        &.gyoza-list-columns-4 .gyoza-list-container {
            grid-template-columns: repeat(4, 1fr);
        }
        
        /* タイトル */
        .gyoza-list-title {
            font-size: 20px;
        }
        
        /* 説明文 */
        .gyoza-list-description {
            font-size: 15px;
        }
    }
}