/* ======================================================================
   LEPIBASE — ATLAS DRUHOV
   Visual System 1.0
   ====================================================================== */


/* ======================================================================
   PAGE
   ====================================================================== */

.atlas-page {
  padding-bottom: var(--lp-space-20);
}


/* ======================================================================
   HERO / INTRO
   ====================================================================== */

.atlas-intro {
  display: grid;
  min-height: clamp(23rem, 32vw, 30rem);
  padding-block:
    var(--lp-space-10)
    var(--lp-space-12);

  grid-template-columns:
    minmax(22rem, 0.86fr)
    minmax(30rem, 1.14fr);

  align-items: center;
  gap: clamp(2.5rem, 6vw, 7rem);
}

.atlas-intro__copy {
  position: relative;
  z-index: 2;

  display: grid;
  max-width: 43rem;

  align-content: center;
  justify-items: start;
}

.atlas-intro__title {
  max-width: 11ch;
  margin-top: var(--lp-space-3);

  font-size: clamp(3.15rem, 4.6vw, 4.6rem);
  line-height: 0.98;
}

.atlas-intro__lead {
  max-width: 35rem;
  margin-top: var(--lp-space-4);
}


/* ======================================================================
   HERO VISUAL
   ====================================================================== */

.atlas-intro__visual {
  display: grid;
  min-width: 0;
  min-height: clamp(18rem, 25vw, 24rem);

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: var(--lp-space-3);
}
.atlas-intro__photo-slot {
  min-width: 0;
  overflow: hidden;

  border-radius: var(--lp-radius-panel);

  background: var(--lp-color-surface-soft);
}

.atlas-intro__photo-slot img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* ======================================================================
   SEARCH
   ====================================================================== */

.atlas-search {
  position: relative;

  width: min(100%, 44rem);
  margin-top: var(--lp-space-6);
}

.atlas-search__form {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: start;
  gap: var(--lp-space-3);
}

.atlas-search__input-wrap {
  position: relative;
}

.atlas-search__input {
  min-height: 3rem;
}

.atlas-search__submit {
  min-height: 3rem;
  white-space: nowrap;
}

.species-search__loader {
  position: absolute;
  top: 50%;
  right: var(--lp-space-3);

  transform: translateY(-50%);

  color: var(--lp-color-text-muted);
  font-size: var(--lp-type-label-size);
}

.atlas-search__advanced {
  display: inline-flex;
  margin-top: var(--lp-space-3);

  align-items: center;
  gap: var(--lp-space-2);

  font-size: var(--lp-type-small-size);
}


/* autocomplete */

.species-search__results {
  position: absolute;
  z-index: var(--lp-z-menu);

  top: calc(3rem + var(--lp-space-2));
  right: calc(9rem + var(--lp-space-3));
  left: 0;

  overflow-y: auto;
  max-height: 24rem;

  border: 1px solid var(--lp-color-border);
  border-radius: var(--lp-radius-panel);

  background: var(--lp-color-surface-v1);
  box-shadow: var(--lp-shadow-menu);
}

.species-search-result {
  display: grid;
  width: 100%;
  padding:
    var(--lp-space-3)
    var(--lp-space-4);

  border: 0;
  border-bottom: 1px solid var(--lp-color-border);

  background: var(--lp-color-surface-v1);
  color: inherit;

  cursor: pointer;
  gap: var(--lp-space-1);

  text-align: left;
}

.species-search-result:last-child {
  border-bottom: 0;
}

.species-search-result:hover,
.species-search-result.is-active {
  background: var(--lp-color-surface-soft);
}

.species-search-result__latin {
  color: var(--lp-color-identity);

  font-family: var(--lp-font-display);
  font-style: italic;
  font-weight: 650;
}

.species-search-result__sk {
  color: var(--lp-color-text-muted);
  font-size: var(--lp-type-small-size);
}

.species-search__status {
  grid-column: 1 / -1;

  min-height: 0;
  margin: 0;
}


/* ======================================================================
   TAXONOMY INTRO
   ====================================================================== */

.atlas-taxonomy {
  padding-top: var(--lp-space-12);
}

