/* ==========================================================================
   Tandem Contact Page Section-Specific Styles
   ========================================================================== */

/* Hero 3D Graphic styling */
.contact-hero-media {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 2;
   width: 100%;
}

.contact-hero-media .has-glow {
   position: relative;
   width: 100%;
   max-width: 580px;
   display: flex;
   justify-content: center;
   align-items: center;
   --glow-size: 550px;
   --glow-blur: 80px;
}



@media (max-width: 1280px) {
   .contact-hero-media .has-glow {
      margin-top: 0;
   }
}

.contact-hero-media img {
   width: 100%;
   height: auto;
   max-width: 500px;
   object-fit: contain;
   filter: drop-shadow(0 20px 50px rgba(var(--primary-purple-rgb), 0.25));
}

@media (max-width: 1280px) {
   .contact-hero-media img {
      max-width: 100%;
   }
}

/* --- 2. Category Cards Section --- */
.contact-cards-section {
   padding-top: 0;
}

.contact-cards-section .glass-card {
   height: auto;
}

.contact-cards-section .glass-card .btn-primary {
   margin-top: auto;
}

@media (max-width: 1280px) {
   .contact-cards-section {
      margin-top: calc(-1 * (var(--space-3xl) + var(--space-2xl)));
   }
}

@media (max-width: 1280px) and (min-width: 769px) {
   .contact-cards-section .card-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-md);
   }
}

@media (max-width: 768px) {
   .contact-cards-section {
      margin-top: var(--space-xl);
   }
}

/* --- 3. Form Section --- */
.contact-form-section .section-header {
   align-items: center;
   text-align: center;
   margin-bottom: var(--space-md);
   /* 2x smaller than var(--space-xl) */
}

.form-submit-wrapper {
   display: flex;
   justify-content: center;
   margin-top: var(--space-sm);
}

@media (max-width: 768px) {

   .form-submit-wrapper,
   .form-submit-wrapper .btn-primary,
   .form-submit-wrapper button,
   .form-submit-wrapper input[type="submit"],
   .form-submit-wrapper p {
      width: 100%;
      justify-content: center;
   }
}

.contact-form-wrapper {
   position: relative;
   width: 100%;
}

.contact-form-decor {
   left: -140px;
   top: 50%;
   transform: translateY(-50%);
   width: 280px;
}

.contact-ball-img {
   width: 100%;
   height: auto;
   object-fit: contain;
   filter: drop-shadow(0 15px 35px rgba(var(--primary-purple-rgb), 0.25));
}

@media (max-width: 1280px) {
   .contact-form-decor {
      width: 220px;
      left: -80px;
   }
}

@media (max-width: 768px) {
   .contact-form-decor {
      width: 150px;
      left: -40px;
   }
}