@import url("../../../style.css");

.contact-page {
   --contact-nav-offset: 78px;
   background:
      linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)),
      url("../../../assets/images/indoors.jpg") center top / cover no-repeat fixed;
}

.contact-main {
   height: 90svh;
   display: block;
   padding: var(--contact-nav-offset) 0 0;
}

.contact-section {
   width: 100%;
   height: calc(90svh - var(--contact-nav-offset));
   min-height: 0;
   padding: 96px clamp(72px, 12vw, 192px) clamp(18px, 2.8vw, 34px);
   display: flex;
   flex-direction: column;
   position: relative;
   overflow: hidden;
   background: transparent;
}

.contact-section::after {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background-image: linear-gradient(to right, rgba(50, 55, 251, 0.12) 1px, transparent 1px);
   background-size: 100% 100%;
   background-position: 26% 0;
}

.contact-section > * {
   position: relative;
   z-index: 2;
}

.contact-kicker {
   font-size: 0.72rem;
   text-transform: uppercase;
   letter-spacing: 0.24em;
   color: rgba(50, 55, 251, 0.8);
}

.contact-title {
   margin: 10px 0 28px;
   font-size: clamp(2.4rem, 8vw, 5.2rem);
   letter-spacing: -0.03em;
   text-transform: uppercase;
   line-height: 0.9;
   color: var(--blue-dark);
}

.contact-content {
   flex: 1;
   min-height: 0;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0;
   align-items: start;
}

.contact-panel {
   min-height: 0;
   padding: clamp(12px, 2vw, 20px) 0;
}

.contact-details {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   padding-right: clamp(20px, 3vw, 44px);
}

.contact-intro {
   margin: 0;
   max-width: 44ch;
   color: rgba(16, 16, 16, 0.85);
   line-height: 1.6;
}

.contact-list {
   list-style: none;
   margin: 24px 0 0;
   padding: 0;
   display: grid;
   gap: 22px;
}

.contact-list li {
   border-left: 2px solid rgba(50, 55, 251, 0.48);
   padding-left: 12px;
}

.contact-label {
   display: block;
   margin-bottom: 6px;
   font-size: 0.74rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: rgba(16, 16, 16, 0.7);
}

.contact-list a,
.contact-list p {
   margin: 0;
   color: var(--black);
   text-decoration: none;
   line-height: 1.75;
   letter-spacing: 0.02em;
   word-break: break-word;
}

.contact-form-panel {
   display: flex;
   flex-direction: column;
   padding-left: clamp(20px, 3vw, 44px);
}

.accent-bar {
   width: 44px;
   height: 6px;
   background: var(--blue-dark);
   margin-bottom: 16px;
}

.contact-form-panel p {
   margin: 0;
   max-width: 42ch;
   color: rgba(16, 16, 16, 0.9);
   line-height: 1.6;
}

.contact-form {
   margin-top: 22px;
   display: grid;
   gap: 12px;
}

.contact-form label {
   font-size: 0.72rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.14em;
   color: var(--black);
}

.contact-form input,
.contact-form textarea {
   width: 100%;
   border: 0;
   border-bottom: 1px solid rgba(16, 16, 16, 0.35);
   background: transparent;
   color: var(--black);
   padding: 0 0 10px;
   font: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
   outline: none;
   border-bottom-color: var(--blue-dark);
}

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

.contact-submit {
   margin-top: 12px;
   border: 0;
   background: var(--blue-dark);
   color: var(--white);
   width: fit-content;
   border-radius: 0;
   padding: 11px 24px;
   font: inherit;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.18em;
   cursor: pointer;
}

.contact-submit:hover {
   filter: brightness(0.95);
}

.contact-submit:disabled {
   opacity: 0.7;
   cursor: not-allowed;
}

.form-message {
   margin: 12px 0;
   padding: 12px 16px;
   border-radius: 4px;
   font-size: 0.9rem;
   line-height: 1.5;
}

.form-message--success {
   background: rgba(34, 197, 94, 0.1);
   color: rgb(22, 163, 74);
   border-left: 4px solid rgb(22, 163, 74);
}

.form-message--error {
   background: rgba(239, 68, 68, 0.1);
   color: rgb(220, 38, 38);
   border-left: 4px solid rgb(220, 38, 38);
}

.contact-socials {
   margin-top: 20px;
   display: flex;
   justify-content: flex-end;
}

.social-list {
   list-style: none;
   margin: 8px 0 0;
   padding: 0;
   display: flex;
   gap: 12px;
}

.social-list a {
   display: inline-block;
   padding: 6px 10px;
   background: rgba(0,0,0,0.04);
   border-radius: 0;
   color: var(--black);
   text-decoration: none;
   font-weight: 600;
}

/* Inline WhatsApp button inside contact form */
.whatsapp-inline {
   display: inline-block;
   margin-top: 12px;
   margin-left: 12px;
   background: #25D366;
   color: #fff;
   padding: 10px 14px;
   border-radius: 0;
   text-decoration: none;
   font-weight: 700;
   position: relative;
   z-index: 2147483647;
   pointer-events: auto !important;
   cursor: pointer;
}

.whatsapp-inline:hover {
   filter: brightness(0.95);
}

.contact-page .footer-shell {
   background: transparent;
}

@media (max-width: 920px) {
   .contact-page {
      --contact-nav-offset: 72px;
      background-attachment: scroll;
   }

   .contact-main {
      height: auto;
      min-height: 100svh;
      padding: var(--contact-nav-offset) 0 0;
   }

   .contact-section {
      height: auto;
      min-height: calc(90svh - var(--contact-nav-offset));
      padding: 24px 18px 18px;
   }

   .contact-section::after {
      background-image: linear-gradient(to bottom, rgba(50, 55, 251, 0.12) 1px, transparent 1px);
      background-size: 100% 140px;
      background-position: 0 88px;
   }

   .contact-title {
      font-size: clamp(2rem, 13vw, 3.4rem);
   }

   .contact-content {
      grid-template-columns: 1fr;
      gap: 18px;
   }

   .contact-details,
   .contact-form-panel {
      padding-left: 0;
      padding-right: 0;
   }
}