@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* =============== 0) 基本：グリッド化 =============== */
:is(
  [class*="is-style-column-2"],
  [class*="is-style-column-3"],
  [class*="is-style-column-4"]
) .widget-entry-cards{
  display: grid;
  width: 100%;
  gap: 24px;            /* カード間の隙間（好みで調整OK） */
  align-items: start;
}

/* 2/3/4列（PC） */
[class*="is-style-column-2"] .widget-entry-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
[class*="is-style-column-3"] .widget-entry-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
[class*="is-style-column-4"] .widget-entry-cards{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* =============== 1) モバイル切替（768px以下） =============== */
@media (max-width: 768px){
  /* column-x-1：モバイル1列 */
  :is(.is-style-column-2-1,.is-style-column-3-1,.is-style-column-4-1) .widget-entry-cards{
    grid-template-columns: 1fr;
  }
  /* column-x-2：モバイル2列（3-2 / 4-2） */
  :is(.is-style-column-3-2,.is-style-column-4-2) .widget-entry-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* スマホは少し隙間を詰める（好みで） */
  :is([class*="is-style-column-2"],[class*="is-style-column-3"],[class*="is-style-column-4"]) .widget-entry-cards{
    gap: 16px;
  }
}

/* =============== 2) カード（リンク）をセル幅いっぱい＆縦積み固定 =============== */
/* ※ここが「タイトルが左に回り込む」事故を止める本体 */
:is([class*="is-style-column-2"],[class*="is-style-column-3"],[class*="is-style-column-4"])
.widget-entry-cards > a,
:is([class*="is-style-column-2"],[class*="is-style-column-3"],[class*="is-style-column-4"])
.widget-entry-cards .widget-entry-card-link{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  box-sizing: border-box;
}

/* 画像箱と本文箱は必ず100%幅 */
:is([class*="is-style-column-2"],[class*="is-style-column-3"],[class*="is-style-column-4"])
.widget-entry-cards figure,
:is([class*="is-style-column-2"],[class*="is-style-column-3"],[class*="is-style-column-4"])
.widget-entry-cards .card-thumb,
:is([class*="is-style-column-2"],[class*="is-style-column-3"],[class*="is-style-column-4"])
.widget-entry-cards .widget-entry-card-content{
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}

/* =============== 3) 画像：ぼやけ対策の“正解” =============== */
/*
  ぼやけの正解は「小さい画像を引き伸ばさない」ではなく、
  「十分大きいサムネ（medium_large以上）を出す（PHP）＋CSSで素直に100%表示」。
  → 320上限は撤廃する（いまのあなたは768以上を読めてるのでOK）
*/
:is([class*="is-style-column-2"],[class*="is-style-column-3"],[class*="is-style-column-4"])
.widget-entry-cards figure{
  margin: 0;
  position: relative;
}

:is([class*="is-style-column-2"],[class*="is-style-column-3"],[class*="is-style-column-4"])
.widget-entry-cards figure img{
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none !important; /* ★320固定はしない */
  margin: 0 !important;

  /* 念のため：変な拡大指定が混じってたら無効化 */
  transform: none !important;
}

/* =============== 4) 仕上げ（任意：タイトルの見切れ・余白） =============== */
:is([class*="is-style-column-2"],[class*="is-style-column-3"],[class*="is-style-column-4"])
.widget-entry-cards .widget-entry-card-content{
  padding-top: 10px;  /* タイトルが画像にくっつくの防止 */
}

/* タイトルが長いときに2行で止めたいなら（任意）
:is([class*="is-style-column-2"],[class*="is-style-column-3"],[class*="is-style-column-4"])
.widget-entry-cards .entry-card-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
*/