/* ============================================================
   症状の入口カード  [ckd_symptoms]
   ------------------------------------------------------------
   ★★v1.12.2：貼り付けをやめ、プラグインに同梱しました。

   v1.12.1 まで、このCSSだけ「追加CSSに貼ってください」でした。
   理由はこう書いてありました。

     「貼り忘れると表が崩れて日付が読めなくなる（カレンダー）。
       ★カードは貼り忘れてもリンクとして読める」

   ★2026-08-23、貼らずに [ckd_symptoms] を置いた画面を見ました。
     **読めませんでした。** アイコンが原寸の192pxで並び、文字が
     その横に流れ、7枚が階段状にずれます。
     ★「リンクとして読める」は、確かめずに書いた言葉でした。

   → カレンダー・営業時間表・お客様の声と同じく同梱します。
     ショートコードを置いた日から、貼らずに効きます。

   ★追加CSSに古い ckd-sym-* が残っていても構いません。
     追加CSSはこのファイルより後に出るので、そちらが勝ちます。
   ============================================================ */

.ckd-sym-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.ckd-sym-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e2e2de;
  border-radius: 8px;
  text-decoration: none !important;
  color: #333;
  transition: 0.25s;
  /* ★スマホの指で押せる高さを確保します */
  min-height: 88px;
}

.ckd-sym-card:hover,
.ckd-sym-card:focus-visible {
  border-color: #6d7c62;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

/* --- アイコン ---
   ★プラグイン同梱の画像（assets/icons/*.png）。
     枠の緑はもともと画像に入っているので、CSSでは足しません。 */
.ckd-sym-icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
}
.ckd-sym-img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 4px;
  /* ★v1.12.3：メディアライブラリの画像は、正方形とは限りません。
     　 指定が無いと、縦長の写真が横に潰れます。contain なら形を保ちます。 */
  object-fit: contain;
}

/* --- 文字 --- */
.ckd-sym-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.ckd-sym-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: #2c3527;
}

.ckd-sym-note {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #6b6b6b;
}

/* --- タブレット以上は2列、PCは3列 --- */
@media (min-width: 600px) {
  .ckd-sym-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (min-width: 900px) {
  .ckd-sym-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ★7枚なので最後の1枚が余ります。左端に寄せたままで自然に見えます。
   中央に置きたい場合だけ、下の2行を有効にしてください。
   .ckd-sym-grid > :last-child:nth-child(3n - 2) { grid-column: 2; }
*/