/*
	common modules styles
*/

.module
{
	position: relative;
	padding: var(--content-padding);
}
	.module.no-padding-top
	{
		padding-top: 0;
	}
	.module .wrapper
	{
		margin: 0 auto;
		display: flex;
		max-width: var(--stage-width);
	}
	.module .column
	{
		width: 50%;
	}
	.module h1:last-child,
	.module h2:last-child,
	.module h3:last-child,
	.module p:last-child
	{
		margin-bottom: 0;
	}
		.module h1
		{
			font-size: 3.5em;
			line-height: 1.05em;
		}
		.module h2
		{
			font-size: 2.5em;
			line-height: 1.05em;
			max-width: 560px;
		}
		.module h3
		{
			font-size: 1.6em;
			line-height: 1.15em;
		}
		.module p
		{
			
		}
		.module .subtitle
		{
			margin-bottom: calc(var(--content-gap) / 2);
		}
		.module .column.image
		{
			display: flex;
			align-items: center;
			justify-content: center;

			background-position: 50% 50%;
			background-repeat: no-repeat;
			background-size: cover;

			position: relative;
		}

/*
	module colors
*/

.bg-white
{
	background-color: var(--color-white);
	color: var(--color-primary-darkest);
}
.bg-primary-darkest
{
	background-color: var(--color-primary-darkest);
	color: var(--color-white);
}
	.bg-primary-darkest p
	{
		color: var(--color-white);
	}
.bg-primary-lightest
{
	background-color: var(--color-primary-lightest);
}
.bg-secondary-light
{
	background-color: var(--color-secondary-light);
}
.bg-accent-lightest
{
	background-color: var(--color-accent-lightest);
}

/*
	module: hero
*/

.module-hero
{
	display: flex;
	width: 100%;
	height: calc(100vh - 120px);
	min-height: 400px;
	max-height: 860px;
	padding: 0;
	background-color: var(--color-accent-lightest);
	overflow: hidden;
	max-width: 1920px;
}
	.module-hero .front
	{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 2;
		overflow: hidden;
		/*
		background: url('../static/img/hero-bg-person.png') no-repeat 50% 50%;
		background-size: cover;
		*/
	}
		.module-hero .front video
		{
			object-fit: cover;
			object-position: center;
		}
	.module-hero .ticker
	{
		position: absolute;
		/* no explicit width - sizes to its (flex, nowrap) content, so
		   translateX(-50%) below always lands exactly on the boundary
		   between the real item list and its duplicate, whatever their
		   combined width turns out to be */
		top: 50%;
		left: 0;
		height: auto;
		z-index: 1;
		display: flex;
		align-items: center;

		animation: hero-ticker 120s linear infinite;
	}
		@media (prefers-reduced-motion: reduce)
		{
			.module-hero .ticker
			{
				animation: none;
			}
		}
		.module-hero .ticker .item
		{
			color: var(--color-primary-darkest);
			font-family: var(--font-family-heading);
			font-weight: 600;
			font-size: clamp(200px, 30vw, 480px);
			white-space: nowrap;
			height: 256px;
		}
			/* every item gets a trailing separator, including the last one
			   of the duplicated second half - the loop wraps straight from
			   the 12th item back to the 1st, so that gap needs one too */
			.module-hero .ticker .item::after
			{
				content: "•";
				display: inline-block;
				margin: 0 80px;
			}

	@keyframes hero-ticker
	{
		from { transform: translateX(0); }
		to   { transform: translateX(-50%); }
	}

	.module-hero .bg
	{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 0;
		
		background: url('../static/img/hero-bg-gfx-3.jpg') no-repeat 50% 50%;
		background-size: cover;
	}

/*
	module: text-big
*/

.module-text-big
{
	padding: calc(1.2 * var(--content-padding)) var(--content-padding);
}
	.module-text-big .wrapper
	{
		flex-direction: column;
		text-align: center;	
	}
		.module-text-big h1
		{
			max-width: 760px;
			font-size: 3.4em;
			font-weight: 700;
			margin: 0 auto var(--content-gap) auto;
		}
		.module-text-big p
		{
			max-width: 760px;
			margin: 0 auto var(--content-gap) auto;
		}

/*
	module: double
*/

.module-double
{

}
	.module-double .wrapper
	{
		gap: var(--content-padding);
	}
	.module-double .column h1
	{
		font-size: 2.5em;
		line-height: 1.05em;
	}

/*
	module: video-items
*/

.module-video-list
{
	margin: 0;
	padding: 0;
}

/*
	module: video-item
*/

