/*
Theme Name: Lightning Child
Template: lightning
Version: 1.0.0
*/

/* ==================================================
 * 共通：アーカイブ見出し
 * ================================================== */
.peko-archive-header {
  margin: 16px 0 20px;
}
.peko-archive-sub {
  margin: 6px 0 0;
  font-size: 13px;
  opacity: .75;
}

/* ==================================================
 * 共通：カード一覧レイアウト（3列 / レスポンシブ）
 * ================================================== */
.peko-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* PC：3列 */
  gap: 22px;
}

/* タブレット：2列 */
@media (max-width: 1024px){
  .peko-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* スマホ：1列 */
@media (max-width: 768px){
  .peko-cards{
    grid-template-columns: 1fr;
  }
}

/* ==================================================
 * 共通：カード本体（親猫・子猫 共通）
 * ================================================== */
.peko-card{
  position: relative;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease, opacity .25s ease;
}

.peko-card:hover{
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  transform: translateY(-3px);
}

.peko-card__link{
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ==================================================
 * カード画像（比率固定：4:3）
 * ================================================== */
.peko-card__thumb{
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f6f6f6;
  overflow: hidden;
}

.peko-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.peko-card__noimg{
  padding: 48px 12px;
  text-align: center;
  font-size: 13px;
  color: #777;
}

/* ==================================================
 * カード本文
 * ================================================== */
.peko-card__body{
  padding: 16px 18px 18px;
}

.peko-card__title{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.35;
}

.peko-card__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  row-gap: 6px;
  font-size: 13px;
  line-height: 1.6;
  opacity: .9;
}

/* ==================================================
 * ステータス表示（子猫用）
 * ================================================== */
.peko-badge{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  border-radius: 999px;
  color: #fff;
  background: #111;
}

/* ==================================================
 * 募集中バッジ（シンプル・上品版）
 * ================================================== */
.peko-badge.is-open{
  background: linear-gradient(135deg, #008037 0%, #00a35a 100%);
  color: #fff;

  /* 少しだけ大きく */
  font-size: 13px;
  padding: 8px 14px;

  font-weight: 700;
  letter-spacing: .02em;

  /* 細い縁取り */
  border: 1px solid rgba(255,255,255,.55);

  /* 控えめな立体感 */
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 4px 10px rgba(0,0,0,.18);
}


/* 成約済（テキストバッジは基本使わないが、念のため） */
.peko-badge.is-sold{
  background: #666;
}

/* =========================
 * 成約済：写真だけを薄くする
 * ========================= */
.peko-card.is-sold .peko-card__thumb img{
  opacity: .45;
  filter: grayscale(40%);
}


/* ==================================================
 * ページネーション（共通）
 * ================================================== */
.peko-pagination{
  margin: 18px 0 8px;
}

.peko-pagination .page-numbers{
  display: inline-block;
  padding: 8px 12px;
  margin: 0 6px 6px 0;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  text-decoration: none;
}

.peko-pagination .current{
  font-weight: 700;
}

/* ==================================================
 * 共通：詳細ページパーツ
 * ================================================== */
.peko-dl div{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.peko-dl dt{ font-weight: 700; }
.peko-dl dd{ margin: 0; }

.peko-section{
  margin-top: 18px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
}

.peko-section__title{
  margin: 0 0 10px;
  font-size: 18px;
}

.peko-section__body{
  font-size: 15px;
  line-height: 1.8;
}

/* ナビゲーション */
.peko-nav{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 8px;
}

.peko-nav__center a{
  text-decoration: none;
}

/* ==================================================
 * CTA（お問い合わせ等）
 * ================================================== */
.peko-cta{
  margin-top: 14px;
  padding: 14px;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
}

.peko-cta.is-sold{
  opacity: .85;
}

.peko-cta__lead{
  margin: 0 0 10px;
  font-weight: 700;
}

.peko-cta__buttons{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.peko-cta__note{
  margin-top: 10px;
  font-size: 13px;
  opacity: .8;
}

/* ボタン */
.peko-btn{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  text-decoration: none;
}

.peko-btn.is-sub{
  background: #fff;
  color: #111;
}

/* 親猫詳細：戻るだけCTA */
.peko-cta--simple{
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 14px;
}

/* ==================================================
 * 子猫詳細（single-kittens）
 * ================================================== */
.peko-kitten__header{
  margin: 16px 0 12px;
}

.peko-kitten__titleRow{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.peko-kitten__title{
  margin: 0;
  font-size: 26px;
  line-height: 1.25;
}

.peko-kitten__main{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  margin: 10px 0 18px;
}

@media (max-width: 900px){
  .peko-kitten__main{
    grid-template-columns: 1fr;
  }
}

.peko-kitten__thumb img{
  width: 100%;
  border-radius: 14px;
  border: 1px solid #e5e5e5;
}

/* ==================================================
 * 親猫詳細（single-parents）
 * ================================================== */
.peko-parent__header{
  margin: 16px 0 12px;
}

.peko-parent__title{
  margin: 0;
  font-size: 26px;
  line-height: 1.25;
}

.peko-parent__main{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  margin: 10px 0 18px;
}

@media (max-width: 900px){
  .peko-parent__main{
    grid-template-columns: 1fr;
  }
}

.peko-parent__thumb img{
  width: 100%;
  border-radius: 14px;
  border: 1px solid #e5e5e5;
}

.peko-breed-btn.is-active{
  background:#111;
  color:#fff;
}

/* =========================
 * 猫種ボタン（枠付き・おしゃれ版）
 * ========================= */
.peko-breed-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 10px 0 24px;
}

/* ボタン本体 */
.peko-breed-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;

  /* 枠（2重っぽく見せる） */
  border:1px solid rgba(0,0,0,.12);
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);

  /* ほんのり立体感 */
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 8px 18px rgba(0,0,0,.06);

  font-size:14px;
  line-height:1;
  color:#111;
  text-decoration:none;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

/* ホバー */
.peko-breed-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 12px 24px rgba(0,0,0,.10);
}

/* 選択中（アクティブ） */
.peko-breed-btn.is-active{
  background: #111;
  color: #fff;
  border-color: rgba(0,0,0,.5);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 12px 26px rgba(0,0,0,.16);
}

/* フォーカス（キーボード操作の見栄えも良く） */
.peko-breed-btn:focus-visible{
  outline: 3px solid rgba(0,0,0,.18);
  outline-offset: 2px;
}

/* =========================
 * 子猫：成約済マーク（画像オーバーレイ）
 * ========================= */

/* 成約済カードの画像エリア */
.peko-card.is-sold .peko-card__thumb{
  position: relative;
}

/* 画像中央に成約済マーク */
.peko-card.is-sold .peko-card__thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://brilliantrai.com/wp-content/uploads/2026/02/seiyaku-removebg-preview.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(65%, 220px);
  pointer-events: none;
}

/* 既存のテキストバッジは非表示（成約済のみ） */
.peko-card.is-sold .peko-badge{
  display: none;
}

<?php
/**
 * archive-kittens.php（子猫一覧）
 * - ACF: breed（猫種）で仕訳（?breed=xxx）
 * - 猫種固定：アメリカンショートヘア / スコティッシュフォールド / セルカークレックス
 * - status（募集中 / 成約済）
 * - 募集中を優先表示（募集中→成約済で合成）
 */

get_header();

/* -------------------------
 * 猫種（固定）
 * ------------------------- */
$breed_labels = array(
  'american_shorthair' => 'アメリカンショートヘア',
  'scottish_fold'      => 'スコティッシュフォールド',
  'selkirk_rex'        => 'セルカークレックス',
);

/* 投稿が存在する猫種のみボタン表示（必要なら false） */
$hide_empty_breeds = true;

/* -------------------------
 * 現在の絞り込み（breed）
 * ------------------------- */
$current_breed = isset($_GET['breed']) ? sanitize_text_field($_GET['breed']) : '';
if ( $current_breed && ! array_key_exists($current_breed, $breed_labels) ) {
  $current_breed = '';
}

/* -------------------------
 * 猫種ごとの投稿有無（ボタン表示制御）
 * ------------------------- */
$breed_has_posts = array_fill_keys(array_keys($breed_labels), false);

$all_kitten_ids = get_posts(array(
  'post_type'      => 'kittens',
  'post_status'    => 'publish',
  'posts_per_page' => -1,
  'fields'         => 'ids',
));

foreach ( $all_kitten_ids as $pid ) {
  $b = function_exists('get_field') ? get_field('breed', $pid) : '';
  if ( $b && isset($breed_has_posts[$b]) ) {
    $breed_has_posts[$b] = true;
  }
}

/* -------------------------
 * 募集中優先表示のために 2クエリで合成
 * ------------------------- */
$posts_per_page = 12;
$paged = max(1, (int) get_query_var('paged'));
$offset = ($paged - 1) * $posts_per_page;

$base_meta = array();

if ( $current_breed ) {
  $base_meta[] = array(
    'key'   => 'breed',
    'value' => $current_breed,
  );
}

$status_open = '募集中';
$status_sold = '成約済';

/** 募集中 */
$q_open = new WP_Query(array(
  'post_type'      => 'kittens',
  'post_status'    => 'publish',
  'posts_per_page' => -1,
  'fields'         => 'ids',
  'orderby'        => 'date',
  'order'          => 'DESC',
  'meta_query'     => array_merge($base_meta, array(
    array(
      'key'     => 'status',
      'value'   => $status_open,
      'compare' => '=',
    ),
  )),
));

/** 成約済 */
$q_sold = new WP_Query(array(
  'post_type'      => 'kittens',
  'post_status'    => 'publish',
  'posts_per_page' => -1,
  'fields'         => 'ids',
  'orderby'        => 'date',
  'order'          => 'DESC',
  'meta_query'     => array_merge($base_meta, array(
    array(
      'key'     => 'status',
      'value'   => $status_sold,
      'compare' => '=',
    ),
  )),
));

/** status が未設定の投稿（念のため：募集中扱いで後ろに混ざらないよう「募集中の後」に入れる） */
$q_unknown = new WP_Query(array(
  'post_type'      => 'kittens',
  'post_status'    => 'publish',
  'posts_per_page' => -1,
  'fields'         => 'ids',
  'orderby'        => 'date',
  'order'          => 'DESC',
  'meta_query'     => array_merge($base_meta, array(
    array(
      'key'     => 'status',
      'compare' => 'NOT EXISTS',
    ),
  )),
));

$merged_ids = array_merge($q_open->posts, $q_unknown->posts, $q_sold->posts);

$total_posts = count($merged_ids);
$total_pages = (int) ceil($total_posts / max(1, $posts_per_page));

$page_ids = array_slice($merged_ids, $offset, $posts_per_page);
?>

<main class="site-main peko-archive-kittens">
  <div class="container">

    <!-- 見出し -->
    <header class="page-header peko-archive-header">
      <h1 class="page-title"><?php post_type_archive_title(); ?></h1>
      <p class="peko-archive-sub">募集中の子猫を優先表示しています。</p>
    </header>

    <!-- 猫種ナビ -->
    <div class="peko-breed-nav">
      <a class="peko-breed-btn <?php echo $current_breed === '' ? 'is-active' : ''; ?>"
         href="<?php echo esc_url( get_post_type_archive_link('kittens') ); ?>">
        すべて
      </a>

      <?php foreach ( $breed_labels as $key => $label ) : ?>
        <?php if ( $hide_empty_breeds && empty($breed_has_posts[$key]) ) continue; ?>
        <a class="peko-breed-btn <?php echo $current_breed === $key ? 'is-active' : ''; ?>"
           href="<?php echo esc_url( add_query_arg('breed', $key) ); ?>">
          <?php echo esc_html( $label ); ?>
        </a>
      <?php endforeach; ?>
    </div>

    <!-- 一覧 -->
    <?php if ( ! empty($page_ids) ) : ?>
      <div class="peko-cards">

        <?php foreach ( $page_ids as $post_id ) : ?>
          <?php
          $post = get_post($post_id);
          setup_postdata($post);

          $birthday = function_exists('peko_format_birthday') ? peko_format_birthday($post_id) : '';
          $gender   = function_exists('peko_gender_label') ? peko_gender_label($post_id) : '';
          $color    = function_exists('get_field') ? get_field('color', $post_id) : '';
          $status   = function_exists('get_field') ? get_field('status', $post_id) : '';
          $price = function_exists('get_field') ? get_field('price', $post_id) : '';

          $is_sold  = ($status === $status_sold);
          ?>

          <article <?php post_class('peko-card' . ($is_sold ? ' is-sold' : '')); ?>>
            <a class="peko-card__link" href="<?php the_permalink(); ?>">

              <div class="peko-card__thumb">
                <?php if ( has_post_thumbnail() ) : ?>
                  <?php the_post_thumbnail('medium_large'); ?>
                <?php else : ?>
                  <div class="peko-card__noimg">No Image</div>
                <?php endif; ?>

                <?php if ( $status ) : ?>
                  <span class="peko-badge <?php echo $is_sold ? 'is-sold' : 'is-open'; ?>">
                    <?php echo esc_html($status); ?>
                  </span>
                <?php endif; ?>
              </div>

              <div class="peko-card__body">
                <h2 class="peko-card__title"><?php the_title(); ?></h2>

                <div class="peko-card__meta peko-card__meta--list">

  <?php if ( $price ) : ?>
    <div>価格：<?php echo esc_html($price); ?></div>
  <?php endif; ?>

  <?php if ( $birthday ) : ?>
    <div>生年月日：<?php echo esc_html($birthday); ?></div>
  <?php endif; ?>

  <?php if ( $gender ) : ?>
    <div>性別：<?php echo esc_html($gender); ?></div>
  <?php endif; ?>

  <?php if ( $color ) : ?>
    <div>毛色：<?php echo esc_html($color); ?></div>
  <?php endif; ?>

</div>


                <div class="peko-card__meta">
                  <?php if ( $color ) : ?><span>毛色：<?php echo esc_html($color); ?></span><?php endif; ?>
                </div>
              </div>

            </a>
          </article>

        <?php endforeach; wp_reset_postdata(); ?>

      </div>

      <!-- ページネーション（breed維持） -->
      <div class="peko-pagination">
        <?php
        echo paginate_links(array(
          'total'     => max(1, $total_pages),
          'current'   => $paged,
          'prev_text' => '← 前へ',
          'next_text' => '次へ →',
          'add_args'  => $current_breed ? array('breed' => $current_breed) : false,
        ));
        ?>
      </div>

    <?php else : ?>
      <p>該当する子猫が見つかりませんでした。</p>
    <?php endif; ?>

  </div>
</main>

<?php get_footer(); ?>

.peko-card__meta--list{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  line-height:1.6;
  opacity:.9;
}

.peko-card__meta--list > div:first-child{
  font-weight:700; /* 価格を少し目立たせる */
}

/* 子猫カード：メタ情報（1項目1行・強制） */
.peko-card__meta.peko-card__meta--list{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

/* 価格だけ少し強調 */
.peko-card__meta.peko-card__meta--list > div:first-child{
  font-weight: 700;
}

/* 商談中バッジ */
.peko-badge.is-negotiating{
  background: linear-gradient(135deg, #c28b00 0%, #f0b400 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 4px 10px rgba(0,0,0,.18);
}