/* HTML-only no-JS fallback uses the same responsive grid. With JS, existing
   server-rendered cards move into prototype column wrappers; no card is built. */
.home-loading { display: none; }
#home-more.is-loading .home-loading { display: flex; }
#home-more.is-loading .home-load { display: none; }
#home-more.has-error .home-load { display: none; }
#home-grid:not(.is-masonry) { row-gap: 0; }
[x-cloak] { display: none !important; }

/* A positioned image covers the prototype's inset card focus outline.
   Position only the failure state that actually needs an overlay. */
.home-image:has(.home-image-error:not([hidden])) { position: relative; }
.home-image-error:not([hidden]) { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--color-base-200); color: var(--color-base-content); font-size: .875rem; }

.has-list-js #home-more[data-auto-only] .home-load { display: none; }

/* R12 (D653): the hero lost its form and avatar row. Phones get 1rem more than
   the former pb-8 so the decoration clears the text; from 640px the former
   total height is kept, leaving the decoration at its original size and place. */
.home-hero { padding-bottom: 3rem; }
@media (min-width: 640px) { .home-hero { padding-bottom: 7.25rem; } }