/* ======================================================================
   LEPIBASE — AKTUÁLNE V LEPIBASE
   Public overview
   ====================================================================== */


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

.current-overview {
  padding-bottom: var(--lp-space-20);
}

.current-overview__section {
  padding-block: var(--lp-space-16);
}

.current-overview__section + .current-overview__section {
  border-top: 1px solid var(--lp-color-border);
}

.current-overview__section-header {
  display: grid;
  max-width: 54rem;

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

.current-overview__section-header .lp-h2 {
  max-width: 24ch;
}

.current-overview__section-header > .lp-meta {
  max-width: 64ch;
}

.lp-species-tile__media {
    aspect-ratio: 3 / 2;
}

/* ======================================================================
   INTRO
   ====================================================================== */
.current-overview__intro {
  display: grid;

  max-width: 58rem;

  padding-block:
    var(--lp-space-10)
    var(--lp-space-8);

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

.current-overview__title {
  max-width: 13ch;
}

.current-overview__lead {
  margin-top: var(--lp-space-2);
}


/* ======================================================================
   CURRENT SEASON
   ====================================================================== */

.current-overview__season {
  padding-top: var(--lp-space-12);
}

.current-overview__season-stats {
  --lp-stat-count: 3;

  max-width: 68rem;

  margin-top: var(--lp-space-8);
}

.current-overview__season-stats .lp-stat {
  padding-block: var(--lp-space-6);
}

.current-overview__season-stats .lp-stat__value {
  font-family: var(--lp-font-display);
  font-size: clamp(2.25rem, 3.4vw, 3.25rem);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.current-overview__data-note {
  max-width: 58rem;
  margin-top: var(--lp-space-5);
}


/* ======================================================================
   LAST 30 DAYS
   ====================================================================== */

.current-overview__recent {
  padding-top: var(--lp-space-12);
}

.current-overview__recent-stats {
  --lp-stat-count: 2;

  width: min(100%, 38rem);

  margin-top: var(--lp-space-6);
}

.current-overview__recent-stats .lp-stat {
  padding:
    var(--lp-space-4)
    var(--lp-space-5);
}

.current-overview__recent-stats .lp-stat__value {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
}


/* ======================================================================
   RECENT ACTIVITY MAP
   ====================================================================== */

.current-overview__map-section {
  margin-top: var(--lp-space-12);
}

.current-overview__map-header {
  display: grid;

  max-width: 52rem;
  margin-bottom: var(--lp-space-5);

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

.current-overview__map {
  position: relative;
  z-index: 0;

  width: 100%;
  min-height: 36rem;

  overflow: hidden;

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

  background:
    linear-gradient(
      135deg,
      var(--lp-color-surface-soft),
      var(--lp-color-background)
    );
}

.current-overview__map::before {
  position: absolute;

  top: 50%;
  left: 50%;

  width: min(44rem, 74%);
  height: 42%;

  border:
    1px dashed
    color-mix(
      in srgb,
      var(--lp-color-border) 82%,
      transparent
    );

  border-radius: 48% 52% 45% 55% / 52% 47% 53% 48%;

  transform:
    translate(-50%, -50%)
    rotate(-2deg);

  opacity: 0.55;

  content: "";
  pointer-events: none;
}

/*
 * Keď Leaflet v ďalšom bloku vloží svoj obsah,
 * dekoratívny placeholder už nemá byť viditeľný.
 */
.current-overview__map:has(.leaflet-map-pane)::before {
  display: none;
}

.current-overview__map .leaflet-tile-pane {
  filter:
    saturate(0.25)
    contrast(0.86)
    brightness(1.1);
}

.current-overview__map-note {
  max-width: 68rem;

  margin-top: var(--lp-space-4);
}


/* ======================================================================
   SPECIES SECTIONS
   ====================================================================== */

.current-overview__species-section {
  padding-block:
    var(--lp-space-16)
    var(--lp-space-20);
}

.current-overview__species-grid {
  padding-block: 0;

  margin-top: var(--lp-space-8);
}

.current-overview__species-tile {
  min-width: 0;
}

.current-overview__species-tile
.lp-species-tile__media {
  box-shadow: none;
}

.current-overview__species-tile
.lp-species-tile__meta {
  font-variant-numeric: tabular-nums;
}

.current-overview__species-section--frequent
.current-overview__species-tile
.lp-species-tile__meta {
  color: var(--lp-color-text-secondary);
  font-weight: 650;
}

.current-overview__empty-note {
  max-width: 44rem;

  margin-top: var(--lp-space-6);
}


/* ======================================================================
   CLOSING CONTINUATION
   ====================================================================== */

.current-overview__continuation {
  display: grid;

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

  align-items: end;
  gap: var(--lp-space-10);

  padding-block:
    var(--lp-space-16)
    var(--lp-space-20);
}

.current-overview__continuation-copy {
  display: grid;

  max-width: 48rem;

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

.current-overview__continuation-copy .lp-h2 {
  max-width: 22ch;
}

.current-overview__continuation-actions {
  display: flex;
  flex-wrap: wrap;

  align-items: center;
  justify-content: flex-end;

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


/* ======================================================================
   RESPONSIVE — INTERMEDIATE
   ====================================================================== */

@media (max-width: 80rem) {

  .current-overview__map {
    min-height: 32rem;
  }
}


@media (max-width: 64rem) {

  .current-overview__intro {
    padding-bottom: var(--lp-space-12);
  }

  .current-overview__section {
    padding-block: var(--lp-space-12);
  }

  .current-overview__map {
    min-height: 28rem;
  }

  .current-overview__continuation {
    grid-template-columns: 1fr;

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

  .current-overview__continuation-actions {
    justify-content: flex-start;
  }
}


/* ======================================================================
   RESPONSIVE — MOBILE
   ====================================================================== */

@media (max-width: 44rem) {

  .current-overview {
    padding-bottom: var(--lp-space-12);
  }

  .current-overview__intro {
    padding-block:
      var(--lp-space-8)
      var(--lp-space-10);
  }

  .current-overview__section {
    padding-block:
      var(--lp-space-10)
      var(--lp-space-12);
  }

  .current-overview__season {
    padding-top: var(--lp-space-8);
  }

  /*
   * Na mobile majú tri sezónne čísla zostať
   * editorialne čitateľné, nie stlačené do 2 + 1 gridu.
   */
  .current-overview__season-stats {
    grid-template-columns: 1fr;
  }

  .current-overview__season-stats .lp-stat {
    padding:
      var(--lp-space-5)
      0;
  }

  .current-overview__season-stats .lp-stat + .lp-stat {
    border-top: 1px solid var(--lp-color-border);
    border-left: 0;
  }

  .current-overview__season-stats
  .lp-stat:nth-child(odd) {
    border-left: 0;
  }

  .current-overview__season-stats
  .lp-stat:nth-child(n + 3) {
    border-top: 1px solid var(--lp-color-border);
  }

  .current-overview__season-stats .lp-stat__value {
    font-size: clamp(2.25rem, 11vw, 3rem);
  }

  /*
   * Dve 30-dňové hodnoty môžu zostať vedľa seba.
   */
  .current-overview__recent-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .current-overview__recent-stats .lp-stat {
    padding:
      var(--lp-space-4)
      var(--lp-space-3);
  }

  .current-overview__recent-stats
  .lp-stat:nth-child(2) {
    border-top: 0;
    border-left: 1px solid var(--lp-color-border);
  }

  .current-overview__map-section {
    margin-top: var(--lp-space-10);
  }

  .current-overview__map {
    min-height: 22rem;
  }

  .current-overview__species-section {
    padding-block: var(--lp-space-12);
  }

  .current-overview__species-grid {
    margin-top: var(--lp-space-6);

    gap:
      var(--lp-space-8)
      var(--lp-space-4);
  }

  .current-overview__continuation {
    padding-block:
      var(--lp-space-12)
      var(--lp-space-16);
  }

  .current-overview__continuation-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .current-overview__continuation-actions
  .lp-button {
    width: 100%;
  }
}