@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
*/

/************************************
** 子テーマ用のスタイル
************************************/

/* --- 基本：本文内メディアを親幅にフィット --- */
.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content .wp-block-embed__wrapper iframe {
  width: 100%;          /* 小さい画像も拡大して揃える（画質より見た目優先） */
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- 画像：16:9で高さも統一（トリミングあり）--- */
.entry-content figure.wp-block-image {
  aspect-ratio: 16 / 9;     /* ← 4/3 や 3/2 に変えるならここ */
  width: 100%;
  overflow: hidden;
  margin: 1rem 0;
}
.entry-content figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* 枠いっぱいに埋める（黒帯なし、切り抜きあり） */
  object-position: center;
  border-radius: 4px;        /* お好みで削除可 */
}

/* --- 埋め込みの上下余白 --- */
.wp-block-embed.is-type-video,
.wp-block-embed__wrapper { margin: 1rem 0; }

/* --- アイキャッチも幅を統一（必要な場合） --- */
.post-thumbnail img,
.entry-header .post-thumbnail img { width: 100%; height: auto; }

/* --- 動画：本文幅100%・16:9で統一 --- */
.entry-content .wp-video,                          /* WPショートコード */
.entry-content .wp-block-video,                    /* Gutenberg動画 */
.entry-content .wp-block-embed.is-type-video,      /* 埋め込み(YouTube等) */
.entry-content .wp-block-embed__wrapper,
.entry-content .mejs-container {                   /* MediaElement.js */
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin: 1rem 0;
}

/* 枠にフィット（黒帯OKなら contain→黒帯なしなら cover に） */
.entry-content .wp-video video,
.entry-content .wp-block-video video,
.entry-content .mejs-container video,
.entry-content .wp-block-embed.is-type-video iframe,
.entry-content .wp-block-embed__wrapper iframe {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;   /* ← 黒帯なしにしたい時は cover に変更 */
  display: block;
}

/* 余計な場所で効かないよう本文領域に限定（将来の拡張用のフック） */
.single .entry-content,
.page .entry-content {}

/* Gutenbergの比率クラスを上書きして16:9に統一 */
.entry-content .wp-block-embed.wp-has-aspect-ratio { aspect-ratio: 16 / 9; }

/* iframeの枠線を消す（全画面ボタンの取りこぼし防止の保険） */
.entry-content iframe { border: 0; }

/* アライン時も親幅に追従 */
.entry-content .alignwide,
.entry-content .alignfull,
.entry-content .aligncenter,
.entry-content .alignleft,
.entry-content .alignright { max-width: 100%; }

/* 本文外のサムネ等には過剰に影響させない */
.entry-card-thumb img,
.widget img { height: auto !important; }

/* --- aspect-ratio 非対応ブラウザ用フォールバック --- */
@supports not (aspect-ratio: 16 / 9) {
  /* 画像16:9 */
  .entry-content figure.wp-block-image {
    position: relative;
    height: 0;
    padding-top: 56.25%;  /* 16:9 */
  }
  .entry-content figure.wp-block-image img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
  }

  /* 動画16:9 */
  .entry-content .wp-video,
  .entry-content .wp-block-video,
  .entry-content .wp-block-embed.is-type-video,
  .entry-content .wp-block-embed__wrapper,
  .entry-content .mejs-container {
    position: relative;
    height: 0 !important;
    padding-top: 56.25%;
  }
  .entry-content .wp-video video,
  .entry-content .wp-block-video video,
  .entry-content .wp-block-embed.is-type-video iframe,
  .entry-content .wp-block-embed__wrapper iframe,
  .entry-content .mejs-container video {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
  }
}

/* --- 表内メディアのはみ出し対策 --- */
.entry-content table {
  width: 100%;
  overflow: auto;
  display: block;
}
/* ===== テーブルの内側スクロール/カーソルを消して、はみ出しを防ぐ ===== */

/* Gutenbergのテーブルブロック全体 */
.entry-content .wp-block-table,
.entry-content .wp-block-table table {
  width: 100%;
}

/* テーブル本体：ブロック表示＆overflowをやめて通常表示に戻す */
.entry-content table {
  display: table !important;   /* ← block指定を解除 */
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;         /* 列幅を自動調整して横はみ出しを抑える */
  overflow: visible !important;/* 内側スクロールを無効化（バー/手カーソルを消す） */
}

/* 長い単語/URLでも折り返してはみ出さない */
.entry-content table th,
.entry-content table td {
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* 表キャプションやfigureの余剰スクロールも無効化 */
.entry-content figure.wp-block-table {
  overflow: visible !important;
}
/* 一覧/アーカイブのカードを横並び・左サムネに */
.index .entry-card-wrap .entry-card,
.archive .entry-card-wrap .entry-card{
  display: grid;
  grid-template-columns: 320px 1fr; /* サムネ幅 / テキスト */
  gap: 16px;
  align-items: start;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}
.index .entry-card-thumb,
.archive .entry-card-thumb{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
}
.index .entry-card-thumb img,
.archive .entry-card-thumb img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.index .entry-card-content,
.archive .entry-card-content{ display: grid; gap: 6px; }
.index .entry-card-title,
.archive .entry-card-title{ font-size: 1.05rem; font-weight: 700; line-height: 1.5; }
@media (max-width: 834px){
  .index .entry-card-wrap .entry-card,
  .archive .entry-card-wrap .entry-card{ grid-template-columns: 1fr; }
}
.index .entry-card-wrap, .archive .entry-card-wrap{ display: grid; gap: 16px; }

/************************************
** レスポンシブ用（必要なら追加）
************************************/
@media screen and (max-width: 1023px){ /* 追記可 */ }
@media screen and (max-width: 834px){  /* 追記可 */ }
@media screen and (max-width: 480px){  /* 追記可 */ }

/* ===== 例外指定：特定の画像だけクロップしたくない場合 =====
   対象画像ブロックの「追加CSSクラス」に no-aspect を付ける */
.entry-content figure.wp-block-image.no-aspect { aspect-ratio: auto; overflow: visible; }
.entry-content figure.wp-block-image.no-aspect img { height: auto; object-fit: contain; }