/* ******* */
/* BROWSER */
/* ******* */

.browser {
  background-color: var(--browser-color);
  /*width: calc(100% - 2rem);*/
  border-radius: 3rem;
  border: 1rem solid var(--browser-color);
  overflow: hidden;
  position: relative;

  /* Кнопки в шапке — прямоугольная маска высотой в 2000px с тремя дырками */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-image: url("/front/images/browserMask.svg");
  mask-image: url("/front/images/browserMask.svg");

  /* Обнимаем картинку, если контейнер выше */
  height: min-content;
}

.browser>img,
.browser>picture,
.browser>video {
  margin-top: 2.3%;
}


/* ******* */
/* MASONRY */
/* ******* */

.masonry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin-grid);
}

.masonry>.image {
  margin-top: 0 !important;
}


/* **** */
/* GRID */
/* **** */

/* БАЗОВЫЙ ГРИД */

.grid {
  display: grid;
  gap: var(--margin-grid);
  grid-template-columns: repeat(4, minmax(10px, 1fr));
  grid-auto-flow: dense;
}

.grid>* {
  /* В гридах отступ задаём грид-гэпом */
  margin-top: initial !important;
  /* Для карточек портфолио */
  position: relative;
  /* Чтобы контейнер обнимал внутренность, не вылазила анимация загрузки   */
  align-self: start;
  /* Чтобы карточки без картинок растягивались на весь грид */
  width: 100%;
  /* height: 100%; писать нельзя, чтобы карточки обнимали контент (ссылки в портфолио не кликались под текстом) */
}

.grid .s {
  grid-column: span 1;
}

.grid .m {
  grid-column: span 2;
}

.grid .l {
  grid-column: span 4;
}

@media (max-width: 800px) {

  /* Две колонки на мобиле */
  .grid {
    grid-template-columns: repeat(2, minmax(10px, 1fr));
  }

  .grid .l {
    grid-column: span 2;
  }
}

/* ПОРТФОЛИО */

.grid a.super {
  text-decoration: none;
  display: block;
}

/* Обложка */
.grid>.super.s>.container {
  aspect-ratio: 0.5999946903;
}

.grid>.super.m>.container {
  aspect-ratio: 1.2637056309;
}

.grid>.super.l>.container {
  aspect-ratio: 2.5911275121;
}

.grid .container {
  overflow: hidden;
  position: relative;
  background-color: var(--box-color);
}

.grid .image {
  height: fit-content;
}


@media (max-width: 800px) {

  /* L в 2 раза выше на мобиле */
  .grid>.super.l>.container {
    aspect-ratio: 0.6318528155;
  }
}

.grid > .super > .container > .image > img,
.grid > .super > .container > .image > picture,
.grid > .super > .container > .image > video,
.grid > .super > .container > div:not(.caption):not(.clientLogosContainer) {
  width: 100%;
  height: 100%;
  flex-grow: 1;
  object-fit: cover;
  position: relative;
  margin: initial;
}


/* Отступ между строками больше в портфолио на мобиле */
@media (max-width: 800px) {
  .grid.super {
    row-gap: var(--margin-text);
  }
}


/* ******* */
/* DEVICES */
/* ******* */

/* Colors */
.device {
  --device-color: var(--box-color);
}

.box .device {
  --device-color: #DFE1E1;
}

.device.dark,
.darkmode .device {
  --device-color: #2E2E2E;
}

.darkmode .device.dark {
  --device-color: #242424;
}

.device {
  position: relative;
  overflow: hidden;
}

.device>svg:nth-child(1) {
  position: absolute;
  top: 0;
  width: 100%;
  height: initial;
  z-index: 1;
  color: var(--device-color);
  pointer-events: none;
}

.device>img:nth-child(2),
.device>picture:nth-child(2),
.device>video:nth-child(2) {
  position: absolute;
  object-fit: cover;
  object-position: top;
}


/* iPhone 15 */
.device.iphone-15,
.device.iphone-15-island {
  width: 211rem;
}

/* Лучше бы использовать aspect-ratio: calc(211 / 440),
но сафари не обновляет пропорции при ресайзе. Поэтому так.
Марджин — процент деления высоты на ширину. */
.device.iphone-15:before,
.device.iphone-15-island:before {
  content: "";
  display: block;
  margin-top: 208.53080569%;
}

