/* ==========================================================================
   Jura-Start - contact.css
   ========================================================================== */

.js-contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.js-contact-h2 { font-size: 1.8rem; margin-bottom: 12px; }
.js-contact-intro { color: var(--js-ink-soft); margin-bottom: 28px; }

.js-contact-card { background: var(--js-night); color: var(--js-paper); border-radius: var(--js-radius-lg); padding: 36px 34px; }
.js-contact-card-h { font-size: 1.4rem; color: var(--js-white); margin-bottom: 22px; }
.js-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.js-contact-list li { display: flex; align-items: center; gap: 13px; color: rgba(255, 255, 255, 0.88); }
.js-contact-list svg { width: 18px; height: 18px; color: var(--js-amber); flex: 0 0 auto; }
.js-contact-list a { transition: color 0.3s; }
.js-contact-list a:hover { color: var(--js-amber); }
.js-contact-socials { display: flex; gap: 12px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--js-line-light); }
.js-contact-socials a { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--js-line-light); border-radius: 50%; transition: border-color 0.3s, color 0.3s; }
.js-contact-socials a:hover { border-color: var(--js-amber); color: var(--js-amber); }
.js-contact-socials svg { width: 18px; height: 18px; }

@media (max-width: 860px) {
  .js-contact-grid { grid-template-columns: 1fr; gap: 36px; }
}