/*
Bareiss Prüfgerätebau GmbH
TEST IT! – Der Bareiss Podcast
Content-Block styles
creation Date: 2026-06-01
--------------------------------------------------------------
All rules are scoped under .testit_styles so nothing leaks into
the rest of the template. Colours are taken from colors.css:
  blue       #0075bf
  dark blue  #003e66  (also the default body text colour)
  light gray #f3f3f1  (video block background)
--------------------------------------------------------------
*/

.testit_styles,
.testit_styles *{
	box-sizing: border-box;
}

/* shared centered container (the PHP skeleton uses .main_container) */
.testit_styles .main_container{
	position: relative;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}
.testit_styles .testit_inner{
	position: relative;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}


/* ============================================================
   PART 1 – WELCOME  (image left / text right, narrower block)
   ============================================================ */
.testit_welcome{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-start;
	max-width: 1000px;            /* narrower than the blocks below */
	margin-left: auto;
	margin-right: auto;
	padding-top: 70px;
	padding-bottom: 70px;
}
.testit_welcome_img{
	width: 38%;
}
.testit_welcome_img img{
	display: block;
	width: 100%;
	height: auto;
}
.testit_welcome_txt{
	width: 57%;
}
.testit_title{
	color: #0075bf;
	font-family: 'Calibri-Bold', sans-serif;
	font-size: 23px;
	line-height: 30px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.testit_welcome_txt p{
	color: #003e66;
	font-size: 16px;
	line-height: 24px;
	margin: 0;
}


/* ============================================================
   PART 2 – GRAY VIDEO BLOCK  (full-bleed background)
   ============================================================ */
.testit_video_block{
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;                 /* break out to full viewport width   */
	margin-left: -50vw;           /* (body has overflow-x:hidden so this */
	margin-right: -50vw;          /*  cannot create a horizontal scroll) */
	background-color: #f3f3f1;
	padding-top: 80px;
	padding-bottom: 80px;
}
.testit_video_title{
	color: #003e66;
	font-family: 'Calibri-Bold', sans-serif;
	font-size: 26px;
	line-height: 34px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 30px;
}
.testit_video{
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.testit_video_ratio{
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;       /* 16:9 */
	background-color: #000000;
}
.testit_video_ratio iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.testit_video_desc{
	max-width: 760px;
	margin: 24px auto 0;
	text-align: center;
	color: #003e66;
	font-size: 15px;
	line-height: 22px;
}

/* call-to-action button */
.testit_button_wrap{
	text-align: center;
	margin-top: 36px;
}
.testit_button{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background-color: #003e66;
	color: #ffffff;
	font-size: 15px;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 11px 26px 11px 13px;
	border-radius: 5px;
	opacity: .95;
}
.testit_button:hover{
	opacity: 1;
	text-decoration: none;
	-webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,.45);
	-moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,.45);
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,.45);
}
.testit_button_ico img{
	display: block;
	height: 24px;
	width: auto;
}


/* ============================================================
   PART 3 – EPISODE SLIDER
   ============================================================ */
.testit_episodes{
	padding-top: 80px;
	padding-bottom: 80px;
}
.testit_section_title{
	color: #0075bf;
	font-family: 'Calibri-Bold', sans-serif;
	font-size: 20px;
	line-height: 26px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.testit_episodes_intro{
	color: #003e66;
	font-size: 16px;
	line-height: 24px;
	margin-top: 14px;
	margin-bottom: 36px;
}

.testit_slider{
	position: relative;
	padding-left: 55px;           /* room for the nav arrows */
	padding-right: 55px;
}
.testit_slider_viewport{
	position: relative;
	width: 100%;
	overflow: hidden;
}
.testit_slider_track{
	display: flex;
	flex-flow: row nowrap;
	gap: 20px;                    /* keep in sync with GAP in testit.js */
	will-change: transform;
	-webkit-transition: -webkit-transform 400ms ease;
	transition: transform 400ms ease;
}
.testit_episode{
	flex: 0 0 auto;
	display: block;
	color: #0075bf;
}
.testit_episode_img{
	display: block;
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;         /* square */
	overflow: hidden;
	background-color: #dfe9f1;
}
.testit_episode_img img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-transition: opacity 200ms ease;
	transition: opacity 200ms ease;
}
.testit_episode:hover .testit_episode_img img{
	opacity: .88;
}
.testit_episode_title{
	display: block;
	margin-top: 12px;
	color: #0075bf;
	font-family: 'Calibri-Bold', sans-serif;
	font-size: 14px;
	line-height: 19px;
}

/* nav arrows (positioned vertically onto the image by testit.js) */
.testit_slider_nav{
	position: absolute;
	top: 35% !important;                     /* fallback before JS measures the image */
	height: 34px;
	width: auto;
	cursor: pointer;
	z-index: 2;
	-webkit-user-select: none;
	user-select: none;
	-webkit-transition: opacity 200ms ease, filter 200ms ease;
	transition: opacity 200ms ease, filter 200ms ease;
}
.testit_slider_nav._l{
	left: 0;
}
.testit_slider_nav._r{
	right: 0;
}
.testit_slider_nav:hover{
	filter: drop-shadow(0px 0px 3px rgba(0,0,0,.35));
}
.testit_slider_nav.is_disabled{
	opacity: .3;
	cursor: default;
	pointer-events: none;
}


/* ============================================================
   RESPONSIVE  (breakpoints aligned with responsive.css)
   ============================================================ */
@media (max-width: 1210px){
	.testit_styles .main_container{
		width: 95%;
		max-width: 1200px;
	}
}

@media (max-width: 800px){
	.testit_welcome{
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.testit_welcome_img{
		width: 100%;
		max-width: 280px;
		margin-bottom: 30px;
	}
	.testit_welcome_txt{
		width: 100%;
	}

	.testit_video_block{
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.testit_video_title{
		font-size: 22px;
		line-height: 28px;
	}
	.testit_title{
		font-size: 20px;
		line-height: 26px;
	}

	.testit_episodes{
		padding-top: 60px;
		padding-bottom: 60px;
	}
	
	.testit_slider_nav{
		top: 40% !important;
	}
}

@media (max-width: 500px){
	.testit_video_title{
		font-size: 19px;
		line-height: 25px;
	}
	.testit_video_desc{
		font-size: 14px;
	}
	.testit_button{
		font-size: 14px;
		padding-left: 12px;
		padding-right: 18px;
	}
	.testit_slider{
		padding-left: 40px;
		padding-right: 40px;
	}
	.testit_slider_nav{
		height: 28px;
	}
	.testit_episodes_intro{
		font-size: 15px;
	}
}