/* =========================================================
    Component: Post Meta (Area & Date)
    File: assets/css/3_components/post-meta.css
    Description: サイト全域で使用するエリア階層表示と日付の共通スタイル
   ========================================================= */

/* --- 1. エリア表示全体 --- */
.c-postMeta__area {
  display: inline-flex;
  align-items: center;
  color: var(--wan-color-text-muted, #777777);
  font-size: var(--wan-f-size-xs);
}

/* エリアアイコン (ピン) */
.c-postMeta__icon.-area {
  display: block;
  width: 1.2em;
  height: 1.2em;
  margin-right: var(--wan-s-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23f6a118' d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  flex-shrink: 0;
}

/* 個別エリアリンク */
.c-postMeta__areaLink {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
  position: relative;
  z-index: 5;
}

.c-postMeta__areaLink:hover {
  color: var(--wan-color-brand, #ff922b);
  text-decoration: underline;
}

/* ★区切り線（全角 ＞ ）：余白設定のみ */
.c-postMeta__separator {
  display: inline-block;
  margin: 0 var(--wan-s-1);
  pointer-events: none;
  user-select: none;
}


/* --- 2. 日付表示 --- */
.c-postMeta__date {
  display: inline-block;
  font-size: var(--wan-f-size-sm);
  color: var(--wan-color-text-muted, #777777);
}


/* --- 3. スマホ表示の微調整 --- */
@media screen and (max-width: 768px) {

  .c-postMeta__separator {
	  margin: 0 var(--wan-s-0-5);
	}

  .-lg .c-postMeta__area {
    font-size: var(--wan-f-size-sm);
  }
  
  .-lg .c-postMeta__area .c-postMeta__icon.-area {
    margin: 0 var(--wan-s-2) 0 0;
  }
  
  .c-postMeta__icon.-area {
    width: 1.1em;
    height: 1.1em;
  }
}