/* Pedagogovia FilmStrip */

.tdb-strip{
	position: relative;
}

/* Fade overlay */
.tdb-strip::before,
.tdb-strip::after{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	width: clamp(1rem, 10vw, 4rem);
	pointer-events:none;
	z-index: 4; /* nad trackom, pod šípkami */
}

/* ľavý fade */
.tdb-strip::before{
	left:0; 
	background: linear-gradient(
		to right,
		var(--bs-body-bg) 0%,
		var(--bs-body-bg) 50%,
		rgba(255,255,255,0) 100%
	);
}

/* pravý fade */
.tdb-strip::after{
	right:0;
	background: linear-gradient(
		to left,
		var(--bs-body-bg) 0%,
		var(--bs-body-bg) 50%,
		rgba(255,255,255,0) 100%
	);
}

.tdb-strip__track{
	display:flex;
	gap: 1rem; 
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	/*  padding: .25rem .25rem .5rem;*/
	padding: .25rem 3rem;

	scroll-snap-type: x mandatory;
	scroll-padding-inline: 3rem;

	scrollbar-width: none;		/* firefox */
}

.tdb-strip__track::-webkit-scrollbar{
	display: none;              /* Chrome/Safari/Edge */
}

.tdb-strip__track > .tdb-teacher {
	flex: 0 0 100%;
	max-width: 100%;

	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	gap:.35rem;

	cursor:pointer;
	user-select:none;

	scroll-snap-align: start;
	scroll-snap-stop: always;
}

@media (min-width: 768px){
	.tdb-strip__track > .tdb-teacher{
		flex-basis: calc((100% - (2 * 1rem)) / 3); /* 3 items, 2 gaps */
		max-width: calc((100% - (2 * 1rem)) / 3);
	}
}

/* LG: 4 items */
@media (min-width: 992px){
	.tdb-strip__track > .tdb-teacher{
		flex-basis: calc((100% - (3 * 1rem)) / 4); /* 4 items, 3 gaps */
		max-width: calc((100% - (3 * 1rem)) / 4);
	}
}




.tdb-teacher:focus-visible{
	outline: 2px solid currentColor;
	outline-offset: 6px;
	border-radius: 1rem;
}

.tdb-avatar{
	width: 130px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 999px;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.12);
}

.tdb-teacher__name{
	color: var(--bs-secondary);
	margin-top: .6rem;
	font-weight: 600;
}

.tdb-teacher__style{
	font-size: .75rem;
	line-height: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bs-primary);
	font-weight: 600;
}

/* Šípky - len estetika, používaš bootstrap btn */
.tdb-strip__nav .btn{
	border-radius: .75rem;
}

div#teacherModalBody div.astroid-article-full-image img {
	max-height: 280px;
	width: auto;
	float: right;
	margin-left: 0.5rem;
/*	margin: 3em .5em;*/
	border-radius: var(--bs-border-radius-lg) !important;
}

/* Strip Arrows */

.tdb-strip__arrow{
	position: absolute;
	top: 70px;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 0;
	background: rgba(255,255,255,0);
	/*  box-shadow: 0 .5rem 1rem rgba(0,0,0,.18);*/
	display: grid;
	place-items: center;
	z-index: 5;
	cursor: pointer;
	padding: 0;
}

.tdb-strip__arrow em {
	font-size: 1.8em;
	color: rgba(0,0,0,.55);
}
.tdb-strip__arrow:hover em {
	color: rgba(0,0,0,.8);
}


.tdb-strip__arrow.is-left{ left: 10px; }
.tdb-strip__arrow.is-right{ right: 10px; }

.tdb-strip__arrow:focus-visible{
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.tdb-strip__track {
		scroll-behavior: auto;
	}
}