/* =========================
   HERO
   ========================= */
.contact-hero{position:relative;background-image:var(--bg);background-position:center;background-size:cover}
.contact-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.15))}
.contact-hero .container{position:relative;z-index:1;min-height:260px;display:flex;align-items:center}
.contact-hero h1{color:#fff;font-size:40px;letter-spacing:.02em;margin:0}

/* =========================
   SEKCJA KONTAKTU
   ========================= */
.contact{padding:36px 20px 46px}
.contact__head{text-align:center}
.contact__lead{color:#666;margin:8px auto 24px;max-width:760px;font-size:14px}

/* --- UKŁAD: 2/3 (formularz) + 1/3 (informacje) --- */
.contact__grid{
  display:grid;
  grid-template-columns:2fr 1fr;      /* LEWA 2/3: .form, PRAWA 1/3: .info */
  gap:28px;
  align-items:start;
}

/* Pozycje w siatce (bez zmiany HTML) */
.contact__grid > .form{grid-column:1;grid-row:1}
.contact__grid > .info{grid-column:2;grid-row:1}

/* =========================
   LEWA KOLUMNA: INFORMACJE
   ========================= */
.info{display:grid;gap:12px;width:100%}
.info__item{
  display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;
  background:#fff;border:1px solid #e9e9e9;border-radius:12px;padding:12px 14px;
  box-shadow:0 2px 10px rgba(0,0,0,.04)
}
.info__ico{
  display:grid;place-items:center;width:42px;height:42px;border-radius:10px;
  background:#f5fde9;color:#7cc35a;border:1px solid #dff2bf
}
.info__label{font-size:11px;color:#666;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.info__val{font-weight:700;color:#111}
.info__val a{color:inherit;text-decoration:none}
.info__val a:hover{text-decoration:underline}

/* =========================
   PRAWA KOLUMNA: FORMULARZ
   ========================= */
.form{
  background:#fff;border:1px solid #e9e9e9;border-radius:12px;padding:18px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  width:100%; /* brak max-width / margin:auto */
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
@media (max-width:900px){ .form__row{grid-template-columns:1fr} }

.inp{
  width:100%;padding:12px 14px;border:1px solid #e1e1e1;border-radius:12px;font:inherit;font-size:16px;line-height:1.4;color:#111;background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease
}
.inp::placeholder{font-size:15px;color:#666;opacity:1}
.inp:focus{outline:none;border-color:#cfd9cf;box-shadow:0 0 0 3px rgba(0,128,0,.08)}
.inp--area{min-height:180px;resize:vertical}

.check{display:flex;gap:10px;align-items:flex-start;margin:12px 0 10px;color:#444;font-size:13px;line-height:1.45}
.check input{width:18px;height:18px;margin-top:2px}

.btn{display:inline-block;padding:.75rem 1.2rem;border-radius:999px;border:1px solid transparent;cursor:pointer}
.btn--send{background:#e94b4b;color:#fff;font-weight:800;width:100%}

/* =========================
   NEWSLETTER CTA
   ========================= */
.news-cta{background:#f6f7f8;padding:40px 0 56px;margin-top:14px}
.news-cta__lead{color:#666;margin:6px 0 18px;text-align:center}
.news-cta__form{display:flex;gap:10px;justify-content:center;max-width:760px;margin:0 auto}
.news-cta .inp{flex:1;min-width:280px}
.btn--sub{background:#2cc24a;color:#fff;border-color:#2cc24a}

/* =========================
   RWD
   ========================= */
@media (max-width:1024px){
  .contact__grid{grid-template-columns:1fr}
  .contact__grid > .form{grid-column:1;grid-row:1}
  .contact__grid > .info{grid-column:1;grid-row:2}
}

/* === KONTAKT: nagłówek nad siatką + LEWO 2/3 FORM / PRAWO 1/3 INFO === */

/* 0) Nagłówek sekcji na pełną szerokość + odstęp pod tytułem */
.contact .contact__head{ grid-column: 1 / -1; margin: 0 0 18px; }

/* 1) Siatka pod nagłówkiem: 2/3 (form) + 1/3 (info) */
.contact .contact__grid{
  display: grid;
  grid-template-columns: 2fr 1fr;   /* lewa/prawa */
  gap: 28px;
  align-items: start;
  width: 100%;
}

/* 2) Ustaw pozycje niezależnie od kolejności w HTML */
.contact .form{ grid-column: 1; grid-row: 1; }
.contact .info{ grid-column: 2; grid-row: 1; }

/* 3) Zdejmij globalne ograniczenia szerokości/centrowanie,
      które pchały formularz do środka */
.contact .form,
.contact .info{
  max-width: none;         /* ważne: kasuje np. 460px z globali */
  width: 100%;
  margin: 0;               /* kasuje margin:0 auto */
  justify-self: stretch;
  align-self: start;
}

/* 4) Na mobile/tablet: jedna kolumna, formularz nad informacjami */
@media (max-width: 980px){
  .contact .contact__grid{ grid-template-columns: 1fr; }
  .contact .form{ grid-column: 1; grid-row: 1; }
  .contact .info{ grid-column: 1; grid-row: 2; }
}