.atlas-taxonomy__header {
  display: flex;
  margin-bottom: var(--lp-space-10);

  align-items: end;
  justify-content: space-between;
  gap: var(--lp-space-8);
}

.atlas-taxonomy__title {
  margin-top: var(--lp-space-2);
}

.atlas-taxonomy__summary {
  padding-bottom: 0.25rem;

  white-space: nowrap;
}


/* ======================================================================
   DIRECTORY
   ====================================================================== */

.atlas-taxonomy-directory {
  display: grid;
  gap: var(--lp-space-16);
}


/* ======================================================================
   MAIN TAXONOMIC SECTIONS
   ====================================================================== */

.atlas-taxonomy-section {
  min-width: 0;
}

.atlas-taxonomy-section + .atlas-taxonomy-section {
  padding-top: var(--lp-space-12);

  border-top: 1px solid var(--lp-color-border);
}

.atlas-taxonomy-section__header {
  display: flex;
  margin-bottom: var(--lp-space-6);

  align-items: end;
  justify-content: space-between;
  gap: var(--lp-space-8);
}

.atlas-taxonomy-section__identity {
  min-width: 0;
}

.atlas-taxonomy-section__title {
  margin: 0;

  color: var(--lp-color-identity);

  font-family: var(--lp-font-display);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 650;
  line-height: 1.05;
}

.atlas-taxonomy-section__latin {
  margin-top: var(--lp-space-1);

  color: var(--lp-color-text-secondary);

  font-family: var(--lp-font-display);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.35;
}

.atlas-taxonomy-section__meta {
  margin-top: var(--lp-space-2);

  color: var(--lp-color-text-muted);

  font-size: var(--lp-type-small-size);
  line-height: var(--lp-type-small-line);
}


/* ======================================================================
   DENNÉ MOTÝLE
   ====================================================================== */

.atlas-taxonomy-section--day {
  position: relative;

  padding:
    var(--lp-space-6)
    0
    var(--lp-space-4);
}

.atlas-day-superfamilies {
  display: grid;
}

.atlas-superfamily--day {
  display: grid;

  grid-template-columns:
    minmax(17rem, 0.74fr)
    minmax(0, 1.26fr);

  align-items: stretch;

  border-block:
    1px solid var(--lp-color-border);
}

.atlas-superfamily--day .atlas-superfamily__header {
  min-height: 12rem;

  border-bottom: 0;
  border-right: 1px solid var(--lp-color-border);
}


/* ======================================================================
   NOČNÉ MOTÝLE
   ====================================================================== */

.atlas-taxonomy-section--night {
  padding-bottom: var(--lp-space-8);
}

.atlas-night-superfamilies {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  align-items: start;
  column-gap: var(--lp-space-10);
}

.atlas-night-superfamilies__column {
  display: grid;
  min-width: 0;

  align-content: start;
  gap: 0;
}
/* ======================================================================
   SUPERFAMILY
   ====================================================================== */

.atlas-superfamily {
  min-width: 0;
}

.atlas-superfamily--night {
  display: grid;
  min-width: 0;

grid-template-columns:
  minmax(19rem, 1.18fr)
  minmax(13rem, 0.82fr);

  align-items: start;
  column-gap: var(--lp-space-6);

  border-top: 1px solid var(--lp-color-border);
}

.atlas-superfamily__header {
  display: grid;
  min-height: 7rem;
  padding:
    var(--lp-space-4)
    var(--lp-space-4)
    var(--lp-space-3);

  grid-template-columns:
    minmax(0, 1fr)
    minmax(5.5rem, 7rem);

  align-items: center;
  gap: var(--lp-space-4);

  border-bottom: 1px solid var(--lp-color-border);
}

.atlas-superfamily--night .atlas-superfamily__header {
  display: grid;
  min-height: 0;
  padding:
    var(--lp-space-4)
    0;

  grid-template-columns:
    4rem
    minmax(0, 1fr);

  align-items: start;
  gap: var(--lp-space-4);

  border-bottom: 0;
}

.atlas-superfamily--night .atlas-superfamily__visual {
  grid-column: 1;
  grid-row: 1;
}

