/* Homepage awards strip: one full-bleed black band with a logo marquee.
   The heading stays in the markup for structure and screen readers only. */
#awards.awards-teaser {
  margin-block: var(--section-sm);
  padding-block: var(--section-xs);
  background: var(--night);
  color: var(--stone);
  overflow: hidden;
}

.awards-teaser__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.awards-marquee {
  display: flex;
  width: max-content;
  animation: awards-marquee 46s linear infinite;
}
.awards-marquee:hover { animation-play-state: paused; }

.awards-marquee__track {
  display: flex;
  align-items: center;
  gap: 72px;
  margin: 0;
  padding: 0 36px 0 0;
  list-style: none;
}

.awards-marquee__item { flex: none; }

.awards-teaser .awards-marquee__logo {
  display: block;
  /* Логотипы выровнены по высоте, а не по оптической массе: при height 46px
     «Яндекс Путешествия» занимали 190px, а «Бьюти Питер» – 31px, разница
     в шесть раз, и ряд читался как список разнокалиберных картинок.
     Ограничиваем обе стороны: знаки-слова сжимаются, знаки-иконки нет. */
  width: auto;
  height: 46px;              /* высота бокса; сам знак вписывается внутрь */
  max-width: 112px;
  object-fit: contain;
  opacity: .88;
  transition: opacity var(--t-surface) var(--ease);
}
.awards-teaser .awards-marquee__logo:hover { opacity: 1; }

@keyframes awards-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.awards-teaser__action {
  display: flex;
  justify-content: center;
  margin-top: var(--section-xs);
}
.awards-teaser__action .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--stone);
  box-shadow: inset 0 0 0 1px var(--stone);
}
.awards-teaser__action .btn--ghost:hover,
.awards-teaser__action .btn--ghost:focus-visible {
  --btn-bg: var(--stone);
  --btn-fg: var(--night);
}
.awards-teaser__action .btn--ghost:focus-visible {
  outline: 2px solid var(--stone);
  outline-offset: 3px;
}

/* Motion is decorative: stop it and let the row scroll by hand instead. */
@media (prefers-reduced-motion: reduce) {
  .awards-marquee {
    width: 100%;
    overflow-x: auto;
    animation: none;
  }
  .awards-marquee__track[aria-hidden="true"] { display: none; }
}

@media (max-width: 640px) {
  #awards.awards-teaser { margin-block: var(--section-xs); padding-block: 32px; }
  .awards-marquee__track { gap: 48px; }
  .awards-teaser .awards-marquee__logo { height: 36px; max-width: 92px; }
  .awards-teaser__action { margin-top: 28px; }
}

/* These marks are already light on a dark plate: inverting would hide them. */


/* Photo badges (round medals) stay in colour: monochrome flattens them. */