/* Cards section background color */
.skills {
    background-image: url("images/bg2-reduce.png");
    background-size: cover;
}

/* Blocks background */
.skill-card {
    background-size: contain; /* Zapewnia skalowanie obrazu, aby zmieścił się w kontenerze, zachowując proporcje */
    background-repeat: no-repeat; /* Zapobiega powtarzaniu się obrazu */
    background-position: center; /* Ustawia obraz w środku kontenera */
    width: 337px;
    height: 476px;
    margin: 15px auto;
}

@media (min-width: 768px) {
    .skill-card {
        width: 449px; /* Skalowana szerokość w pikselach */
        height: 636px; /* Skalowana wysokość w pikselach */
    }
}

#liga1 {
    background-image: url("images/liga-sezon-jesien-2025v2-3.png");
    /* color:rgb(216, 164, 68); */
    color: rgb(204, 39, 39);
    font-weight: bold;
}
#liga2 {
    background-image: url("images/liga-wiosna-2025-v1.png");
    /* color: rgb(216, 164, 68); */
    /* color:rgb(216, 164, 68); - yellow*/
    color: rgb(204, 39, 39);
    font-weight: bold;
    }
#turniej1 {
    background-image: url("images/turniej-open-jesien2025.jpg");
    color: rgb(204, 39, 39);
    font-weight: bold;
}
#turniej2 {
    background-image: url("images/dart-turniej-open-2025-2.jpg");
    color: rgb(204, 39, 39);
    font-weight: bold;
    }
/* h1 color */
.skills h1 {
    color: #ffffff;
}

.skill-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0); /* Początkowo przezroczysty */
    transition: background-color 0.3s ease; /* Łagodna zmiana koloru */
    pointer-events: none; /* Zapewnia, że pseudo-element nie przeszkadza w kliknięciach */
}

.skill-card:hover::after {
    background-color: rgba(0, 0, 0, 0.7); /* Przezroczyste czarne nakrycie na hover */
}

.skill-card:focus::after {
    background-color: rgba(0, 0, 0, 0.7); /* Przezroczyste czarne nakrycie na hover */
}

.skill-card.hover-active::after { background-color: rgba(0, 0, 0, 0.7); /* Przezroczyste czarne nakrycie na hover */ }

.skill-text,
.skill-card p {
    position: absolute;
    z-index: 2; /* Umieszcza tekst nad pseudo-elementem */
    opacity: 0; /* Ukrywa tekst przed najechaniem myszką */
    transition: opacity 0.3s ease; /* Płynne pojawianie się tekstu */
    text-align: center; /* Wyrównanie tekstu */
}

.skill-text {
    top: 30%; /* Wycentrowanie `span` bliżej góry */
    left: 50%;
    transform: translateX(-50%);
    font-size: 56px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .skill-text {
        font-size: 44px;
    }
    .skill-card h3 {
        font-size: 20px;
    }
    
}

.skill-card p {
    color: rgb(255, 255, 255); /* Kolor tekstu */
    bottom: 20%; /* Umieszcza `<p>` bliżej dołu */
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px; /* Rozmiar tekstu */
    margin: 0; /* Usuń marginesy */
}

.skill-card h3 {
    opacity: 0;
    color: white;
}

.skill-card:hover .skill-text, 
.skill-card.hover-active .skill-text,
.skill-card:hover h3,
.skill-card.hover-active h3 {
    opacity: 1; /* Pokazuje tekst na hover */
}

.skill-card a {
    position: absolute; /* Umożliwia zajmowanie całej przestrzeni karty */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none; /* Usuwa podkreślenie linków */
    color: inherit; /* Dziedziczy kolor tekstu z .skill-card */
    display: flex;
    flex-direction: column; /* Ustawia tekst w kolumnie */
    align-items: center; /* Wyśrodkowuje tekst w poziomie */
    justify-content: center; /* Wyśrodkowuje tekst w pionie */
    z-index: 2; /* Ustawia link nad pseudo-elementem ::after */
}

/* Umożliwia, by hover działał na całą kartę, w tym link */
.skill-card:hover a .skill-text,
.skill-card.hover-active a .skill-text,
.skill-card:hover a p,
.skill-card.hover-active a p {
    opacity: 1; /* Pokazuje tekst na hover */
}

.header-bar {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px 0; /* Odstępy w pionie */
    text-align: center; /* Wyśrodkowanie tekstu */
    margin-top: 40px; /* Odstęp od góry */
    margin-bottom: 30px; /* Odstęp od dołu */
    border-radius: 10px;
    opacity: 1;
    display: flex;
    align-items: center; /* Wyśrodkowanie tekstu i obrazków w pionie */
    justify-content: center; /* Rozmieszczenie elementów z odstępem między nimi */
    position: relative; /* Umożliwia pozycjonowanie absolutne wewnątrz kontenera */
}

.header-bar h2 {
    color: #ffffff; /* Kolor tekstu */
    font-size: 40px; /* Rozmiar czcionki */

    margin: 0; /* Usunięcie marginesów */
    font-family: "Finger Paint", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 3px;
    margin: 0; /* Usunięcie marginesów dla h2 */
}

.lotka-lewa, .lotka-prawa {
    width: 18px; /* Ustawienie wielkości obrazków */
    height: auto;
    
}

.lotka-lewa {
    position: absolute;
    left: 70px; /* Ustawienie obrazka po lewej stronie */
    transform: rotate(-90deg); /* Obrócenie obrazków o 90 stopni */
}

.lotka-prawa {
    position: absolute;
    right: 70px; /* Ustawienie obrazka po prawej stronie */
    transform: rotate(90deg); /* Obrócenie obrazków o 90 stopni */
}

@media (min-width: 768px) {
    .lotka-lewa, .lotka-prawa {
        width: 40px;
    }
}
@media (max-width: 520px) {
    .lotka-lewa, .lotka-prawa {
        width: 0px;
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Wyśrodkowuje kolumny w poziomie */
}

.col-xl-6 {
    flex: 1 0 50%; /* Każda kolumna zajmuje 50% szerokości na dużych ekranach */
    max-width: 50%;
    padding: 0 15px; /* Dodaje odstęp po bokach kolumn */
}

@media (max-width: 991px) {
    .col-xl-6 {
        flex: 0 0 100%; /* Każda kolumna zajmuje 100% szerokości na małych ekranach */
        max-width: 100%;
        padding: 0 15px; /* Dodaje odstęp po bokach kolumn */
    }
}