/* ==========================================================================
   Bird Conservation Nepal — downloadable documents
   --------------------------------------------------------------------------
   The recording forms at /member/friend, and any other page that offers a set
   of files.

   The old page set these as five coloured blocks — one blue, one red, one
   orange, two greens — each carrying nothing but a title. Five arbitrary
   colours side by side read as a decoration rather than as a set of things
   you can do, and none of them said what the form was for, what kind of file
   it was, or how big.

   So each is a row instead: the file type as a plain mark on the left, the
   name and what it records in the middle, and the action at the end. They are
   distinguished by what they say, not by having been given a different
   colour, and the whole row is the target.

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

.downloads {
    border-top: 1px solid var(--rule);
    max-width: var(--measure);
}

.download {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.35rem 1.25rem;
    align-items: start;
    padding: 1.4rem 0.9rem 1.4rem 0.75rem;
    border-bottom: 1px solid var(--rule);
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease-out, border-left-color 0.15s ease-out;
}

@media (min-width: 620px) {
    .download {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 1.5rem;
    }
}

/* The whole row lights up, not just the words — these are the five things the
   page exists to hand over, so each should feel like a target the moment the
   pointer is anywhere near it. */
.download:hover {
    background: var(--paper-hi);
    border-left-color: var(--accent);
}

/* The file type, set as a mark rather than an icon. A reader who has been
   handed a .doc when they expected a .pdf has learnt something they needed to
   know before clicking, not after. */
.download__type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.5rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--blue);
    background: #fff;
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    font-variant-numeric: tabular-nums;
}

.download:hover .download__type { border-color: var(--blue); }

.download__body { display: block; min-width: 0; }

.download__name {
    display: block;
    font-family: var(--display);
    font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
    font-weight: var(--display-weight);
    line-height: 1.25;
    color: var(--ink);
    transition: color 0.15s ease-out;
}

.download:hover .download__name { color: var(--blue); }

.download__about {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-2);
}

.download__meta {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.download__go {
    grid-column: 2;
    justify-self: start;
    margin-top: 0.6rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}

@media (min-width: 620px) {
    .download__go { grid-column: 3; margin-top: 0; }
}

.download__go::after { content: " ↓"; transition: transform 0.15s ease-out; }

/* --- The panels beside them ----------------------------------------------- */

.send-back {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ink-2);
}

.send-back a { color: var(--blue); text-decoration: underline; word-break: break-word; }

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