/* ============================================================
   main-content-stores.css (Structured Version)
   店舗一覧ページの主要コンポーネント管理
   ============================================================ */

/* --- 1. Lower Hero Section (ページヘッダー) --- */
.lower-hero {
    width: 100%;
    padding: 100px 0 60px;
    text-align: center;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.section-title-area .section-title {
    font-size: 3rem;
    color: #333;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

.section-title-area .section-subtitle {
    font-size: 1rem;
    color: #c5a059;
    font-weight: 600;
    letter-spacing: 0.2em;
}

/* --- 2. Container (レイアウト制御) --- */
.container {
    width: 100%;
    max-width: 1000px; /* ヒーローエリアと軸を合わせる中央配置 */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 20px;
    box-sizing: border-box;
    display: block;
}

/* --- 3. Store Card Layout (店舗カード基本構造) --- */
.store-list-container {
    width: 100%;
    padding: 40px 0 100px;
    display: flex;
    flex-direction: column;
    gap: 40px; /* カード同士の垂直間隔 */
}

.store-card {
    width: 100%;
    background: #fff;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.store-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.store-card-inner {
    display: grid;
    grid-template-columns: 350px 1fr; /* 左画像：右情報の固定比率 */
    
    /* 【修正】右カラムの情報量が多い場合も、左の画像枠が左上に偏らず、
       常にカード全体の上下中央（バーティカルセンター）に美しく配置されるよう制御 */
    align-items: center;
}

/* --- 4. Store Visual (カード内画像エリア) --- */
.store-image {
    position: relative;
    width: 100%;             /* 横幅は親要素（gridの350px）に対して100% */
    
    /* 固定px(min-height)を削除し、縦横比（%管理）で高さを自動決定 */
    aspect-ratio: 5 / 4;     /* 横5 : 縦4 の黄金比率で枠の大きさを維持（4/3 や 1/1 でも可） */
    
    background: #ebebeb; 
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-image img {
    /* 【手動調整エリア】
       ここを 100% に近づけるほど「最大の引き」になります。
       隙間（グレーの背景）が出ないギリギリの引き具合に手動で調整してください。 */
    width: 105%;              
    height: 105%;            
    
    object-fit: cover; 
    object-position: center center; 
    
    vertical-align: bottom;
    transition: none;
}

.store-area-tag {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 8px 15px;
    background: #c5a059;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* --- 5. Store Information (カード内コンテンツ) --- */
.store-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.store-name {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 25px;
    font-size: 1.6rem;
    font-weight: 700;
    color: #333;
}

.store-name::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: #c5a059;
}

.store-meta {
    margin-bottom: 30px;
}

.store-meta dt {
    margin-top: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    color: #c5a059;
    letter-spacing: 0.05em;
}

.store-meta dd {
    margin-left: 0;
    margin-bottom: 5px;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

/* --- 6. Actions (ボタンエリア) --- */
.store-actions {
    display: flex;
    flex-wrap: wrap; 
    gap: 10px;
    width: 100%;
}

/* 共通ボタン設定: PCでも常に2列を維持（💡Instagramボタンを追加統合） */
.btn-store-detail,
.btn-line-add,
.btn-instagram,
.btn-external,
.btn-dmm {
    flex: 0 0 calc(50% - 5px); /* 1行に2つ配置（5つの場合、最後のボタンも50%幅を維持します） */
    min-width: 0; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    box-sizing: border-box;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* 💡【自動レイアウト制御ロジック】
   「LINEボタン（.btn-line-add）の直後にInstagramボタン（.btn-instagram）がある」という条件を満たす店舗（志布志店）のみ、
   最初の『店舗詳細を見る』ボタンの横幅を100%に広げて上段へ1個だけで独立させ、LINEとInstagramが下段に綺麗に並ぶように自動制御します。
   他の3店舗（LINEはあるがInstagramがない等）の既存の2列レイアウトには一切干渉しません。
*/
.store-actions:has(.btn-line-add + .btn-instagram) .btn-store-detail {
    flex: 0 0 100% !important;
}

/* 個別ボタン配色 */
.btn-store-detail { background: #12458f; color: #fff !important; }
.btn-store-detail:hover { background: #c5a059; }

.btn-line-add { background: #06C755; color: #fff !important; }
.btn-line-add:hover { background: #05a346; box-shadow: 0 4px 12px rgba(6, 199, 85, 0.3); }

/* Instagram（💡単独ページの詳細CSSからグラデーション仕様を完全同期） */
.btn-instagram {
    background: linear-gradient(135deg, #405DE6 0%, #5851DB 15%, #833AB4 30%, #C13584 50%, #E1306C 70%, #FD1D1D 85%, #F56040 100%);
    color: #fff !important;
}
.btn-instagram:hover {
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(131, 58, 180, 0.3);
}

.btn-external { border: 1px solid #12458f; color: #12458f !important; }
.btn-external:hover { background: #f0f4f9; border-color: #c5a059; color: #c5a059 !important; }

.btn-dmm { border: 1px solid #d32f2f; color: #d32f2f !important; }
.btn-dmm:hover { background: #fff5f5; border-color: #c5a059; color: #c5a059 !important; }


/* --- 7. Responsive Layout (各デバイス調整) --- */

/* タブレット〜小型PC (960px以下) */
@media (max-width: 960px) {
    .lower-hero { padding: 80px 0 40px; }
    .section-title-area .section-title { font-size: 2.2rem; }
    .store-card-inner { grid-template-columns: 300px 1fr; }
    .store-content { padding: 30px; }
    .store-name { font-size: 1.4rem; margin-bottom: 15px; }
    .store-meta { margin-bottom: 20px; }
}

/* スマートフォン (768px以下) */
@media (max-width: 768px) {
    .store-card-inner { grid-template-columns: 1fr; } /* 縦並びへ変更 */
    
    .store-image {
        height: 260px; /* 枠の高さは維持 */
        min-height: auto;
    }
    
    .store-content { padding: 30px 20px; }
    .btn-store-detail, .btn-line-add, .btn-instagram, .btn-external, .btn-dmm { font-size: 0.8rem; }
}

/* モバイル小型 (480px以下) */
@media (max-width: 480px) {
    .store-name { font-size: 1.25rem; }
}

/* モバイル極小画面 (400px以下) */
@media (max-width: 400px) {
    /* 1行2列だと文字が溢れるため、1列100%幅に切り替え（💡Instagramボタンを追加統合） */
    .btn-store-detail, .btn-line-add, .btn-instagram, .btn-external, .btn-dmm { flex: 0 0 100% !important; }
}