/* =====================================================================
   TattooCon Artists – Slider only
   - KEIN Hintergrund / KEINE Section-Styles (vom Nutzer gesetzt)
   - KEINE Überschrift
   - Schriftarten werden vom Theme geerbt (h3 = Theme-Heading, p = Body)
   - Akzentfarbe via --tce-accent (nur für Pfeile / Stadt)
   Class prefix: .tce-
   ===================================================================== */

.tce-artists {
	--tce-accent: #d58f26;
	box-sizing: border-box;
	max-width: 1600px;       /* Breite des Contentbereichs */
	margin-left: auto;
	margin-right: auto;
}
.tce-artists *,
.tce-artists *::before,
.tce-artists *::after { box-sizing: border-box; }

/* ---------- Slider shell ---------- */
.tce-artists__slider {
	position: relative;
	display: flex;
	align-items: center;
}

.tce-artists__track {
	display: flex;
	gap: clamp(.75rem, 1.5vw, 1.5rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;            /* Firefox */
	padding: .25rem 0;
	width: 100%;
}
.tce-artists__track::-webkit-scrollbar { display: none; } /* WebKit */
.tce-artists__track:focus-visible { outline: 2px solid var(--tce-accent); outline-offset: 4px; }

/* ---------- Slides / cards ---------- */
.tce-artists__slide {
	flex: 0 0 auto;
	scroll-snap-align: start;
	/* 5 cards visible on desktop minus the gaps */
	width: calc((100% - 4 * clamp(.75rem, 1.5vw, 1.5rem)) / 5);
}

/* Profil-Link: Theme-Linkstyles neutralisieren, ganze Karte klickbar. */
.tce-artists .tce-artists__link,
.tce-artists .tce-artists__link:hover,
.tce-artists .tce-artists__link:focus {
	display: block;
	text-decoration: none !important;
	color: inherit !important;
	box-shadow: none !important;
	border: none !important;
	outline: none !important;
}
.tce-artists .tce-artists__link:focus-visible {
	outline: 2px solid var(--tce-accent);
	outline-offset: 4px;
}

.tce-artists__card { text-align: center; }

.tce-artists__photo {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #151515;
	border: 1px solid rgba(255, 255, 255, .06);
}
.tce-artists__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease, filter .5s ease;
	filter: grayscale(15%);
}
.tce-artists__link:hover .tce-artists__photo img,
.tce-artists__card:hover .tce-artists__photo img {
	transform: scale(1.05);
	filter: grayscale(0%);
}

/* font-family NICHT gesetzt -> Theme-Heading-Schrift. Farbe absichtlich
   nicht erzwungen, damit sie zum gewählten Hintergrund passt (erbt Theme).
   Falls gewünscht, Farbe im CSS-Editor überschreiben. */
.tce-artists__name {
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: clamp(.85rem, 1.3vw, 1.15rem);
	margin: clamp(.6rem, 1.2vw, 1.1rem) 0 0;
	line-height: 1.2;
}
/* <p> -> Theme-Body-Schrift, Akzentfarbe für die Stadt. */
.tce-artists__location {
	color: var(--tce-accent);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: clamp(.65rem, 1vw, .82rem);
	margin: .45em 0 0;
}

/* ---------- Nav arrows ---------- */
/* Strong selectors + resets to neutralise Brooklyn theme button styling. */
.tce-artists .tce-artists__nav,
.tce-artists .tce-artists__nav:hover,
.tce-artists .tce-artists__nav:focus {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(40px, 4vw, 56px);
	height: clamp(40px, 4vw, 56px);
	padding: 0;
	margin: 0 clamp(.25rem, 1vw, 1rem);
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--tce-accent) !important;
	cursor: pointer;
	transition: color .2s ease, transform .2s ease, opacity .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.tce-artists .tce-artists__nav:hover  { transform: scale(1.12); color: #fff !important; }
.tce-artists .tce-artists__nav:active { transform: scale(.96); }
.tce-artists .tce-artists__nav[disabled] { opacity: .25; cursor: default; pointer-events: none; }
.tce-artists .tce-artists__nav svg { display: block; pointer-events: none; }

/* ---------- Responsive: visible card count ---------- */
@media (max-width: 1200px) {
	.tce-artists__slide { width: calc((100% - 3 * clamp(.75rem, 1.5vw, 1.5rem)) / 4); }
}
@media (max-width: 992px) {
	.tce-artists__slide { width: calc((100% - 2 * clamp(.75rem, 1.5vw, 1.5rem)) / 3); }
}
@media (max-width: 767px) {
	.tce-artists__slide { width: calc((100% - 1 * .75rem) / 2 - .25rem); } /* ~2 visible */
	.tce-artists .tce-artists__nav { margin: 0 .15rem; }
}
@media (max-width: 480px) {
	.tce-artists__slide { width: 72%; } /* one card + peek of next */
}