.partners {

}

/* Kontener dla loga i tooltipa, potrzebny do pozycjonowania */
.partners .logos .partner-logo-wrapper {
    position: relative; /* Kluczowe dla pozycjonowania absolutnego tooltipa */
    display: inline-flex; /* Lub block/flex w zależności od Twojego układu */
    align-items: center;
    justify-content: center;
}

/* Sam tooltip (dymek) - początkowo ukryty */
.partner-tooltip {
    /* Pozycjonowanie */
    position: absolute;
    bottom: 100%; /* Pojawi się nad logiem */
    left: 0;
    transform: translateX(-1%) translateY(10px); /* Wyśrodkowanie i lekkie przesunięcie w dół */
    z-index: 20;

    /* Wygląd - inspirowany .popup-wrap */
    width: 280px; /* Możesz dostosować szerokość */
    background: #000;
    color: #fff;
    padding: 20px;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Odstęp między opisem a przyciskiem */
    text-align: left;

    /* Ukrywanie i animacja */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    pointer-events: none; /* Aby nie przeszkadzał, gdy jest niewidoczny */
}

.partner-tooltip:after {
	content: " ";
	position: absolute;
	bottom: -15px;
	left: 0;
	width: 100%;
	height:20px;
	z-index: 999;
	display:block;
}

/* Styl dla tekstu opisu w tooltipie */
.partner-tooltip p {
    margin: 0;
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
}

/* Przycisk wewnątrz tooltipa - inspirowany .leaflet-container a.btn */
.partner-tooltip .btn-tooltip {
    display: inline-block;
    background: #DEFC52;
    border: 1px solid #DEFC52;
    padding: 12px 20px;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
    border-radius: 3px;
    color: #000;
    font-family: "Space Grotesk", sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
}

/* Efekt :hover dla przycisku */
.partner-tooltip .btn-tooltip:hover {
    background-color: #000;
    color: #DEFC52;
    border-color: #DEFC52;
}

/* Magia: Pokaż tooltip po najechaniu na kontener z logiem */
.partner-logo-wrapper:hover .partner-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-1%) translateY(-10px); /* Płynne wysunięcie do góry */
    pointer-events: auto; /* Umożliwia kliknięcie przycisku w środku */
}

.partner-tooltip{
  left: 50%;
  transform: translate(calc(-50% + var(--shift, 0px)), 10px);
}
.partner-logo-wrapper:hover .partner-tooltip{
  transform: translate(calc(-50% + var(--shift, 0px)), -10px);
}

.partners .header {
	position: relative;
	min-height: 100dvh;
}

.partners .header .in {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 90%;
	width: 1100px;
}

.partners .header .in p.subtitle {
	color: #FFF;
	margin: 0 auto;
	text-align: center;
	font-family: "Space Grotesk";
	font-size: 40px;
	font-style: normal;
	font-weight: 600;
	line-height: 103px; /* 257.5% */
	letter-spacing: 2px;
	text-transform: uppercase;
}

.partners .header .in p.title {
	color: #FFF;
	margin: 0 auto;
	text-align: center;
	leading-trim: both;
	text-edge: cap;
	font-family: Bender;
	font-size: 100px;
	font-style: normal;
	font-weight: 900;
	line-height: 110px; /* 110% */
	letter-spacing: 5px;
	text-transform: uppercase;
}

.partners .container {
	padding-bottom: 80px;
}

.partners .section {
	display: flex;
	align-items: top;
	gap: 85px;
	padding: 80px 0;
	border-bottom: 1px solid #000;
}

.partners .section .half {
	width: 50%;
}

.partners .section .half p.title {
	color: #000;
	margin: 0;
	leading-trim: both;
	text-edge: cap;
	font-family: "Space Grotesk";
	font-size: 60px;
	font-style: normal;
	font-weight: 600;
	line-height: 103%; /* 61.8px */
}

.partners .section .half .logos {
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 20px;
	flex-wrap: wrap;
}

.partners .logos .partner-logo-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(33.3% - 15px);
    height: 155px;
    position: relative;
    border-radius: 2px;
    border: 1px solid #000;
}

.partners .section .half .logos a img {
	position: absolute;
	max-height: 54px;
	max-width: 157px;
	top: 50%;
	left: 50%;
	width: auto;
	header: auto;
	transform: translate(-50%, -50%);
}

@media only screen and (max-width: 996px) {
	.partners .header .in p.subtitle {
		color: #FFF;
		margin: 0 auto 40px auto;
		text-align: center;
		leading-trim: both;
		text-edge: cap;
		font-family: "Space Grotesk";
		font-size: 20px;
		font-style: normal;
		font-weight: 600;
		line-height: 26px; /* 130% */
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	.partners .header .in p.title {
		color: #FFF;
		text-align: center;
		font-family: Bender;
		font-size: 45px;
		font-style: normal;
		font-weight: 900;
		line-height: 50px; /* 111.111% */
		letter-spacing: 2.25px;
		text-transform: uppercase;
	}

	.partners .section {
		padding: 40px 0;
		flex-wrap: wrap;
		gap: 0;
	}

	.partners .section .half {
		width: 100%;
	}

	.partners .section .half p.title {
		color: #000;
		margin: 0 auto 40px auto;
		leading-trim: both;

		text-edge: cap;
		font-family: "Space Grotesk";
		font-size: 40px;
		font-style: normal;
		font-weight: 600;
		line-height: 103%;
	}

	.partners .logos .partner-logo-wrapper {
		width: calc(50% - 10px);
		height: 100px;
	}

	.partners .section .half .logos a img {
		max-width: 130px;
		max-height: 47px;
	}

	.partners .container {
		padding-bottom: 40px;
	}
}