/* Cards section background color */
.skills-archiwum {
    background-image: url("images/archiwum-bg5.png");
    background-attachment: fixed;
}

/* Blocks background */
.skill-card-archiwum {
    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: 165.13px;
    height: 233.24px;
    margin: 15px auto;
}

@media (min-width: 991px) {
    .skill-card-archiwum {
        width: 235.9px;
        height: 333.2px;
    }
}

#lato2024 {
background-image: url("images/liga_lato_2024-reduce.png");
font-weight: bold;
}
#zima2024 {
background-image: url("images/liga_zima_2024-reduce.png");
font-weight: bold;
}
#liga2 {
    background-image: url("images/liga_zima_2024-reduce.png");
    /* color: rgb(89, 165, 89); */
    /* color:rgb(216, 164, 68); - yellow*/
    color: rgb(255, 63, 63); /* Kolor tekstu */
    font-weight: bold;
    }
#turniej1 {
    background-image: url("images/tur_open1_2024-reduce.png");
    color: rgb(255, 63, 63); /* Kolor tekstu */
    font-weight: bold;
}
#turniej2 {
    background-image: url("images/tur_charytatywny_2024-reduce.png");
    color: rgb(255, 63, 63); /* Kolor tekstu */
    font-weight: bold;
    }
#turniej3 {
    background-image: url("images/walentynkowy2025-v2.png");
    color: rgb(255, 63, 63); /* Kolor tekstu */
    font-weight: bold;
    }

#turniej4 {
    background-image: url("images/turniej-charytatywny-tosia-v5.png");
    color: rgb(255, 63, 63); /* Kolor tekstu */
    font-weight: bold;
    }
/* h1 color */
.skills-archiwum h1 {
    color: #ffffff;
}


.skill-card-archiwum::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-archiwum:hover::after {
    background-color: rgba(0, 0, 0, 0.7); /* Przezroczyste czarne nakrycie na hover */
}

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

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

.skill-text,
.skill-card-archiwum 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: 10%; /* Wycentrowanie `span` bliżej góry */
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    white-space: nowrap;
}

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

#podpis {
    color: rgb(255, 255, 255); /* Kolor tekstu */
    width: 100%;
    font-size: 20px; /* Rozmiar tekstu */
    text-align: center;

}





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

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

.skill-card-archiwum 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-archiwum */
    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-archiwum:hover a .skill-text,
.skill-card-archiwum.hover-active a .skill-text,
.skill-card-archiwum:hover a p,
.skill-card-archiwum.hover-active a p {
    opacity: 1; /* Pokazuje tekst na hover */
}

.header-bar-archiwum {

    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-archiwum h2 {
    color: #ffffff; /* Kolor tekstu */
    font-size: 40px; /* Rozmiar czcionki */

    margin: 0; /* Usunięcie marginesów */
    font-family: "Cinzel", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    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 (min-width: 768px) and (max-width: 1200px) {
    .col-xl-3 {
        flex: 0 0 100%; /* Każda kolumna zajmuje 100% szerokości */
        max-width: 33%; /* Maksymalna szerokość kolumny */
        padding: 0 5px; /* Dodaje odstęp po bokach kolumn */
    }
}

@media (max-width: 768px) {
    .col-xl-3 {
        flex: 0 0 100%; /* Każda kolumna zajmuje 100% szerokości */
        max-width: 50%; /* Maksymalna szerokość kolumny */
        padding: 0 5px; /* Dodaje odstęp po bokach kolumn */
    }
}

#winner {
    color: gold; 
    font-size: 20px; /* Zwiększa rozmiar ikony */
    top: 10%;

}

#heart {
    color: rgb(212, 51, 113); 
    font-size: 20px; /* Zwiększa rozmiar ikony */
    top: 10%;
}

#winner2 {
    color: silver;
    font-size: 20px; /* Zwiększa rozmiar ikony */
    top: 20%;
}

#winner3 {
    color: #cd7f32;
    font-size: 20px; /* Zwiększa rozmiar ikony */
    top: 30%;
}

#wybryki {
    color: rgb(179, 179, 179);
    font-size: 16px; /* Zwiększa rozmiar ikony */
    top: 45%;
    padding: 0px;
}

@media (max-width: 991px) {
    .skill-text {
        font-size: 12px;
    }
    .skill-card-archiwum h3 {
        font-size: 20px;
    }
    .skill-card-archiwum p {
        font-size: 10px;
    }

    #winner3, #winner2, #winner {
        font-size: 16px;
    }

    #podpis {
        font-size: 16px;
    }

    #wybryki {
        font-size: 12px;
    }
    
}