/* =========================================
   STA MAPS
========================================= */

.sta-map{
  width:100%;
  padding:56px 0;
  background:#fff;
}

.sta-map__inner{
  width:min(1280px, calc(100% - 32px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(280px, 360px);
  gap:28px;
  align-items:start;
}

.sta-map__canvas{
  min-height:520px;
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(31,42,32,.08);
  box-shadow:0 16px 34px rgba(0,0,0,.08);
  background:#F7F4ED;
}

.sta-map__sidebar{
  padding:24px 22px;
  border:1px solid rgba(31,42,32,.08);
  border-radius:28px;
  background:#fff;
  box-shadow:0 14px 30px rgba(0,0,0,.06);
}

.sta-map__title{
  margin:0 0 10px;
  color:#1F2A20;
  font-size:clamp(24px, 2.5vw, 34px);
  line-height:1.1;
}

.sta-map__intro{
  margin:0 0 18px;
  color:#556055;
  font-size:15px;
  line-height:1.75;
}

.sta-map__list{
  display:grid;
  gap:10px;
}

.sta-map__item{
  padding:12px 14px;
  border:1px solid rgba(31,42,32,.08);
  border-radius:16px;
  background:#F7F4ED;
  cursor:pointer;
  transition:border-color .22s ease, background .22s ease, transform .22s ease;
}

.sta-map__item:hover,
.sta-map__item.is-active{
  border-color:#C3A890;
  background:#EFE7D9;
  transform:translateY(-1px);
}

.sta-map__item-title{
  margin:0 0 4px;
  color:#1F2A20;
  font-size:15px;
  font-weight:600;
  line-height:1.3;
}

.sta-map__item-meta{
  margin:0;
  color:#6A736B;
  font-size:13px;
  line-height:1.5;
}

@media (max-width: 980px){
  .sta-map__inner{
    grid-template-columns:1fr;
  }

  .sta-map__canvas{
    min-height:420px;
  }
}

@media (max-width: 767px){
  .sta-map{
    padding:42px 0;
  }

  .sta-map__inner{
    width:min(100% - 20px, 1280px);
    gap:20px;
  }

  .sta-map__canvas{
    min-height:320px;
    border-radius:22px;
  }

  .sta-map__sidebar{
    padding:20px 18px;
    border-radius:22px;
  }
}