/* SECTION / HEADER
   ------------------------------------------------------------------ */
.iml-gallery-section {
	background:#111116;
	color:#ffffff;
	padding:80px 24px;
}
.iml-gallery-inner {
    max-width: var(--content-width);
	margin:0 auto;
}
.iml-gallery-header {
	text-align:center;
	margin-bottom:42px;
}
.iml-gallery-label {
    background: #2E2E2E 0% 0% no-repeat padding-box;
    border-radius: 7px;
    display: block;
    text-align: center;
    padding: 5px 15px;
    font: normal normal normal 20px / 26px Avenir;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    opacity: 1;
    margin: 0 auto;
    width: fit-content;
    margin-bottom: 30px;
}
.iml-gallery-title {
    margin: 0 0 12px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0px;
    font-size: 41px;
    font-family: Avenir;
}
.iml-gallery-title span {
	color:#f30546;
}
.iml-gallery-text {
	max-width:620px;
	margin:0 auto;
	letter-spacing: 0px;
    font-size: 20px;
    color: #C4C4C4;
    opacity: 1;
    font-family: Avenir;
}
.iml-gallery-underline {
	width:80px;
	height:2px;
	background:#f30546;
	margin:24px auto 0;
	display: none;
}

/* TABS
   ------------------------------------------------------------------ */
.iml-gallery-tabs {
	margin-top:32px;
}

.iml-gallery-tab-buttons {
	display:flex;
	justify-content:center;
	gap:32px;
	flex-wrap:wrap;
	border-bottom:1px solid #34323d;
	padding-bottom:6px;
	margin-bottom:26px;
}

.iml-gallery-tab-button {
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	border:none;
	background:transparent;
	color:#b0afbd;
	font-size:13px;
	text-transform:none;
	letter-spacing:0.08em;
	padding:4px 0 8px;
	cursor:pointer;
	outline:none;
	font-weight:500;
}
.iml-gallery-tab-button::after {
	content:'';
	position:absolute;
	left:0;
	right:0;
	bottom:-7px;
	height:2px;
	background:transparent;
	transform-origin:center;
	transform:scaleX(0);
	transition:all .22s ease;
}
.iml-gallery-tab-button.is-active {
	color:#ffffff;
}
.iml-gallery-tab-button.is-active::after {
	background:#f30546;
	transform:scaleX(1);
}

.iml-gallery-tab-panels {
	position:relative;
}
.iml-gallery-tab-panel {
	display:none;
}
.iml-gallery-tab-panel.is-active {
	display:block;
}

/* MASONRY GRID (Desktop)
   ------------------------------------------------------------------ */
/*
 Layout wie im Screenshot:
  - Bild 1: links groß, hoch
  - Bild 2: oben mittig, breit
  - Bild 3: rechts hoch
  - Bild 4 & 5: unten in der Mitte, zwei kleinere
*/

.iml-gallery-grid {
	display:grid;
	grid-template-columns:2.1fr 1.3fr 1.3fr 1.6fr;
	grid-auto-rows:120px;
	gap:16px;
}

.iml-gallery-item {
	position:relative;
	overflow:hidden;
	border-radius:0px;
	background:#000;
	margin:0;
	cursor: zoom-in;
}
.iml-gallery-item img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .45s ease;
}
.iml-gallery-item:hover img {
	transform:scale(1.04);
}

/* Positionen für bis zu 5 Bilder */
.iml-gallery-item-1 { grid-column:1 / 2; grid-row:1 / span 4; }
.iml-gallery-item-2 { grid-column:2 / 4; grid-row:1 / span 2; }
.iml-gallery-item-3 { grid-column:4 / 5; grid-row:1 / span 4; }
.iml-gallery-item-4 { grid-column:2 / 3; grid-row:3 / span 2; }
.iml-gallery-item-5 { grid-column:3 / 4; grid-row:3 / span 2; }

/* Fallback, falls mehr als 5 Bilder vorhanden sind */
.iml-gallery-grid .iml-gallery-item:nth-child(n+6) {
	grid-row:auto;
	grid-column:auto;
}

/* CAPTION / OVERLAY
   ------------------------------------------------------------------ */

.iml-gallery-caption {
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	padding:18px 20px 16px;
	background:linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0));
	color:#ffffff;
	font-size:13px;
	line-height:1.5;
	opacity:0;
	transform:translateY(8px);
	transition:opacity .28s ease, transform .28s ease;
	pointer-events:none;
}
.iml-gallery-item:hover .iml-gallery-caption {
	opacity:1;
	transform:translateY(0);
}
.iml-gallery-caption-title {
	font-weight:600;
	margin-bottom:4px;
}
.iml-gallery-caption-text {
	font-size:12px;
	color:#e5e5e5;
}


.iml-gallery-tab-button.is-active {
    color: #ffffff !important;
    font-weight: 400;
    background-color: transparent !important;
}

button.iml-gallery-tab-button {
    width: auto;
    padding: 10px 20px;
    text-align: center;
    font: normal normal medium 17px/28px Avenir!important;
    letter-spacing: 0px;
    color: #C4C4C4 !important;
    opacity: 1;
    font-size: 17px;
    font-family: Avenir;
    font-weight: normal;
    background-color: transparent !important;
}

