/* Peru index illustrations: preserve complete frames at every viewport. */
.proseblock > .walkthru.walkthru--index-sofia:after {
  background-image: url('../images/content/index-volleyball-steps-peru.webp');
}
.proseblock > .walkthru.walkthru--index-boxing:after {
  background-image: url('../images/content/index-boxing-steps-peru.webp');
}
.dealstrip--peru-index {
  display: grid;
  /* знімок лежить в абсолюті, тож без явної колонки трек стискався б
     під картку, і відсоткові min/max-width їй не було б від чого рахувати */
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  /* однакова висота в усіх банерів: знімок лежить в абсолюті, тож без
     цього висоту задавала б картка, і кожен банер виходив би свій */
  min-height: 380px;
  overflow: hidden;
  background: #232020;
}
.dealstrip--peru-index > .dealstrip__bg {
  grid-area: 1 / 1;
}
.dealstrip--peru-index .dealstrip__bg img {
  filter: none;
}
.dealstrip--peru-index > .dealstrip__card {
  grid-area: 1 / 1;
  align-self: center;
  /* росте під контент, щоб заголовок «100% hasta 500 PEN» ліг в один
     рядок. Верхня межа — ширина банера мінус маргіни, а не частка від
     нього: відсоток підрізав картку вужче за сам заголовок, і текст
     із nowrap вилазив за рамку */
  width: max-content;
  min-width: 40%;
  max-width: min(560px, calc(100% - 48px));
  margin: 24px;
  padding: 18px;
  border-color: #23a0ae;
  box-shadow: 0 0 20px rgba(35, 160, 174, .2);
  background: rgba(35, 32, 32, .8);
}
@media (min-width: 1101px) {
  .dealstrip--peru-index .dealstrip__head,
  .dealstrip--peru-index .dealstrip__tag > span {
    white-space: nowrap;
  }
}
.dealstrip--peru-index .dealstrip__tag > span {
  background: rgba(20, 97, 107, .5);
  border-color: rgba(35, 160, 174, .5);
}
.dealstrip--peru-index .dealstrip__head,
.dealstrip--peru-index .dealstrip__head small {
  text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.dealstrip--peru-index .dealstrip__head strong {
  background-image: linear-gradient(180deg, #fff, #57cede);
  filter: drop-shadow(0 0 8px rgba(35, 160, 174, .35));
}
.dealstrip--peru-index .dealstrip__spins span {
  background-image: linear-gradient(90deg, #ffcf8a, #f0a877);
  color: #f0a877;
}
.toplead--peru-index {
  display: grid;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  background: #232020;
}
.toplead--peru-index > .toplead__bg {
  position: relative !important;
  inset: auto;
  grid-area: 1 / 1;
  align-self: center;
  /* підрізає запас, який дає scale нижче */
  overflow: hidden;
}
/* Кадр точно збігається з боксом по пропорції, тож object-position нічого
   не зсуває — немає чого підрізати. Даємо невеликий оверскан і зміщуємо
   картинку праворуч у межах цього запасу: каст відходить від тексту,
   а порожнього краю ліворуч не з'являється. Висота блока не змінюється. */
.toplead--peru-index .toplead__bg img,
.toplead--peru-index .toplead__bg video {
  transform: scale(1.08) translateX(3.5%);
  transform-origin: center;
}
.toplead--peru-index .toplead__bg img,
.toplead--peru-index .toplead__bg video {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
  object-fit: fill;
}
.toplead--peru-index > .toplead__box {
  grid-area: 1 / 1;
  align-self: center;
  z-index: 1;
  width: 65%;
  max-width: 700px;
  margin: 24px;
}
.toplead--peru-index .toplead__title {
  font-size: clamp(24px, 2.5vw, 40px);
}
.inlay--peru-index {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  background: none;
  color: var(--color-text);
}
.inlay--peru-index > .framed {
  position: relative !important;
  inset: auto;
  width: 100%;
}
.inlay--peru-index .framed img {
  height: auto;
  filter: none;
  border-radius: 12px;
}
.inlay--peru-index .framed:after {
  display: none;
}
.inlay--peru-index .inlay__body {
  width: 100%;
  max-width: none;
  text-shadow: none;
}
.inlay--peru-index p {
  color: var(--color-text);
}
@media (max-width: 1100px) {
  /* Картка лишається в тій самій комірці, що й знімок, тобто текст
     завжди лежить на фото. Ширина — базова (100%, але не більше 500px),
     тож на вузькому екрані картка не розтягується на весь банер. */
  .dealstrip--peru-index > .dealstrip__card {
    /* ширина рахується за вирахуванням маргінів: width: 100% + margin
       вилазив за праву межу банера */
    width: calc(100% - 32px);
    min-width: 0;
    max-width: 500px;
    margin: 16px auto;
    text-align: center;
  }
  /* .dealstrip__head має власний text-align: left і центрується лише
     від 850px — між 851 і 1100 заголовок лишався б ліворуч, коли решта
     картки вже по центру. Вирівнюємо явно. */
  .dealstrip--peru-index .dealstrip__head {
    text-align: center;
  }
  /* Текст hero лишається поверх знімка на будь-якій ширині — тільки
     отримує напівпрозору підкладку з блюром. grid-area НЕ скидаємо:
     інакше блок падає окремим рядком під фото. */
  .toplead--peru-index > .toplead__box {
    width: auto;
    max-width: none;
    margin: 16px;
    padding: 16px;
    /* світліша підкладка: крізь неї мають читатись персонажі на фото.
       Текст тримає власна тінь із .toplead__title, тож легкості вистачає */
    background: rgba(35, 32, 32, .42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: var(--radius, 6px);
  }
}

/* На телефоні hero нижчий за текстовий блок, і повний кадр лишав би смуги
   фону згори й знизу. Тут знімок повертається до базової поведінки —
   заповнює комірку цілком, тож текст завжди лежить на фото. */
@media (max-width: 850px) {
  /* Зсув кадру банера на планшеті (база дає 93%). */
  .dealstrip--peru-index .dealstrip__bg img {
    object-position: 86%;
  }
  .toplead--peru-index > .toplead__bg {
    position: absolute !important;
    inset: 0;
    align-self: stretch;
  }
  .toplead--peru-index .toplead__bg img,
  .toplead--peru-index .toplead__bg video {
    height: 100%;
    object-fit: cover;
  }
}

/* Keep the central phone and both women visible on small screens. */
@media (max-width: 850px) {
  .getrow {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    gap: 16px;
  }
  .getrow > .getrow__bg {
    position: relative !important;
    inset: auto;
    width: 100%;
  }
  .getrow .getrow__bg img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .getrow > .getrow__row {
    padding: 0 16px 16px;
  }
}

/* Усі парні блоки лишають базову поведінку .pairbox: знімок ковером
   тягнеться рівно на висоту тексту, а від 850px повертається до повного
   кадру в стовпчик. Тут лише точкові зсуви кадру там, де центр ріже
   головне — решта лишається на center center. */
@media (min-width: 851px) {
  [id="20bet-entero-desde-el-celular"] .pairbox__media img {
    object-position: center 12%;
  }
  [id="dos-escalas-vip-que-nunca-se"] .pairbox__media img {
    object-position: center 45%;
  }
}

/* Блоки завантаження — та сама висота, що й банери (380px). Правило під
   min-width, бо файл підключається після styles.min.css: без цього воно
   перебило б і базові 300px на планшеті. */
@media (min-width: 851px) {
  .getrow--peru-index {
    min-height: 380px;
  }
}