/**
 * Card-grid blog listing styles.
 *
 * Used only on the posts index (home.php) and category archives
 * (archive.php when is_category()). Scoped under .gh-blog so it never
 * touches the rest of the theme's look.
 *
 * @package goodhabits
 */

.gh-blog {
	--gh-bg: #fbf6ed;
	--gh-ink: #23324a;
	--gh-ink-soft: #5b6a82;
	--gh-card-bg: #ffffff;
	--gh-line: #e4dac9;
	--gh-shadow: 0 1px 2px rgba(35, 50, 74, 0.06), 0 8px 24px -12px rgba(35, 50, 74, 0.18);

	max-width: 900px;
	margin: 0 auto;
	padding: 40px 20px 80px;
	color: var(--gh-ink);
	font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
	-webkit-font-smoothing: antialiased;
}

.gh-blog * {
	box-sizing: border-box;
}

/* Accent palette, cycled automatically by category ID so any number of
   categories gets a consistent, distinct color without editing this file. */
.gh-blog .gh-c0 { --accent: #f19f4d; --accent-soft: #fce7d2; }
.gh-blog .gh-c1 { --accent: #f9cf00; --accent-soft: #fdf1b8; }
.gh-blog .gh-c2 { --accent: #4484ce; --accent-soft: #dbe8f8; }
.gh-blog .gh-c3 { --accent: #4caf7d; --accent-soft: #d9f0e4; }
.gh-blog .gh-c4 { --accent: #d9647f; --accent-soft: #f9dde3; }
.gh-blog .gh-c5 { --accent: #8a63d2; --accent-soft: #e6ddf7; }

/* Masthead
--------------------------------------------- */
.gh-masthead {
	text-align: center;
	margin-bottom: 32px;
}
.gh-eyebrow {
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--gh-ink-soft);
	margin: 0 0 6px;
}
.gh-title {
	font-size: clamp(26px, 4vw, 36px);
	line-height: 1.4;
	margin: 0;
}
.gh-logo {
	display: inline-block;
	max-width: 320px;
	width: 100%;
	height: auto;
}
.gh-lede {
	color: var(--gh-ink-soft);
	font-size: 15px;
	max-width: 46ch;
	margin: 10px auto 0;
	line-height: 1.8;
}

/* Category filter pills
--------------------------------------------- */
.gh-filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}
.gh-pill {
	font-size: 14px;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--gh-line);
	background: var(--gh-card-bg);
	color: var(--gh-ink-soft);
	text-decoration: none;
	box-shadow: var(--gh-shadow);
	transition: transform .15s ease, color .15s ease, border-color .15s ease, background .15s ease;
}
.gh-pill:hover,
.gh-pill:focus-visible {
	transform: translateY(-1px);
	color: var(--gh-ink);
}
.gh-pill.is-active {
	background: var(--gh-ink);
	color: var(--gh-bg);
	border-color: var(--gh-ink);
}
.gh-pill.gh-c0.is-active,
.gh-pill.gh-c1.is-active,
.gh-pill.gh-c2.is-active,
.gh-pill.gh-c3.is-active,
.gh-pill.gh-c4.is-active,
.gh-pill.gh-c5.is-active {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}
.gh-pill.gh-c1.is-active {
	/* #F9CF00 is too bright for white text to read well. */
	color: #3a2f0d;
}

/* Category catch-phrase bar (from the category's description field)
--------------------------------------------- */
.gh-section-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 22px;
	border-radius: 12px;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	background: var(--accent);
	margin: 0 0 28px;
}
.gh-section-bar.gh-c1 {
	/* #F9CF00 is too bright for white text to read well. */
	color: #3a2f0d;
}

/* Card grid
--------------------------------------------- */
.gh-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	padding: 0;
	margin: 0;
	list-style: none;
}
@media (max-width: 760px) {
	.gh-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
	.gh-grid { grid-template-columns: 1fr; }
}

.gh-card {
	background: var(--gh-card-bg);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--gh-shadow);
	border: 1px solid var(--gh-line);
	display: flex;
	flex-direction: column;
	margin: 0;
}
.gh-card-thumb-wrap {
	display: block;
}
.gh-card-thumb {
	aspect-ratio: 4 / 3;
	border-top: 5px solid var(--accent);
	overflow: hidden;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gh-card-thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* Set by js/blog-cards.js once each image's natural size is known: images
   wider than the 4:3 box crop to fill (no top/bottom gap); anything
   narrower (portrait, near-square) stays uncropped with side padding. */
.gh-card-thumb-img.gh-fit-cover {
	object-fit: cover;
	object-position: center;
}
.gh-card-thumb--placeholder {
	background: var(--gh-bg);
	padding: 30px 40px;
}
.gh-card-body {
	padding: 16px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}
.gh-card-title {
	font-size: 16.5px;
	line-height: 1.55;
	margin: 0;
	font-weight: 700;
}
.gh-card-title a {
	color: inherit;
	text-decoration: none;
}
.gh-card-title a:hover {
	text-decoration: underline;
}
.gh-card-meta {
	margin-top: auto;
	padding-top: 12px;
	font-size: 12.5px;
	color: var(--gh-ink-soft);
	font-variant-numeric: tabular-nums;
}

.gh-chip {
	display: inline-block;
	align-self: flex-start;
	font-size: 12px;
	padding: 3px 11px;
	border-radius: 999px;
	margin-bottom: 10px;
	background: var(--accent-soft);
	color: var(--accent);
	/* var(--accent) on var(--accent-soft) is low-contrast for every color
	   in the palette (same hue, both light) — darken the text by mixing in
	   black. Browsers without color-mix() just keep the fallback above. */
	color: color-mix(in srgb, var(--accent) 65%, black);
	text-decoration: none;
}

/* Pagination
--------------------------------------------- */
.gh-pagination {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}
.gh-pagination .nav-links {
	display: flex;
	gap: 8px;
}
.gh-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border-radius: 8px;
	border: 1px solid var(--gh-line);
	background: var(--gh-card-bg);
	color: var(--gh-ink-soft);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.gh-pagination .page-numbers.current {
	background: var(--gh-ink);
	color: var(--gh-bg);
	border-color: var(--gh-ink);
}
.gh-pagination .page-numbers.dots {
	border: none;
	box-shadow: none;
	background: none;
}

/* Empty state
--------------------------------------------- */
.gh-blog .no-results {
	text-align: center;
	color: var(--gh-ink-soft);
}

/* Supervisor block (from the posts page's own block-editor content)
--------------------------------------------- */
.gh-supervisor {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--gh-line);
}