/* LIGHTBOX / OVERLAY
   ------------------------------------------------------------------ */

.iml-gallery-lightbox {
	position:fixed;
	inset:0;
	z-index:9999;
	display:none;
	align-items:center;
	justify-content:center;
}

.iml-gallery-lightbox.is-open {
	display:flex;
}

.iml-gallery-lightbox-backdrop {
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0.8);
}

.iml-gallery-lightbox-dialog {
	position:relative;
	z-index:1;
	max-width:90vw;
	max-height:90vh;
	display:flex;
	flex-direction:column;
	align-items:stretch;
}

.iml-gallery-lightbox-figure {
	margin:0;
	background:#000;
	border-radius:8px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	max-height:90vh;
}

.iml-gallery-lightbox-image {
	max-width:90vw;
	max-height:70vh;
	width:auto;
	height:auto;
	object-fit:contain;
	display:block;
	background:#000;
}

.iml-gallery-lightbox-caption {
	padding:12px 16px 14px;
	background:#050505;
	color:#fff;
	font-size:13px;
	line-height:1.5;
}
.iml-gallery-lightbox-caption-title {
	font-weight:600;
	margin-bottom:4px;
}
.iml-gallery-lightbox-caption-text {
	font-size:12px;
	color:#e0e0e0;
}



/* Close Button & Arrows */

.iml-gallery-lightbox-close {
	position:absolute;
	top:-48px;          /* höher über dem Bild */
	right:0;
	border:none;
	background:transparent;
	color:#ffffff;
	font-size:34px;     /* größer */
	cursor:pointer;
	line-height:1;
	padding:4px 8px;
	z-index:10;
	position: fixed;
    top: 180px;
    right: 30px;
    width: 50px;
    background-color: #000 !important;
}

.iml-gallery-lightbox-nav {
	position:fixed;           /* statt absolute → an den Bildschirmrand */
	top:50%;
	transform:translateY(-50%);
	border:none;
	background:rgba(0,0,0,0.55)!important;
	color:#ffffff;
	font-size:32px;
	cursor:pointer;
	width:54px;
	height:78px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:8px;
	z-index:99999;
}

.iml-gallery-lightbox-prev {
	left:24px;               /* Abstand zum linken Rand */
}

.iml-gallery-lightbox-next {
	right:24px;              /* Abstand zum rechten Rand */
}

@media (max-width:600px) {
	.iml-gallery-lightbox-nav {
		width:42px;
		height:60px;
		font-size:26px;
	}
	.iml-gallery-lightbox-prev {
		left:10px;
	}
	.iml-gallery-lightbox-next {
		right:10px;
	}
	.iml-gallery-lightbox-close {
		top:-40px;
		right:0;
		font-size:28px;
	}
}


/* RESPONSIVE
   ------------------------------------------------------------------ */

@media (max-width:1200px){
	.iml-gallery-grid {
		grid-template-columns:1.9fr 1.4fr 1.4fr 1.5fr;
		grid-auto-rows:110px;
	}
}

@media (max-width:1024px){
	/* etwas kompakter, aber gleiche Logik */
	.iml-gallery-grid {
		grid-template-columns:1.8fr 1.5fr 1.5fr;
		grid-auto-rows:130px;
	}
	.iml-gallery-item-1 { grid-column:1 / 2; grid-row:1 / span 4; }
	.iml-gallery-item-2 { grid-column:2 / 4; grid-row:1 / span 2; }
	.iml-gallery-item-3 { grid-column:3 / 4; grid-row:3 / span 4; }
	.iml-gallery-item-4 { grid-column:2 / 3; grid-row:3 / span 2; }
	.iml-gallery-item-5 { grid-column:2 / 3; grid-row:5 / span 2; }
}

@media (max-width:768px){
	.iml-gallery-section{
		padding:56px 16px;
	}
	.iml-gallery-grid {
		grid-template-columns:1fr 1fr;
		grid-auto-rows:150px;
	}
	.iml-gallery-item-1,
	.iml-gallery-item-2,
	.iml-gallery-item-3,
	.iml-gallery-item-4,
	.iml-gallery-item-5{
		grid-column:auto;
		grid-row:auto;
	}
}

@media (max-width:520px){
	.iml-gallery-grid {
		grid-template-columns:1fr;
		grid-auto-rows:190px;
	}
	.iml-gallery-item-1,
	.iml-gallery-item-2,
	.iml-gallery-item-3,
	.iml-gallery-item-4,
	.iml-gallery-item-5{
		grid-row:auto;
	}
}

/* EDITOR-HILFE
   ------------------------------------------------------------------ */
.wp-block-iml-gallery-masonry-tabs .iml-gallery-controls{
	margin-bottom:24px;
}
.iml-gallery-tab-editor-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:8px;
}
.iml-gallery-tab-editor{
	border:1px solid #2b2b3a;
	padding:12px;
	border-radius:8px;
	margin-bottom:12px;
}
.iml-gallery-images-preview{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:8px;
}
.iml-gallery-images-preview img{
	width:80px;
	height:60px;
	object-fit:cover;
	border-radius:4px;
}