/* painting-archive.css - レシピアーカイブ（Breathing Grid + Discovery Zone）
   ブランド構造「Painting（絵画）」
   分割元: style.css @layer components + unlayered セクション */

@layer components {

    /* ── Phase 3: Discovery & Curation (旧6th @layer components, 統合) ── */

    /* --- Masonry的グリッド（ヒーローカード + アスペクト比変化） --- */

    /* Mobile First: ベースは1カラム */
    .recipe-grid--featured {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* ヒーローカード: モバイルでは画像比率のみ変更 */
    .recipe-card-wrapper--hero .card-img img {
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: var(--radius-card);
    }

    .recipe-card-wrapper--hero .recipe-card h3 {
        font-size: 1.3rem;
        font-weight: 500;
        letter-spacing: 0.08em;
    }

    /* 通常カードの画像比率に変化をつけてリズムを生む */
    .recipe-grid--featured .recipe-card-wrapper:nth-child(5n+3) .card-img img {
        aspect-ratio: 1 / 1;
    }

    .recipe-grid--featured .recipe-card-wrapper:nth-child(5n+4) .card-img img {
        aspect-ratio: 4 / 5;
    }

    /* タブレット: 2カラム */
    @media (min-width: 768px) {
        .recipe-grid--featured {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* デスクトップ: 3カラム、ヒーローカードを大きく */
    @media (min-width: 1024px) {
        .recipe-grid--featured {
            grid-template-columns: repeat(3, 1fr);
        }

        .recipe-card-wrapper--hero {
            grid-column: span 2;
            grid-row: span 2;
            margin-bottom: 0.5rem;
        }

        .recipe-card-wrapper--hero .card-img img {
            aspect-ratio: 4 / 3;
        }

        .recipe-card-wrapper--hero .recipe-card h3 {
            font-size: 1.6rem;
        }
    }

    /* --- お気に入りビュー（フィルター ON 時） --- */

    /* デフォルト非表示（インラインスタイル禁止） */
    .favorite-collection-header {
        display: none;
        text-align: center;
        padding: 2rem 0;
        margin-bottom: 1rem;
    }

    /* JS が .is-active を付与して表示 */
    .favorite-collection-header.is-active {
        display: block;
    }

    .favorite-collection-title {
        font-family: var(--font-base);
        font-size: 1.2rem;
        font-weight: 400;
        letter-spacing: 0.05em;
        color: var(--text-color);
    }

    .favorite-collection-count {
        font-family: var(--font-ui);
        font-size: var(--fs-base);
        font-weight: 700;
        color: var(--color-accent);
        margin-left: 0.5rem;
    }

    /* お気に入りフィルター時のグリッド調整 */
    .recipe-grid.is-favorite-view {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 2rem;
    }

    /* お気に入りビュー時はヒーローカードのスパンをリセット */
    .recipe-grid.is-favorite-view .recipe-card-wrapper--hero {
        grid-column: span 1;
        grid-row: span 1;
    }

    .recipe-grid.is-favorite-view .recipe-card-wrapper--hero .card-img img {
        aspect-ratio: 4 / 3;
    }

    /* --- お気に入り 空状態（Empty State） --- */

    .favorite-empty {
        display: none;
        text-align: center;
        padding: 4rem 2rem;
    }

    .favorite-empty.is-active {
        display: block;
    }

    .favorite-empty-message {
        font-family: var(--font-base);
        font-size: 1rem;
        letter-spacing: 0.05em;
        line-height: 2.0;
        color: var(--text-color);
        opacity: 0.7;
    }

    .favorite-empty-heart {
        color: var(--color-accent);
        font-size: 1.2em;
    }
}

/* ========================================
   Recipe Archive Page Styles (レシピ一覧ページ)
   ======================================== */

/* --- 1. Grid Layout --- */
/* NOTE: Breathing Grid 導入により #main へのグリッド適用を廃止。
   レイアウトは .archive-recipe-container 内の Beat 構造で制御。
   .tax-recipe_category は将来対応時に別途検討。 */
.tax-recipe_category #main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 60px 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px;
}

/* --- 2. Recipe Card Image (radius-card to Match Blog) --- */
.post-type-archive-recipe article img,
.tax-recipe_category article img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;

    /* Ensure radius-card */
    border-radius: var(--radius-card);

    margin-bottom: 16px;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Hover Effect */
.post-type-archive-recipe article:hover img,
.tax-recipe_category article:hover img {
    transform: var(--hover-scale);
}

/* --- 3. Typography --- */
.post-type-archive-recipe article h2,
.tax-recipe_category article h2 {
    font-family: var(--font-base);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 12px;
}

/* =========================================
   Discovery Zone — Unlayered Overrides
   アンレイヤーCSS（.hover-float, .keyword-search-form等）を
   上書きするため、@layer の外に配置
   ========================================= */

/* ── ディスカバリーゾーン（元サイドバー） ── */
.discovery-section {
    padding: 4rem 0;
    background: rgba(235, 233, 228, 0.15);
    position: relative;
}

.discovery-section::before {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: var(--color-sub);
    margin: 0 auto 2rem;
}

/* ディスカバリーゾーン導入ラベル */
.discovery-lead {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: #bbb;
    text-align: center;
    margin-bottom: 2rem;
}

.discovery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
}

.discovery-block-title {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: #999;
    margin-bottom: 1.2rem;
}

/* Instagram load more 非表示（外部プラグインのインラインスタイル上書き） */
.discovery-section .sbi_load_btn,
.discovery-section #sbi_load {
    display: none !important;
}

