/* Медиазапросы и анимация появления */

@media (max-width: 760px) {
  .dialog-body {
    padding: 16px;
  }

  .dialog-layout {
    grid-template-columns: 1fr auto;
    gap: 14px;
  }

  .dialog-layout .video-shell {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: min(calc(100vw - 32px), calc((100dvh - 112px) * 9 / 16));
    max-height: calc(100dvh - 112px);
  }

  .dialog-title {
    align-self: center;
    justify-self: start;
    text-align: left;
    white-space: normal;
  }
}

.fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 500ms ease,
    transform 500ms ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 960px) {
  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .site-nav {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 38px;
  }

  .section-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .section-head::after {
    display: none;
  }

  .showreel {
    width: min(100%, 560px);
    min-height: 0;
  }

  .cases {
    grid-template-columns: repeat(4, minmax(374px, 374px));
  }

  .author-section {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .author-copy {
    padding-top: 0;
  }

  .grid-2,
  .grid-3,
  .process {
    grid-template-columns: 1fr;
  }

  .service-card h3 {
    min-height: 0;
  }

  .step-card:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -26px;
    left: 28px;
    transform: rotate(90deg);
  }
}

@media (max-width: 640px) {
  .wrap {
    width: min(100% - 28px, var(--max));
  }

  .header-inner {
    grid-template-columns: 1fr;
  }

  .header-button {
    min-height: 38px;
    padding-inline: 16px;
    font-size: 12px;
    width: 100%;
  }

  .hero {
    padding-top: 60px;
    margin-bottom: -36px;
    transform: translateY(-36px);
  }

  .lead {
    font-size: 17px;
  }

  .actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .showreel {
    width: 100%;
    min-height: 0;
  }

  .cases {
    display: grid;
    overflow-x: auto;
    grid-template-columns: repeat(4, minmax(280px, 78vw));
    padding-bottom: 0;
  }

  .service-item {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 14px;
  }

  .service-item::before {
    width: 10px;
  }

  #cases .section-head {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 8px;
  }

  #cases .section-head h2 {
    justify-self: start;
  }

  #cases .section-head p {
    justify-self: start;
    text-align: left;
  }

  #trigger .section-head {
    margin-bottom: 22px;
  }

  .carousel-controls {
    display: none;
  }

  .site-footer {
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
  }

  .site-footer span:last-child {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
    white-space: normal;
  }
}