/* Start:/local/templates/nosorog/contacts.css?179016647913023*/

.sec--points { padding-block: calc(46 * var(--s)) calc(96 * var(--s)); }

.points__head { display: grid; }

.points__grid {
  margin-top: calc(40 * var(--s));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  align-items: stretch;
  gap: calc(22 * var(--s));
}

.points__list {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--s));
}

.point {
  position: relative;
  padding: calc(28 * var(--s));
  border-radius: var(--r);
  background: var(--band);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .34s var(--ease), color .34s var(--ease);
}

/* Нажимается вся карточка, а не только её шапка. Кнопкой остаётся
   .point__pick — она же несёт aria-pressed, — а её невидимый
   псевдоэлемент растянут на всю плитку. Вложить карточку целиком в
   <button> нельзя: внутри живут телефон и ссылка на маршрут. */
.point__pick::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r);
}

/* эти две ссылки должны остаться самостоятельными, поэтому лежат
   поверх растянутой области */
.point__foot {
  position: relative;
  z-index: 1;
}

.point:not(.is-on):hover { background: #e2e9f5; }

.point.is-on { background: var(--blue-dark); color: var(--white); }

.point__pick {
  display: grid;
  gap: calc(7 * var(--s));
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.point.is-on .point__pick { cursor: default; }

.point__addr {
  font-size: calc(21 * var(--s));
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.24;
}

.point__what {
  font-weight: 500;
  color: var(--muted);
  transition: color .34s var(--ease);
}

.point__what::before {
  content: "";
  display: inline-block;
  width: calc(2.5 * var(--s));
  height: calc(17 * var(--s));
  margin: 0 calc(12 * var(--s)) calc(-3 * var(--s));
  border-radius: 999px;
  background: var(--blue);
  transition: background-color .34s var(--ease);
}

.point.is-on .point__what { color: rgba(255, 255, 255, .92); }
.point.is-on .point__what::before { background: rgba(255, 255, 255, .5); }

.point__hours {
  font-size: calc(14 * var(--s));
  color: var(--muted);
  transition: color .34s var(--ease);
}

.point.is-on .point__hours { color: rgba(255, 255, 255, .9); }

.point__note {
  margin: calc(16 * var(--s)) 0 0;
  font-size: calc(14.5 * var(--s));
  line-height: 1.58;
  color: var(--muted);
  transition: color .34s var(--ease);
}

.point.is-on .point__note { color: rgba(255, 255, 255, .9); }

.point__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(10 * var(--s)) calc(20 * var(--s));
  margin-top: calc(20 * var(--s));
}

.point__tel {
  font-size: calc(18 * var(--s));
  font-weight: 700;
  letter-spacing: -.01em;
  transition: color .18s ease;
}

.point__tel:hover { color: var(--blue-dark); }
.point.is-on .point__tel:hover { color: var(--white); }

.point__route {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--s));
  margin-left: auto;
  font-size: calc(14 * var(--s));
  font-weight: 600;
  color: var(--blue);
  transition: color .18s ease;
}

.point__route svg {
  width: calc(15 * var(--s));
  height: calc(15 * var(--s));
  transition: transform .3s var(--ease);
}

.point__route:hover svg { transform: translate(2px, -2px); }
.point.is-on .point__route { color: var(--white); }

.pmap {
  display: flex;
  padding: calc(14 * var(--s));
  border-radius: var(--r);
  background: var(--band);
}

.pmap .map {
  margin-top: 0;
  width: 100%;
  min-height: 0;
  border-radius: calc(20 * var(--s));
}