.atlas-superfamily--night .atlas-superfamily__identity {
  grid-column: 2;
  grid-row: 1;
}
.atlas-superfamily__identity {
  min-width: 0;
}

.atlas-superfamily__title {
  margin: 0;

  color: var(--lp-color-identity);

  font-family: var(--lp-font-display);
  font-size: clamp(1.35rem, 1.7vw, 1.75rem);
  font-weight: 650;
  line-height: 1.15;

 overflow-wrap: normal;
word-break: normal;
hyphens: none;
}

.atlas-superfamily__meta {
  margin-top: var(--lp-space-2);

  color: var(--lp-color-text-muted);

  font-size: var(--lp-type-label-size);
  line-height: var(--lp-type-label-line);
}


/* ======================================================================
   REPRESENTATIVE ILLUSTRATION
   ====================================================================== */

.atlas-superfamily__visual {
  display: grid;
  min-width: 0;
  height: 5rem;

  place-items: center;
}

.atlas-superfamily__visual img {
  display: block;
width: auto;
max-width: 100%;
height: 100%;
max-height: 5rem;

  object-fit: contain;
  object-position: center;
}

.atlas-superfamily--day .atlas-superfamily__visual {
  height: 8.5rem;
}

.atlas-superfamily--night .atlas-superfamily__visual {
  width: auto;
  height: 4rem;
  align-self: start;
}

.atlas-superfamily--night .atlas-superfamily__visual img {
  max-height: 4rem;
}


.atlas-superfamily--day .atlas-family-row__visual {
  display: grid;
  width: 5rem;
  height: 5rem;
  min-width: 0;

  place-items: center;
}

.atlas-superfamily--day .atlas-family-row__visual img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 5rem;

  object-fit: contain;
  object-position: center;
}
/* ======================================================================
   FAMILY DIRECTORY
   ====================================================================== */

.atlas-superfamily__families {
  display: grid;
}

.atlas-family-row {
  display: grid;
  min-height: 3rem;
  padding:
    0
    var(--lp-space-4);

  grid-template-columns:
    minmax(0, 1fr)
    auto
    auto;

  align-items: center;
  gap: var(--lp-space-3);

  border-bottom: 1px solid var(--lp-color-border);

  color: var(--lp-color-text-primary);

  text-decoration: none;

  transition:
    background-color var(--lp-duration-fast) var(--lp-ease),
    color var(--lp-duration-fast) var(--lp-ease);
}

.atlas-superfamily--night .atlas-family-row {
  min-height: 2.75rem;
  padding-inline: 0;
}

.atlas-family-row:last-child {
  border-bottom: 0;
}

.atlas-family-row:hover {
  background: var(--lp-color-surface-soft);

  color: var(--lp-color-link);
}

.atlas-family-row__name {
  min-width: 0;

  font-weight: 700;

  overflow-wrap: anywhere;
}

.atlas-superfamily--day .atlas-family-row__identity {
  display: grid;
  min-width: 0;

  align-content: center;
}

.atlas-superfamily--day .atlas-family-row__name-sk {
  display: block;

  color: var(--lp-color-text-muted);

  font-size: var(--lp-type-small-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--lp-type-small-line);
}

