/*
 * THG Normalien — Essential-Grid ohne das kostenpflichtige Plugin-JS.
 *
 * Essential Grid liefert sein Markup serverseitig bereits vollstaendig
 * (alle Items stehen im DOM), macht es aber per settings.css unsichtbar
 * (`.esg-grid li{display:none;visibility:hidden}`, `.esg-grid` selbst traegt
 * inline `display:none`) und positioniert alles erst per JS absolut, sobald
 * es geladen ist (Spaltenzahl, Bildzuschnitt, Hover-Cover, Pfeile). Ohne
 * dieses JS bleiben die Grids leer/durcheinander — das wird hier mit reinem
 * CSS nachgebaut.
 *
 * Analysiert an den beiden auf jeder Grid-Seite vorkommenden Skins:
 *  - subproduct  (Produktkarten: Bild im Originalformat + Titel/Norm/Button
 *                 immer sichtbar darunter, kein Hover, ganzes Bild verlinkt)
 *  - roosevelt   (Cross-Selling "Das koennte Sie auch interessieren": Bild
 *                 auf 4:3 zugeschnitten, Titel erscheint erst beim Hover ueber
 *                 einem abgedunkelten Overlay)
 * Einzelfall ralf (nur gleitelemente-vdi-3357) verhaelt sich wie subproduct,
 * nur mit einer Spalte mehr.
 *
 * Spaltenzahlen/Abstand (20px) stammen aus den `responsiveEntries` der
 * Live-Seiten (`tpessential({... space:20, responsiveEntries:[...]})`,
 * ueber alle 54 Seiten hinweg gibt es dafuer nur 3 Auspraegungen). Die
 * Aufloesung dort erfolgt nach Fensterbreite, nicht Containerbreite — daher
 * genuegen normale @media-Breakpoints.
 */

/* --- Grundzustand: sichtbar schalten, was das Plugin per JS enthuellen wuerde --- */
.esg-grid-wrap-container,
.esg-grid-wrap-container .esg-grid,
.esg-grid-wrap-container .esg-grid > ul,
.esg-grid-wrap-container .esg-grid li {
	display: block !important;
	visibility: visible !important;
}

/* Pfeile/Filter-Navigation: im Original ohnehin immer serverseitig
   `display:none` (nur das JS blendet sie bei Bedarf ein) und bei uns nie
   noetig, da alle Items schon im DOM stehen und einfach umbrechen. */
.esg-filters,
.esg-navigationbutton,
.esg-pagination {
	display: none !important;
}

/* Leere Icon-/Center-Slots (subproduct: ungenutzter Hover-Icon-Platz) */
.esg-center.esg-none {
	display: none;
}

/* --- Layout: <ul> wird zum CSS-Grid statt JS-Absolutpositionierung --- */
.esg-grid-wrap-container .esg-grid > ul {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px !important;
	width: 100%;
}
.esg-grid-wrap-container .esg-grid > ul > li {
	position: static !important;
	float: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	top: auto !important;
	left: auto !important;
}

/* subproduct: 3 Spalten (Basis, entspricht >=1170px)
   ralf (Einzelfall): 4 Spalten (Basis, entspricht >=1400px)
   roosevelt: 5 Spalten (Basis, entspricht >=1400px)
   WICHTIG: alle Basiswerte zuerst, danach die @media-Overrides von breit
   nach schmal — bei gleicher Spezifitaet gewinnt sonst die spaeter im
   Quelltext stehende Regel unabhaengig von der Media-Query. */
