/**
 * mycabin/blog-listing — Phase 2 structural/functional CSS ONLY. No
 * visual/design parity work this phase (per instruction) — every rule
 * below exists solely to make hidden/loading states and accessibility
 * behave correctly, not to match the source design's finished look.
 * Phase 4 replaces/extends this file with real visual styling.
 *
 * Every selector is scoped under .mcb-blog-listing (this block's own
 * root class, applied via get_block_wrapper_attributes()) so nothing
 * here can affect any other block or page — matching this project's
 * standing Page Pack CSS-scoping convention even though this isn't a
 * Page Pack file.
 */

/* The native [hidden] attribute is used on the "Newest" eyebrow label
   and the Load More button. Scoped defensively in case a later Phase 4
   design rule gives either element its own `display` value (flex/grid),
   which would otherwise silently beat the browser's default
   `[hidden]{display:none}` — the exact bug the source design's own
   README documented and fixed for .blog-card/.blog-more's button. */
.mcb-blog-listing [hidden] {
	display: none !important;
}

/* Empty aria-live status region should take up no visible space. */
.mcb-blog-listing .mcb-blog-status:empty {
	display: none;
}

/* Minimal in-flight-request affordance (category switch or Load More). */
.mcb-blog-listing[data-mcb-loading] {
	opacity: 0.6;
	pointer-events: none;
}

/* Active category button — a functional state indicator, not final
   button design. */
.mcb-blog-listing .blog-filter .tab[aria-pressed="true"] {
	font-weight: 600;
}

/* Clean no-image fallback (instruction: "use a clean no-image/fallback
   state... do not break card markup") — a neutral placeholder area
   instead of a blank/broken gap when a post has no Featured Image. */
.mcb-blog-listing .blog-card__media--no-image,
.mcb-blog-listing .blog-featured__media--no-image {
	background: #f0f0f1;
	min-height: 120px;
}

/* No-results message needs no special styling to function, but a
   little breathing room keeps it from looking like a layout bug. */
.mcb-blog-listing .blog-empty {
	padding: 24px 0;
}