/* =========================================================================
   GSA — blog.css  (Artikel page, category / tag archives, article search)
   Markup: template-parts/blog.php

   Layout follows the "blog listing" design: title band → sidebar (300px) +
   two-column post grid → numbered round pagination. Colours and font come from
   the GSA tokens in main.css (accent blue instead of the design's orange).

   1. Tokens
   2. Title band + breadcrumb
   3. Layout
   4. Sidebar widgets
   5. Post cards
   6. Pagination
   7. Responsive
   ========================================================================= */

/* 1. Tokens ---------------------------------------------------------------- */
.gsa-blog-band,
.gsa-blog-shell {
	--blog-ink: var(--gsa-ink);
	--blog-muted: var(--gsa-muted);
	--blog-faint: var(--gsa-soft);
	--blog-line: var(--gsa-line);
	--blog-tint: var(--gsa-accent-tint);              /* title band + image placeholders */
	--blog-accent: var(--gsa-accent);
	--blog-radius-lg: 14px;
	--blog-radius-sm: 6px;
	--blog-max: 1200px;
	--blog-gap: 32px;
}
.gsa-blog-wrap { max-width: var(--blog-max); margin: 0 auto; padding: 0 40px; }

/* 2. Title band ------------------------------------------------------------ */
.gsa-blog-band { background: var(--blog-tint); margin-top: 24px; }
.gsa-blog-band .gsa-blog-wrap {
	min-height: 110px; display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 10px; padding-top: 20px; padding-bottom: 20px;
}
.gsa-blog-band h1 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--blog-ink); }
.gsa-blog-crumbs {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gsa-muted);
}
.gsa-blog-crumbs a { color: inherit; transition: color .15s ease; }
.gsa-blog-crumbs a:hover { color: var(--blog-accent); }
.gsa-blog-crumbs .sep { opacity: .6; }
.gsa-blog-crumbs .current { color: var(--blog-ink); }

/* 3. Layout ---------------------------------------------------------------- */
.gsa-blog-shell { background: var(--gsa-surface); padding: 56px 0 80px; }
.gsa-blog-grid { display: flex; align-items: flex-start; gap: var(--blog-gap); }
.gsa-blog-side { width: 300px; flex-shrink: 0; }
.gsa-blog-posts {
	flex: 1; min-width: 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px;
}

/* 4. Sidebar widgets ------------------------------------------------------- */
.gsa-widget { margin-bottom: 40px; }
.gsa-widget__title {
	margin: 0 0 18px; padding-bottom: 14px; border-bottom: 2px solid var(--blog-ink);
	font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blog-ink);
}

.gsa-blog-search { display: flex; border: 1px solid var(--blog-line); border-radius: var(--blog-radius-sm); overflow: hidden; }
.gsa-blog-search:focus-within { border-color: var(--blog-accent); }
.gsa-blog-search input {
	flex: 1; min-width: 0; border: 0; outline: 0; padding: 12px 14px;
	font-size: 14px; background: transparent; color: var(--blog-ink);
}
.gsa-blog-search input::-webkit-search-cancel-button { display: none; }
.gsa-blog-search button {
	flex-shrink: 0; width: 44px; border: 0; display: flex; align-items: center; justify-content: center;
	background: var(--gsa-inverse); color: var(--gsa-on-inverse); cursor: pointer; transition: background .15s ease;
}
.gsa-blog-search button:hover { background: var(--blog-accent); }
.gsa-blog-search button svg { width: 16px; height: 16px; }

.gsa-blog-cats { list-style: none; margin: 0; padding: 0; }
.gsa-blog-cats li { border-bottom: 1px solid var(--blog-line); }
.gsa-blog-cats li:first-child { border-top: 1px solid var(--blog-line); }
.gsa-blog-cats a {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 2px;
	font-size: 14.5px; color: var(--blog-ink); opacity: .85; transition: opacity .15s ease, color .15s ease;
}
.gsa-blog-cats a:hover, .gsa-blog-cats a.is-active { opacity: 1; color: var(--blog-accent); }
.gsa-blog-cats a.is-active { font-weight: 700; }
.gsa-blog-cats .count { font-size: 12.5px; color: var(--blog-faint); }

.gsa-pick { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--blog-line); color: var(--blog-ink); }
.gsa-pick:first-of-type { padding-top: 0; }
.gsa-pick:last-child { border-bottom: 0; padding-bottom: 0; }
.gsa-pick__index {
	flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--blog-line);
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700; color: var(--blog-muted); transition: border-color .15s, color .15s;
}
.gsa-pick__title { display: block; margin: 0 0 6px; font-size: 14.5px; font-weight: 600; line-height: 1.35; transition: color .15s ease; }
.gsa-pick__meta { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blog-faint); }
.gsa-pick:hover .gsa-pick__title { color: var(--blog-accent); }
.gsa-pick:hover .gsa-pick__index { border-color: var(--blog-accent); color: var(--blog-accent); }

