/* ==========================================================================
   Bird Conservation Nepal — events and announcements
   --------------------------------------------------------------------------
   What is stored under "events" is mostly notices: vacancies, AGM papers,
   calls for proposals, research grants, and the bird walks that are open to
   anyone. Two thirds of the pictures attached to them are scanned A4 pages or
   square posters rather than photographs — several are 2550x3300 scans whose
   whole content is the text printed on them.

   That rules out the photo-led card the species and projects listings use: a
   wide cropped frame would show a strip out of the middle of a page of text.
   So a record is set as an index entry with the date first, and the poster is
   shown whole beside it, contained rather than cropped, at a size that reads
   as a thumbnail of a document.

   Everything else — the page header, pagination, prose, the detail figure and
   the navigation bar — comes from bcn-page.css.

   Plain CSS, no build step:
     $data['page_css'] = array('bcn-page.css', 'bcn-blocks.css', 'bcn-events.css');
   ========================================================================== */

/* --- Groups --------------------------------------------------------------- */

.notice-group + .notice-group { margin-top: clamp(2.5rem, 5vw, 3.75rem); }

.notice-group__title {
    font-family: var(--text);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--ink);
}

/* Anything still running is set apart from the archive below it by a tinted
   ground, so the difference is visible before either heading is read. */
.notice-group--current .notice-list {
    background: var(--paper-hi);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 0 1.25rem;
}

/* --- One notice ----------------------------------------------------------- */

.notice-list > .notice + .notice { border-top: 1px solid var(--rule); }

.notice {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 0 1.15rem;
    padding: 1.5rem 0;
    align-items: start;
}

@media (min-width: 700px) {
    .notice { grid-template-columns: 4rem minmax(0, 1fr) 8rem; gap: 0 1.6rem; }
    /* Without a picture the text takes the space the thumbnail would have had,
       rather than leaving a gap where a reader expects one. */
    .notice--nophoto { grid-template-columns: 4rem minmax(0, 1fr); }
}

/* The date, set as a calendar block. It leads because a reader coming to a
   notice board is scanning for when, not for what. */
.notice__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    background: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.notice-group--current .notice__date { border-color: var(--accent); }

.notice__day {
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: var(--display-weight);
    color: var(--ink);
}

.notice__month {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue);
    margin-top: 0.15rem;
}

.notice__year {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    color: var(--ink-3);
}

.notice__body { min-width: 0; }

.notice__title {
    font-family: var(--display);
    font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
    font-weight: var(--display-weight);
    line-height: 1.25;
    letter-spacing: -0.012em;
    margin: 0 0 0.4rem;
    transition: color 0.15s ease-out;
}

.notice:hover .notice__title { color: var(--blue); }

/* Date range and place, on one line, separated by a rule rather than a comma
   so the two read as separate facts. */
.notice__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.7rem;
    margin: 0 0 0.55rem;
    font-size: 0.8125rem;
    color: var(--ink-3);
}

.notice__when { font-variant-numeric: tabular-nums; }

.notice__where::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.8em;
    margin-right: 0.7rem;
    background: var(--rule-2);
    vertical-align: baseline;
}

.notice__text {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- The thumbnail -------------------------------------------------------- */

/* Contained, not cropped. The images are a mixture of 8:3 banners, squares and
   portrait A4 scans; cover would show the middle band of a scanned notice and
   nothing else. Letterboxing them against the page ground keeps every one
   whole and recognisable, and the fixed height keeps the rows even. */
.notice__frame {
    display: none;
    height: 6.5rem;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: #fff;
    padding: 0.35rem;
    box-sizing: border-box;
}

@media (min-width: 700px) {
    .notice__frame { display: block; }
}

.notice__frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- Status flag ---------------------------------------------------------- */

.notice__flag {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.25em 0.6em;
    border-radius: 2px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
}

.notice__flag--upcoming { background: var(--blue); }

/* --- Single announcement -------------------------------------------------- */

/* Announcement titles run long — several vacancy notices pass 50 characters
   and one AGM notice is longer still — so the detail view carries
   page-head--long, which is defined once in bcn-page.css. */

/* On a detail page the eyebrow is the way back up to the list. */
.page-head__eyebrow a { color: inherit; }
.page-head__eyebrow a:hover { color: var(--blue); }

.event-standfirst {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.85rem;
    margin: 0.9rem 0 0;
    color: var(--ink-2);
}

.event-standfirst .notice__flag { margin-bottom: 0; }

.event-standfirst__when {
    font-family: var(--display);
    font-size: 1.125rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.event-standfirst__where { font-size: 0.9375rem; }

.event-standfirst__where::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin-right: 0.85rem;
    background: var(--rule-2);
}

/* The poster. On four records the scan is the entire announcement, so it is
   shown whole at the width of the column and links through to the file itself
   for anyone who needs to read the small print on it. */
.detail__figure--poster {
    background: #fff;
    border: 1px solid var(--rule);
    padding: 0.75rem;
    box-sizing: border-box;
}

/* The label sits inside the anchor, so the picture and the words under it are
   one target rather than a link with a dead caption beside it. */
.detail__figure--poster a { display: block; }

.detail__figure-open {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue);
    text-align: right;
    transition: color 0.15s ease-out;
}

.detail__figure--poster a:hover .detail__figure-open { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}