/* =============================================
   Chysio — Contact page (contact.html) specific styles
   Shared header/footer/base styles live in common.css
   ============================================= */

/* ---------- Contact info strip ---------- */
.contact-info{ background:var(--bg); }
.info-card{
  background:var(--white);
  border-radius:var(--radius-md);
  padding:30px 26px;
  box-shadow:var(--shadow-card);
  text-align:center;
}
.info-icon{
  width:52px; height:52px; margin:0 auto 16px;
  border-radius:14px;
  background:var(--mint-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
}
.info-card h3{ font-size:1.05rem; margin-bottom:6px; }
.info-card p{ margin-bottom:0; }
.info-card a{ color:var(--teal-dark); font-weight:600; }

/* ---------- Contact form section ---------- */
.contact-form-section{ background:var(--white); }
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  background:var(--mint-soft);
  padding:32px;
  border-radius:var(--radius-lg);
}
.contact-form .full{ grid-column:1 / -1; }
.contact-form label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  color:var(--pine);
  margin-bottom:6px;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(31,46,39,.12);
  background:var(--white);
  font-family:inherit;
  font-size:.92rem;
  color:var(--text);
}
.contact-form textarea{ resize:vertical; min-height:120px; }
.contact-form button{ margin-top:4px; }
.contact-form .form-note{
  grid-column:1 / -1;
  text-align:left;
  color:var(--teal-dark);
  font-weight:600;
  min-height:1.2em;
  margin:0;
}

.contact-map{ border-radius:var(--radius-lg); overflow:hidden; }

/* =============================================
   Responsive — Tablet
   ============================================= */
@media (max-width: 1024px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-map{ order:2; }
}

/* =============================================
   Responsive — Mobile
   ============================================= */
@media (max-width: 640px){
  .contact-form{ grid-template-columns:1fr; padding:24px; }
}