/* ============================================================
   MCZ — KONTAKT  (kontakt.css)  ·  mobile-first
   ============================================================ */

.ct{position:relative;padding:7rem 0 5rem}

/* ---------- HERO ---------- */
.ct-hero{text-align:center;max-width:640px;margin:0 auto 3rem}
.ct-hero .eyebrow{margin-bottom:1.1rem}
.ct-hero__title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  letter-spacing:-.03em;font-size:clamp(2.1rem,8vw,3.4rem);line-height:1.07}
.ct-hero__title em{font-style:normal;background:var(--grad-warm);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ct-hero__sub{color:var(--muted);font-size:1.02rem;margin-top:.9rem}

/* ---------- UKŁAD ---------- */
.ct-layout{display:grid;grid-template-columns:1fr;gap:1.6rem}

/* ---------- FORMULARZ ---------- */
.contact-form{display:flex;flex-direction:column;gap:1.4rem;
  padding:1.8rem 1.5rem;border:1px solid var(--line-soft);border-radius:22px;
  background:var(--surface)}
.form-fields{display:grid;grid-template-columns:1fr;gap:1.2rem}
.field{position:relative}
.field input,.field textarea{width:100%;background:var(--bg-2);
  border:1px solid var(--line-soft);border-radius:14px;padding:1.2rem 1rem .5rem;
  color:var(--cream);font-family:inherit;font-size:.97rem;transition:border-color .25s}
.field textarea{padding-top:1.4rem;resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--orange)}
.field label{position:absolute;left:1rem;top:.95rem;color:var(--muted);font-size:.97rem;
  pointer-events:none;transition:.2s var(--ease)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{
  top:.4rem;font-size:.68rem;letter-spacing:.04em;color:var(--orange);
  font-family:'JetBrains Mono',monospace}
.form-block{border:none}
.form-block legend{font-family:'JetBrains Mono',monospace;font-size:.78rem;
  letter-spacing:.08em;color:var(--orange);margin-bottom:.8rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0}
.chip span{display:block;padding:.65rem 1.1rem;border:1px solid var(--line-soft);
  border-radius:100px;font-size:.9rem;color:var(--muted);transition:.25s var(--ease)}
.chip:hover span{border-color:var(--line);color:var(--cream)}
.chip input:checked+span{background:var(--grad-warm);color:var(--ink);
  border-color:transparent;font-weight:600}
.chip input:focus-visible+span{outline:2px solid var(--orange);outline-offset:2px}
.form-submit{margin-top:.3rem}
.form-msg{font-family:'JetBrains Mono',monospace;font-size:.88rem}
.form-msg.is-pending{color:var(--muted)}
.form-msg.is-ok{color:#28c840}
.form-msg.is-err{color:#ff5f57}

/* ---------- KARTY KONTAKTOWE ---------- */
.ct-aside{display:flex;flex-direction:column;gap:1.1rem}
.ct-card{padding:1.6rem;border:1px solid var(--line-soft);border-radius:20px;
  background:var(--surface)}
.ct-card__ico{width:52px;height:52px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;background:var(--surface-2);
  border:1px solid var(--line);margin-bottom:1rem}
.ct-card__ico svg{width:24px;height:24px;stroke:var(--orange)}
.ct-card h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:1.2rem;letter-spacing:-.02em;margin-bottom:.9rem}
.ct-links{display:flex;flex-direction:column;gap:.6rem}
.ct-links a{display:flex;align-items:center;gap:.6rem;font-size:.95rem;
  color:var(--cream);transition:color .25s}
.ct-links a svg{width:17px;height:17px;stroke:var(--orange);flex:none}
.ct-links a:hover{color:var(--orange)}
.ct-company p{color:var(--muted);font-size:.95rem;margin-bottom:.3rem}
.ct-company p:first-child{color:var(--cream);font-weight:600}

/* ---------- MAPA ---------- */
.ct-map{margin-top:1.6rem;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);line-height:0}
.ct-map iframe{display:block;width:100%;filter:grayscale(.3) contrast(1.05)}

/* ---------- RESPONSIVE ---------- */
@media (min-width:560px){
  .form-fields{grid-template-columns:1fr 1fr}
  .field--full{grid-column:1/-1}
}
@media (min-width:960px){
  .ct{padding:9.5rem 0 6rem}
  .ct-layout{grid-template-columns:1.55fr 1fr;gap:1.8rem;align-items:start}
  .contact-form{padding:2.2rem}
}