/* Contact page specifics: hero, grid, cards, form, map */

/* ===== Hero (white title) ===== */
.contact-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding: clamp(4rem, 12vw, 9rem) 0;
  background:
    radial-gradient(1000px 500px at 15% 10%, rgba(122,62,240,.25), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(255,43,179,.20), transparent 60%),
    var(--gradient-brand);
  color:#fff;
}
.contact-hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0)); pointer-events:none; }
.contact-hero-inner{ position:relative; z-index:1; text-align:center; }
.contact-hero-title{ color:#ffffff; font-size: clamp(2rem, 4.5vw, 3.2rem); text-shadow:0 10px 30px rgba(0,0,0,.25); }
.contact-hero-subtitle{ color:#f5f7ff; margin-top:.6rem; font-size: clamp(1rem, 2.2vw, 1.2rem); opacity:.95; }

/* ===== Layout ===== */
.contact-grid{
  display:grid; grid-template-columns: 1.05fr 1fr; gap:1.1rem; align-items:start;
}

/* ===== Info cards ===== */
.contact-cards{ display:grid; grid-template-columns: 1fr 1fr; gap:1.1rem; margin-top:.8rem; }
.contact-card{
  background:#fff; border:1px solid #eef; border-radius:var(--radius-xl);
  padding: .9rem 1rem; box-shadow: var(--shadow);
  display:flex; gap:.75rem; align-items:flex-start;
  transition: transform .25s ease, box-shadow .25s ease;
}
.contact-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 30px rgba(11,29,54,.14); }

.contact-icon{
  flex:0 0 46px; width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background: var(--lilac);
  box-shadow: inset 0 0 0 2px rgba(122,62,240,.25), 0 8px 20px rgba(122,62,240,.18);
}
.contact-icon svg{ width:24px; height:24px; stroke:var(--purple); fill:none; stroke-width:2; }

.contact-info h2{ color:var(--oxblood); margin:0 0 .35rem; }
.contact-card h3{ margin:.05rem 0 .2rem; color:var(--navy-900); }
.contact-card p{ margin:0; color:var(--muted); }

/* ===== Form ===== */
.contact-form-container{
  background:#fff; border:1px solid #eef; border-radius:var(--radius-xl);
  padding: clamp(1rem, 3vw, 1.4rem); box-shadow: var(--shadow);
}
.contact-form-container h2{ margin:.1rem 0 .6rem; color:var(--navy-900); }

.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:.9rem; }
.form-group{ display:flex; flex-direction:column; gap:.35rem; }
label{ font-weight:600; color:var(--navy-900); }

input, select, textarea{
  border:1px solid #e5e7eb; border-radius:12px; padding:.7rem .8rem; font: inherit; color:#0b1d36;
  background:#fff; outline:none; transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(122,62,240,.55);
  box-shadow: 0 0 0 4px rgba(122,62,240,.15);
}
.field-hint{
  display:none; font-size:.86rem; color:#b42318;
}

.success-message{
  background:#f0fdf4; border:1px solid #bbf7d0; border-radius:12px; padding:.9rem 1rem; color:#065f46;
  box-shadow: var(--shadow); margin-bottom:.8rem;
}

.btn.btn-primary{ min-width:160px; }

/* ===== Map ===== */
.map-section{
  background:
    radial-gradient(900px 500px at 20% 20%, #f5f1ff 0%, transparent 70%),
    radial-gradient(900px 500px at 80% 0%, #ffe9f7 0%, transparent 60%);
}
.map-container{
  width:100%; aspect-ratio: 16/9; border:1px solid #eef; border-radius:var(--radius-xl); overflow:hidden; box-shadow: var(--shadow);
}
.map-container iframe{ width:100%; height:100%; display:block; }

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .contact-cards{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
}