/* =============================================================
   掲載カード / ジャンルカード / 検索フォーム / 掲載詳細

   旧 listinghive-child ではトップ（body.home）にしか当たっていなかったが、
   一覧・カテゴリ・検索結果でも同じ見た目にしたいので全ページで読み込む。
   変数は assets/base.css の :root。
   ============================================================= */

/* ---------- セクション見出し（ブロックエディタの h2） ---------- */

.site-content h2.wp-block-heading {
	font-weight: 800;
	letter-spacing: .03em;
	color: var(--mr-ink);
	text-align: left;
	padding-bottom: 14px;
	margin-bottom: 28px;
	border-bottom: 2px solid var(--mr-rule);
}

/* 親テーマの黄色いセンター線は下線で代替する */
.site-content h2.wp-block-heading::before { display: none; }

/* ---------- ジャンル（スタンプ調バッジ） ---------- */

.hp-listing-categories.hp-grid { gap: 14px; }

.hp-listing-category--view-block {
	background: var(--mr-paper-2);
	border: 2px solid var(--mr-rule);
	padding: 16px 12px;
	border-radius: 0;
	height: auto;
	overflow: visible;
	transition: transform .15s, box-shadow .15s;
}

.hp-listing-category--view-block:hover {
	transform: translate(-3px, -3px);
	box-shadow: 6px 6px 0 var(--mr-cobalt);
}

/* DOM は header(画像・件数) → content(名前) の順。
   画像 → 名前 → 件数 で見せたいので、header を display:contents で透かして並べ替える。 */
.hp-listing-category--view-block {
	display: flex;
	flex-direction: column;
}

.hp-listing-category--view-block .hp-listing-category__header { display: contents; }
.hp-listing-category--view-block .hp-listing-category__image { order: 1; }
.hp-listing-category--view-block .hp-listing-category__content { order: 2; }
.hp-listing-category--view-block .hp-listing-category__item-count { order: 3; }

/* ジャンルのアイコンは、それ自体が金の輪を持つ円形の絵。
   CSS側でもう一枚の丸枠（罫線＋地色＋型押しの影）を重ねると
   「丸の中に四角、その中に絵」の三重になる。枠と地を外して、
   絵そのものを円として見せる。切り抜きは overflow で行う。 */
.hp-listing-category__image {
	width: 88px;
	height: 88px;
	margin: 0 auto 8px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	display: block;
	overflow: hidden;
	box-shadow: none;
}

.hp-listing-category__image a {
	display: block;
	width: 100%;
	height: 100%;
}

/* 退色フィルタは掛けない。アイコンはもともと濃紺＋ゴールド＋生成りで
   サイトの配色に合っているので、そのまま出したほうがきれいに出る。 */
.hp-listing-category__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	filter: none;
}

/* 親テーマは画像に文字を重ねる前提でカードの文字色を白にしている。
   紙地のカードでは読めないのでインク色に戻す。 */
.hp-listing-category--view-block,
.hp-listing-category--view-block a {
	color: var(--mr-ink);
}

/* 画像リンクの ::after がカード全面を覆う暗いグラデーション
   （linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.5))）になっている。
   写真の上に白文字を載せるためのスクリムなので、紙地のカードでは濁るだけ。
   クリック領域を広げるもう一枚の ::after は残す。 */
.hp-listing-category--view-block .hp-listing-category__image a::after {
	background-image: none;
}

/* 件数は画像の右上に絶対配置されるバッジ。名前の下に小さく置き直す */
.hp-listing-category--view-block .hp-listing-category__item-count {
	position: static;
	display: block;
	margin-top: 4px;
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--mr-ink-soft);
	font-family: var(--mr-mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-align: center;
	min-width: 0;
	line-height: 1.4;
}

/* 親テーマは content をカードいっぱいに absolute で重ねる作りだが、
   ここでは画像の下に名前を置くだけなので通常のフローに戻す。 */