.gsa-blog-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gsa-blog-photos a {
	position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
	border-radius: var(--blog-radius-sm); background: var(--blog-tint);
}
.gsa-blog-photos img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gsa-blog-photos a:hover img { transform: scale(1.06); }

/* 5. Post cards ------------------------------------------------------------ */
.gsa-post-card__thumb {
	display: block; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 18px;
	border-radius: var(--blog-radius-lg); background: var(--blog-tint);
}
.gsa-post-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gsa-post-card:hover .gsa-post-card__thumb img { transform: scale(1.04); }
.gsa-post-card__ph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--blog-accent); opacity: .5; }
.gsa-post-card__ph .gsa-ico { width: 44px; height: 44px; }

.gsa-post-card__meta {
	margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gsa-muted);
}
.gsa-post-card__meta .dot { margin: 0 6px; font-weight: 400; color: var(--blog-faint); }
.gsa-post-card__meta .date { font-weight: 600; color: var(--blog-faint); }
.gsa-post-card h2 { margin: 0 0 10px; font-size: 21px; font-weight: 700; line-height: 1.32; letter-spacing: -.01em; color: var(--blog-ink); }
.gsa-post-card h2 a { color: inherit; transition: color .15s ease; }
.gsa-post-card h2 a:hover { color: var(--blog-accent); }
/* Whole card is clickable through the title link. */
.gsa-post-card { position: relative; }
.gsa-post-card h2 a::after { content: ""; position: absolute; inset: 0; }
.gsa-post-card__excerpt { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--blog-muted); }

.gsa-blog-empty { grid-column: 1 / -1; }

/* 6. Pagination ------------------------------------------------------------ */
.gsa-blog-pages { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.gsa-blog-pages .page-numbers {
	width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--blog-line);
	display: flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 700; color: var(--blog-ink);
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.gsa-blog-pages a.page-numbers:hover { border-color: var(--blog-accent); color: var(--blog-accent); }
.gsa-blog-pages .page-numbers.current { background: var(--blog-accent); border-color: var(--blog-accent); color: #fff; }
.gsa-blog-pages .page-numbers.dots { border: 0; width: auto; }
.gsa-blog-pages svg { width: 16px; height: 16px; }

/* 7. Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.gsa-blog-wrap { padding: 0 28px; }
	.gsa-blog-side { width: 260px; }
	.gsa-blog-grid { gap: 24px; }
	.gsa-blog-posts { gap: 32px 24px; }
}
@media (max-width: 860px) {
	.gsa-blog-grid { flex-direction: column; }
	.gsa-blog-side { width: 100%; order: 2; }
	.gsa-blog-posts { order: 1; width: 100%; grid-template-columns: 1fr 1fr; }
	.gsa-widget { margin-bottom: 32px; }
}
@media (max-width: 620px) {
	.gsa-blog-wrap { padding: 0 20px; }
	.gsa-blog-band h1 { font-size: 26px; }
	.gsa-blog-crumbs { display: none; }
	.gsa-blog-shell { padding: 36px 0 56px; }
	.gsa-blog-posts { grid-template-columns: 1fr; gap: 36px; }
	.gsa-post-card h2 { font-size: 19px; }
	.gsa-blog-search input { font-size: 16px; }   /* no iOS zoom on focus */
}

/* Chinese: Manrope has no CJK glyphs; keep headings from breaking mid-phrase. */
html[data-gsa-lang="ZH"] .gsa-blog-band h1,
html[data-gsa-lang="ZH"] .gsa-post-card h2 { word-break: keep-all; line-break: strict; }

/* v1.7.1 — More breathing room */
.gsa-blog-band, .gsa-blog-shell { --blog-gap: clamp(32px, 4vw, 64px); }
.gsa-blog-wrap { padding: 0 var(--gsa-gutter); }
.gsa-blog-band .gsa-blog-wrap { min-height: 140px; padding-top: 32px; padding-bottom: 32px; }
.gsa-blog-shell { padding: clamp(48px, 5vw, 96px) 0 var(--gsa-space-section, 112px); }
.gsa-blog-grid { gap: var(--blog-gap); }
.gsa-blog-posts { gap: clamp(40px, 4vw, 64px) clamp(24px, 3vw, 44px); }
.gsa-widget { margin-bottom: 48px; }
.gsa-post-card h2 { line-height: 1.3; }
@media (max-width: 720px) {
	.gsa-blog-posts { gap: 44px; }
}