/* ==========================================================================
   Страница приложения Wi-Fi_FREE (application.html). Подключается после style.css.
   ========================================================================== */

.application { padding: 96px 0 83px; }

.application__title {
  max-width: 880px;
  margin: 0 0 24px;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 3.125rem;
}

.application__text {
  max-width: 880px;
  margin: 0 0 20px;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.5rem;
}
.application__text--subtitle { margin-top: 40px; }

/* --- Кнопки магазинов с иконкой приложения слева ------------------------- */

.app__list {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app__item { margin-left: 8px; }
.app__item:first-child { margin-left: 0; }

.app__link {
  display: block;
  border-radius: 6px;
  transition: opacity .2s;
}
.app__link:hover { opacity: .85; }
.app__link:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 3px; }
.app__badge { height: 40px; width: auto; }

.application__links {
  position: relative;
  margin-bottom: 24px;
  padding-left: 56px;
}
.application__links::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background: url("../img/icon-app.svg") 0 0 / 40px 40px no-repeat;
}

/* --- Видео --------------------------------------------------------------- */

/* Ширина как в оригинале: колонка 94,12% − 400px (справа там была пустая колонка) */
.application__video-section { width: calc(94.12% - 400px); }
.application__videoplayer {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--c-black);
}

/* --- Шесть возможностей приложения --------------------------------------- */

.application__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.application__item--step {
  width: 400px;
  margin-right: calc(25% - 500px);
  margin-bottom: 32px;
}
.application__item--step:last-child { margin-right: auto; }

.application__img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 24px;
}

/* Сетка шагов повторяет брейкпоинты оригинала */
@media (min-width: 1800px) and (max-width: 2239px) {
  .application__item--step { margin-right: calc(33.3333% - 533.333px); }
  .application__item--step:nth-child(4n) { margin-right: 0; }
}
@media (min-width: 1440px) and (max-width: 1799px) {
  .application__item--step { margin-right: calc(50% - 600px); }
  .application__item--step:nth-child(3n) { margin-right: 0; }
}
@media (min-width: 1183px) and (max-width: 1439px) {
  .application__item--step { width: 29.4%; margin-right: 5.9%; }
  .application__item--step:nth-child(3n) { margin-right: 0; }
}
@media (max-width: 1182px) {
  .application__item--step { width: 324px; margin-bottom: 36px; }
}
@media (min-width: 1132px) and (max-width: 1182px) {
  .application__item--step { margin-right: calc(50% - 486px); }
  .application__item--step:nth-child(3n) { margin-right: 0; }
}
@media (min-width: 890px) and (max-width: 1131px) {
  .application__item--step { margin-right: 162px; }
  .application__item--step:nth-child(2n) { margin-right: auto; }
}
@media (min-width: 768px) and (max-width: 889px) {
  .application__item--step { margin-right: calc(100% - 648px); }
  .application__item--step:nth-child(2n) { margin-right: 0; }
}

@media (max-width: 1199px) {
  .application { padding: 80px 0 84px; }
  .application__video-section { width: 100%; }
}

@media (max-width: 767px) {
  .application { padding: 24px 0; }
  .application__title { margin-bottom: 16px; font-size: 1.75rem; line-height: 2.4375rem; }
  .application__text { max-width: 500px; margin-bottom: 16px; font-size: .875rem; line-height: 1.375rem; }
  .application__text--subtitle { margin-top: 20px; }
  .application__links { width: 232px; margin: 0 0 15px; }
  .application__img { margin-bottom: 15px; }
}
@media (min-width: 734px) and (max-width: 767px) {
  .application__item--step { width: 343px; margin-right: 16px; margin-bottom: 25px; }
  .application__item--step:nth-child(2n) { margin-right: auto; }
}
@media (min-width: 376px) and (max-width: 733px) {
  .application__item--step { margin-right: calc(100% - 343px); }
}
@media (max-width: 375px) {
  .application__item--step { width: 100%; margin-right: 0; }
}

/* --- Видео и описание в две колонки (английская версия; в русской правая колонка пуста) --- */

.container--flex {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}
.application__description { margin-left: auto; width: 400px; }

@media (max-width: 1199px) {
  .container--flex { flex-wrap: wrap; }
  .application__description { width: 100%; }
}