/* Отдельная входная страница для посетителей мероприятий ПРОЗИ. */

.page-event{
  --event-bg:#f6f8f4;
  --event-ink:#12271a;
  --event-muted:#536259;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:var(--event-bg);
  color:var(--event-ink);
}

.event-header{
  position:relative;
  z-index:2;
}
.event-header__inner{
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.event-city{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--green-ink);
  font-size:15px;
  font-weight:600;
}

.event-main{
  display:grid;
  align-items:center;
}
.event-hero{
  padding-block:clamp(26px,5vw,72px);
}
.event-hero__grid{
  max-width:1280px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(32px,5vw,72px);
}
.event-copy{
  position:relative;
  z-index:1;
}
.event-kicker{
  margin-bottom:22px;
  color:var(--green-ink);
  font-size:14px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.event-copy h1{
  max-width:13ch;
  font-size:clamp(46px,5.2vw,72px);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.047em;
}
.event-lead{
  max-width:55ch;
  margin-top:28px;
  color:var(--event-muted);
  font-size:clamp(17px,1.55vw,20px);
  line-height:1.55;
}
.event-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:36px;
}
.event-btn{
  min-width:244px;
  min-height:62px;
  justify-content:space-between;
  padding-inline:28px;
  font-weight:600;
}
.event-btn .icon{
  transition:transform var(--t-fast) var(--ease);
}
.event-btn:hover .icon{
  transform:translateX(4px);
}
.page-event .btn--ghost{
  background:#fff;
}
.page-event .btn--ghost:hover{
  background:var(--green-soft);
}

/* Иллюстрация нарисована на белом. multiply растворяет белое поле в фоне
   страницы, поэтому она стоит прямо на странице, без плашки и рамки.
   У предков картинки не должно быть isolation и своего фона, иначе
   смешиваться будет не с чем и белый прямоугольник вернётся. */
.event-visual{
  margin:0;
}
.event-visual img{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  mix-blend-mode:multiply;
}

.event-footer{
  color:#6b766f;
  font-size:13px;
}
.event-footer__inner{
  min-height:72px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0 20px;
  border-top:1px solid rgba(0,0,0,.08);
}
.event-footer__links{
  display:flex;
  flex-wrap:wrap;
  margin-right:-10px;
}
.event-footer__links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-inline:10px;
  border-radius:999px;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.event-footer__links a:hover{
  color:var(--green-ink);
  background:var(--green-soft);
}

/* соцсети: круглые значки, цель 44px, между соседними 8px. На широком
   экране прижаты к ссылкам справа, а не висят посередине подвала */
.event-footer__social{
  display:flex;
  gap:8px;
  margin-left:auto;
}
@media (max-width:760px){
  /* значки встают отдельной строкой: сам знак ровно по краю копирайта */
  .event-footer__social{ margin-left:-10px; }
}
.event-footer__social a{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:999px;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.event-footer__social a:hover{
  color:var(--green-ink);
  background:var(--green-soft);
}
.event-footer__social .icon{
  width:22px;
  height:22px;
}
.event-footer__note{
  flex-basis:100%;
  padding-bottom:12px;
  font-size:12px;
  line-height:1.45;
  color:#6b766f;
}

/* На широком экране у картинки по краям белые поля: даём ей выйти за
   колонку на эти поля, чтобы сам рисунок стоял по краю сетки */
@media (min-width:761px){
  .event-visual img{
    width:108%;
    margin-inline:-4%;
  }
}

@media (max-width:960px){
  .event-hero__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
    gap:32px;
  }
  .event-copy h1{
    font-size:clamp(42px,5.8vw,60px);
  }
}

@media (max-width:760px){
  .event-header__inner{ height:72px; }
  .event-hero{ padding-block:22px 42px; }
  .event-hero__grid{
    grid-template-columns:minmax(0,1fr);
    gap:34px;
  }
  .event-kicker{ margin-bottom:17px; }
  .event-copy h1{
    max-width:16ch;
    font-size:clamp(36px,10vw,48px);
    line-height:1.05;
  }
  .event-lead{
    max-width:43ch;
    margin-top:22px;
    font-size:17px;
  }
  .event-actions{
    display:grid;
    margin-top:28px;
  }
  .event-btn{
    width:100%;
    min-width:0;
    min-height:60px;
  }
  .event-visual{
    width:100%;
    max-width:560px;
    margin-inline:auto;
  }
  /* ссылки переносятся под копирайт: текст ровняем по его левому краю */
  .event-footer__inner{ padding-block:10px; }
  .event-footer__links{ margin-inline:-10px; }
}

@media (max-width:420px){
  .event-city{ font-size:0; gap:0; }
  .event-city .icon{ width:22px; height:22px; }
  .event-copy h1{ font-size:36px; }
  .event-btn{
    min-height:60px;
    padding-inline:20px;
    gap:8px;
    font-size:16px;
  }
  .event-footer__inner{ min-height:62px; }
}

@media (max-height:720px) and (min-width:761px){
  .event-header__inner{ height:72px; }
  .event-hero{ padding-block:18px 30px; }
  .event-copy h1{ font-size:clamp(42px,4.7vw,60px); }
  .event-kicker{ margin-bottom:14px; }
  .event-lead{ margin-top:20px; }
  .event-actions{ margin-top:26px; }
  .event-footer__inner{ min-height:56px; }
}