/**
 × maps v2.12 × updated 2026-09-02 ×
 × created 2026-04-19 × raimundo p. solar ×
 **/


/* --------------------------------------------------
   SECTION
-------------------------------------------------- */

.home-distribution {
  display: flex;
  flex-direction: column;

  height: 85vh;
  min-height: 0;

  padding-bottom: 0;

  overflow: hidden;
}


/* --------------------------------------------------
   LAYOUT
-------------------------------------------------- */

.grid.tf.home-distribution__layout {
  display: flex;

  flex: 1 1 auto;

  gap: var(--breche-l);

  width: 100%;
  max-width: 100%;

  min-width: 0;
  min-height: 0;

  margin: 0;
  margin-top: var(--breche-s);

  align-items: stretch;

  overflow: hidden;
}


/* --------------------------------------------------
   LEFT — SPECIES LIST
-------------------------------------------------- */

.home-distribution__sidebar {
  flex: 0 0 33.333%;

  width: 33.333%;
  max-width: 22rem;

  min-width: 0;
  min-height: 0;

  overflow: hidden;
}


.home-distribution__sidebar > h2 {
  margin-top: 0;
}


.home-distribution__species-list {
  display: flex;
  flex-direction: column;

  box-sizing: border-box;

  width: 100%;
  max-width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow: hidden;
}


/* --------------------------------------------------
   SELECTED + ALL SPECIES
-------------------------------------------------- */

.home-distribution__selected,
.home-distribution__all {
  display: flex;
  flex-direction: column;

  box-sizing: border-box;

  width: 100%;
  max-width: 100%;

  min-width: 0;
}


.home-distribution__selected {
  position: sticky;
  top: 0;
  z-index: 2;

  flex: 0 0 auto;

  overflow: visible;

  background:
    var(
      --color-bg,
      transparent
    );
}


.home-distribution__species-list.has-selection
.home-distribution__selected {
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
}


.home-distribution__all {
  flex: 1 1 auto;

  min-height: 0;

  padding-right: 0.3rem;

  overflow-x: hidden;
  overflow-y: auto;

  background: transparent;

  scrollbar-width: thin;

  scrollbar-color:
    rgba(20, 20, 20, 0.42)
    transparent;
}


.home-distribution__all:hover {
  scrollbar-color:
    rgba(20, 20, 20, 0.22)
    transparent;
}


.home-distribution__all::-webkit-scrollbar {
  width: 8px;
}


.home-distribution__all::-webkit-scrollbar-track {
  background: transparent;
}


.home-distribution__all::-webkit-scrollbar-thumb {
  border: none;
  border-radius: 999px;

  background:
    rgba(20, 20, 20, 0.42);
}


.home-distribution__all:hover::-webkit-scrollbar-thumb {
  background:
    rgba(20, 20, 20, 0.22);
}


/* --------------------------------------------------
   SPECIES OPTION
-------------------------------------------------- */

.home-distribution__species-option {
  display: block;

  box-sizing: border-box;

  width: 100%;
  max-width: 100%;

  margin:
    0
    0
    0.24rem
    0;

  padding: 0;

  border: 0;

  background: transparent;
  color: var(--color-black);

  font: inherit;
  font-size: 0.98rem;
  line-height: 1.35;

  text-align: left;

  white-space: normal;

  overflow-wrap: break-word;

  cursor: pointer;

  transition:
    color 0.18s ease,
    opacity 0.18s ease,
    transform 0.34s
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      );

  will-change:
    transform,
    opacity;
}


.home-distribution__species-option:hover,
.home-distribution__species-option:focus-visible {
  color:
    var(--color-s-orange);

  outline: none;
}


.home-distribution__species-option.is-selected {
  color:
    rgba(
      20,
      20,
      20,
      0.52
    );
}


.home-distribution__species-option.is-focused,
.home-distribution__species-option.active {
  color:
    var(--color-s-orange);
}


/* --------------------------------------------------
   SELECTED SPECIES ROW
-------------------------------------------------- */

.home-distribution__selected-row {
  display: flex;

  align-items: baseline;

  gap: 0.32rem;

  width: 100%;

  min-width: 0;
}


.home-distribution__selected-row
.home-distribution__species-option {
  flex: 1 1 auto;

  width: auto;

  min-width: 0;
}


.home-distribution__remove {
  flex: 0 0 auto;

  margin: 0;

  padding: 0;

  border: 0;

  background: transparent;

  color:
    rgba(
      20,
      20,
      20,
      0.52
    );

  font: inherit;

  font-size: 1rem;

  line-height: 1.35;

  cursor: pointer;

  transition:
    color 180ms ease;
}


.home-distribution__remove:hover,
.home-distribution__remove:focus-visible {
  color:
    var(--color-s-orange);

  outline: none;
}


/* --------------------------------------------------
   RIGHT — MAP
-------------------------------------------------- */

.home-distribution__map-column {
  position: relative;

  /*
   * The sidebar already owns one third of the row.
   * Let the map consume the remaining flex space so
   * the column gap is included in the total width.
   */
  flex: 1 1 0;

  width: auto;

  /*
   * Previous version:
   *
   * margin-top: 2em;
   * height: calc(100% - 2em);
   *
   * We now recover 3em exclusively at the top.
   *
   * Top moves from +2em to -1em.
   * Bottom stays at exactly the same position.
   */
  height:
    calc(100% + 1em);

  margin-top: -1em;

  max-width: 100%;

  min-width: 0;
  min-height: 0;

  overflow: hidden;
}