/* --- Button Base (unlayered) ---
   これらのボタンは unlayered セクション（Header/Breathing Grid等）で
   定義されているため、共通スタイルも unlayered に配置。
   @layer内のボタンは別途定義あり
   → 「Button Base (layered)」で検索 */
/* fill パターン（CTA / ページ遷移） */
.cta-outline-button,
.cta-btn,
.apply-filter-btn {
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    text-transform: lowercase;
    text-decoration: none;
    transition: all var(--transition-fill);
}

/* accent パターン（ページ内アクション） */
.filter-trigger-btn,
.search-reset.chip,
.filter-empty-reset,
.discovery-favorites-btn {
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    text-transform: lowercase;
    text-decoration: none;
    transition: all var(--transition-accent);
}

/* お気に入りボタン（ピル型） */
.discovery-favorites-btn {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-pill);
    font-size: var(--fs-base);
    color: var(--color-accent);
    letter-spacing: 0.05em;
    /* 意図的に共通の0.04emより広い */
    min-height: 44px;
}

/* ディスカバリー内チップのサイズダウン（見出しサイズに合わせる） */
.discovery-section .discovery-block .chip {
    padding: 6px 14px;
    min-height: auto;
}

/* リセットボタンの高さを絞り込むに合わせる */
.discovery-section .search-reset.chip {
    padding: 12px;
    min-height: auto;
    background: var(--color-sub);
    font-size: var(--fs-md);
}

/* 絞り込む・リセット・お気に入りボタンのホバー統一 */
.discovery-section .apply-filter-btn:hover,
.discovery-section .apply-filter-btn:active {
    background: var(--color-accent);
    color: #fff;
    transform: var(--hover-lift);
    box-shadow: var(--shadow-fill-hover);
    opacity: 1;
}
/* お気に入りボタン: accent パターン */
.discovery-favorites-btn:hover {
    background: var(--hover-accent-bg);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* キーワード検索フォームの背景を透明に */
.discovery-section .keyword-search-form {
    background-color: transparent;
}

/* Instagram ヘッダー非表示（外部プラグインのインラインスタイル上書き） */
.discovery-section .sbi_header,
.discovery-section .sb_instagram_header,
.discovery-section #sb_instagram .sbi_header_text,
.discovery-section #sb_instagram .sbi_header_img,
.discovery-section #sb_instagram .sbi_header_link {
    display: none !important;
}

@media (max-width: 768px) {
    .discovery-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

}

/* Discovery Zone: Instagram 3列グリッド（デスクトップ・モバイル共通） */
/* !important: プラグインJSがインラインstyleでwidthを上書きするため必須 */
.discovery-section #sbi_images {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
}

.discovery-section .sbi_item {
    width: calc(33.333% - 0.17rem) !important;
    max-width: calc(33.333% - 0.17rem) !important;
    margin: 0 !important;
    padding: 0 !important;
}