/*
Theme Name: GP Afure Child
Theme URI: https://afure.mme-lab.jp/
Description: あふれプロジェクト専用の子テーマ (GeneratePress用)
Author: あふれ運営
Template: generatepress
Version: 1.0.1
*/

/* --- 親テーマのスタイル読み込み後に適用されるCSS（ここから下をすべて貼り付け） --- */

/* ------------------------------------------ */
/* 作品カードの基本スタイル */
/* ------------------------------------------ */
.work-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    background-color: #FAFAFA; /* ベースカラー */
}

/* ホバー時のスタイル (アクセントカラーで閃きを表現) */
.work-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(255, 195, 0, 0.4); /* アクセントカラーの影 */
    border-color: #FFC300; /* アクセントカラー */
}

/* Astraのデフォルトの投稿サムネイルの余計なマージンを消す */
/* (GeneratePressでも念のため残しておく) */
.work-card .wp-post-image {
    margin-bottom: 0 !important;
}

/* ------------------------------------------ */
/* 画像の縦横比の統一 (すべてのカードの高さを揃える) */
/* ------------------------------------------ */
.work-thumbnail {
    position: relative;
    width: 100%;
    /* ここで画像の縦横比を設定 (4:3) */
    padding-top: 75%; 
    overflow: hidden;
}

.work-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をボックスいっぱいに広げて切り取る */
}

/* ------------------------------------------ */
/* カード内のコンテンツとテキストデザイン */
/* ------------------------------------------ */
.card-content {
    padding: 15px;
    text-align: center;
}

/* 作品名 (タイトル) */
.card-content h3 {
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: 500; /* Mediumウェイト */
}

/* 作品名のリンク色調整 */
.card-content h3 a {
    color: #333333; /* 文字色 */
    text-decoration: none;
}
.card-content h3 a:hover {
    color: #3B6E7D; /* メインカラー */
}

/* 掲載番号のスタイル (メインカラー) */
.work-id {
    font-size: 14px;
    font-weight: 500; 
    color: #3B6E7D; /* メインカラー */
    margin: 5px 0 0;
}

/* 詳細を見るボタンの調整 (PHPコードに直書きしたインラインスタイルを上書き) */
.card-content a[style*="background-color:#FFC300"] {
    display: inline-block;
    padding: 8px 20px;
    background-color: #FFC300 !important;
    color: #333333 !important;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.2s;
}
.card-content a[style*="background-color:#FFC300"]:hover {
    background-color: #e6b300 !important; 
}


/* ==============================================
   作品詳細ページ (single-afure_works.php) 用CSS
   (Flexboxでのレイアウト)
   ============================================== */
.afure-single-wrap {
    /* flexboxで画像と情報を横並びにし、折り返しを防ぐ */
    display: flex;
    justify-content: space-between;
    gap: 30px; /* 画像と情報の間隔 */
    margin-bottom: 40px;
    /* !important は使わないが、優先度を上げるために他のプロパティも記述 */
}

.afure-image-area {
    /* 画像エリアの幅を全体の約40%に固定 */
    flex-basis: 40%;
    max-width: 40%;
}

.afure-image-area img {
    /* 画像をコンテナの幅いっぱいに表示し、高さを自動調整 */
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 0; /* 余白をリセット */
    border: 1px solid #ddd; /* 境界線を追加して見やすく */
    border-radius: 4px; /* 角丸を追加 */
}

.afure-info-area {
    /* 情報エリアの幅を全体の約60%に固定 */
    flex-basis: 60%;
    max-width: 60%;
}

/* モバイル対応（画面幅が768px以下の場合） */
@media (max-width: 768px) {
    .afure-single-wrap {
        flex-direction: column; /* 縦並びにする */
        gap: 20px;
    }
    
    .afure-image-area,
    .afure-info-area {
        flex-basis: 100%;
        max-width: 100%; /* 幅を画面いっぱいに広げる */
    }
}
/* ==============================================
   !! 画像サイズの最終強制制御 !!
   ============================================== 
   ここが原因で横幅が固定され、画像が巨大化していました。
   削除するか、以下のようにコメントアウトしてください。
   
.afure-image-area img {
    width: 100% !important; 
    height: auto !important;
}

.afure-image-area {
    flex-basis: 40% !important;
    max-width: 40% !important;
}
*/


/* ==============================================
   作品一覧・ギャラリー用グリッド (afure-gallery-grid / afure-works-grid-container)
   PC: 4列 / スマホ: 2列
   ============================================== */
.afure-gallery-grid,
.afure-works-grid-container {
    display: grid !important;
    /* PC: 最小幅220pxに設定することで、一般的なコンテンツ幅で4列収まるように調整 */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; 
    gap: 30px !important;
    margin-top: 20px;
    margin-bottom: 40px;
}

/* モバイル対応（画面幅が600px以下の場合、横に2列表示） */
@media (max-width: 600px) {
    .afure-gallery-grid,
    .afure-works-grid-container {
        /* 2列固定表示 */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important; 
    }
}


/* ==============================================
   作者一覧ページ用CSS (afure_artist_list) 
   ============================================== */

/* グリッドコンテナ (作品一覧と同じ設定を適用) */
.afure-artist-directory .artist-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; 
    gap: 30px !important;
}