.esg-entry-skin-subproduct .esg-grid > ul { grid-template-columns: repeat(3, 1fr); }
.esg-entry-skin-ralf .esg-grid > ul { grid-template-columns: repeat(4, 1fr); }
.esg-entry-skin-roosevelt .esg-grid > ul { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1399px) {
	.esg-entry-skin-ralf .esg-grid > ul { grid-template-columns: repeat(3, 1fr); }
	.esg-entry-skin-roosevelt .esg-grid > ul { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1169px) {
	.esg-entry-skin-subproduct .esg-grid > ul,
	.esg-entry-skin-ralf .esg-grid > ul {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 1023px) {
	.esg-entry-skin-roosevelt .esg-grid > ul { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 639px) {
	.esg-entry-skin-subproduct .esg-grid > ul,
	.esg-entry-skin-ralf .esg-grid > ul,
	.esg-entry-skin-roosevelt .esg-grid > ul {
		grid-template-columns: 1fr;
	}
}

/* --- subproduct: Bild im Originalformat, keine Beschneidung, kein Hover ---
   `.esg-entry-media` bleibt im Textfluss (settings.css: width:100%,
   height:auto) und gibt so `.esg-media-cover-wrapper` seine reale Hoehe,
   auf die `.esg-entry-cover` (position:absolute, height:100%) darueber
   passt. Titel/Norm/Button stehen als eigener Block unterhalb, immer
   sichtbar (im Original per data-transition="esg-none", also ohne
   Animation). */
.eg-subproduct-wrapper .esg-entry-cover {
	pointer-events: none; /* nur der Link soll klickbar sein, nicht die leere Flaeche */
}
.eg-subproduct-wrapper .esg-entry-cover a.eg-invisiblebutton {
	pointer-events: auto;
}

/* --- roosevelt: Bild auf 4:3 zugeschnitten (im Original per JS als
   Hintergrundbild/"esg-media-poster" gesetzt), Hover-Cover mit Titel ---
   Reihenfolge/Optik der drei realen data-transition-Werte auf den
   Live-Seiten: esg-shifttotop (Bild), esg-fade (Overlay), esg-flipup
   (Titelleiste unten) — hier mit reinem CSS nachgebaut. */
.eg-roosevelt-wrapper .esg-entry-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.eg-roosevelt-wrapper .esg-entry-media img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.eg-roosevelt-wrapper:hover .esg-entry-media[data-transition="esg-shifttotop"] img {
	transform: scale(1.06);
}
.eg-roosevelt-wrapper .esg-overlay {
	opacity: 0;
	transition: opacity 0.3s ease;
}
.eg-roosevelt-wrapper:hover .esg-overlay {
	opacity: 1;
}
.eg-roosevelt-wrapper .esg-bottom {
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}
.eg-roosevelt-wrapper:hover .esg-bottom {
	transform: translateY(0);
}

/* Die ganze Kachel ist wie im Original klickbar (voll deckendes
   `a.eg-invisiblebutton`, siehe settings.css) — hier nur sichergestellt,
   dass sie ueber dem Overlay/Titel liegt. */
.eg-roosevelt-wrapper .esg-entry-cover a.eg-invisiblebutton {
	z-index: 5;
}

/* --- Handy: roosevelt (Cross-Selling) ist im Original ein Karussell mit
   einem sichtbaren Item und Pfeilen links/rechts (gemessen bei 390 px:
   live 3839 px Seitenhoehe, gestapelt waeren es 4610). Hier als
   Scroll-Snap-Karussell; die Pfeile (serverseitig vorhanden, aber
   display:none) werden eingeblendet und in js/esg.js verdrahtet. --- */
@media (max-width: 639px) {
	.esg-entry-skin-roosevelt .esg-grid {
		position: relative;
		padding: 0 44px;
	}
	.esg-entry-skin-roosevelt .esg-grid > ul {
		display: flex !important;
		gap: 0 !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.esg-entry-skin-roosevelt .esg-grid > ul::-webkit-scrollbar { display: none; }
	.esg-entry-skin-roosevelt .esg-grid > ul > li {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}
	.esg-entry-skin-roosevelt .esg-filters.esg-navbutton-solo-left,
	.esg-entry-skin-roosevelt .esg-filters.esg-navbutton-solo-right {
		display: block !important;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
	}
	.esg-entry-skin-roosevelt .esg-filters.esg-navbutton-solo-left { left: 0; }
	.esg-entry-skin-roosevelt .esg-filters.esg-navbutton-solo-right { right: 0; }
	.esg-entry-skin-roosevelt .esg-navigationbutton {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border: 1px solid #ddd;
		border-radius: 3px;
		background: #fff;
		color: #333;
		cursor: pointer;
		font-size: 14px;
	}
}