/* =============================================================================
   LAYER 4 — SPECIES (Template A)
   Serves: /more/ribe/{x}/, /slatke-vode/ribe/{x}/ — 13 live pages, verified 2026-08-07
   from the two index pages (NOT inferred from the Tier-1 traffic table, which lists the
   top thirty by clicks and therefore silently omits šarag and lignja).

   Everything reusable — Ukratko, pills, buy-box, tables, FAQ — is already in layer 3.
   Only the four things below are unique to a species page.
   ============================================================================= */

/* --- H1 Latin subtitle -----------------------------------------------------
   Rendered by inc/template-species.php from the registry, not typed into content, so
   nineteen pages cannot drift into nineteen spellings of the same binomial.
   --------------------------------------------------------------------------- */
.sr-latin {
  display: block;
  font-style: italic;
  color: var(--muted);
  font-size: var(--fs-h3);
  font-family: var(--f-body);
  font-weight: 400;
  margin-top: calc(var(--s1) * -1);
  margin-bottom: var(--s4);
}

/* --- Propisi strip ---------------------------------------------------------
   The lovostaj fact repeated as a standalone strip directly under Ukratko, so both
   assistants and skimming readers get the regulatory answer on the first screen without
   scrolling to the full Propisi section.

   ⚠ THE VALUES ARE CONTENT, NOT TEMPLATE, AND DELIBERATELY SO.
   Putting lovostaj dates into PHP would create a second source of regulatory truth on
   thirteen pages, and the annual February re-verify would have to find both. This project
   has already been burned by a regulatory correction that was written and never applied.
   The strip is a Gutenberg pattern the editor fills; the flagship table stays canonical
   and is always one click away.
   --------------------------------------------------------------------------- */
.sr-propisi-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-left: 4px solid var(--sea);
  border-radius: var(--r-card);
  padding: var(--s3) var(--s4);
  margin-block: var(--s5);
  background: var(--surface);
}
.sr-propisi-strip__fact { font-weight: 600; }
.sr-propisi-strip__link { margin-left: auto; font-size: var(--fs-small); }
@media (max-width: 768px) {
  .sr-propisi-strip__link { margin-left: 0; width: 100%; }
}

/* --- Contributor byline ----------------------------------------------------
   The old site has at least five real authors. Preserving the credit is an E-E-A-T
   asset, so the byline is prominent rather than a footer afterthought. Rendered from
   the WordPress post author, which is authoritative on the migrated data — never from
   a hardcoded list, because a wrong author attribution is worse than none.
   --------------------------------------------------------------------------- */
.sr-byline {
  display: flex; align-items: center; gap: var(--s3);
  border-top: 1px solid var(--border);
  padding-top: var(--s4);
  margin-top: var(--s6);
  font-size: 15px;
}
.sr-byline__avatar { border-radius: var(--r-pill); flex: none; }
.sr-byline__label  { color: var(--muted); }
.sr-byline__name   { font-weight: 600; }

/* --- Povezano --------------------------------------------------------------- */
.sr-related { margin-top: var(--s6); }
.sr-related__list { list-style: none; margin: var(--s3) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s2); }

/* --- Lure comparison table -------------------------------------------------
   Four columns: Tip varalice | Kada je najbolja | Veličina/masa | Dubina.
   Column 1 is the card title (layer 3 handles that). The three remaining cells are all
   short values, so unlike the regs table they pair up cleanly at 50/50 with the last
   taking the full row.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .sr-ctx-species .sr-table td:nth-child(2) { width: 100%; }
  .sr-ctx-species .sr-table td:nth-child(3) { width: 50%; }
  .sr-ctx-species .sr-table td:nth-child(4) { width: 50%; }
  .sr-ctx-species .sr-table td[data-wide]   { width: 100%; }
}