/* Nomen Hero — Front-end overlay */

/* Media wrapper — contains images, box, label, and mobile info */
.nomen-hero__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

/* Hero image element */
.nomen-hero__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

/* Bounding box */
.nomen-hero__box {
  position: absolute;
  border: 2px solid rgba(196, 122, 80, 0.25);
  pointer-events: none;
  z-index: 0;
  display: none;
}

/* Species label — child of box, locked to chosen corner */
.nomen-hero__label {
  position: absolute;
  background: rgba(26, 23, 20, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(196, 122, 80, 0.3);
  padding: 0.55rem 0.7rem;
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  color: #f4efe8;
  pointer-events: none;
  display: none;
  white-space: nowrap;
}

/* Label corner positions — always 1em from box edge */
.nomen-hero__label--upper-left  { top: 1em; left: 1em; }
.nomen-hero__label--upper-right { top: 1em; right: 1em; }
.nomen-hero__label--lower-left  { bottom: 1em; left: 1em; }
.nomen-hero__label--lower-right { bottom: 1em; right: 1em; }

.nomen-hero__label .common {
  color: #c8bfa8;
  font-size: 0.65rem;
}

.nomen-hero__label .sci {
  font-style: italic;
  font-size: 0.8rem;
  margin-top: 0.1rem;
  font-family: 'Playfair Display', Georgia, serif;
}

.nomen-hero__label .conf {
  margin-top: 0.3rem;
  font-size: 0.55rem;
  color: #b8a060;
}

/* Mobile info — simple overlay, hidden on desktop */
.nomen-hero__info {
  display: none;
}

/* ── Mobile: stacked layout ─────────────────────────────── */
@media (max-width: 768px) {
  .nomen-hero--photo {
    background-image: none !important;
    display: flex !important;
    flex-direction: column;
  }

  .nomen-hero__media {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    flex-shrink: 0;
  }

  /* Hide bounding box + desktop label on mobile */
  .nomen-hero__box {
    display: none !important;
  }

  /* Show mobile info overlay */
  .nomen-hero__info {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 0.6rem 0.85rem;
    z-index: 3;
    max-width: 75%;
  }

  .nomen-hero__info .common {
    font-family: -apple-system, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.3;
  }

  .nomen-hero__info .sci {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 0.75rem;
    opacity: 0.85;
    margin-top: 0.15rem;
  }
}