/* ==========================================================================
   Bird Conservation Nepal — species pages
   --------------------------------------------------------------------------
   Only what is particular to a species record: the Nepali local name set
   beside the English one, the binomial and family, and the single-species
   layout. Everything else comes from bcn-page.css.

   Plain CSS, no build step.
   ========================================================================== */

/* The two names, with a rule running between them, the way a guide sets an
   index entry. */
.entry__local {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1rem, 1.7vw, 1.25rem);
    color: var(--accent);
    white-space: nowrap;
}

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

.entry__binomial { font-style: italic; }

.entry__family {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.6875rem;
    align-self: center;
}

/* ==========================================================================
   SINGLE SPECIES
   ========================================================================== */

/* The species detail page follows the same shape as a project: title at the
   head, the photograph shown whole inside the column, then the text. The
   previous full-bleed hero cropped a 1600x600 photograph to a fixed height,
   which cut the bird itself out of frame on several species. */

.species-line {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
    color: var(--accent);
    margin: 0.5rem 0 0;
}

.species-line .is-latin { color: var(--ink-3); }

/* The species photograph is framed here exactly as it is on the listing card:
   16:10, cropped to fill. One uploaded file therefore looks the same in both
   places, and a picture prepared to sit well on the card sits well on the
   species page too.

   Before this the card cropped the file to 16:10 while this page showed it
   whole at whatever proportion it happened to be — 8:3 for the current set —
   so an image cropped to suit one was wrong in the other, and there was no
   single shape to prepare an upload to.

   Projects and news keep the uncropped figure from bcn-page.css. Several of
   those pictures are composite banners with partner logos placed on them, and
   a crop cuts the logos in half. Species pictures are photographs, so there is
   nothing on them that a crop would destroy. */
.detail__figure { aspect-ratio: 16 / 10; }

.detail__figure img { height: 100%; object-fit: cover; }

/* Taxonomy, set as a table of terms the way a guide prints it. The card
   itself is .fact-card in bcn-blocks.css; only the latin setting of the
   values is particular to a species. */
.fact-card dd.is-latin { font-family: var(--display); font-style: italic; }

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