/* ==========================================================================
   Bird Conservation Nepal — shared content blocks
   --------------------------------------------------------------------------
   Blocks that appear on more than one page, so they are not duplicated inside
   each page's stylesheet: the Events & Announcements panel that
   view_include_events.php renders on the species, projects, news, shop,
   publication, team and search pages; the two-column page shell those pages
   sit in; and the fact card that holds a species' classification in one side
   column and an announcement's date and place in another.

   The class names below (.event-list, .event-list-header, .event-list-location,
   .event-list-date, .blink_me) are the ones that partial already emits. They
   used to be styled by style.css and the inline block in view_header.php, and
   redesigned pages load neither — so without this file the panel renders
   unstyled.

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

/* --- The panel ------------------------------------------------------------ */

.side-panel {
    background: var(--paper-hi, #f3f6f9);
    border: 1px solid var(--rule, #d2dae2);
    border-radius: 2px;
    padding: 1.4rem;
}

.side-panel + .side-panel { margin-top: 1.25rem; }

.side-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.35rem;
    border-bottom: 2px solid var(--ink, #1d2723);
}

.side-panel__title {
    font-family: var(--text, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink, #1d2723);
    margin: 0;
}

.side-panel__all {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue, #2e6ba6);
    white-space: nowrap;
}

.side-panel__all:hover { color: var(--accent, #3f7052); }

/* --- One event ------------------------------------------------------------ */

.event-list {
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--rule, #d2dae2);
}

.event-list:last-child { border-bottom: none; padding-bottom: 0; }

.event-list a { display: block; text-decoration: none; color: inherit; }

.event-list-header {
    font-family: var(--display, Georgia, serif);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink, #1d2723);
    margin-bottom: 0.45rem;
    transition: color 0.15s ease-out;
}

.event-list a:hover .event-list-header { color: var(--blue, #2e6ba6); }

/* The partial marks these up as d-block, which is a Bootstrap class. Only the
   legacy pages load Bootstrap, so on every redesigned page the title, the
   place and the date ran together on one line with the icons stranded in the
   middle of the text. The intent the markup states is honoured here instead. */
.event-list-header,
.event-list-location,
.event-list-date { display: block; }

.event-list-location,
.event-list-date {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ink-3, #8b948d);
}

.event-list-date { font-variant-numeric: tabular-nums; }

/* The partial ships small PNG icons; they are held to a modest size and
   softened so they read as marks rather than pictures. */
.event-list-icon > img {
    display: inline-block;
    width: 12px;
    height: auto;
    margin-right: 0.45rem;
    opacity: 0.55;
    vertical-align: baseline;
}

/* Priority events carry .blink_me from the partial. The whole item blinks, as
   it did originally — a colour shift alone was not noticeable enough. It stops
   just short of fully transparent so the text stays readable at the trough,
   and the title holds the accent colour so a flagged item is still identifiable
   when the animation is paused. */
.blink_me { animation: bcn-blink 1.7s ease-in-out infinite; }

.blink_me .event-list-header { color: var(--accent, #3f7052); }

@keyframes bcn-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.18; }
}

@media (prefers-reduced-motion: reduce) {
    .blink_me { animation: none; }
}

/* --- Page shell with a side column ---------------------------------------- */

.with-side {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
}

@media (min-width: 980px) {
    .with-side { grid-template-columns: minmax(0, 1fr) 300px; }
    .with-side__aside { position: sticky; top: 5.5rem; }
}

/* --- Fact card ------------------------------------------------------------ */

/* A short table of terms in the side column: the classification of a species,
   the date and place of an announcement. It began life in the species
   stylesheet as .taxon-card, which meant the events pages — which do not load
   that file — rendered their details as a bare browser default <dl>, indented
   and unstyled. It is a shared block, so it lives here.

   The terms are set small and upright above their values rather than beside
   them: a 300px column is not wide enough for two columns of text, and the
   values run long ("Nepal Art Council, Ground Floor, Babarmahal, Kathmandu"). */

.fact-card {
    background: var(--paper-hi, #f3f6f9);
    border: 1px solid var(--rule, #d2dae2);
    border-radius: 2px;
    padding: 1.5rem;
}

.fact-card h2 {
    font-family: var(--text, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3, #8b948d);
    margin: 0 0 1rem;
}

.fact-card dl { margin: 0; display: grid; gap: 0.7rem; }

.fact-card dt {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3, #8b948d);
}

.fact-card dd {
    margin: 0.1rem 0 0;
    font-size: 0.9375rem;
    color: var(--ink, #1d2723);
}

.fact-card + .fact-card { margin-top: 1.25rem; }
.fact-card + .side-panel { margin-top: 1.25rem; }

/* --- Page shell with a rail on the left ----------------------------------- */

/* The mirror of .with-side, for a page whose side column is navigation rather
   than supporting material. News uses it: the two sections belong at the left
   edge, in front of the stories, because choosing one is the first thing a
   reader does on that page.

   The order is set rather than left to the source, so the rail can be written
   first in the markup — where it belongs for a keyboard or a screen reader —
   and still stack above the stories on a narrow screen. */

.with-rail {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
}

@media (min-width: 980px) {
    .with-rail { grid-template-columns: 240px minmax(0, 1fr); }
    .with-rail__rail { position: sticky; top: 5.5rem; }
}

/* --- Sponsor panel -------------------------------------------------------- */

/* The advertisement from tbl_settings, given a label and a border so it reads
   as bought space rather than as part of the page. It began in the events
   stylesheet, which meant the publication pages — which do not load that file
   — rendered it as a bare caption above an unframed image. Two pages use it,
   so it belongs here. */

.sponsor {
    border: 1px solid var(--rule, #d2dae2);
    border-radius: 2px;
    padding: 1rem;
    background: var(--paper-hi, #f3f6f9);
}

.fact-card + .sponsor,
.side-panel + .sponsor { margin-top: 1.25rem; }

.sponsor__label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3, #8b948d);
    margin: 0 0 0.75rem;
}

.sponsor img { width: 100%; height: auto; border-radius: 2px; }