/* 集約ハブの表示。
   子テーマ（themes/style.css）ではなくプラグイン側に置いてある。
   テーマを替えても，この部品の見た目は付いてくるようにするため。 */

/* --- サイト案内のカード ------------------------------------------------- */
/* 4枚は「収集 → 目録 → 可視化 → 発信」の工程順に並ぶ（2026-08-26） */
.tiiki-hub-cards {
	/* **1行に1枚**（2026-08-27）。横に並べると1枚あたりが細くなり，
	   説明文が3行に折り返して読みにくかった。縦に積む */
	display: grid;
	grid-template-columns: 1fr;
	gap: .8rem;
	margin: 1.5rem 0;
}

.tiiki-hub-card {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 6px;
	padding: 1rem 1.1rem;
}

/* 工程の番号。カードが「並んだサイト」ではなく順番だと分かるようにする */
.tiiki-hub-card__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	margin-right: .45em;
	vertical-align: .05em;
	border-radius: 50%;
	background: #1f4e79;
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
}

.tiiki-hub-card__title {
	margin: 0 0 .4em;
	font-size: 1.05rem;
	line-height: 1.4;
}

.tiiki-hub-card__desc {
	margin: 0;
	font-size: .9rem;
	line-height: 1.6;
}

.tiiki-hub-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35em .5em;
	margin: .7em 0 0;
	font-size: .8rem;
	color: #646970;
}

/* 使っている技術。カードごとに複数付くことがある（データ一覧は Laravel と Rails） */
.tiiki-hub-tech {
	display: inline-block;
	padding: .15em .6em;
	border: 1px solid rgba(31, 78, 121, 0.25);
	border-radius: 999px;
	background: rgba(31, 78, 121, 0.06);
	color: #1f4e79;
	font-size: .75rem;
	font-weight: 600;
	white-space: nowrap;
}

.tiiki-hub-card__updated {
	margin-left: auto;
	font-size: .75rem;
}

/* 「準備中」の印。リンクにできないものを見た目で区別する */
.tiiki-badge {
	display: inline-block;
	margin-right: .5em;
	padding: .1em .5em;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.07);
	font-size: .8em;
	white-space: nowrap;
}

/* --- 横断タイムライン ---------------------------------------------------- */
.tiiki-hub-timeline {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

.tiiki-hub-timeline__item {
	display: grid;
	grid-template-columns: 6.5em 11em 1fr;
	gap: .3rem .9rem;
	align-items: baseline;
	padding: .75rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.tiiki-hub-timeline__date {
	font-variant-numeric: tabular-nums;
	font-size: .9rem;
	opacity: .7;
}

/* どのサイトの更新かが一目で分かるようにする（4本を1本に混ぜているため） */
.tiiki-hub-timeline__site {
	font-size: .78rem;
	padding: .15em .6em;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
	justify-self: start;
	white-space: nowrap;
}

.tiiki-hub-timeline__title {
	line-height: 1.5;
}

.tiiki-hub-timeline__summary {
	grid-column: 3;
	font-size: .85rem;
	color: #646970;
	line-height: 1.6;
}

.tiiki-hub-empty {
	color: #646970;
}

/* 幅の狭い画面では，日付・サイト名・見出しを積む */
@media (max-width: 640px) {
	.tiiki-hub-timeline__item {
		grid-template-columns: 6.5em 1fr;
	}
	.tiiki-hub-timeline__title,
	.tiiki-hub-timeline__summary {
		grid-column: 1 / -1;
	}
}

/* --- ヘッダーの導線（2026-08-27） --------------------------------------
   公開前のサイトはリンクにせず，薄い文字で「準備中」と出す。 */
.tiiki-hub-nav {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1.1rem;
	align-items: center;
	font-size: .9rem;
}

.tiiki-hub-nav__item {
	white-space: nowrap;
}

.tiiki-hub-nav__item--pending {
	color: #6b7280;
}

.tiiki-hub-nav__item--pending .tiiki-badge {
	margin-left: .35em;
	margin-right: 0;
	font-size: .75em;
}