/* =========================================================
   Strona główna: sekcja "Nasze drużyny" (układ, odstępy)
   oraz pasek "Zagraj w barwach Brzozy".
   Wgraj do: assets/css/join.css
   ========================================================= */

/* --- większy odstęp od nagłówka do pierwszego zdjęcia --- */
.teams-section .teams-head{margin-bottom:clamp(44px,6vw,76px);}

/* --- większe odstępy między zdjęciami drużyn (komputer / tablet) --- */
@media (min-width:761px){
  .teams-section .team-rows{
    display:flex; flex-direction:column;
    gap:60px;
  }
}

/* --- komputer: zdjęcie szersze niż tabela --- */
@media (min-width:1024px){
  .teams-section .team-row{
    display:grid;
    grid-template-columns:1.75fr 1fr;
    gap:40px;
    align-items:stretch;
  }
  .teams-section .team-row.is-reverse{
    grid-template-columns:1fr 1.75fr;
  }

  .teams-section .team-row > .team-photo-card{
    grid-column:1; grid-row:1;
    aspect-ratio:auto;
    min-height:420px;
  }
  .teams-section .team-row > .lt-card{
    grid-column:2; grid-row:1;
    aspect-ratio:auto;
    min-height:420px;
    align-self:stretch;
  }
  .teams-section .team-row.is-reverse > .team-photo-card{
    grid-column:2;
  }
  .teams-section .team-row.is-reverse > .lt-card{
    grid-column:1;
  }

  /* zdjęcie wypełnia całą kartę (wysokość zostaje, rośnie tylko szerokość) */
  .teams-section .team-row > .team-photo-card img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position:center 60%;
  }
  /* kadrowanie: I drużyna — mocno w dół (mniej nieba, widać nogi),
     II drużyna — tylko odrobinę niżej */
  .teams-section a.team-photo-card[href="druzyna-1.html"] img{object-position:center 100%;}
  .teams-section a.team-photo-card[href="druzyna-2.html"] img{object-position:center 72%;}
}

/* =========================================================
   Pasek "Zagraj w barwach Brzozy"
   Układ (komputer):  [tytuł + opis]   [przycisk]   [piłka]
   ========================================================= */
.join{
  position:relative;
  overflow:hidden;
  margin-top:clamp(56px,7vw,88px);
  border-radius:var(--radius-l);
  padding:clamp(24px,3vw,32px) clamp(24px,4vw,48px) clamp(24px,3vw,32px) clamp(28px,4vw,52px);
  color:#fff;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  column-gap:clamp(24px,4vw,56px);
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(227,185,58,.28), transparent 65%),
    radial-gradient(420px 220px at 0% 100%, rgba(58,108,171,.35), transparent 65%),
    linear-gradient(135deg, var(--navy-900), var(--navy-700));
  box-shadow:var(--shadow-pop);
}
.join::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:8px;
  background:linear-gradient(180deg, var(--mustard-400), var(--mustard-600));
}
.join::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px);
}

.join-watermark{
  position:absolute; right:-6px; bottom:-26px;
  font-family:var(--ff-impact);
  font-weight:600;
  font-size:clamp(4rem,11vw,8rem);
  line-height:1;
  letter-spacing:.04em;
  color:rgba(255,255,255,.05);
  pointer-events:none; user-select:none;
}

.join-text{position:relative; z-index:2;}
.join-text h2{
  color:#fff;
  font-size:clamp(1.7rem,3vw,2.4rem);
  line-height:1.1;
  margin:0 0 10px;
}
.join-text p{
  color:#d3dceb;
  font-size:1rem;
  line-height:1.6;
  max-width:56ch;
}

.join-btn{
  position:relative; z-index:2;
  white-space:nowrap;
  padding:14px 30px;
  font-size:1rem;
}
.join-btn span{display:inline-block; transition:transform .18s ease;}
.join-btn:hover span{transform:translateX(5px);}

.join-ball{
  position:relative; z-index:2;
  font-size:clamp(3.4rem,6vw,4.8rem);
  line-height:1;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.4));
  animation:join-bounce 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes join-bounce{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-9px) rotate(18deg); }
}

/* tablet / telefon: jedna kolumna */
@media (max-width:860px){
  .join{
    display:block;
    padding:24px 18px 22px 24px;
  }
  .join::before{width:6px;}
  .join-text h2{margin-right:70px;}
  .join-btn{display:flex; width:100%; margin-top:20px;}
  .join-ball{
    position:absolute; top:16px; right:16px;
    font-size:3.2rem;
  }
}