/* 
 * Custom CSS - możesz tutaj dodać własne style
 * Ten plik jest ładowany po głównym styles.css, więc możesz nadpisywać istniejące style
 */



.my-header {
	padding: 0;
	color: white;
	width: 100%;
	background-image: url('../img/okladka.jpg');
	background-position: center;
	background-size: cover;
}

.swal2-image {
  object-fit: cover;
  aspect-ratio: 16 / 9;
  width: 100%; 

}

.my-header-cover {

	min-height: 200px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #00000085;
}


.my-header-flex {
}

.credit {
	text-align: right;
	padding: 10px; 
	background: rgb(12 12 12 / 77%);

}


.my-title {
	display: block;
	text-align: center;
	font-size: 28px;
	padding-top:0px;
	font-weight: bold;
}

.my-subtitle {
	display: block;
	text-align: center;
	font-size: 30px;
	padding-top:5px;
	font-weight: 500;
}
.my-info {
	display: block;
	text-align: center;
	font-size: 15px;
	padding-top: 5px;
    color: #d3d3d3;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
    text-shadow: 1px 1px 7px black;
}

.my-info a {
    margin: 5px 10px; 
}

.my-info a:hover {
    color: #c99037;
}

.my-logo {
    text-shadow: 1px 1px 7px black;
	max-width: 500px;
	margin:0 40px;
}


.credit-flex {
	justify-content: center;
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 0 10px 0 10px;
}

.credit-left {

}

.credit-right {

}

/* Usunięcie białego obrysu (focus ring) po kliknięciu na przyciski i miniatury */
.iconbtn:focus,
.iconbtn:focus-visible,
.floatbtn:focus,
.floatbtn:focus-visible,
.lbSide:focus,
.lbSide:focus-visible,
.album__sort-btn:focus,
.album__sort-btn:focus-visible,
.album:focus,
.album:focus-visible,
.card:focus,
.card:focus-visible{
	outline: none !important;
	box-shadow: none !important;
}

/* Mobile: zakładka do otwierania/zamykania sidebara */
@media (max-width: 680px){
	.floatbtn{
		left: 0 !important;
		top: auto !important;
		bottom: 20px !important;
		width: 48px !important;
		height: 48px !important;
		border-radius: 0 12px 12px 0 !important;
		border-left: none !important;
		border-right: 1px solid var(--border) !important;
		transform: none !important;
	}
	.floatbtn:hover{
		transform: none !important;
	}
	.floatbtn:active{
		transform: none !important;
	}
}

/* Mobile portrait: sidebar może mieć pełną szerokość */
@media (max-width: 680px) and (orientation: portrait){
	.sidebar{ width: 100vw; }
}