/* ==========================================================================
   pages/kontakt.css — strona Kontakt (templates/template-kontakt.php).

   Komponenty współdzielone (przyciski, kroki .steps, pas zaufania, akordeon
   FAQ, pasek CTA, kafelki wyboru w formularzu) żyją w components.css — tu są
   wyłącznie rzeczy specyficzne dla tej strony.
   ========================================================================== */

/* Delikatny lawendowy podkład pod całą stroną, z rozjaśnieniem u góry — hero
   w projekcie wtapia się w tło, nie stoi na białym prostokącie. */
.contact-page{
  background:
    radial-gradient(120% 60% at 70% 0%, rgba(23,194,161,.10) 0%, rgba(23,194,161,0) 60%),
    radial-gradient(90% 50% at 10% 0%, rgba(106,31,201,.10) 0%, rgba(106,31,201,0) 55%),
    var(--mist-soft);
}


/* ==========================================================================
   1. Hero — intro + portret agenta
   ========================================================================== */
.contact-hero{padding-bottom:clamp(24px,3vw,36px)}
.contact-hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,56px);align-items:center;
}
@media (max-width:900px){
  .contact-hero__grid{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}
}

.contact-hero__title{
  font-size:clamp(31px,4.2vw,46px);line-height:1.1;letter-spacing:-.03em;
  margin:0;text-wrap:balance;
}
.contact-hero__lead{
  margin:18px 0 0;max-width:44ch;
  color:var(--slate);font-size:clamp(15.5px,1.6vw,17px);line-height:1.65;
}

/* Portret + podpis obok siebie; przy wąskim ekranie jeden pod drugim. */
.contact-hero__aside{
  display:flex;align-items:center;gap:clamp(18px,3vw,28px);flex-wrap:wrap;
}
.contact-portrait{
  flex:0 0 auto;width:min(240px,60%);
  border:2px solid transparent;border-radius:var(--radius-lg);
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    var(--grad) border-box;
  padding:5px;
  box-shadow:var(--shadow-lift);
}
.contact-portrait img{
  display:block;width:100%;height:auto;
  aspect-ratio:3/4;object-fit:cover;object-position:center top;
  border-radius:calc(var(--radius-lg) - 7px);
}
.contact-hero__who{flex:1 1 min(200px,100%);min-width:0}
.contact-badge{
  display:inline-flex;align-items:flex-start;gap:9px;margin:0 0 14px;
  font-size:13.5px;line-height:1.4;color:var(--slate);max-width:24ch;
}
.contact-badge__icon{flex:0 0 auto;display:inline-flex;width:20px;height:20px;margin-top:1px}
.contact-badge__icon svg{width:100%;height:100%}
.contact-hero__name{
  font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);margin:0 0 2px;
}
.contact-hero__role{font-size:13.5px;color:var(--slate);margin:0}


/* ==========================================================================
   2. Formularz + panel kontaktowy
   ========================================================================== */
.contact-main{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(20px,3vw,28px);align-items:stretch;
}
@media (max-width:940px){
  .contact-main{grid-template-columns:1fr}
}

.contact-form-card{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:clamp(24px,3.4vw,34px);
}
.contact-form-card .lead-form-wrap{margin:0}

/* Granatowy panel z kontaktem bezpośrednim. Flex w kolumnie (nie samo bloki
   jak wcześniej) — dzięki temu ilustracja na dole (margin-top:auto) może
   wypełnić wolną przestrzeń, gdy .contact-main rozciąga panel do wysokości
   sąsiedniej białej karty z formularzem (align-items:stretch). Oba kafle
   mają więc zawsze równą wysokość, niezależnie od długości formularza. */
.contact-panel{
  position:relative;overflow:hidden;
  background:var(--ink-deep);color:#fff;
  border-radius:var(--radius);
  padding:clamp(24px,3.4vw,34px);
  display:flex;flex-direction:column;
}
.contact-panel__title{color:#fff;font-size:clamp(19px,2.2vw,23px);margin:0 0 8px}
.contact-panel__lead{color:var(--slate-inv);font-size:14.5px;line-height:1.6;margin:0 0 22px}

.contact-panel__rows{display:grid;gap:10px;position:relative;z-index:1}
.contact-row{
  display:flex;align-items:center;gap:13px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-sm);padding:14px 16px;color:#fff;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.contact-row:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2);color:#fff;transform:translateY(-1px)}
.contact-row__icon{flex:0 0 auto;display:inline-flex;width:20px;height:20px;color:var(--teal)}
.contact-row__icon svg{width:100%;height:100%}
.contact-row__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.contact-row__body b{font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.3;word-break:break-word}
.contact-row__body small{font-size:12.5px;color:var(--slate-inv)}

.contact-hours{
  display:flex;align-items:flex-start;gap:12px;
  margin:22px 0 0;position:relative;z-index:1;
}
.contact-hours__icon{flex:0 0 auto;display:inline-flex;width:20px;height:20px;color:var(--teal);margin-top:1px}
.contact-hours__icon svg{width:100%;height:100%}
.contact-hours b{display:block;font-family:var(--display);font-weight:600;font-size:14.5px;color:#fff}
.contact-hours small{display:block;font-size:12.5px;color:var(--slate-inv);margin-top:2px}

/* Ilustracja w dolnej części panelu — pełna krycie (to gotowa grafika,
   nie subtelna faktura tła jak poprzednia linia SVG); chowa się, gdy panel
   robi się niski (wąski ekran). margin-top:auto spycha ją w dół, pochłaniając
   wolną przestrzeń, którą panel zyskał z align-items:stretch — obraz zawsze
   ląduje przy dolnej krawędzi, niezależnie od tego, o ile panel urósł. */
.contact-panel__deco{
  display:block;width:min(340px,80%);height:auto;
  margin:auto auto 0;
  position:relative;z-index:0;
}
@media (max-width:940px){
  .contact-panel__deco{display:none}
}


/* ==========================================================================
   3. Online i lokalnie
   ========================================================================== */
.contact-local{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,.8fr);
  align-items:center;gap:0;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
.contact-local--noimg{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
@media (max-width:940px){
  .contact-local,
  .contact-local--noimg{grid-template-columns:1fr}
}

.contact-local__media img{
  display:block;width:100%;height:100%;min-height:240px;
  object-fit:cover;
}
.contact-local__body{padding:clamp(24px,3.4vw,36px)}
.contact-local__body h2{font-size:clamp(20px,2.4vw,26px);line-height:1.25;margin:0 0 14px;max-width:20ch}
.contact-local__body p{color:var(--slate);font-size:14.5px;line-height:1.65;margin:0 0 22px;max-width:46ch}
.contact-local__cta{display:flex;flex-wrap:wrap;gap:10px}

.contact-local__map{padding:clamp(10px,1.6vw,18px)}
.contact-local__map img{display:block;width:100%;height:auto}
@media (max-width:940px){
  .contact-local__map{display:none}
  .contact-local__media img{min-height:200px}
}