/*
 * dlp-cards.css  v1.2.0
 * 映画祭一覧カード スタイル
 *
 * 配置先: テーマフォルダ /css/dlp-cards.css
 */

/* =============================================
   カード基本
   ============================================= */
.card-item {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.card-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* =============================================
   非最終フェーズカード（次の締切がある）
   ─ 背景・ボーダーをやや暗く、左端にアクセントラインを追加
   ============================================= */
.card-item--not-final {
    background: #f0f4f8;              /* 通常白→薄いスレートブルーグレー */
    border-color: #b0bec5;            /* ボーダーもやや濃く */
    border-left: 4px solid #78909c;   /* 左アクセントライン（グレーブルー） */
}
.card-item--not-final:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
/* タイトル色もやや抑えて「最終ではない」感を表現 */
.card-item--not-final .card-title {
    color: #37474f;
}

/* =============================================
   フェーズ情報ブロック
   ============================================= */
.card-phase-block {
    padding: 8px 12px;
    margin: 6px 0;
    border-radius: 6px;
}

/* 現在フェーズ：単一フェーズは背景なし（カード本来の白背景を維持） */
.card-phase-block--current {
    background: transparent;
    border: none;
}

/* 複数フェーズがある場合のみ現在フェーズを薄い黄色で強調 */
.card-item--not-final .card-phase-block--current {
    background: #eceff1;
    border: 1px solid #b0bec5;
}

/* 次回フェーズ */
.card-phase-block--next {
    background: #e8f5e9;              /* 薄いグリーン */
    border: 1px dashed #a5d6a7;       /* 点線で「未来」感を表現 */
}

/* =============================================
   フェーズラベル
   ============================================= */
.card-phase-label {
    margin: 0 0 4px;
    font-size: 0.85em;
    font-weight: 600;
    color: #5d4037;
}
.card-phase-count {
    font-weight: 400;
    color: #795548;
    font-size: 0.9em;
}

/* 次回フェーズ見出し */
.card-next-phase-heading {
    margin: 0 0 4px;
    font-size: 0.82em;
    font-weight: 700;
    color: #2e7d32;
}
.card-next-date {
    margin: 0 0 2px;
    font-size: 0.82em;
    color: #388e3c;
}

/* =============================================
   締切日・残日数バッジ
   ============================================= */
.card-date-info {
    margin: 0 0 4px;
    font-size: 0.88em;
    color: #555;
}
.card-status-badge {
    display: inline-block;
    background: #ffd700;
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.85em;
    margin-bottom: 4px;
}
.card-status-badge span {
    color: #c62828;
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1;
}

/* =============================================
   料金表示
   ============================================= */
.card-entry-fee {
    margin: 4px 0 0;
    font-size: 0.88em;
    color: #333;
}
.card-entry-fee.fee-free {
    color: #1b5e20;
    font-weight: 600;
}
.card-entry-fee.fee-unset {
    color: #9e9e9e;
    font-style: italic;
}
/* 次フェーズの料金は少し小さく・薄く */
.card-entry-fee--next {
    font-size: 0.82em;
    color: #388e3c;
    margin: 2px 0 0;
}
.card-entry-fee--next.fee-free  { color: #2e7d32; }
.card-entry-fee--next.fee-unset { color: #81c784; }

/* =============================================
   カードリンクラッパー
   ============================================= */
.card-link-wrapper {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.card-link-wrapper:hover {
    text-decoration: none;
    color: inherit;
}
.card-content {
    padding: 14px 16px 16px;
}
.card-title {
    margin: 0 0 8px;
    font-size: 1.05em;
    font-weight: 700;
    color: #1a237e;
    line-height: 1.4;
}
.card-excerpt {
    margin-top: 10px;
    font-size: 0.85em;
    color: #666;
    line-height: 1.6;
}

/* =============================================
   特徴タームバッジ
   ============================================= */
.tokucho-terms {
    margin: 0 0 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.tokucho-term-btn {
    display: inline-block;
    padding: 2px 10px;
    background: #0073aa;
    color: #fff;
    border-radius: 12px;
    font-size: 0.8em;
}

/* =============================================
   カードグリッドコンテナ
   ============================================= */
.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

/* =============================================
   フィルターフォーム
   ============================================= */
#dlp-filter-wrap {
    margin-bottom: 16px;
}
.fee-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}
.fee-filter-label {
    font-size: 0.9em;
    color: #444;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fee-filter-select,
.fee-filter-input {
    border: 1px solid #bdbdbd;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.9em;
}
.fee-filter-btn {
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 18px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.15s;
}
.fee-filter-btn:hover   { background: #005f8e; }
.fee-filter-btn:disabled { background: #90a4ae; cursor: not-allowed; }
.fee-filter-reset-btn {
    background: #fff;
    color: #555;
    border: 1px solid #bdbdbd;
    border-radius: 4px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.15s;
}
.fee-filter-reset-btn:hover   { background: #f5f5f5; }
.fee-filter-reset-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ローディング中は結果エリアをフェード */
#dlp-results {
    transition: opacity 0.2s ease;
}

/* =============================================
   ページネーション
   ============================================= */
.dlp-pagination {
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.dlp-pagination a,
.dlp-pagination span {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #bdbdbd;
    border-radius: 4px;
    font-size: 0.9em;
    text-decoration: none;
    color: #0073aa;
    background: #fff;
    transition: background 0.15s;
}
.dlp-pagination a:hover       { background: #e3f2fd; }
.dlp-pagination span.current  { background: #0073aa; color: #fff; border-color: #0073aa; font-weight: 700; }

/* エラーメッセージ */
.dlp-error {
    color: #c62828;
    padding: 12px 16px;
    border: 1px solid #ef9a9a;
    border-radius: 6px;
    background: #ffebee;
}

/* =============================================
   レスポンシブ
   ============================================= */
@media (max-width: 600px) {
    .card-container {
        grid-template-columns: 1fr;
    }
    .fee-filter-form {
        flex-direction: column;
        align-items: flex-start;
    }
}