/* =========================================================
   Podstrona Kontakt — boisko z animacją rysowania linii
   Plik: assets/css/kontakt.css (ładować PO style.css)
   ========================================================= */

/* --- karty kontaktowe po lewej --- */
.kx-card{
  align-items:center;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.kx-card a{
  color:var(--navy-700);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--mustard-500);
  text-underline-offset:3px;
  text-decoration-thickness:2px;
}
.kx-card a:hover{color:var(--navy-900);}
.kx-card.is-active{
  border-color:var(--mustard-500);
  background:var(--mustard-100);
  box-shadow:var(--shadow-card);
  transform:translateX(4px);
}

/* --- boisko --- */
.kx-pitch-card{
  background:var(--navy-900);
  color:#fff;
  border-radius:var(--radius-l);
  padding:20px 18px 18px;
  box-shadow:var(--shadow-pop);
  max-width:460px;
  margin-inline:auto;
  width:100%;
}
.kx-pitch{
  position:relative;
  width:100%;
  max-width:300px;
  margin:0 auto;
  aspect-ratio:340/520;
}
.kx-pitch svg{position:absolute; inset:0; width:100%; height:100%; display:block;}

.kx-lines *{
  fill:none;
  stroke:var(--mustard-400);
  stroke-width:2;
  stroke-linejoin:round;
  stroke-dasharray:1 1;
  stroke-dashoffset:1;
}
.kx-pitch.is-drawn .kx-lines *{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1) calc(var(--i,0) * .16s);
}
.kx-spot{
  fill:var(--mustard-400);
  opacity:0;
  transition:opacity .5s ease 1.4s;
}
.kx-pitch.is-drawn .kx-spot{opacity:1;}