.map__skel {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(100deg, #e2e8f1 32%, #eff3f8 46%, #e2e8f1 60%);
  background-size: 280% 100%;
  animation: mapSweep 1.5s linear infinite;
  pointer-events: none;
  opacity: 1;
  transition: opacity .4s ease;
}

.map__skel.is-off { opacity: 0; }

html:not(.js) .map__skel { display: none; }

@keyframes mapSweep {
  from { background-position: 140% 0; }
  to { background-position: -40% 0; }
}

.map__frame { transition: opacity .3s ease; }
.map.is-loading .map__frame { opacity: 0; }

.sec--details { padding-block: 0 calc(96 * var(--s)); }

.det__head { display: grid; }

.det__grid {
  margin-top: calc(40 * var(--s));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: calc(22 * var(--s));
}

.det__grid.is-lifted { align-items: start; }

.tile {
  display: flex;
  flex-direction: column;
  padding: calc(30 * var(--s)) calc(32 * var(--s)) calc(26 * var(--s));
  border-radius: var(--r);
}

.tile--chan { background: var(--blue-dark); color: var(--white); }
.tile--req { background: var(--surface); }

.tile--chan .rows__row { border-color: rgba(255, 255, 255, .22); }
.tile--chan .rows__row span { color: rgba(255, 255, 255, .9); }
.tile--chan .chan__sub { color: rgba(255, 255, 255, .9); }
.tile--chan .rows--chan .rows__row em a:hover { color: var(--white); text-decoration: underline; }

.chan__sub {
  margin: calc(24 * var(--s)) 0 calc(-6 * var(--s));
  font-size: calc(13 * var(--s));
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--muted);
}

.rows--chan { margin-top: calc(18 * var(--s)); }

.rows--chan .rows__row em {
  font-size: calc(17 * var(--s));
  letter-spacing: -.01em;
}

.rows--chan .rows__row em a { transition: color .18s ease; }
.rows--chan .rows__row em a:hover { color: var(--blue-dark); }

.tile { --soft: cubic-bezier(.36, .05, .18, 1); }

.more {
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
  max-height: 0;
  margin-bottom: calc(20 * var(--s));
  visibility: hidden;
  transition: max-height .62s var(--soft), visibility .62s var(--soft);
}

.more.is-open { visibility: visible; }

.more__in {
  opacity: 0;
  transform: translateY(calc(-10 * var(--s)));
  transition: opacity .3s ease, transform .56s var(--soft);
}

.more.is-open .more__in { opacity: 1; transform: none; }

html:not(.js) .more { max-height: none; visibility: visible; }
html:not(.js) .more__in { opacity: 1; transform: none; }

.expand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--s));
  width: 100%;
  margin-top: auto;
  padding: calc(13 * var(--s)) calc(16 * var(--s));
  border: 0;
  border-radius: calc(14 * var(--s));
  background: rgba(16, 20, 28, .05);
  color: var(--ink);
  font-family: inherit;
  font-size: calc(14 * var(--s));
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.expand:hover { background: rgba(16, 20, 28, .09); }

.expand__chev {
  flex-shrink: 0;
  width: calc(18 * var(--s));
  height: calc(18 * var(--s));
  transition: transform .5s var(--soft);
}

.expand[aria-expanded="true"] .expand__chev { transform: rotate(180deg); }

.tile--chan .expand {
  background: rgba(255, 255, 255, .16);
  color: var(--white);
}

.tile--chan .expand:hover { background: rgba(255, 255, 255, .26); }

.req__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(6 * var(--s)) calc(16 * var(--s));
  margin-bottom: calc(18 * var(--s));
}

.req__hint {
  margin-left: auto;
  font-size: calc(12.5 * var(--s));
  color: var(--muted);
  transition: color .18s ease;
}

