/* ---------------------------------------------------------------------------
   Public notice listings.

   Extracted from home-v2.css when the archive page was added in T6: the home
   card and /public/notices render the same rows through
   fragments/notice-fragment, so the rows need one stylesheet rather than a copy
   per page. home-v2.css keeps only .home-notice-section, which positions the
   card within the home page's illustration band and is not shared.

   The archive and detail pages link home-v2.css too, for the page column
   (--home-container) and the --home-* values the shared rows still use.
   --------------------------------------------------------------------------- */

.home-notice-card {
    background: #fff;
    border-radius: var(--home-radius-lg);
    overflow: hidden;
    border: 1px solid var(--home-border);
}

.home-notice-header {
    background: var(--home-primary);
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home-notice-header h3 {
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Was the header's static "New" chip; now marks a HIGH-priority notice, on both
   the listings and the detail page. */
.home-notice-badge {
    background: #FEF3E2;
    color: #8A4B08;
    border: 1px solid #F3D9AE;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.home-notice-list {
    padding: 4px 0;
}

.home-notice-item {
    padding: 12px 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid var(--home-border);
    transition: background 0.15s;
}

.home-notice-item:last-child {
    border-bottom: none;
}

.home-notice-item:hover {
    background: var(--home-lighter-green);
}

.home-notice-dot {
    width: 8px;
    height: 8px;
    background: var(--home-teal);
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.home-notice-body {
    flex: 1;
    min-width: 0;
}

.home-notice-item h4 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 2px;
}

.home-notice-item p {
    font-size: 14px;
    color: var(--home-muted);
}

.home-notice-date {
    font-size: 13px;
    color: var(--home-muted);
    margin-left: auto;
    white-space: nowrap;
}

/* The item title is a link now. It inherits the surrounding colour rather than
   turning browser-blue, so the card reads as it did with plain-text titles. */
.home-notice-link {
    color: inherit;
    text-decoration: none;
}

.home-notice-link:hover {
    color: var(--home-primary);
    text-decoration: underline;
}

/* "View all", sitting on the coloured header bar. */
.home-notice-viewall {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.home-notice-viewall:hover {
    color: #fff;
    text-decoration: underline;
}

.home-notice-empty {
    padding: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--home-muted);
}

/* --- Archive and detail pages ---
   Everything below is scoped to notices-main / notice-detail-main, so the home
   card, which renders the same notice-fragment rows, keeps its own look. */

.notices-card {
    background: var(--ebrs-color-surface);
    border: 1px solid var(--ebrs-color-border-strong);
    border-radius: var(--ebrs-radius-lg);
    overflow: hidden;
}

.notices-main .home-notice-item {
    gap: var(--ebrs-space-sm);
    padding: var(--ebrs-space-md) var(--ebrs-space-lg);
    border-bottom: 1px solid var(--ebrs-color-border);
    transition: background var(--ebrs-transition-fast);
}

.notices-main .home-notice-item:last-child {
    border-bottom: none;
}

.notices-main .home-notice-item:hover {
    background: var(--ebrs-color-accent-subtle);
}

.notices-main .home-notice-dot {
    width: var(--ebrs-space-xs);
    height: var(--ebrs-space-xs);
    margin-top: var(--ebrs-space-xs);
    background: var(--ebrs-color-accent);
}

.notices-main .home-notice-item h4 {
    margin: 0 0 var(--ebrs-space-2xs);
    font-size: var(--ebrs-font-size-lg);
    font-weight: var(--ebrs-font-weight-semibold);
    line-height: var(--ebrs-line-base);
    color: var(--ebrs-color-fg-strong);
}

.notices-main .home-notice-item p {
    margin: 0;
    font-size: var(--ebrs-font-size-md);
    line-height: var(--ebrs-line-base);
    color: var(--ebrs-color-fg-muted);
}

.notices-main .home-notice-date {
    font-size: var(--ebrs-font-size-sm);
    line-height: var(--ebrs-line-base);
    color: var(--ebrs-color-fg-muted);
}

.notices-main .home-notice-link:hover {
    color: var(--ebrs-color-accent-emphasis);
}

.notices-main .home-notice-link:focus-visible {
    outline: none;
    border-radius: var(--ebrs-radius-xs);
    box-shadow: var(--ebrs-focus-ring);
}

.notices-main .home-notice-badge,
.notice-detail-main .home-notice-badge {
    padding: var(--ebrs-space-3xs) var(--ebrs-space-xs);
    background: var(--ebrs-color-warning-subtle);
    color: var(--ebrs-color-warning);
    border: 1px solid currentColor;
    border-radius: var(--ebrs-radius-sm);
    font-size: var(--ebrs-font-size-2xs);
    font-weight: var(--ebrs-font-weight-semibold);
    letter-spacing: var(--ebrs-tracking-wide);
}

.notices-empty {
    margin: 0;
    padding: var(--ebrs-space-lg);
    text-align: center;
    font-size: var(--ebrs-font-size-lg);
    color: var(--ebrs-color-fg-muted);
}

.notices-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ebrs-space-sm);
    margin-top: var(--ebrs-space-lg);
}

.notices-pager__btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--ebrs-control-height-lg);
    padding: 0 var(--ebrs-space-md);
    border: 1px solid var(--ebrs-color-accent);
    border-radius: var(--ebrs-radius-sm);
    background: var(--ebrs-color-surface);
    color: var(--ebrs-color-accent-emphasis);
    font-size: var(--ebrs-font-size-lg);
    font-weight: var(--ebrs-font-weight-medium);
    text-decoration: none;
    transition: background var(--ebrs-transition-fast);
}

