/* Contact uses the V3 hero artwork around a naturally sized content area. */
body.contact-v3-page {
  background: #141414;
}

body.contact-v3-page::before,
body.contact-v3-page::after {
  display: none;
}

.contact-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(#0002, #0002), #141414 url("./v3Assets/hero/background Black Gsrek@2x 1.png") center top / cover no-repeat;
}

.contact-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: min(100%, 2000px);
  min-height: max(780px, 100svh);
  margin-inline: auto;
}

.contact-stage .header-hero {
  flex: none;
  align-items: center;
  width: 90%;
  margin-inline: auto;
  padding: 28px 0 0;
}

.contact-stage .festival-logo {
  width: clamp(82px, 7.5vw, 120px);
}

.contact-stage .hero-nav {
  gap: clamp(14px, 2vw, 28px);
  font-size: clamp(20px, 1.8vw, 28px);
}

.contact-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(68%, 1000px);
  margin-inline: auto;
  padding: 40px 0 100px;
}

.contact-content .contact-title {
  width: min(75%, 330px);
  margin: 0 0 28px;
  text-align: center;
}

.contact-content .contact-title img {
  display: block;
  width: 100%;
  max-width: 100% !important;
  height: auto;
}

.contact-content .contact-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  padding: 0;
  gap: 16px;
  background: transparent;
}

.contact-content .contact-left {
  min-width: 0;
  padding: clamp(22px, 2.4vw, 36px);
}

.contact-content .contact-left h2 {
  font-size: clamp(20px, 1.8vw, 26px);
  margin-bottom: 26px;
}

.contact-content .contact-email,
.contact-content .contact-phone {
  overflow-wrap: anywhere;
  font-size: 18px;
  margin: 12px 0;
}

.contact-content .contact-address {
  font-size: 16px;
  margin-top: 24px;
}

.contact-content .contact-right {
  min-width: 0;
}

.contact-content .contact-form {
  gap: 12px;
}

.contact-content .contact-form input,
.contact-content .contact-form textarea {
  min-width: 0;
  padding: 16px 20px;
  font-size: 18px;
}

.contact-content .contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-content .get-in-touch-btn {
  margin-top: 24px;
  padding: 12px 36px;
  font-size: 22px;
}

.contact-stage .contact-v3-hero-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.contact-stage .contact-v3-hero-art img {
  position: absolute;
  display: block;
  height: auto;
  max-height: 55%;
  object-fit: contain;
  object-position: bottom;
  user-select: none;
}

.contact-stage .contact-v3-lamp { left: 1.5%; bottom: 0; width: 6%; }
.contact-stage .contact-v3-kang { left: 4%; bottom: -8px; width: 14%; }
.contact-stage .contact-v3-women { right: 3%; bottom: -8px; width: 14%; }
.contact-stage .contact-v3-starburst { left: -6%; bottom: -7%; width: 22%; }
.contact-stage .contact-v3-cactus { left: .5%; bottom: -8px; width: 7%; }
.contact-stage .contact-v3-donut { right: -7%; bottom: -14%; width: 23%; z-index: -1; }

@media (max-width: 800px) {
  .contact-stage { min-height: 100svh; }
  .contact-stage .header-hero { width: calc(100% - 40px); padding-top: 24px; }
  .contact-content { width: min(100% - 40px, 560px); padding: 36px 0 250px; }
  .contact-content .contact-container { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .contact-content .contact-left { padding: 24px; }
  .contact-content .contact-title { width: min(70%, 280px); }
  .contact-stage .contact-v3-lamp { left: 7%; width: 62px; max-height: 220px; }
  .contact-stage .contact-v3-kang { left: 15%; width: 130px; max-height: 215px; }
  .contact-stage .contact-v3-women { right: 8%; width: 140px; max-height: 200px; }
  .contact-stage .contact-v3-starburst { left: -50px; bottom: -40px; width: 230px; }
  .contact-stage .contact-v3-cactus { left: 3%; width: 75px; }
  .contact-stage .contact-v3-donut { right: -80px; bottom: -95px; width: 250px; }
}

@media (max-width: 420px) {
  .contact-stage .header-hero { width: calc(100% - 32px); }
  .contact-stage .hero-nav { gap: 12px; font-size: 18px; }
  .contact-stage .nav-ticket-btn img { width: 100px; height: auto !important; }
  .contact-content { width: calc(100% - 32px); }
  .contact-content .contact-left { padding: 20px; }
  .contact-content .contact-left h2 { font-size: 22px; }
  .contact-stage .contact-v3-kang { left: 12%; width: 120px; }
  .contact-stage .contact-v3-women { right: 4%; width: 125px; }
}