/* =====================================================
   Mido Hasan — Contact Fallback Section
   /assets/css/24__contact-fallback.css
   MIDO PHASE 10.4.1 CONTACT FALLBACK ACTIVE
   ===================================================== */

.mht-contact-fallback {
  padding-block: clamp(32px, 5vw, 56px) 0;
}
.mht-contact-fallback__card {
  /* locked glass-card base applied via class; add spacing here */
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 40px);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.mht-contact-fallback__card::before {
  content: '';
  position: absolute;
  inset: -60px -40px;
  z-index: 0;
  background: radial-gradient(55% 55% at 80% 20%, rgba(183,140,255,.08), transparent 70%);
  pointer-events: none;
}
.mht-contact-fallback__inner {
  position: relative;
  z-index: 1;
  /* Phase 10.9.4 (Option C): widened from 580px so the section fills more
     width instead of leaving a large right-side gap. */
  max-width: 100%;
}
.mht-contact-fallback__heading {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  color: var(--text-primary, #F6F2F7);
  margin: 0 0 clamp(10px, 1.5vw, 16px);
  letter-spacing: -.02em;
}
.mht-contact-fallback__body {
  color: var(--text-secondary, #AFA4B8);
  font-family: var(--font-sans);
  font-size: clamp(.9rem, 1vw, 1rem);
  line-height: 1.7;
  /* Keep the intro readable but not full-bleed. */
  max-width: 56ch;
  margin: 0 0 clamp(22px, 3vw, 32px);
}
/* Phase 10.9.4: socials as a premium card row instead of a vertical list. */
.mht-contact-fallback__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.mht-contact-fallback__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid rgba(245, 243, 247, 0.10);
  border-radius: 14px;
  background: rgba(246, 242, 247, 0.025);
  color: var(--text-primary, #F6F2F7);
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    border-color var(--t-mid, 320ms) var(--ease-out),
    background-color var(--t-mid, 320ms) var(--ease-out),
    transform var(--t-mid, 320ms) var(--ease-out);
}
.mht-contact-fallback__link:hover {
  color: #FFFFFF;
  border-color: rgba(183, 140, 255, 0.4);
  background: rgba(183, 140, 255, 0.07);
  transform: translateY(-2px);
}
.mht-contact-fallback__link-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #B78CFF;
}
.mht-contact-fallback__link-value {
  color: inherit;
  font-size: .98rem;
}
@media (max-width: 600px) {
  .mht-contact-fallback__links {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}
@media (max-width: 380px) {
  .mht-contact-fallback__links {
    grid-template-columns: 1fr;
  }
}