.req__hint.is-said { color: var(--blue-dark); font-weight: 700; }
.req__hint.is-bad { color: #a8321f; font-weight: 700; }

.req__list { margin: 0; }

.req__row {
  display: grid;
  grid-template-columns: calc(146 * var(--s)) minmax(0, 1fr);
  align-items: baseline;
  gap: calc(6 * var(--s)) calc(18 * var(--s));
  padding-block: calc(11 * var(--s));
  border-bottom: 1px solid var(--line);
}

.req__row:first-child { border-top: 1px solid var(--line); }

.more .req__row:first-child { border-top: 0; }

.req__row dt {
  font-size: calc(12.5 * var(--s));
  color: var(--muted);
}

.req__row dd {
  position: relative;
  margin: 0;
  padding-right: calc(30 * var(--s));
  font-size: calc(14.5 * var(--s));
  line-height: 1.45;
  font-weight: 600;
  cursor: pointer;
  transition: color .18s ease;
}

.req__num {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.req__row dd::after {
  content: "";
  position: absolute;
  top: calc(1 * var(--s));
  right: 0;
  width: calc(15 * var(--s));
  height: calc(15 * var(--s));
  background: currentColor;
  opacity: 0;
  transition: opacity .2s ease;
  -webkit-mask: var(--copy-glyph) center / contain no-repeat;
  mask: var(--copy-glyph) center / contain no-repeat;
}

:root {
  --copy-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5'/%3E%3Cpath d='M15 5.5A1.5 1.5 0 0 0 13.5 4H6a2 2 0 0 0-2 2v7.5A1.5 1.5 0 0 0 5.5 15'/%3E%3C/svg%3E");
  --tick-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.req__row dd:hover { color: var(--blue-dark); }
.req__row dd:hover::after { opacity: .45; }

.req__row dd:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: calc(4 * var(--s));
  border-radius: calc(6 * var(--s));
}

.req__row dd:focus-visible::after { opacity: .45; }

.req__row dd.is-done { color: var(--blue-dark); }

.req__row dd.is-done::after {
  opacity: 1;
  -webkit-mask-image: var(--tick-glyph);
  mask-image: var(--tick-glyph);
}

@media (hover: none) {
  .req__row dd::after { opacity: .35; }
}

.req__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(14 * var(--s)) calc(24 * var(--s));
  margin-top: calc(20 * var(--s));
}

.reqbtn {
  height: calc(52 * var(--s));
  padding-inline: calc(28 * var(--s));
  border: 0;
  font-family: inherit;
  font-size: calc(15 * var(--s));
  cursor: pointer;
}

.reqlink {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--s));
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: calc(14 * var(--s));
  font-weight: 600;
  cursor: pointer;
  transition: color .18s ease;
}

.reqlink svg {
  width: calc(17 * var(--s));
  height: calc(17 * var(--s));
  color: var(--blue);
  transition: transform .25s ease;
}

.reqlink:hover { color: var(--ink); }
.reqlink:hover svg { transform: translateY(2px); }

.sec--cta { padding-block: 0 calc(112 * var(--s)); }

.callout__note {
  margin-top: calc(26 * var(--s));
  max-width: calc(320 * var(--s));
  font-size: calc(16 * var(--s));
  line-height: 1.6;
  color: var(--muted);
}

.callout__note .nb { white-space: nowrap; }

@media (max-width: 1200px) {
  .sec--points { padding-block: 22px clamp(46px, 8.5vw, 84px); }
  .sec--details { padding-bottom: clamp(46px, 8.5vw, 84px); }
  .sec--cta { padding-bottom: clamp(52px, 9vw, 96px); }

  .points__grid,
  .det__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 26px; }

  .point { padding: clamp(20px, 5vw, 28px); }
  .point__addr { font-size: clamp(18px, 4.8vw, 21px); }
  .point__what::before { height: 15px; margin-inline: 10px; }

  .pmap { padding: 10px; }
  .pmap .map { min-height: clamp(320px, 76vw, 460px); }

  .tile { padding: clamp(22px, 5.4vw, 30px); }
  .expand { min-height: 48px; }
  .req__hint { margin-left: 0; flex-basis: 100%; }
  .reqbtn { height: 50px; width: 100%; }
  .reqlink { min-height: 44px; }
  .callout__note { margin-top: 18px; max-width: none; font-size: 15px; }
}

@media (max-width: 700px) {
  .req__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .req__row dd { font-size: 15px; }
  .point__foot { gap: 12px; }
  .point__route { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .map__skel { animation: none; }
  .point,
  .point__what,
  .point__what::before,
  .point__hours,
  .point__note,
  .point__route svg,
  .expand__chev,
  .reqlink svg,
  .map__frame { transition: none; }

  .more, .more__in { transition: none; }
  .more__in { opacity: 1; transform: none; }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .points__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .det__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reqbtn { width: auto; min-width: 240px; }
}

@media (max-width: 900px) {
  .point__tel {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .point__route { position: relative; }
  .point__route::after {
    content: "";
    position: absolute;
    inset: -13px -8px;
  }

  .rows__row a[href^="tel:"],
  .rows__row a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* End */
/* /local/templates/nosorog/contacts.css?179016647913023 */