/*
 * WP-only additions for the library slice (loaded after styles.css + wp.css).
 *
 * The el_resources `fit` field (contain/cover) has no counterpact in the static
 * design — every statics card is `cover` — so `contain` needs one rule. The class
 * is only emitted for items whose editor chose "Vừa khung (contain)".
 */
.gallery-card__media img.gallery-card__image--contain,
.gallery-dialog__stage img.gallery-dialog__image--contain {
	object-fit: contain;
}

/* Navigation/filter hierarchy: text-led active state, not boxed controls. */
.blog-navigation__links {
	border: 0;
}
.blog-navigation__links a {
	font-weight: 400;
}
.blog-navigation__links a.is-current,
.blog-navigation__links a[aria-current="page"] {
	font-weight: 600;
}
.blog-navigation__links a.is-current::after,
.blog-navigation__links a[aria-current="page"]::after {
	left: 0;
	right: auto;
	width: 100%;
}
.gallery-filter__trigger {
	border: 0;
	border-bottom: 1px solid var(--border-subtle);
	background: transparent;
	font-weight: 400;
}
.gallery-filter__trigger[aria-expanded="true"] {
	border-color: #0b38d5;
	color: #0b38d5;
	font-weight: 600;
}

/* Feedback 2026-10-15 #2 — server-side gallery paging + albums.
 * "Xem thêm" mirrors the search page's more button; the album badge sits on
 * the card media; the no-JS fallback keeps the GET form usable (panels open,
 * submit button visible) because the JS disclosure never runs. */
.gallery__more {
	display: flex;
	margin: calc(var(--spacing) * 10) auto 0;
}
.gallery__more[hidden] {
	display: none;
}
.gallery__more:focus-visible {
	outline: 2px solid #2051da;
	outline-offset: 2px;
}
.gallery-card__media {
	position: relative;
}
.gallery-card__album {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 4px 8px;
	border: 1px solid var(--border-subtle);
	background: var(--color-white, #fff);
	color: #0b38d5;
	font-size: 12px;
	line-height: 18px;
	font-weight: var(--font-weight-semibold);
}
html:not(.js) .gallery-filter {
	/* Statics hides the toolbar without JS (no form to submit); the WP archive
	 * ships a real GET form, so it stays usable. */
	display: flex;
}
html:not(.js) .gallery-filter__panel[hidden] {
	/* `hidden="until-found"` keeps the Tailwind preflight (`[hidden] … !important`,
	 * layered) out of the match; the UA answers with content-visibility:hidden,
	 * so both display and paint must be restored for the no-JS GET form. */
	display: block;
	content-visibility: visible;
	position: static;
	width: auto;
}
html:not(.js) .gallery-filter__apply {
	display: inline-flex;
}
.gallery-filter__apply {
	display: none;
}