:root{ --brand:#eab308; }
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.font-serif{ font-family: "Playfair Display", Georgia, serif; }

.hero{
  min-height: 85vh;
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('assets/hero.webp');
  background-position: center;
  background-size: cover;
}
@supports (background-image: image-set(url('x') 1x)) {
  .hero{
    background-image:
      linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
      image-set(url('assets/hero.webp') 1x, url('assets/hero@2x.webp') 2x);
  }
}
@media (min-width:1600px){
  .hero{
    background-image:
      linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
      url('assets/hero@2x.webp');
  }
}
.overlay{ position:absolute; inset:0; background: radial-gradient(70% 50% at 50% 40%, rgba(255,255,255,.06), rgba(0,0,0,0)); }
.section-padding{ padding: 5rem 0; }
.bg-gradient-dark{ background: linear-gradient(180deg, #0b0b0b 0%, #111 100%); }

.btn-primary{ background-color: var(--brand); border-color: var(--brand); color:#111; }
.btn-primary:hover{ filter: brightness(1.05); }

.card{ transition: transform .2s ease, box-shadow .2s ease; }
.card:hover{ transform: translateY(-2px); box-shadow: 0 1rem 2rem rgba(0,0,0,.3); }
@media (max-width: 576px){ .display-4{ font-size: 2.3rem; } }

/* Kafelek O nas */
.training-card {
  background: url("assets/trening.webp") center/cover no-repeat;
  background-position: calc(50% + 20px) calc(50% - 20px);
  min-height: 300px;
}
.training-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.20);
  padding: 2rem;
}

/* Oferta – kafelki */
.card-basics {
  background: url("assets/basics.webp") center/cover no-repeat;
  min-height: 300px;
  position: relative;
}
.card-strategy {
  background: url("assets/strategy.webp") center/cover no-repeat;
  background-position-y: calc(50% + 10px); /* przesunięcie kart w dół */
  min-height: 300px;
  position: relative;
}
.card-turnament {
  background: url("assets/poker.webp") center/cover no-repeat;
  background-position-y: calc(50% + 10px); /* przesunięcie kart w dół */
  min-height: 300px;
  position: relative;
}
.card-individual {
  background: url("assets/indywidualne.webp") center/cover no-repeat;
  min-height: 300px;
  position: relative;
}

.card .card-body {
  position: relative;
  z-index: 2;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
  border-radius: inherit;
}