.hp-listing-category--view-block .hp-listing-category__content {
	position: static;
	text-align: center;
	margin-top: 6px;
	padding: 0;
	background: transparent;
}

/* ジャンルの説明文はアーカイブの見出しに出すもの。
   グリッドのタイルに流し込むと（1件あたり90字ほどあるので）カードから溢れる。 */
.hp-listing-category--view-block .hp-listing-category__description { display: none; }

/* 親テーマが2クラスのセレクタで text-align:left を当てているので、こちらも
   --view-block で受けて詳細度を上げる（!important は使わない）。 */
.hp-listing-category--view-block .hp-listing-category__name {
	font-weight: 800;
	font-size: 15px;
	line-height: 1.4;
	margin: 0;
	text-align: center;
}

.hp-listing-category__name a { color: var(--mr-ink); }
.hp-listing-category__name a:hover { color: var(--mr-cobalt); }

/* ---------- 掲載カード（ポスター額装） ---------- */

/* 同じ行のカードは高さを揃える。属性の行数が違っても額縁の下辺が揃い、
   フッター（開催日・問い合わせ）が下端に寄る。 */
.hp-listings .hp-grid__item {
	display: flex;
}

.hp-listings .hp-listing--view-block {
	background: var(--mr-paper-2);
	border: 2px solid var(--mr-rule);
	border-radius: 0;
	overflow: hidden;
	transition: transform .15s, box-shadow .15s;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.hp-listings .hp-listing--view-block .hp-listing__content {
	flex: 1 0 auto;
}

.hp-listings .hp-listing--view-block:hover {
	transform: translate(-3px, -3px);
	box-shadow: 6px 6px 0 var(--mr-cobalt);
}

.hp-listing__image {
	border-bottom: 2px solid var(--mr-rule);
	border-radius: 0;
}

.hp-listing__title a {
	color: var(--mr-ink);
	font-weight: 800;
}

.hp-listing__title a:hover { color: var(--mr-cobalt); }

/* カード内の属性。
 *
 * HivePress は副属性を `hp-col-lg-6`（flex-basis:50%）に入れる。3列グリッドの
 * カードでは半分＝120px 程度しかなく、**住所は省略記号だけになり、料金は
 * 「（体／験」のように語の途中で折れる**。カード内では1属性1行にする。 */
.hp-listing--view-block .hp-listing__attributes .hp-row > [class*="hp-col"] {
	flex-basis: 100%;
	max-width: 100%;
}

.hp-listing--view-block .hp-listing__attributes {
	font-size: 15px;
	line-height: 1.8;
}

.hp-listing--view-block .hp-listing__attribute {
	display: block;

	/* `anywhere` は語中どこでも折る。日本語では禁則を無視して「（体／験」に
	   割れるので使わない。長い英単語・URLだけ折れれば足りる。 */
	overflow-wrap: break-word;
	word-break: normal;
	line-break: strict;

	/* Chrome 119+ は文節単位で折る。「8,800円（体験 1,500／円）」のような
	   語中の改行が減る。非対応ブラウザは上の normal のまま。 */
	word-break: auto-phrase;
}

.hp-listing--view-block .hp-listing__attribute + .hp-listing__attribute,
.hp-listing--view-block .hp-row > [class*="hp-col"] + [class*="hp-col"] {
	margin-top: 2px;
}

/* 住所はカードでは出さない。細いカードでは「福岡県福岡市中央区大濠公…」と
   省略されて用をなさないうえ、すぐ下のエリアと重複する。詳しい住所は個別ページで。 */
.hp-listing--view-block .hp-listing__attribute--address {
	display: none;
}

/* 住所を消したのでエリアが唯一の場所表示になる。ピンを補って走査しやすくする。
   アイコンは HivePress 同梱の Font Awesome 5 Free（solid = weight 900）。 */
.hp-listing--view-block .hp-listing__attribute--area {
	color: var(--mr-ink-soft);
}

.hp-listing--view-block .hp-listing__attribute--area::before {
	content: "\f3c5";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: var(--mr-cobalt);
	margin-right: .5em;
}

/* 見出し・日付もカード内は一段大きく */
.hp-listing--view-block .hp-listing__title {
	font-size: 20px;
	line-height: 1.4;
}

.hp-listing--view-block .hp-listing__details .hp-meta,
.hp-listing--view-block time.hp-meta {
	font-size: 13px;
}

/* ジャンルタグ：グレーの丸 → 刷り物調の角タグ */
.hp-listing__categories a,
.hp-listing__category a {
	background: var(--mr-paper);
	border: 1px solid var(--mr-rule);
	border-radius: 0;
	color: var(--mr-ink-soft);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	padding: 3px 8px;
}

/* ロケーションピンの緑をコバルトに */
.hp-listing .hp-icon.fa-map-marker-alt { color: var(--mr-cobalt); }
.hp-listing .hp-icon.fa-comment { color: rgba(22, 35, 59, .3); }

/* ---------- 検索フォーム ---------- */

.hp-form--listing-search {
	background: transparent;
	border: 0;
	padding: 0;
	border-radius: 0;
}

.hp-form--listing-search .hp-field--search {
	background: #fff;
	border: 1.5px solid var(--mr-rule);
	font-weight: 700;
	color: var(--mr-ink);
}

.hp-form--listing-search .button-primary,
.hp-form__button.button-primary {
	background: var(--mr-cobalt);
	border: 2px solid var(--mr-cobalt-deep);
	color: var(--mr-paper);
	font-family: var(--mr-disp);
	letter-spacing: .08em;
	border-radius: 0;
}

.hp-form--listing-search .button-primary:hover { background: var(--mr-cobalt-deep); }

/* ---------- 掲載の詳細ページ ---------- */

.hp-listing--view-page .hp-listing__title {
	font-weight: 800;
	letter-spacing: .02em;
	border-bottom: 3px solid var(--mr-ink);
	padding-bottom: 14px;
}

.hp-listing--view-page .hp-listing__attributes--primary {
	background: var(--mr-paper-2);
	border: 2px solid var(--mr-ink);
	padding: 18px 20px;
}

.hp-listing--view-page .hp-listing__attribute {
	overflow-wrap: anywhere;
}

.hp-listing--view-page .hp-listing__images { border: 2px solid var(--mr-rule); }

/* ---------- ジャンルのアーカイブ見出し（親テーマのグレー帯 → 紙地の帯） ---------- */

.header-hero.hp-listing-category--view-page {
	background: var(--mr-paper-2);
	background-image: none;
	color: var(--mr-ink);
	border-bottom: 3px solid var(--mr-ink);
	min-height: 0;
	padding: 40px 0 34px;
}

.header-hero.hp-listing-category--view-page .hp-listing-category__name {
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--mr-ink);
}

.header-hero.hp-listing-category--view-page .hp-listing-category__description {
	color: var(--mr-ink-soft);
	max-width: 46em;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.9;
}

/* 絞り込みサイドバーの見出し */

.hp-listing-search-form .hp-field__label,
.widget__title {
	font-family: var(--mr-mono);
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--mr-cobalt);
	font-weight: 700;
}

/* ---------- 編集部掲載の出どころ表示（取り下げ導線） ----------
 * マークアップは mu-plugins/emraise-editorial.php の
 * emr_editorial_provenance_note() が出す。**オプトアウト方式の土台**なので
 * 見えなくしないこと（目立たせすぎる必要もない。本文の続きとして読める程度）。
 */
.emr-editorial-note{
  margin:2rem 0 0;
  padding:.9rem 1.1rem;
  border-left:4px solid var(--mr-rule);
  background:rgba(22,35,59,.04);
  font-size:.875rem;
  line-height:1.9;
  color:var(--mr-ink-soft);
}

.emr-editorial-note a{
  color:var(--mr-cobalt);
  text-decoration:underline;
}