.notices-pager__btn:hover {
    background: var(--ebrs-color-accent-subtle);
    color: var(--ebrs-color-accent-emphasis);
}

.notices-pager__btn:focus-visible {
    outline: none;
    box-shadow: var(--ebrs-focus-ring);
}

.notices-pager__btn--disabled,
.notices-pager__btn--disabled:hover {
    border-color: var(--ebrs-color-border-strong);
    background: var(--ebrs-color-surface-sunken);
    color: var(--ebrs-color-fg-subtle);
    cursor: default;
}

/* On the lattice band, so fg rather than fg-muted */
.notices-pager__status {
    font-size: var(--ebrs-font-size-md);
    color: var(--ebrs-color-fg);
    text-align: center;
}

.notice-back {
    display: inline-flex;
    align-items: center;
    gap: var(--ebrs-space-xs);
    margin-bottom: var(--ebrs-space-md);
    border-radius: var(--ebrs-radius-xs);
    color: var(--ebrs-color-accent-emphasis);
    font-size: var(--ebrs-font-size-lg);
    font-weight: var(--ebrs-font-weight-medium);
    text-decoration: none;
}

.notice-back:hover {
    color: var(--ebrs-color-accent-emphasis);
    text-decoration: underline;
}

.notice-back:focus-visible {
    outline: none;
    box-shadow: var(--ebrs-focus-ring);
}

.notice-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ebrs-space-sm);
    margin-bottom: var(--ebrs-space-md);
    font-size: var(--ebrs-font-size-md);
    color: var(--ebrs-color-fg);
}

/* Capped at a comfortable reading measure rather than the full page column */
.notice-detail-card {
    max-width: 760px;
    padding: var(--ebrs-space-lg);
    background: var(--ebrs-color-surface);
    border: 1px solid var(--ebrs-color-border-strong);
    border-radius: var(--ebrs-radius-lg);
}

/* Operator-authored rich text, rendered with th:utext. The tag set is bounded by
   NoticeHtmlSanitizer's allowlist — p, br, strong, em, i, u, ul, ol, li, a,
   h3-h5 — so this covers everything that can reach the page. */
.notice-detail-body {
    font-size: var(--ebrs-font-size-lg);
    line-height: var(--ebrs-line-loose);
    color: var(--ebrs-color-fg);
}

.notice-detail-body h3,
.notice-detail-body h4,
.notice-detail-body h5 {
    margin: var(--ebrs-space-lg) 0 var(--ebrs-space-xs);
    font-weight: var(--ebrs-font-weight-semibold);
    line-height: var(--ebrs-line-tight);
    color: var(--ebrs-color-fg-strong);
}

.notice-detail-body h3 { font-size: var(--ebrs-font-size-xl); }
.notice-detail-body h4 { font-size: var(--ebrs-font-size-lg); }
.notice-detail-body h5 { font-size: var(--ebrs-font-size-md); }

.notice-detail-body > :first-child {
    margin-top: 0;
}

.notice-detail-body p {
    margin: 0 0 var(--ebrs-space-sm);
}

.notice-detail-body ul,
.notice-detail-body ol {
    margin: 0 0 var(--ebrs-space-sm);
    padding-left: var(--ebrs-space-lg);
}

.notice-detail-body li {
    margin-bottom: var(--ebrs-space-2xs);
}

.notice-detail-body a {
    color: var(--ebrs-color-accent-emphasis);
    text-decoration: underline;
    /* Author-supplied URLs, so they can be long and unbroken. */
    word-break: break-word;
}

.notice-detail-body + .notice-detail-attachment {
    margin-top: var(--ebrs-space-md);
    padding-top: var(--ebrs-space-md);
    border-top: 1px solid var(--ebrs-color-border);
}

.notice-attachment-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ebrs-space-xs);
    min-height: var(--ebrs-control-height-lg);
    padding: 0 var(--ebrs-space-md);
    border-radius: var(--ebrs-radius-sm);
    background: var(--ebrs-color-accent);
    color: var(--ebrs-color-fg-on-accent);
    font-size: var(--ebrs-font-size-lg);
    font-weight: var(--ebrs-font-weight-semibold);
    text-decoration: none;
    transition: background var(--ebrs-transition-fast);
}

.notice-attachment-btn:hover {
    background: var(--ebrs-color-accent-hover);
    color: var(--ebrs-color-fg-on-accent);
}

.notice-attachment-btn:focus-visible {
    outline: none;
    background: var(--ebrs-color-accent-hover);
    color: var(--ebrs-color-fg-on-accent);
    box-shadow: var(--ebrs-focus-ring);
}

@media (max-width: 768px) {
    /* Dot in a fixed column; title, summary and date stack in the second, so
       everything left-aligns however long the title is. */
    .home-notice-item {
        display: grid;
        grid-template-columns: 8px minmax(0, 1fr);
        column-gap: 12px;
    }

    .home-notice-date {
        grid-column: 2;
        margin-left: 0;
        margin-top: 4px;
    }
}

@media (max-width: 767.98px) {
    .notices-main .home-notice-item {
        padding: var(--ebrs-space-sm) var(--ebrs-space-md);
    }

    .notice-detail-card {
        padding: var(--ebrs-space-md);
    }
}

@media (min-width: 1200px) {
    .notice-detail-card {
        padding: var(--ebrs-space-xl);
    }
}