.device.iphone-15>img:nth-child(2),
.device.iphone-15>picture:nth-child(2),
.device.iphone-15>video:nth-child(2),
/* Для лоадера */
.device.iphone-15:after,
.device.iphone-15-island>img:nth-child(2),
.device.iphone-15-island>picture:nth-child(2),
.device.iphone-15-island>video:nth-child(2),
.device.iphone-15-island:after {
  width: calc(100% - 6.2%);
  height: calc(100% - 3%);
  left: 3.1%;
  top: 1.5%;
  border-radius: 6%;
}


/* Android */
.device.android {
  width: 211rem;
}

.device.android:before {
  content: "";
  display: block;
  margin-top: 208.53080569%;
}

.device.android>img:nth-child(2),
.device.android>picture:nth-child(2),
.device.android>video:nth-child(2),
.device.android:after {
  width: calc(100% - 6.2%);
  height: calc(100% - 3%);
  left: 3.1%;
  top: 1.5%;
}

/* Pixel 8 */
.device.pixel-8 {
  width: 220.81rem;
}

.device.pixel-8:before {
  content: "";
  display: block;
  margin-top: 199.26633758%;
}

.device.pixel-8>img:nth-child(2),
.device.pixel-8>picture:nth-child(2),
.device.pixel-8>video:nth-child(2),
.device.pixel-8:after {
  width: calc(100% - 5.8%);
  height: calc(100% - 2.8%);
  left: 2.9%;
  top: 1.4%;
}

/* iPad 11 Horizontal */
.device.ipad-11-horizontal {
  width: 100%;
}

.box .device.ipad-11-horizontal {
  width: 640rem;
}

.device.ipad-11-horizontal:before {
  content: "";
  display: block;
  margin-top: 71.875%;
}

.device.ipad-11-horizontal>img:nth-child(2),
.device.ipad-11-horizontal>picture:nth-child(2),
.device.ipad-11-horizontal>video:nth-child(2),
.device.ipad-11-horizontal:after {
  width: calc(100% - 6.6%);
  height: calc(100% - 9.2%);
  left: 3.3%;
  top: 4.6%;
}

/* iPad 11 Vertical */
.device.ipad-11-vertical {
  width: 701rem;
}

.box .device.ipad-11-vertical {
  width: 460rem;
}

.device.ipad-11-vertical:before {
  content: "";
  display: block;
  margin-top: 139.1304347826%;
}

.device.ipad-11-vertical>img:nth-child(2),
.device.ipad-11-vertical>picture:nth-child(2),
.device.ipad-11-vertical>video:nth-child(2),
.device.ipad-11-vertical:after {
  height: calc(100% - 6.6%);
  width: calc(100% - 9.2%);
  top: 3.3%;
  left: 4.6%;
}

/* Terminal */
.device.terminal {
  width: 100%;
}

.box .device.terminal {
  width: 640rem;
}

/* Убираем нижний отступ в боксе для терминала */
.box:has(.device.terminal) {
  padding-bottom: 0;
}

.device.terminal:before {
  content: "";
  display: block;
  margin-top: 80%;
}

.device.terminal>img:nth-child(2),
.device.terminal>picture:nth-child(2),
.device.terminal>video:nth-child(2),
.device.terminal:after {
  height: calc(100% - 12.2%);
  width: calc(100% - 6.6%);
  top: 4%;
  left: 3.3%;
}


/* **** */
/* FORM */
/* **** */

article form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--margin-text);
}

article input[type="text"],
article input[type="file"],
article label[for="file"],
article .textarea-wrap>textarea,
article .textarea-wrap::after {
  font-family: inherit;
  width: 100%;
  color: var(--text-color);
  font-size: var(--paragraph-font-size);
  line-height: var(--paragraph-line-height);
  margin-top: var(--paragraph-top-compensator);
  margin-bottom: var(--paragraph-bottom-compensator);

  padding: calc(var(--margin-grid-half) / 2) 0;
  /* 6rem 0 */
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--text-color);
}

article input:focus,
article textarea:focus {
  outline: none;
}

article ::placeholder {
  color: var(--text-color);
  opacity: 0.2;
}

article input {
  border-radius: 0;
}

article textarea {
  resize: none;
}

article form small,
article form .small p {
  margin-left: 0;
  /* Убираем отжате воздуха у подписей, чтобы не торчали из формы */
}

/* ПЕРЕКЛЮЧАТЕЛЬ */

article .switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin-grid-half);
  width: 100%;
}

article .switch label {
  color: var(--text-color);
  font-size: var(--paragraph-font-size);
  line-height: var(--paragraph-line-height);
  margin-top: var(--paragraph-top-compensator);
  margin-bottom: var(--paragraph-bottom-compensator);
  position: relative;
}

