/* Site-wide layout supplements not in brand.css (status pages, success banner, pager). */

img[loading="lazy"] { background: var(--gray-50); }

/* Status / error pages */
.status-page {
    min-height: 60vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--space-12) var(--content-pad);
}
.status-page h1 {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 5rem);
    margin-bottom: .25em;
    color: var(--navy);
}
.status-page p { color: var(--ink-2); max-width: 40ch; margin: 0 auto var(--space-6); }

/* Pagination */
.pager {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin-top: var(--space-8);
    flex-wrap: wrap;
}
.pager a, .pager span {
    padding: .55rem .9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--ink);
    font-weight: var(--weight-semibold);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.pager .is-current { background: var(--navy); color: var(--white); border-color: var(--navy); }
.pager a:hover { background: var(--gray-50); }

/* Thank-you / success */
.success-banner {
    background: linear-gradient(135deg, #1F6B40, #2F8F5C);
    color: var(--white);
    padding: var(--space-8);
    border-radius: var(--radius);
}
.success-banner h2 { color: var(--white); }
.success-banner p { color: rgba(255,255,255,.95); }