/* 各アイテムのホバー効果 */
.afure-artist-directory .artist-item {
    transition: all 0.2s ease-in-out;
}
.afure-artist-directory .artist-item:hover {
    background-color: #FAFAFA !important; /* ベースカラー */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* モバイル対応（画面幅が600px以下の場合、横に2列表示） */
@media (max-width: 600px) {
    .afure-artist-directory .artist-grid {
        /* 2列固定表示 */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important; 
    }
    .afure-artist-directory .artist-item {
        padding: 10px !important;
    }
    /* アバターを小さく */
    .afure-artist-directory .artist-avatar-wrap img {
        width: 60px !important;
        height: 60px !important;
        border-width: 2px !important;
    }
    /* 名前フォントを小さく */
    .afure-artist-directory .artist-item h3 {
        font-size: 0.9em !important;
    }
    .afure-artist-directory .artist-item p {
        font-size: 0.7em !important;
    }
}

/* ==============================================
   ページネーションスタイル
   ============================================== */
.nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.nav-links a,
.nav-links span {
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
}

.nav-links a:hover {
    background-color: #FAFAFA;
    border-color: #3B6E7D;
    color: #3B6E7D;
}

.nav-links span.current {
    background-color: #3B6E7D;
    color: #fff;
    border-color: #3B6E7D;
    font-weight: bold;
}
/* ==============================================
   ★★★ 注目作品の横6列表示を強制するCSSの修正 ★★★
   （afure-gallery.cssの設定を上書きして6列を強制）
   ============================================== */
.afure-gallery-grid.featured-works-grid {
    display: grid !important;
    /* 140pxに設定すれば、一般的なPC幅（約1200px）で6個以上並ぶようになる！ */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 20px !important; /* カード間のスペース */
}

/* ==============================================
   フォーム用CSS (購入申請ページ/掲載申請ページなど)
   ============================================== */
/* フォーム全体を囲むコンテナ */
.afure-form-container {
    max-width: 600px;
    margin: 30px auto;
    padding: 0 15px;
}

/* フォームカードの基本スタイル */
.afure-form-card {
    background-color: #FAFAFA; /* ベースカラー */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.form-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #eee;
}
.form-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* セクションタイトル (マスタードイエローで強調) */
.section-title {
    font-size: 1.25em;
    color: #333333; /* 文字色 */
    border-left: 5px solid #FFC300; /* アクセントカラー */
    padding-left: 10px;
    margin-bottom: 15px;
}

/* 入力フィールド */
.afure-input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    transition: border-color 0.2s;
}

.afure-input:focus {
    border-color: #3B6E7D; /* ダスキーシアン */
    outline: none;
    box-shadow: 0 0 5px rgba(59, 110, 125, 0.4);
}

.date-inputs-wrap {
    display: flex;
    gap: 20px;
}
.date-input-group {
    flex: 1;
}

/* ボタンの共通スタイル */
.afure-button {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
    text-align: center;
    text-decoration: none; /* aタグの場合 */
    margin-top: 10px;
}

/* プライマリボタン (確認ボタン) */
.primary-btn {
    background-color: #3B6E7D; /* ダスキーシアン */
    color: white;
}
.primary-btn:hover {
    background-color: #2F5866;
}

/* アクセントボタン (決済ボタン) */
.accent-btn {
    background-color: #FFC300; /* マスタードイエロー */
    color: #333333;
}
.accent-btn:hover {
    background-color: #E6B000;
}

/* 無効化されたボタン */
.afure-button:disabled {
    background-color: #ccc !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 結果表示ボックス */
.afure-result-box {
    padding: 15px;
    margin-top: 15px;
    border-radius: 4px;
    line-height: 1.6;
    font-size: 0.95em;
    color: #333333;
}

/* 初期メッセージ */
.initial-msg {
    border: 1px solid #ccc;
    background: #fff;
}

/* 成功メッセージ */
.success-msg {
    border: 1px solid #3B6E7D;
    background: #E6F3F5; /* 明るいシアン */
}
.available-days-summary {
    font-weight: bold;
    font-size: 1.1em;
    color: #3B6E7D;
}
.available-dates-list {
    list-style: none;
    padding-left: 10px;
    margin-top: 5px;
    columns: 2; /* リストを2列表示 */
}
.available-dates-list li {
    padding: 2px 0;
}
.sub-message {
    margin-top: 10px;
    color: green;
    font-size: 0.9em;
}

/* エラーメッセージ */
.error-msg {
    border: 1px solid #FFC300; 
    background: #FFF9E6;
    color: red;
    font-weight: bold;
}

/* ローディングメッセージ */
.loading-msg {
    border: 1px solid #ccc;
    background: #fff;
    font-style: italic;
}

/* 決済エリア */
.afure-payment-box {
    margin-top: 25px;
    padding: 20px;
    border: 2px solid #3B6E7D;
    background: #F0F8FF; /* 淡い青 */
    border-radius: 6px;
    text-align: center;
}
.total-price-label {
    margin: 0;
    font-size: 1em;
    color: #333333;
}
.total-price-value {
    font-size: 2em;
    color: #FFC300; /* アクセントカラー */
    display: block;
    margin-bottom: 15px;
}
.payment-note {
    font-size: 0.8em;
    color: #666;
    margin-top: 10px;
}

/* レスポンシブ対応 */
@media (max-width: 500px) {
    .date-inputs-wrap {
        flex-direction: column;
        gap: 0;
    }
    .available-dates-list {
        columns: 1; /* 1列表示に戻す */
    }
}