/* =========================================================
    Component: Feature Single Header
    File: assets/css/3_components/feature-single-header.css
    Description: 特集記事専用のヘッダー装飾（アイキャッチ・タイトル・メタ情報の配置）
   ========================================================= */

.p-featureSingle__header {
	margin-bottom: var(--wan-s-15);
	border-bottom: 1px solid var(--wan-color-border, #e7e7e7);
}

/* --- アイキャッチエリア --- */
.p-featureSingle__eyecatch {
  position: relative;
  width: 100%;
  margin-top: 0 !important;
  margin-bottom: var(--wan-s-6) !important;
  border-radius: var(--wan-r-md);
  overflow: hidden;
  box-shadow: var(--wan-shd-lg);
}

.p-featureSingle__eyecatch img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 見出し上のラベル（Kicker）の調整 */
.p-featureSingle__kicker {
  margin-bottom: var(--wan-s-3);
}

/* --- タイトル (H1) 💡 PHP側の共通クラス .c-singleTitle と同期 --- */
.c-singleTitle {
  font-size: var(--wan-f-size-3xl);
  font-weight: var(--wan-f-weight-bold);
  line-height: var(--wan-f-lh-relaxed); 
  margin-bottom: var(--wan-s-6);
  letter-spacing: var(--wan-ls-md);
  color: var(--wan-color-text, #333333);
}

/* --- メタ情報（タグ・日付・エリア）の並び 💡 PHP側の __metaRow と同期 --- */
.p-featureSingle__metaRow {
  align-items: center;
  margin-bottom: var(--wan-s-6);
}

.p-featureSingle__tags{
	margin-bottom: var(--wan-s-2);
}

/* --- スマホ専用調整 (768px以下) --- */
@media screen and (max-width: 768px) {
  .p-featureSingle__header {
    margin-bottom: var(--wan-s-8);
  }

  .p-featureSingle__eyecatch {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    box-shadow: none;
  }

  .p-featureSingle__header .c-singleTitle {
    font-size: var(--wan-f-size-xl); 
  }
}