/* ============================================================
   Kronisys — contact page (v4 polish)
   Page-specific rules only; components live in css/global.css
   ============================================================ */

/* ===== hero — short slab; thin blue rule + kicker above h1 (mirrors about) ===== */
.hero{--hero-img:url("../assets/heroes/hero-contact.webp"),url("../assets/heroes/hero-contact.jpg"),url("../assets/heroes/hero-contact.png")}
.hero.hero-s{min-height:360px}

/* ===== left column — heading + plain link rows (hairline dividers only) ===== */
.contact-aside h2{font-size:clamp(30px,3.8vw,46px);font-weight:700;letter-spacing:-1.6px;line-height:1.05;color:var(--ltt)}
.contact-aside .lead{margin-top:14px;font-size:15px;line-height:1.6;color:var(--ltt2);max-width:380px}
@media(min-width:961px){
  .contact-aside{position:sticky;top:110px}
}

.mrows{margin-top:clamp(34px,4.5vh,52px);border-top:1px solid var(--ltb)}
.mrow{padding:clamp(22px,2.8vh,28px) 0;border-bottom:1px solid var(--ltb)}
.mlab{font-family:var(--f);font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--ltt3);display:block;margin-bottom:10px;transition:color .3s var(--ease)}
.mrow:hover .mlab{color:var(--cd)}
.mlink{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:600;letter-spacing:-.45px;line-height:1.25;color:var(--ltt);transition:color .3s var(--ease)}
.mlink svg{width:16px;height:16px;flex-shrink:0;color:var(--ltt3);transition:transform .35s var(--ease),color .3s var(--ease)}
.mlink:hover{color:var(--cd)}
.mlink:hover svg{color:var(--cd);transform:translateX(5px)}
.mrow p{margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--ltt2);max-width:380px}

/* ===== right column — the form ===== */
.form-head{margin-bottom:26px}
.form-head h3{font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.5px;color:var(--ltt)}
.form-head p{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--ltt2)}

.contact-form{display:flex;flex-direction:column;gap:18px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* validation states (driven by the preserved form script) */
.contact-form input.invalid,.contact-form select.invalid,.contact-form textarea.invalid{border-color:#d8432b;background:#fff4f2;box-shadow:0 0 0 3px rgba(216,67,43,.14)}
.contact-form input.valid,.contact-form select.valid,.contact-form textarea.valid{border-color:rgba(0,151,237,.45)}
.form-feedback{display:none;font-size:11.5px;line-height:1.45;margin-top:6px}
.form-feedback.show{display:block}
.form-feedback.error{color:#b8472f}
.form-feedback.success{color:var(--ltt2)}

/* submit + loading */
#submit-btn{align-self:flex-start;margin-top:8px}
#submit-btn:disabled{opacity:.65;cursor:not-allowed;transform:none;box-shadow:none}
.loading-spinner{display:none;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
#submit-btn.loading .loading-spinner{display:inline-block}
#submit-btn.loading .btn-text{opacity:.75}
@keyframes spin{to{transform:rotate(360deg)}}

/* success / error banner */
.form-message{display:none;padding:14px 18px;border-radius:12px;font-size:13.5px;font-weight:600;line-height:1.55;border:1px solid var(--ltb)}
.form-message.show{display:block}
.form-message.success{border-color:rgba(0,151,237,.35);color:var(--cd);background:rgba(0,151,237,.07)}
.form-message.error{border-color:rgba(193,74,54,.4);color:#a83d27;background:rgba(193,74,54,.07)}

/* ===== responsive ===== */
@media(max-width:768px){
  .mrows{margin-top:30px}
  .mrow{padding:20px 0}
  .mlink{font-size:18px}
  .form-head{margin-bottom:22px}
}
@media(max-width:600px){
  .f-row{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  }