/**
 * 系列店表示用CSS
 * 親テーマクラス活用: l-container, .u-fz-l のみ使用
 */

/**
 * カスタムグリッドシステム
 * 親テーマ非依存の独自グリッド・レイアウトシステム
 * 
 * 使用例:
 * <div class="custom-grid custom-grid--4">
 *   <div class="custom-grid__item">コンテンツ</div>
 * </div>
 */

/* CSS カスタムプロパティ */
:root {
    --custom-gap: 2rem;
    --custom-gap-mobile: 1rem;
    --custom-border-radius: 16px;
    --custom-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    --custom-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   ベースグリッドシステム
   ========================================================================== */

.custom-grid {
    display: grid;
    gap: var(--custom-gap);
    width: 100%;
}

.custom-grid__item {
    min-width: 0; /* overflow対策 */
}

/* グリッドカラム数指定 */
.custom-grid--1 { grid-template-columns: 1fr; }
.custom-grid--2 { grid-template-columns: repeat(2, 1fr); }
.custom-grid--3 { grid-template-columns: repeat(3, 1fr); }
.custom-grid--4 { grid-template-columns: repeat(4, 1fr); }
.custom-grid--5 { grid-template-columns: repeat(5, 1fr); }
.custom-grid--6 { grid-template-columns: repeat(6, 1fr); }

/* ==========================================================================
   レスポンシブ対応
   ========================================================================== */

@media (max-width: 1024px) {
    .custom-grid--6 { grid-template-columns: repeat(4, 1fr); }
    .custom-grid--5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .custom-grid {
        gap: var(--custom-gap-mobile);
    }
    
    .custom-grid--6,
    .custom-grid--5,
    .custom-grid--4 { 
        grid-template-columns: repeat(2, 1fr); 
    }
    
    .custom-grid--3 { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 480px) {
    .custom-grid--6,
    .custom-grid--5,
    .custom-grid--4,
    .custom-grid--3,
    .custom-grid--2 { 
        grid-template-columns: 1fr; 
    }
}

/* ==========================================================================
   カード型レイアウト
   ========================================================================== */

.custom-card {
    background: #fff;
    border-radius: var(--custom-border-radius);
    overflow: hidden;
    box-shadow: var(--custom-shadow);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

.custom-card--wide {
    grid-column: 1 / -1; /* 全幅表示 */
}

.custom-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--custom-shadow-hover);
}

.custom-card__image {
    position: relative;
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease;
}

.custom-card:hover .custom-card__image {
    transform: scale(1.02);
}

.custom-card__content {
    padding: 1.5rem;
}

/* ==========================================================================
   リスト型レイアウト（横並び）
   ========================================================================== */

.custom-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.custom-list__item {
    background: #fff;
    border-radius: var(--custom-border-radius);
    overflow: hidden;
    box-shadow: var(--custom-shadow);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

.custom-list__item:hover {
    transform: translateY(-6px);
    box-shadow: var(--custom-shadow-hover);
}

.custom-list__content {
    display: flex;
    align-items: stretch;
    min-height: 280px;
}

.custom-list__image {
    flex: 0 0 40%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease;
    position: relative; /* ロゴオーバーレイの基準位置 */
}

.custom-list__item:hover .custom-list__image {
    transform: scale(1.02);
}

.custom-list__info {
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* リスト型レスポンシブ */
@media (max-width: 768px) {
    .custom-list__content {
        flex-direction: column;
        min-height: auto;
    }
    
    .custom-list__image {
        flex: none;
        /* 高さをアスペクト比で制御（16:9） */
        height: 0;
        padding-bottom: 56.25%; /* 16:9 = 9/16 = 0.5625 */
        min-height: 150px; /* 最小高さを確保 */
        max-height: 300px; /* 最大高さを制限 */
        /* ロゴサイズが大きい場合に対応 */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* 背景画像がない場合のロゴ表示エリア */
    .custom-list__image.store-no-bg {
        height: auto;
        padding-bottom: 0;
        /* ロゴのサイズに応じて高さを自動調整 */
        min-height: 120px;
        padding: 2rem;
    }
    
    .custom-list__info {
        padding: 1.5rem;
    }
}

/* ==========================================================================
   特殊レイアウト修正クラス
   ========================================================================== */

/* 親テーマのmargin/paddingを完全リセット */
.custom-reset {
    margin: 0 !important;
    padding: 0 !important;
}

/* 親テーマのCSS変数を無効化 */
.custom-override {
    --arkb-padding: 0;
    --arkb-gap--x: 0;
    --arkb-gap--y: 0;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   ユーティリティクラス
   ========================================================================== */

.custom-gap--none { gap: 0; }
.custom-gap--small { gap: 1rem; }
.custom-gap--medium { gap: 2rem; }
.custom-gap--large { gap: 3rem; }

.custom-radius--none { border-radius: 0; }
.custom-radius--small { border-radius: 8px; }
.custom-radius--medium { border-radius: 16px; }
.custom-radius--large { border-radius: 24px; }