.atlas-family-row__count {
  min-width: 2.25rem;

  color: var(--lp-color-text-muted);

  font-size: var(--lp-type-small-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;

  text-align: right;
}

.atlas-family-row__arrow {
  color: var(--lp-color-link);

  font-size: 0.9rem;
  line-height: 1;

  opacity: 0;

  transform: translateX(-0.2rem);

  transition:
    opacity var(--lp-duration-fast) var(--lp-ease),
    transform var(--lp-duration-fast) var(--lp-ease);
}

.atlas-family-row:hover .atlas-family-row__arrow {
  opacity: 1;
  transform: translateX(0);
}


/* ======================================================================
   DENNÉ — FAMILY GRID
   ====================================================================== */

.atlas-superfamily--day .atlas-superfamily__families {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  align-content: center;
}

.atlas-superfamily--day .atlas-superfamily__header {
  grid-template-columns: 1fr;
}

.atlas-superfamily--day .atlas-family-row {
  grid-template-columns:
    5rem
    minmax(0, 1fr)
    auto
    auto;
}

.atlas-superfamily--day .atlas-family-row:nth-child(odd) {
  border-right: 1px solid var(--lp-color-border);
}

@media (min-width: 44.01rem) {
  .atlas-superfamily--day .atlas-family-row:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

 }
/* ======================================================================
   ACCESSIBILITY / FOCUS
   ====================================================================== */

.atlas-family-row:focus-visible {
  position: relative;
  z-index: 1;
}


/* ======================================================================
   RESPONSIVE
   ====================================================================== */

@media (max-width: 72rem) {

  .atlas-intro {
    grid-template-columns:
      minmax(20rem, 0.9fr)
      minmax(24rem, 1.1fr);

    gap: var(--lp-space-10);
  }

  .atlas-night-superfamilies {
    column-gap: var(--lp-space-8);
  }

  .atlas-superfamily__header {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(6rem, 8rem);
  }

  .atlas-superfamily--day {
    grid-template-columns:
      minmax(15rem, 0.8fr)
      minmax(0, 1.2fr);
  }
}


@media (max-width: 56rem) {

  .atlas-intro {
    min-height: auto;

    grid-template-columns: 1fr;
  }

  .atlas-intro__copy {
    max-width: 46rem;
  }

  .atlas-intro__title {
    max-width: 14ch;
  }

  .atlas-intro__visual {
    min-height: 19rem;
  }

  .atlas-taxonomy__header,
  .atlas-taxonomy-section__header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--lp-space-3);
  }

  .atlas-taxonomy__summary {
    white-space: normal;
  }

  .atlas-superfamily--day {
    grid-template-columns: 1fr;
  }

  .atlas-superfamily--day .atlas-superfamily__header {
    border-right: 0;
    border-bottom: 1px solid var(--lp-color-border);
  }

  .atlas-night-superfamilies {
    grid-template-columns: 1fr;
  }

  .atlas-superfamily--night {
grid-template-columns:
  minmax(17rem, 1.05fr)
  minmax(0, 0.95fr);
}
}


@media (max-width: 44rem) {

  .atlas-page {
    padding-bottom: var(--lp-space-12);
  }

  .atlas-intro {
    padding-block:
      var(--lp-space-8)
      var(--lp-space-10);
  }

  .atlas-intro__title {
    font-size: clamp(2.75rem, 13vw, 3.8rem);
  }

  .atlas-search__form {
    grid-template-columns: 1fr;
  }

  .atlas-search__submit {
    width: 100%;
  }

  .species-search__results {
    right: 0;
  }

  .atlas-taxonomy {
    padding-top: var(--lp-space-4);
  }

  .atlas-taxonomy-directory {
    gap: var(--lp-space-12);
  }

  .atlas-taxonomy-section + .atlas-taxonomy-section {
    padding-top: var(--lp-space-10);
  }

  .atlas-taxonomy-section__title {
    font-size: clamp(1.85rem, 9vw, 2.5rem);
  }

  .atlas-superfamily__header {
    min-height: auto;
    padding-block: var(--lp-space-4);

    grid-template-columns:
      minmax(0, 1fr)
      6rem;

    gap: var(--lp-space-3);
  }

  .atlas-superfamily__visual {
    height: 5.25rem;
  }

  .atlas-superfamily--day
  .atlas-superfamily__families {
    grid-template-columns: 1fr;
  }

  .atlas-superfamily--day
  .atlas-family-row:nth-child(odd) {
    border-right: 0;
  }

  .atlas-family-row {
    min-height: 3.1rem;
    padding-inline: var(--lp-space-1);
  }

  .atlas-family-row__arrow {
    opacity: 1;
    transform: none;
  }

  .atlas-superfamily--night {
  grid-template-columns: 1fr;
}

.atlas-superfamily--night .atlas-superfamily__header {
  border-bottom: 1px solid var(--lp-color-border);
}

.atlas-superfamily--night .atlas-superfamily__families {
  padding-block: 0;
}

.atlas-intro__visual {
  min-height: 22rem;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}
}