/* Resonika 1.9.2 - Mural: kulisy 9:16, relacja z odsloniecia i galeria wydarzenia. */

html body .res-project-document .res-mural-backstage,
html body .res-project-document .res-mural-unveiling,
html body .res-project-document .res-mural-local-video,
html body .res-project-document .res-mural-event-gallery {
  width: 100%;
}

html body .res-project-document .res-mural-backstage {
  margin-top: clamp(44px,6vw,92px);
  padding-top: clamp(48px,6vw,86px);
  border-top: 1px solid var(--line);
}

html body .res-project-document .res-mural-local-video {
  margin-top: clamp(36px,5vw,72px);
  margin-bottom: clamp(64px,8vw,116px);
}

html body .res-local-video-block {
  display: grid;
  grid-template-columns: minmax(250px,.65fr) minmax(280px,.35fr);
  gap: clamp(34px,7vw,112px);
  align-items: start;
  width: 100%;
}

html body .res-local-video-head {
  position: sticky;
  top: 126px;
  padding-top: 8px;
}

html body .res-local-video-head h3 {
  max-width: 740px;
  margin: 15px 0 0;
  font-family: var(--res-font-display,Arial,sans-serif);
  font-size: clamp(44px,6.5vw,96px);
  font-weight: 650;
  line-height: .84;
  letter-spacing: -.06em;
  text-transform: uppercase;
  color: #f5f2ed;
}

html body .res-local-video-frame {
  position: relative;
  width: min(100%,480px);
  justify-self: end;
  aspect-ratio: 9/16;
  overflow: hidden;
  background: #0b0b0b;
  border: 1px solid rgba(245,242,237,.2);
}

html body .res-local-video-frame video,
html body .res-local-video-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0b0b0b;
}

html body .res-local-video-frame > img {
  filter: grayscale(.25) contrast(1.04) brightness(.78);
}

html body .res-local-video-editor-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  border: 1px dashed rgba(245,242,237,.3);
  color: #f5f2ed;
}

html body .res-local-video-editor-empty strong {
  font-family: var(--res-font-display,Arial,sans-serif);
  font-size: 28px;
  text-transform: uppercase;
}

html body .res-local-video-editor-empty span,
html body .res-local-video-caption {
  font: 400 11px/1.6 var(--res-font-menu,'Courier New',monospace);
  letter-spacing: .04em;
  color: #aaa298;
}

html body .res-local-video-caption {
  grid-column: 2;
  width: min(100%,480px);
  justify-self: end;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(245,242,237,.15);
}

html body .res-project-document .res-mural-unveiling {
  padding-top: clamp(56px,7vw,100px);
  border-top: 1px solid var(--line);
}

html body .res-project-document .res-mural-report-copy {
  max-width: 940px;
}

html body .res-project-document .res-mural-report-copy p + p {
  margin-top: 1.25em;
}

html body .res-project-document .res-mural-report-copy strong {
  color: #f5f2ed;
}

html body .res-project-document .res-mural-event-gallery {
  margin-top: clamp(64px,9vw,130px);
  padding-top: clamp(54px,7vw,94px);
  padding-bottom: clamp(60px,8vw,110px);
  border-top: 1px solid var(--line);
}

html body .res-event-gallery-head {
  max-width: 980px;
  margin-bottom: clamp(38px,5vw,70px);
}

html body .res-event-gallery-head h2 {
  margin: 14px 0 18px;
  font-family: var(--res-font-display,Arial,sans-serif);
  font-size: clamp(48px,7.5vw,108px);
  font-weight: 650;
  line-height: .84;
  letter-spacing: -.06em;
  text-transform: uppercase;
  color: #f5f2ed;
}

html body .res-event-gallery-head p {
  max-width: 760px;
  margin: 0;
  color: #bdb7af;
  font: 400 clamp(16px,1.35vw,21px)/1.55 var(--res-font-body,Arial,sans-serif);
}

html body .res-event-gallery-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
}

html body .res-event-gallery-credit {
  margin: 18px 0 0;
  padding-top: 13px;
  border-top: 1px solid rgba(245,242,237,.15);
  text-align: right;
  color: #aaa298;
  font: 400 11px/1.5 var(--res-font-menu,'Courier New',monospace);
  letter-spacing: .05em;
}

@media (max-width: 980px) {
  html body .res-local-video-block { grid-template-columns: 1fr; }
  html body .res-local-video-head { position: static; }
  html body .res-local-video-frame { justify-self: start; width: min(100%,430px); }
  html body .res-local-video-caption { grid-column: 1; justify-self: start; width: min(100%,430px); margin: 0; }
  html body .res-event-gallery-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  html body .res-local-video-head h3 { font-size: clamp(42px,15vw,70px); }
  html body .res-local-video-frame { width: min(100%,360px); }
  html body .res-local-video-caption { width: min(100%,360px); }
  html body .res-event-gallery-head h2 { font-size: clamp(44px,15vw,72px); }
  html body .res-event-gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
  html body .res-event-gallery-credit { text-align: left; }
}