/* ==========================================================================
   Contact — CTA card, info card, map frame
   ========================================================================== */
.contact-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: stretch;
}

.contact-card{
  border-radius: var(--radius-xl);
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  position: relative;
  overflow: hidden;
}

.contact-card::before{
  content: '';
  position: absolute;
  inset: -40% -20% auto auto;
  width: 60%; height: 140%;
  background: radial-gradient(circle, rgba(255,59,78,.22), transparent 70%);
  filter: blur(20px);
}

.contact-card h3{ font-size: 1.6rem; position: relative; z-index: 1; }
.contact-card p{ color: var(--text-2); max-width: 48ch; position: relative; z-index: 1; }
.contact-card .btn{ align-self: flex-start; position: relative; z-index: 1; }

.side-panels{
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.info-card{
  border-radius: var(--radius-xl);
  padding: clamp(28px, 3.5vw, 40px);
}
.info-card h3{ font-size: 1.25rem; margin-bottom: 22px; }

.info-list{ display: flex; flex-direction: column; gap: 18px; }
.info-list li{ display: flex; align-items: center; gap: 14px; }

.icon-bubble{
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--red-400);
  border: 1px solid var(--border);
}

.info-list a{ text-decoration: none; }
.info-list a:hover{ color: var(--red-400); }
.info-text{ display: flex; flex-direction: column; }
.info-text small{ color: var(--text-3); font-size: .78rem; }

.social-row{ display: flex; gap: 12px; margin-top: 22px; }

.map-frame{
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/11;
  border: 1px solid var(--border-strong);
}
.map-frame iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(.3) invert(.92) contrast(.9);
}