/*
Theme Name: XWRITE child
Version: 1.0.0
Template: xwrite
*/

/* 空の共通ブロック(制限エリアにて非表示など)をレンダリングした場合、ブロックが表示されるのを防ぐ */
.widget_block:has(.xw-block-common-parts__content:empty) {
  display: none;
}


/* Lightboxついてるとマージンが効かないのでdisplay:tableを適用 */
figure.wp-block-image {
		margin-inline: auto;
		display:table;
}
/* 画像キャプション */
figcaption.wp-element-caption {
  color: #555; /* 文字色を少し薄い黒に */
  font-size: 0.9em; /* 親要素の90%の文字サイズに */
  text-align: center; /* テキストを中央揃えに */
  margin-top: 5px; /* 画像とキャプションの間に10pxの余白を設ける */
  font-style: italic; /* 文字を少し斜めにする */
}


/* ============================
   YARPP 関連記事（共通）
   ============================ */
.article-bottom-widget {
  container-type: inline-size;
  container-name: yarpp-container;
  width: 100%;

  .yarpp-related-block {
    padding: 0 !important;
  }

  /* リストコンテナ */
  .yarpp-thumbnails-horizontal {
    display: grid !important;
    grid-template-columns: 1fr !important; /* デフォルト1カラム */
    gap: 20px !important;
    overflow: hidden; /* はみ出し防止 */
    
    &::after { display: none !important; }
    br { display: none !important; }
  }

  /* コンテナ幅が600px以上で2カラム */
  @container yarpp-container (min-width: 600px) {
    .yarpp-thumbnails-horizontal {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 24px !important;
    }
  }

  /* 個別の記事カード */
  .yarpp-thumbnail {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 0 1em 0 !important;
    width: 100% !important;
	height:inherit!important;
    color: #000 !important;
    /* 折り返し設定 */
    white-space: normal !important; 
    word-break: break-all !important; 
    transition: transform 0.2s ease;

    &:hover {
      transform: translateY(-4px);
      img { filter: brightness(1.1); }
    }

    img {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      aspect-ratio: 16 / 9 !important;
      object-fit: cover !important;
      border-radius: 8px;
      margin: 0 0 12px 0 !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    /* タイトルテキストの挙動を修正 */
    .yarpp-thumbnail-title {
      display: -webkit-box !important;
		width:100%;
      -webkit-line-clamp: 3; /* 3行まで表示 */
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.5;
      color: #000 !important;
      margin: 0 !important;
      padding: 0 0.5em !important;
      /* 改行を強制 */
      white-space: normal !important; 
    }
  }
}

/* サイドバー用 YARPP カスタムスタイル */
aside {
  .yarpp-related-block {
    padding: 0 !important;
    margin-bottom: 2rem;

    h3 {
      font-size: 1.15rem;
      font-weight: bold;
      margin-bottom: 1.25rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid #eee;
      color: #000;
    }
  }

  /* リストコンテナ：サイドバーでは常に1カラム */
  .yarpp-thumbnails-horizontal {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    overflow: hidden;

    &::after { display: none !important; }
    br { display: none !important; }
  }

  /* 個別の記事カード */
  .yarpp-thumbnail {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    margin: 0 0 8px 0 !important;
    padding: 0 0 12px 0 !important;
    width: 100% !important;
	height:inherit!important;
    color: #000 !important;
    white-space: normal !important;
    word-break: break-all !important;
    transition: transform 0.2s ease;
    border-bottom: 1px solid #f0f0f0; /* 境界線を追加（任意） */

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      transform: translateY(-2px);
      img { filter: brightness(1.1); }
    }

    /* 画像：16:9を維持しつつサイドバー幅に合わせる */
    img {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      aspect-ratio: 16 / 9 !important;
      object-fit: cover !important;
      border-radius: 6px;
      margin: 0 0 10px 0 !important;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    /* タイトルテキスト */
    .yarpp-thumbnail-title {
      display: -webkit-box !important;
      width: 100%;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.4;
      font-weight: 700;
      color: #000 !important;
      margin: 0 !important;
      padding: 0 2px !important;
      white-space: normal !important;
    }
  }
}