/* ==========================================================================
   Bird Conservation Nepal — publications
   --------------------------------------------------------------------------
   A shelf of book covers. Every one of the ninety cover images is on disk and
   every one is portrait, so unlike the notice board at /event there is no
   mixture to accommodate: one proportion holds all of them and the rows come
   out even.

   The old page printed each cover at its natural size — they run from small
   thumbnails to full-page scans — so the rows were ragged and the button sat
   at a different height on every card.

   The section rail is the same block as the news page, in bcn-news.css; the
   rules for it are repeated here rather than making one page load the other's
   stylesheet.

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

/* --- The section rail ----------------------------------------------------- */

.rail { margin-bottom: 1.75rem; }

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

.rail__list { list-style: none; margin: 0; padding: 0; }

.rail__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-left: 3px solid transparent;
    border-radius: 0 2px 2px 0;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out,
                color 0.15s ease-out;
}

.rail__item:hover { background: var(--paper-hi); border-left-color: var(--rule-2); }

.rail__item.is-current { background: var(--paper-hi); border-left-color: var(--accent); }

.rail__name { font-family: var(--display); font-size: 1.0625rem; line-height: 1.2; }

.rail__item.is-current .rail__name { color: var(--ink); font-weight: 500; }
.rail__item:not(.is-current) .rail__name { color: var(--ink-2); }
.rail__item:hover .rail__name { color: var(--blue); }

.rail__count {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.rail__item.is-current .rail__count { color: var(--accent); }

/* --- The shelf ------------------------------------------------------------ */

/* The cards stretch to the height of their row rather than sitting at their
   own natural height, so the action at the foot of each lands on one line
   across the row. With align-items:start the margin-top:auto below has nothing
   to push against and every button sat at a different height — which is the
   fault the old page had. */
.shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
}

.shelf--compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.book { display: flex; flex-direction: column; height: 100%; }

.book__link { display: flex; flex-direction: column; }

/* Book covers, filling one frame edge to edge so every cover on the shelf is
   the same size and every title starts on the same line.

   2:3, because that is what the covers actually are: all ninety are portrait
   and they sit between 0.607 and 0.800 wide-to-tall, with both the median and
   the commonest value exactly 0.667. Fitting them inside the frame instead
   left each one a different size — the frame matched but the artwork did not,
   and the artwork is what the eye reads as the box.

   The crop that costs is small because the spread is so tight: 58 of the 90
   fill 2:3 exactly, and only two are wider than 0.8. */
.book__cover {
    aspect-ratio: 2 / 3;
    /* As on the shop tiles: a flex item shrinks to fit its card by default,
       which would shave the foot off a cover whenever another card in the row
       ran to a longer title. */
    flex: 0 0 auto;
    min-height: 0;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 2px;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(29, 39, 35, 0.06);
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
}

.book__link:hover .book__cover {
    box-shadow: 0 6px 18px rgba(29, 39, 35, 0.14);
    transform: translateY(-2px);
}

/* The top of a cover carries the title, so a cover that has to lose height
   loses it from the foot rather than off the top. */
.book__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.book__title {
    font-family: var(--display);
    font-size: 0.9375rem;
    font-weight: var(--display-weight);
    line-height: 1.3;
    margin: 0.85rem 0 0;
    color: var(--ink);
    transition: color 0.15s ease-out;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book__link:hover .book__title { color: var(--blue); }

.book__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.6rem;
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    color: var(--ink-3);
}

.book__missing { color: var(--alert); font-weight: 700; }

/* The action sits at the foot of the card, pushed there so it lands on the
   same line across a row whatever length the titles above it run to. */
.book__action {
    margin-top: auto;
    padding-top: 0.6rem;
    align-self: flex-start;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.book__action::after { content: "→"; transition: transform 0.15s ease-out; }
.book__action--download::after { content: "↓"; }
.book__action:hover { color: var(--accent); }
.book__action:hover::after { transform: translateX(2px); }
.book__action--download:hover::after { transform: translateY(2px); }

/* --- One title ------------------------------------------------------------ */


.page-head__eyebrow a { color: inherit; }
.page-head__eyebrow a:hover { color: var(--blue); }

/* The cover beside the facts. Run full width, a portrait cover pushed the
   access details and the button below the fold. */
.title-sheet {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
    max-width: var(--measure);
}

@media (min-width: 620px) {
    .title-sheet { grid-template-columns: 220px minmax(0, 1fr); }
}

.title-sheet__cover {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 0.6rem;
    box-shadow: 0 2px 10px rgba(29, 39, 35, 0.08);
}

.title-sheet__cover img { width: 100%; height: auto; }

.title-sheet__list { margin: 0 0 1.5rem; display: grid; gap: 0.85rem; }

.title-sheet__list dt {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.title-sheet__list dd { margin: 0.1rem 0 0; font-size: 0.9375rem; }

.title-sheet__action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85em 1.6em;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 2px;
    transition: background-color 0.18s ease-out, color 0.18s ease-out;
}

.title-sheet__action:hover { background: transparent; color: var(--accent); }

.title-sheet__unavailable {
    margin: 0;
    padding: 0.9rem 1.1rem;
    border-left: 3px solid var(--alert);
    background: var(--paper-hi);
    font-size: 0.875rem;
    color: var(--ink-2);
}

.title-sheet__unavailable a { color: var(--blue); text-decoration: underline; }

/* --- More from this section ----------------------------------------------- */

.also {
    max-width: var(--measure);
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule);
}

.also__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;
}

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