/* Notices: notices.html, notice_detail.html. Composes tokens/components from ../sewainternational.css. */

/* ======================================================================
   Listing — a dated register of official notices
   ====================================================================== */

.notice-register__count {
    margin: 0 0 var(--space-4);
    font-size: var(--text-small);
    color: var(--ink-muted);
}

/* Column headings only exist where there are columns */
.notice-register__head { display: none; }

.notice-register {
    border-top: 1px solid var(--line);
}

.notice-register > li { border-bottom: 1px solid var(--line); }

.notice-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding-block: var(--space-5);
    transition: background-color var(--dur) var(--ease);
}

/* Date: one line on phones, a stacked day / month column on wider screens */
.notice-row__date {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--ink-muted);
    font-size: var(--text-small);
    line-height: 1.4;
}

.notice-row__day {
    font-weight: 600;
    color: var(--navy-800);
}

.notice-row__body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

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

.notice-row__text > .tag { margin-bottom: var(--space-2); }

.notice-row__title {
    margin: 0;
    font-size: 1.1875rem;
    line-height: 1.35;
    overflow-wrap: break-word;
}

.notice-row__link {
    color: var(--navy-800);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* The whole row is the link target */
.notice-row__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.notice-row:hover .notice-row__link {
    color: var(--navy-700);
    text-decoration-color: currentColor;
}

/* Ring the whole row where :has() exists; elsewhere the link keeps the global focus ring */
@supports selector(:has(*)) {
    .notice-row__link:focus-visible { outline: none; }

    .notice-row:has(.notice-row__link:focus-visible) {
        outline: 2px solid var(--navy-800);
        outline-offset: 3px;
        border-radius: var(--radius-sm);
    }
}

.notice-row__summary {
    margin: var(--space-2) 0 0;
    max-width: var(--measure);
    color: var(--ink-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notice-row__thumb {
    flex: none;
    width: 88px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--navy-100);
}

/* Document column */
.notice-row__doc { display: flex; }

.notice-row__pdf {
    position: relative;
    z-index: 1;               /* sits above the stretched row link */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding-inline: var(--space-3);
    margin-inline-start: calc(var(--space-3) * -1);
    border-radius: var(--radius-btn);
    color: var(--navy-800);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
}

.notice-row__pdf .fa-file-pdf { color: var(--urgent); font-size: 1.0625rem; }

.notice-row__pdf:hover {
    background: var(--navy-50);
    text-decoration-color: currentColor;
}

/* A dash in the document column reads as "none" in a table; on a phone it is noise */
.notice-row__nodoc { display: none; }

@media (hover: hover) {
    .notice-row:hover { background: var(--navy-50); }
}

@media (min-width: 720px) {
    .notice-register__head,
    .notice-row {
        grid-template-columns: 7.5rem minmax(0, 1fr) 7rem;
        column-gap: var(--space-6);
    }

    /* Text aligns with the h1; the 16px inset is only for the hover field, which bleeds into the gutter */
    .notice-register__head,
    .notice-row { margin-inline: calc(var(--space-4) * -1); }

    .notice-register__head {
        display: grid;
        padding: 0 var(--space-4) var(--space-2);
        font-size: var(--text-small);
        font-weight: 600;
        color: var(--ink-subtle);
    }

    .notice-register__count { margin-bottom: var(--space-6); }

    .notice-row {
        align-items: start;
        padding: var(--space-5) var(--space-4);
    }

    .notice-row__date {
        flex-direction: column;
        gap: 0;
        padding-top: 2px;
    }

    .notice-row__day {
        font-family: var(--font-display);
        font-size: 2rem;
        line-height: 1;
        letter-spacing: var(--tracking-display);
    }

    .notice-row__month { margin-top: var(--space-1); }

    .notice-row__thumb { width: 112px; }

    .notice-row__doc { padding-top: 2px; }
    .notice-row__pdf { margin-top: -10px; }

    .notice-row__nodoc {
        display: block;
        color: var(--ink-subtle);
    }
}

/* ======================================================================
   Detail
   ====================================================================== */

.notice-hero h1 { overflow-wrap: break-word; }

.notice-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-4) 0 0;
    font-size: var(--text-small);
    color: var(--ink-muted);
}

.notice-hero .page-hero__actions { margin-top: var(--space-5); }

.notice-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
}

.notice-page__main { min-width: 0; }

/* The description is the notice itself: give it reading weight */
.notice-page__text {
    font-size: var(--text-lede);
    line-height: 1.6;
}

.notice-page__text + .notice-doc { margin-top: var(--space-6); }

.notice-page__help {
    margin: var(--space-6) 0 0;
    color: var(--ink-muted);
}

/* Attached PDF: a file row with its actions; the inline preview opens on request (768px and up) */
.notice-page__text + .notice-doc { margin-top: var(--space-6); }

.notice-doc {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.notice-doc__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
}

.notice-doc__name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    max-width: 100%;
    font-size: var(--text-small);
    color: var(--ink-muted);
}

.notice-doc__name > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-doc__name .fa-file-pdf { flex: none; color: var(--urgent); font-size: 1rem; }

.notice-doc__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin-inline-start: calc(var(--space-3) * -1);  /* optical: the link's padding, not its text, meets the edge */
}

/* Phones hand PDFs to their own viewer; an inline frame there is cramped or blank */
.notice-doc .notice-doc__toggle { display: none; }

.notice-doc__frame {
    height: clamp(560px, 78vh, 960px);
    border-top: 1px solid var(--line);
    background: var(--navy-50);
}

.notice-doc__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (min-width: 768px) {
    .notice-page__text + .notice-doc { margin-top: var(--space-7); }

    .notice-doc__actions { margin-inline-start: 0; }

    .notice-doc .notice-doc__toggle { display: inline-flex; }
}

/* Related notices */
.notice-page__aside {
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.notice-page__aside-title {
    margin-bottom: var(--space-3);
    font-size: 1.5rem;
}

.notice-related > li + li { border-top: 1px solid var(--line); }

.notice-related__link {
    display: block;
    padding-block: var(--space-4);
    color: inherit;
}

.notice-related__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    font-size: var(--text-small);
    color: var(--ink-muted);
}

.notice-related__title {
    display: block;
    font-weight: 600;
    line-height: 1.4;
    color: var(--navy-800);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
    overflow-wrap: break-word;
}

.notice-related__link:hover .notice-related__title {
    color: var(--navy-700);
    text-decoration-color: currentColor;
}

.notice-page__all {
    min-height: 44px;
    margin-top: var(--space-2);
}

@media (min-width: 1000px) {
    .notice-page__grid {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: var(--space-8);
        align-items: start;
    }

    .notice-page__aside {
        position: sticky;
        top: calc(var(--header-h) + var(--space-6));
        padding-top: 0;
        padding-left: var(--space-6);
        border-top: 0;
        border-left: 1px solid var(--line);
    }
}