.module-video-item
{
	margin-bottom: var(--content-padding);
	padding: 0 var(--content-padding);
	position: relative;
}
	.module-video-item:last-child
	{
		margin-bottom: 0;
	}
	.module-video-item .wrapper
	{
		min-height: 480px;
	}
	.module-video-item:nth-child(even) .wrapper
	{
		flex-direction: row-reverse;
	}
		.module-video-item .column
		{
			padding: var(--content-padding) 0;
			display: flex;
			flex-direction: column;
		}
			.module-video-item:nth-child(odd) .column:not(.image)
			{
				padding-inline-end: var(--content-padding);
			}
			.module-video-item:nth-child(even) .column:not(.image)
			{
				padding-inline-start: var(--content-padding);
			}
			.module-video-item .column p:not(.subtitle)
			{
				flex-grow: 1;
			}
		.module-video-item .column.image
		{
			position: absolute;
			width: 50vw;
			height: 100%;
			inset-inline-end: 0;
		}
			.module-video-item:nth-child(even) .column.image
			{
				inset-inline-end: auto;
				inset-inline-start: 0;
			}
		.module-video-item .column.image .image-shape
		{
			position: absolute;
			width: 100%;
			height: 100%;
			background: url('../static/img/video-shape-2.png') no-repeat 0% 0%;
			background-size: contain;
			z-index: 0;
		}
			.module-video-item:nth-child(even) .column.image .image-shape 
			{
				transform: scale(-1);
			}
			.module-video-item:nth-child(even) .column.image .ai-generated
			{
				inset-inline-start: var(--content-gap);
				inset-inline-end: auto;
			}
		.module-video-item .column.image .btn-play
		{
			z-index: 1;
		}

/*
	module: other topics
*/

.module-other-topics .wrapper
{
	flex-direction: column;
}
	.module-other-topics h2
	{
		font-size: 2.5em;
    line-height: 1.05em;
    max-width: 560px;
		margin-bottom: var(--content-padding);
	}
	.other-topics-list
	{
		display: flex;
		width: 100%;
		gap: var(--content-padding);
		list-style: none;
	}
		.other-topics-list li
		{
			width: 50%;
		}
		.other-topics-item
		{
			display: block;
			color: inherit;
			text-decoration: none;
		}
			.other-topics-item .image
			{
				width: 100%;
				aspect-ratio: 16 / 9;
				border-radius: 12px;
				margin-bottom: var(--content-gap);

				background-position: 50% 50%;
				background-repeat: no-repeat;
				background-size: cover;
			}
			.other-topics-item h3
			{
				color: var(--color-primary-darkest);
			}

/*
	module: visual block
*/

.module-visual-block
{
	display: flex;
	width: 100%;
	aspect-ratio: 7 / 1;
	padding: 0;

	background: url('../static/img/visual-block-2.jpg') no-repeat 50% 85%;
	background-size: 170%;
}
	.module-visual-block .wrapper
	{
		align-items: center;
    justify-content: center;
	}

/*
	module: social links
*/

.module-social-links .wrapper
{
	gap: var(--content-padding);
}
	.social-links-list
	{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		width: 100%;
		gap: var(--content-padding);
		list-style: none;
		margin-bottom: 0;
	}
		.social-links-item
		{
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: calc(var(--content-gap) / 2);

			color: var(--color-primary-darkest);
			text-decoration: none;
		}
			.social-links-item svg
			{
				width: 40px;
				height: 40px;
				fill: currentColor;
			}
			.social-links-item:hover
			{
				color: var(--color-accent-darkest);
			}
			.social-links-item .platform
			{
				font-size: .85em;
			}

/*
	RESPONSIVE
*/

@media (aspect-ratio > 1)
{
	.module-hero
	{
		min-height: auto;
		max-height: none;
		height: auto;
		width: 100%;
		aspect-ratio: 2 / 1.2;
		margin: 0 auto;
	}
}
@media only screen and (min-width: 1920px)
{
	.module-hero
	{
		border-bottom-left-radius: var(--content-gap);
		border-bottom-right-radius: var(--content-gap);
	}
}
@media only screen and (min-width: 1280px)
{
	
}
@media only screen and (max-width: 960px)
{

}
@media only screen and (max-width: 760px)
{
	.module .column
	{
		width: 100%;
	}
	.module h2
	{
    font-size: 2em;
	}
	.module-hero
	{
		max-height: 65vh;
	}
	.module-double .wrapper,
	.module-social-links .wrapper
	{
		flex-direction: column;
	}
	.social-links-list
	{
		grid-template-columns: repeat(4, 1fr);
	}
	.other-topics-list
	{
		flex-direction: column;
	}
	.other-topics-list li
	{
		width: 100%;
	}
	.module-video-item
	{
		padding: 0;
	}
	.module-video-item .wrapper
	{
		flex-direction: column-reverse !important;
		min-width: none;
	}
	.module-video-item .column:not(.image)
	{
		padding: var(--content-padding);
		padding-bottom: calc( 2 * var(--content-padding) );
	}
	.module-video-item .column.image
	{
		position: relative;
		width: 100%;
		aspect-ratio: 1 / 1;
		padding: 0;
	}
	.module-video-item .column.image .image-shape
	{
		transform: scale(1) rotate(-90deg) !important;
	}
	.module-video-item .column.image .ai-generated
	{
		bottom: calc(var(--content-padding) * 1.5);
	}
}
@media only screen and (max-width: 640px)
{
	
}
@media only screen and (max-width: 480px)
{
	.social-links-item svg
	{
    width: 36px;
    height: 36px;
	}
}