@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){
  /*必要ならばここにコードを書く*/
}

/* ===== ライター一覧カード：上段2カラム＋下段フル幅 ===== */
.writer-card {
  display: grid;
  grid-template-columns: 120px 1fr; /* 上段：左=写真 右=名前+肩書 */
  grid-template-areas:
    "thumb head"
    "bio   bio"
    "more  more";
  gap: 14px 20px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 20px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s;
}
.writer-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ▼ grid配置を明示する（これが重要） */
.writer-card__thumb { grid-area: thumb; }
.writer-card__head  { grid-area: head; align-self: center; }
.writer-card__bio   { grid-area: bio; }
.writer-card__more  { grid-area: more; color: #2b6cb0; font-size: .9rem; margin-top: 4px; }

/* ▼ 画像は真円で固定 */
.writer-card__thumb {
  width: 120px;
  aspect-ratio: 1 / 1;
}
.writer-card__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ▼ 名前・肩書 */
.writer-card__name {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 2px;
}
.writer-card__title {
  color: #666;
  font-size: 0.95rem;
}

/* ▼ 本文 */
.writer-card__bio {
  line-height: 1.8;
  color: #444;
}

/* ▼ スマホでは縦配置 */
@media (max-width: 768px) {
  .writer-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "thumb"
      "head"
      "bio"
      "more";
    text-align: left;
  }
  .writer-card__thumb {
    justify-self: start;
    margin-bottom: 6px;
  }
}

.writer-card {
  display: grid !important; /* ← 強制的にgrid化する */
}


/* このテンプレートだけに効かせる（page-writers.php） */
.page-template-page-writers .writers-grid{
  /* 列の最小幅を少しだけ小さく、列は auto-fit で畳む */
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px; /* 余白をやや広めにして詰まりを防止 */
}

/* 万一のはみ出し対策：カードは枠内で計算させる */
.page-template-page-writers .writer-card{
  box-sizing: border-box;
}

/* ページ左右にも少しだけ内側余白（Cocoonのwrapとの干渉回避用） */
.page-template-page-writers .wrap{
  padding-left: 16px;
  padding-right: 16px;
}

/* もう一段幅が狭いときは2列に落とす（お好みで） */
@media (max-width: 1100px){
  .page-template-page-writers .writers-grid{
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}


/* ページ左右の余白をやや確保（右多めにして左寄せの見え方に） */
.page-template-page-writers section.wrap{
  padding-left: 20px !important;
  padding-right: 20px !important;  /* 右だけ多めにしていたのをリセット */
}

.page-template-page-writers .writers-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(295px, 295px)); /* ← 280px → 295px に */
  justify-content: start;  /* 左寄せ維持で全体の整列を安定 */
  column-gap: 28px;        /* 少しゆとりを */
  row-gap: 32px;
}

.page-template-page-writers .writer-card{
  width: 100%;
  max-width: 295px;        /* 同値に変更 */
  box-sizing: border-box;
  min-width: 0;
}


/* 1100px以下は2列 */
@media (max-width: 1100px){
  .page-template-page-writers .writers-grid{
    grid-template-columns: repeat(auto-fill, minmax(280px, 280px));
  }
}
@media (max-width: 760px){
  .page-template-page-writers .writers-grid{
    grid-template-columns: 1fr;   /* SPは1列 */
  }
}

/* ===== 個別ライタープロフィール（author.php）調整 ===== */
/* ページの左右余白を対称に（必要なら数値はお好みで微調整） */
.author .wrap{
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* 個別ライタープロフィールのヒーロー枠を中央に、最大幅を制限 */
.author .author-hero{
  max-width: 1040px;   /* 900〜1120pxでお好み調整可 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* 右カラムは縮め可能・子要素は最小幅0にして押し出し防止 */
.author-hero{
  display: grid !important;
  grid-template-columns: 140px minmax(0, 1fr);
  grid-template-areas:
    "thumb head"
    "bio   bio";
  gap: 16px 24px;
  overflow: hidden;         /* 念のための保険 */
}
.author-hero__head,
.author-hero__bio{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* ===== 記事下：著者ボックス（post-author） ===== */
.single .entry-content .post-author{
  display:grid;
  grid-template-columns: 100px minmax(0,1fr);
  grid-template-areas:
    "thumb head"
    "bio   bio"
    "foot  foot";
  gap:16px 20px;
  margin-top:36px;
  padding:20px;
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  box-sizing:border-box;
}

.post-author__thumb{ grid-area:thumb; width:100px; aspect-ratio:1/1; }
.post-author__thumb img{
  width:100%; height:100%;
  object-fit:cover; border-radius:50%; display:block;
}
.post-author__head{ grid-area:head; align-self:center; min-width:0; }
.post-author__bio { grid-area:bio;  line-height:1.9; color:#444; min-width:0; }
.post-author__foot{ grid-area:foot; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

.post-author__name{ font-weight:700; font-size:1.05rem; line-height:1.3; }
.post-author__title{ color:#666; margin-top:2px; }
.post-author__profile{ color:#2b6cb0; text-decoration:none; font-weight:600; }

.post-author__recent-wrap{ display:flex; gap:10px; align-items:flex-start; }
.post-author__recent-title{ font-weight:700; color:#555; }
.post-author__recent{ margin:0; padding-left:18px; }
.post-author__recent li{ margin:0; }
.post-author__recent a{ color:#2b6cb0; text-decoration:none; }

/* スマホは縦積み */
@media (max-width: 768px){
  .single .entry-content .post-author{
    grid-template-columns:1fr;
    grid-template-areas:
      "thumb"
      "head"
      "bio"
      "foot";
  }
  .post-author__thumb{ width:108px; }
}