/* =============================================================
   blog-archive.css  –  カードグリッドレイアウト
   親テーマの HTML はそのまま、CSS だけで上書き。
   functions.php の AJ_BLOG_CARD_GRID を false にすれば即・元に戻る。

   ※ 親テーマの responsive.css は <link> タグで wp_head priority 11
     として直書きされており、wp_enqueue_style より後に出力される。
     そのため responsive.css と競合するプロパティには !important を使用。
   ============================================================= */

/* ----- PC (751px 以上) 共通カードスタイル ---------------------- */
@media screen and (min-width: 751px) {

  /* コンテナ — responsive.css: width:auto / padding / border:none */
  #blog_archive {
    border-left: none !important;
    border-right: none !important;
    border: none !important;
    max-width: 1200px;
    width: 100% !important;
    padding: 0 40px 120px !important;
  }

  /* グリッド — responsive.css: border-top:1px solid #ddd */
  #blog_list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    border-top: none !important;
  }

  /* カード — responsive.css: height:300px, padding:40px */
  #blog_list .item {
    flex-direction: column !important;
    height: auto !important;
    padding: 0 !important;
    border-bottom: none !important;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    overflow: hidden;
    transition: box-shadow .3s ease, transform .3s ease;
  }
  #blog_list .item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .13);
  }

  /* 画像エリア — responsive.css: width:50%, padding-right:30px, height:220px */
  #blog_list .image_link {
    width: 100% !important;
    height: 0 !important;
    padding-top: 60% !important;   /* 5:3 アスペクト比 */
    padding-right: 0 !important;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }
  #blog_list .image_wrap {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
  }
  #blog_list .image {
    transition: transform .4s ease;
  }
  #blog_list .item:hover .image {
    transform: scale(1.06);
  }

  /* テキストエリア — responsive.css: width:50%, padding-left:30px, height:220px */
  #blog_list .content {
    width: 100% !important;
    height: auto !important;
    padding: 20px 24px 24px !important;
  }
  #blog_list .content_inner {
    position: static !important;
    transform: none !important;
  }

  /* メタ */
  #blog_list .meta {
    margin-bottom: 12px;
  }

  /* タイトル */
  #blog_list .title {
    font-size: 15px;
    line-height: 1.6;
    max-height: none;
    overflow: hidden;
  }
  #blog_list .title span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* 抜粋 */
  #blog_list .desc {
    display: block !important;
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin: 10px 0 0;
    max-height: none;
    overflow: hidden;
  }
  #blog_list .desc span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* ----- PC ワイド (1202px 以上) → 3列 -------------------------- */
@media screen and (min-width: 1202px) {
  #blog_list {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

/* ----- タブレット狭め (751px – 950px) → padding調整 ------------ */
@media screen and (min-width: 751px) and (max-width: 950px) {
  #blog_archive {
    padding: 0 28px 80px !important;
  }
  #blog_list {
    gap: 20px;
  }
}

/* ----- モバイル (750px 以下) ----------------------------------- */
@media screen and (max-width: 750px) {

  #blog_list {
    border-top: none !important;
  }

  #blog_list .item {
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .07);
    border-bottom: none !important;
    margin-bottom: 16px;
    padding: 0 !important;
    overflow: hidden;
  }

  #blog_list .image_link {
    width: 100% !important;
    height: 0 !important;
    padding-top: 56% !important;   /* 16:9 */
    position: relative;
    margin: 0 !important;
  }
  #blog_list .image_wrap {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
  }

  #blog_list .content {
    width: 100% !important;
    height: auto !important;
    padding: 16px 16px 20px !important;
  }

  /* 抜粋をモバイルでも表示 (2行) */
  #blog_list .desc {
    display: block !important;
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin: 8px 0 0;
    max-height: none;
    overflow: hidden;
  }
  #blog_list .desc span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}