.home-distribution__map {
  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  background: transparent;
}


/* --------------------------------------------------
   SELECTED CANID PORTRAIT
-------------------------------------------------- */

.home-distribution__preview {
  position: absolute;

  left:
    var(--breche-s);

  bottom:
    var(--breche-s);

  z-index: 5;

  display: block;

  width: 8rem;

  aspect-ratio:
    9 / 5;

  margin: 0;

  overflow: hidden;

  border: 0;

  background:
    #c3c3c3;

  cursor: pointer;

  text-decoration: none;

  transition:
    opacity 180ms ease;
}


.home-distribution__preview:hover {
  opacity: 0.88;
}


.home-distribution__preview:focus-visible {
  outline:
    1px solid
    var(--color-black);

  outline-offset:
    2px;
}


.home-distribution__preview[hidden] {
  display: none;
}


.home-distribution__preview.is-placeholder {
  background:
    #c3c3c3;
}


.home-distribution__preview-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;
}


.home-distribution__preview-image[hidden] {
  display: none;
}


/* --------------------------------------------------
   MAP POPUP
-------------------------------------------------- */

.home-distribution
.maplibregl-popup {
  max-width: none;
}


.home-distribution
.maplibregl-popup-content {
  padding:
    0.25rem
    0.45rem;

  border: none;
  border-radius: 0;

  box-shadow: none;

  background:
    rgba(
      255,
      255,
      255,
      0.96
    );

  color:
    var(--color-black);

  line-height: 1.35;
}


.home-distribution
.maplibregl-popup-tip {
  display: none;
}


.home-distribution
.maplibregl-popup-content strong,
.home-distribution
.maplibregl-popup-content b {
  font-weight: 500;
}


.home-distribution
.maplibregl-popup-content p {
  margin: 0;
}


.home-distribution
.maplibregl-popup-close-button {
  display: none;
}


/* --------------------------------------------------
   MAP CONTROLS
-------------------------------------------------- */

.home-distribution
.maplibregl-ctrl-top-right {
  top: var(--breche-s);
  right: var(--breche-s);
}


.home-distribution
.maplibregl-ctrl-group {
  border: 0;
  border-radius: 0;

  box-shadow: none;

  background:
    rgba(
      255,
      255,
      255,
      0.72
    );

  backdrop-filter:
    blur(6px);
}


.home-distribution
.maplibregl-ctrl-group button {
  width: 30px;
  height: 30px;
}


/* --------------------------------------------------
   RESPONSIVE
-------------------------------------------------- */

@media (max-width: 980px) {

  .home-distribution {
    height: auto;

    overflow: visible;
  }


  .grid.tf.home-distribution__layout {
    flex-direction: column;

    gap: var(--breche-m);

    margin-top:
      var(--breche-s);

    overflow: visible;
  }


  .home-distribution__sidebar {
    flex: none;

    width: 100%;
    max-width: none;

    min-width: 0;
  }


  .home-distribution__species-list {
    height: 16rem;
  }


  .home-distribution__map-column {
    flex: none;

    width: 100%;
    height: auto;

    min-height: 62vh;

    margin-top: 0;
  }


  .home-distribution__map {
    min-height: 62vh;
  }


  .home-distribution__preview {
    width: 9rem;
  }
}

/* --------------------------------------------------
   SINGLE CANID MAP
-------------------------------------------------- */

.species-distribution-map-wrap {
  position: relative;

  z-index: 0;

  width: 100%;
  height: 100%;
  min-height: 62vh;

  margin-top: 7.5px;

  overflow: hidden;
  isolation: isolate;

  contain: paint;
}


.species-distribution-map {
  position: relative;

  z-index: 0;

  width: 100%;
  height: 100%;
  min-height: 62vh;

  overflow: hidden;

  background: transparent;
}


.species-distribution-map
.maplibregl-canvas-container,
.species-distribution-map
.maplibregl-canvas {
  max-width: 100%;
}


/* --------------------------------------------------
   SINGLE CANID MAP — POPUP
-------------------------------------------------- */

.species-distribution-map
.maplibregl-popup {
  max-width: none;
}


.species-distribution-map
.maplibregl-popup-content {
  padding:
    0.25rem
    0.45rem;

  border: none;
  border-radius: 0;

  box-shadow: none;

  background:
    rgba(
      255,
      255,
      255,
      0.96
    );

  color:
    var(--color-black);

  line-height: 1.35;
}


.species-distribution-map
.maplibregl-popup-tip {
  display: none;
}


.species-distribution-map
.maplibregl-popup-content strong,
.species-distribution-map
.maplibregl-popup-content b {
  font-weight: 500;
}


.species-distribution-map
.maplibregl-popup-content p {
  margin: 0;
}


.species-distribution-map
.maplibregl-popup-close-button {
  display: none;
}


/* --------------------------------------------------
   SINGLE CANID MAP — CONTROLS
-------------------------------------------------- */

.species-distribution-map
.maplibregl-ctrl-group {
  border: 0;
  border-radius: 0;

  box-shadow: none;

  background:
    rgba(
      255,
      255,
      255,
      0.72
    );

  backdrop-filter:
    blur(6px);
}


.species-distribution-map
.maplibregl-ctrl-group button {
  width: 30px;
  height: 30px;
}