/* Прячем оригинальный инпут */
article .switch label input {
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  cursor: pointer;
}

article .switch label span {
  display: inline-block;
  padding-bottom: calc(var(--margin-grid-half) / 2);
  /* 6rem */
}

article .switch label input:hover+span {
  color: var(--hover-color);
}

/* Если хоть один инпут внутри свича выбран, скрываем все лейблы */
article .switch:has(input:checked) label {
  display: none;
}

/* При этом тот лейбл, внутри которого выбран инпут, показываем с бордером */
article .switch label:has(input:checked) {
  display: block;
  border-bottom: 1px solid var(--text-color);
  width: 100%;
}

/* ТЕКСТАРЕА, КОТОРАЯ РАСТЯГИВАЕТСЯ ПОД КОНТЕНТ */

article .textarea-wrap {
  display: grid;
  width: 100%;
}

article .textarea-wrap::after {
  /* Prevent jumpy behavior */
  content: attr(data-replicated-value) " ";
  /* This is how textarea text behaves */
  white-space: pre-wrap;
  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}

article .textarea-wrap>textarea {
  resize: none;
  overflow: hidden;
  border-radius: 0;
}

article .textarea-wrap>textarea,
article .textarea-wrap::after {
  grid-area: 1 / 1 / 2 / 2;
}

/* ВЫБИРАЛКА ФАЙЛОВ */

/* Прячем оригинальный инпут */
article input[type="file"].input-file-original {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

/* Стилизуем лейбл после инпута */
article input[type="file"].input-file-original+label {
  display: inline-block;
  cursor: pointer;
}

/* Селект инпута с клавиатуры */
article input[type="file"].input-file-original:focus+label {
  color: var(--text-color) !important;
}

article input[type="file"].input-file-original+label.empty {
  color: rgb(from var(--text-color) r g b / 0.2);
}

/* Фикс нажатия на тач-устройствах? */
article input[type="file"].input-file-original+label * {
  pointer-events: none;
}

/* КНОПКА ОТПРАВКИ */

article input[type="submit"] {
  color: var(--text-color);
  font-size: var(--paragraph-font-size);
  line-height: var(--paragraph-line-height);
  margin-top: var(--paragraph-top-compensator);
  margin-bottom: var(--paragraph-bottom-compensator);

  font-weight: normal;

  border: none;
  background: none;

  padding-top: calc(var(--margin-grid-half) / 1.2);
  /* 10rem */
  padding-bottom: calc(var(--margin-grid-half) / 6);
  /* 2rem*/
  padding-left: 0;
  padding-right: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--text-color);

  width: fit-content;
}

article input[type="submit"]:hover {
  border-color: var(--hover-color);
  color: var(--hover-color);
  cursor: pointer;
}


/* **** */
/* OUTS */
/* **** */

.outs {
  position: relative;
}

.outs-top-text,
.outs-top-lines,
.outs-bottom-text,
.outs-bottom-lines {
  display: flex;
  flex-basis: 0;
}

@media screen and (max-width: 800px) {

  .outs-top-text,
  .outs-top-lines,
  .outs-bottom-text,
  .outs-bottom-lines {
    display: none;
  }
}

.outs-top-text,
.outs-bottom-lines {
  align-items: flex-end;
}

.outs-bottom-text,
.outs-top-lines {
  align-items: flex-start;
}

.outs-top-lines,
.outs-bottom-lines {
  height: 0;
  width: 100%;
  margin-top: 0 !important;
  /* Убираем базовый оступ */
  z-index: 2;
  /* Поднимаем линии над каринкой */
  position: relative;
  /* Важно для Сафари */
}

.outs .image {
  margin-top: var(--margin-grid);
  margin-bottom: var(--margin-grid);
}

.outs .line::after {
  content: "";
  display: block;
}

/* Отступ межту текстом и выноской */
.outs-top-lines .line::after {
  top: calc(var(--margin-grid) / 3);
}

.outs-bottom-lines .out {
  bottom: calc(var(--margin-grid) / 3);
}

.outs .out {
  margin: 0;
  display: flex;
  justify-content: center;
  text-align: center;
  max-width: none;
  /* Убираем ограничение ширины для выносок */
  position: relative;
  /* Чтобы задавать высоту выноски процентом от ширины родителя */
}

.outs .out small,
.outs .out .small p {
  width: 100%;
}

.outs .line::after {
  border-left: 1px solid var(--text-color);
  box-sizing: border-box;

  /* Чтобы задавать высоту выноски процентом от ширины родителя */
  position: absolute;
  height: 100%;
}