/* --- punkty na boisku --- */
.kx-hot{
  position:absolute;
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  padding:0; border:0; background:none;
  opacity:0;
  transition:opacity .5s ease 1.7s;
}
.kx-pitch.is-drawn .kx-hot{opacity:1;}
.kx-hot i{
  position:absolute; inset:13px;
  border-radius:50%;
  background:var(--mustard-500);
  animation:kx-pulse 2.2s ease-out infinite;
}
.kx-hot b{
  position:absolute;
  left:calc(100% - 6px); top:50%;
  transform:translateY(-50%);
  font-family:var(--ff-body);
  font-weight:600;
  font-size:.74rem;
  color:var(--navy-900);
  background:var(--mustard-400);
  padding:3px 10px;
  border-radius:100px;
  white-space:nowrap;
}
.kx-hot.is-active i{
  background:#fff;
  animation:none;
  box-shadow:0 0 0 5px rgba(227,185,58,.9);
}
.kx-hot.is-active b{background:#fff;}
@keyframes kx-pulse{
  0%{box-shadow:0 0 0 0 rgba(227,185,58,.65);}
  100%{box-shadow:0 0 0 16px rgba(227,185,58,0);}
}

/* --- pod boiskiem: jeden przycisk akcji dla wybranego punktu --- */
.kx-go{
  display:flex; justify-content:center; width:100%; max-width:300px;
  margin:16px auto 0; padding:11px 20px; font-size:.95rem;
}

/* telefon i wąski tablet (boisko trafiałoby pod listę kontaktów): boisko ukryte —
   te same dane i przyciski są w kartach powyżej, a niżej od razu widać trenerów */
@media (max-width:860px){
  .kx-pitch-card{display:none;}
}

/* --- mapa --- */
.kx-map{padding-top:0;}
.kx-map .map-frame iframe{height:420px;}
@media (max-width:640px){ .kx-map .map-frame iframe{height:320px;} }

@media (prefers-reduced-motion: reduce){
  .kx-lines *, .kx-spot, .kx-hot{transition-delay:0s !important;}
  .kx-hot i{animation:none;}
}

/* =========================================================
   Zarząd klubu — prezes w dużej granatowej karcie, reszta obok
   ========================================================= */
.kx-board{padding-bottom:24px;}
.kx-board .teams-head, .kx-coaches .teams-head{margin-bottom:34px;}
.kx-board-grid{
  display:grid; grid-template-columns:1.15fr 1fr 1fr; grid-template-rows:auto auto; gap:16px;
}
.kx-avatar{
  flex:none; display:grid; place-items:center;
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(150deg, var(--navy-700), var(--navy-900));
  color:var(--mustard-400); font-family:var(--ff-display); font-weight:500; font-size:1.15rem; letter-spacing:.04em;
  box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--mustard-500);
}
.kx-role{
  display:block; font-family:var(--ff-display); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mustard-700); font-weight:500;
}
.kx-person{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:18px;
  padding:22px 22px; background:#fff;
  border:1px solid var(--paper-line); border-radius:var(--radius-l); box-shadow:var(--shadow-card);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kx-person:hover{transform:translateY(-3px); box-shadow:var(--shadow-pop); border-color:var(--mustard-400);}
.kx-person h3{font-family:var(--ff-display); font-weight:500; font-size:1.15rem; color:var(--navy-900); margin-top:3px; line-height:1.2;}

/* prezes */
.kx-person.is-lead{
  grid-row:span 2; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:6px;
  min-height:260px; padding:28px;
  background:
    radial-gradient(380px 220px at 100% 0%, rgba(227,185,58,.28), transparent 65%),
    linear-gradient(150deg, var(--navy-800), var(--navy-900));
  border-color:var(--navy-900); color:#fff;
}
.kx-person.is-lead:hover{border-color:var(--mustard-500);}
.kx-person-crest{
  position:absolute; right:-28px; top:-18px; width:190px; height:auto;
  opacity:.12; transform:rotate(-8deg); pointer-events:none;
}
.kx-person.is-lead .kx-avatar{
  width:76px; height:76px; font-size:1.6rem; margin-bottom:auto;
  background:var(--mustard-500); color:var(--navy-900);
  box-shadow:0 0 0 4px var(--navy-800), 0 0 0 6px var(--mustard-400);
}
.kx-person.is-lead .kx-role{color:var(--mustard-400); font-size:.8rem; margin-top:18px;}
.kx-person.is-lead h3{color:#fff; font-size:clamp(1.5rem, 2.4vw, 1.9rem);}
.kx-person.is-lead p{color:#c8d2e0; font-size:.9rem;}

/* =========================================================
   Trenerzy drużyn — karty z numerem „do kliknięcia”
   ========================================================= */
.kx-coaches{padding-top:24px;}
.kx-group-title{
  display:flex; align-items:center; gap:14px; margin:6px 0 16px;
  font-family:var(--ff-display); font-weight:500; font-size:1.05rem; letter-spacing:.12em; text-transform:uppercase; color:var(--navy-900);
}
.kx-group-title::after{content:""; flex:1; height:1px; background:var(--paper-line);}
.kx-coach-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-bottom:30px;}
.kx-coach-grid.is-two{grid-template-columns:repeat(2, minmax(0, 1fr));}
.kx-coach{
  position:relative; display:flex; flex-direction:column; gap:16px;
  padding:20px 20px 18px; background:#fff;
  border:1px solid var(--paper-line); border-radius:var(--radius-l); box-shadow:var(--shadow-card);
  border-top:4px solid var(--navy-700);
  transition:transform .25s ease, box-shadow .25s ease;
}
.kx-coach.is-youth{border-top-color:var(--mustard-500);}
.kx-coach:hover{transform:translateY(-3px); box-shadow:var(--shadow-pop);}
.kx-coach-teams{display:flex; flex-wrap:wrap; gap:6px;}
.kx-chip{
  padding:4px 11px; border-radius:100px; font-size:.78rem; font-weight:600;
  background:var(--paper-soft); color:var(--navy-800); border:1px solid var(--paper-line);
  transition:background .2s ease, border-color .2s ease;
}
.kx-chip:hover{background:var(--mustard-100); border-color:var(--mustard-400);}
.kx-coach-person{display:flex; align-items:center; gap:14px;}
.kx-coach-person .kx-avatar{width:48px; height:48px; font-size:1rem;}
.kx-coach-person h3{font-family:var(--ff-display); font-weight:500; font-size:1.2rem; color:var(--navy-900); margin-top:2px; line-height:1.2;}
.kx-call{
  margin-top:auto; display:flex; align-items:center; gap:10px;
  padding:11px 14px 11px 12px; border-radius:var(--radius-m);
  background:var(--navy-900); color:#fff;
  transition:background .2s ease, transform .2s ease;
}
.kx-call svg{
  width:30px; height:30px; padding:6px; border-radius:50%; flex:none;
  background:var(--mustard-500); fill:var(--navy-900);
}
.kx-call span{font-family:var(--ff-display); font-weight:500; font-size:1.2rem; letter-spacing:.04em; font-variant-numeric:tabular-nums;}
.kx-call em{margin-left:auto; font-style:normal; font-size:.78rem; font-weight:600; color:var(--mustard-400);}
.kx-call em::after{content:" →";}
.kx-call:hover{background:var(--navy-700);}
.kx-call:hover em::after{content:" ☎";}
.kx-call:focus-visible{outline:3px solid var(--mustard-500); outline-offset:2px;}

@media (max-width:900px){
  .kx-board-grid{grid-template-columns:1fr 1fr;}
  .kx-person.is-lead{grid-column:1 / -1; grid-row:auto; min-height:0;}
  .kx-coach-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:640px){
  .kx-board-grid{gap:10px;}
  .kx-person{flex-direction:column; align-items:flex-start; gap:12px; padding:16px;}
  .kx-person h3{font-size:1.02rem;}
  .kx-person .kx-avatar{width:44px; height:44px; font-size:.95rem;}
  .kx-person.is-lead{padding:22px; flex-direction:row; align-items:center; justify-content:flex-start; gap:16px;}
  .kx-person-crest{width:150px; right:-36px; top:-14px; opacity:.09;}
  .kx-person.is-lead .kx-avatar{width:62px; height:62px; font-size:1.3rem; margin:0;}
  .kx-person.is-lead .kx-role{margin-top:0;}
  .kx-coach-grid, .kx-coach-grid.is-two{grid-template-columns:1fr; gap:12px; margin-bottom:24px;}
}