/**
 *
 * micromagnetics.de
 * Copyright 2025 Daniel Czarnecki <d.czarnecki@outlook.de>
 * Alle Rechte vorbehalten.
 *
 */

/* HEADER */
section.header
{
	position: relative;
	background-color: var(--color-bg-primary-alt);
	color: var(--color-label-primary-alt);
	padding: var(--spacing-3) 0;
	height: 10rem;
	overflow: hidden;
}
section.header::after
{
	content: "";
	position: absolute;
	top: 0;	
	left: 0;
	width: 150%;
	height: 400%;
	background: radial-gradient(circle,rgba(77, 177, 255, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 1;
}
section.header > .container > p.hierarchy
{
	color: var(--color-label-tertiary-alt);
	font-size: var(--text-small);
	letter-spacing: var(--tracking-wide);
}
section.header > .container > h1.title
{
	font-size: var(--text-4xl);
	font-weight: 500;
}

/* PANEL */
section.container .panel
{
	background-color: var(--color-bg-primary);
	border: 1px solid var(--color-separator-primary);
	outline: 0.75rem solid var(--color-bg-primary);
	border-top: 1rem solid var(--color-tint-primary);
	border-radius: var(--radius-large);
	z-index: 5;
}

/* SLIDESHOW ANIMATION */
@keyframes slideshow-animation 
{
	0% { transform: translateX(0) }
	20% { transform: translateX(0) }
	25% { transform: translateX(-20%) }
	45% { transform: translateX(-20%) }
	50% { transform: translateX(-40%) }
	70% { transform: translateX(-40%) }
	75% { transform: translateX(-60%) }
	95% { transform: translateX(-60%) }
	100% { transform: translateX(-80%) }
}

/* ARTICLE */
section.container .textblock > h3
{
	margin-top: var(--spacing-5);
	margin-bottom: var(--spacing-2);
	padding-bottom: var(--spacing-1);
	font-size: var(--text-large);
	font-weight: 600;
	border-bottom: 1px solid var(--color-separator-primary);
}
section.container .textblock > p
{
	font-size: var(--text-base);
}
section.container .textblock > p.hint,
section.container .textblock > p.positive,
section.container .textblock > p.negative
{
	padding: var(--spacing-2);
	margin: var(--spacing-2) 0;
	font-size: var(--text-small);
	background-color: var(--color-bg-semantic-informative);
	border-radius: var(--radius-large);
	border: 1px solid var(--color-semantic-informative);
	border-left: 0.75rem solid var(--color-semantic-informative);
}
section.container .textblock > p.positive
{
	background-color: var(--color-bg-semantic-positive);
	border: 1px solid var(--color-semantic-positive);
	border-left: 0.75rem solid var(--color-semantic-positive);
}
section.container .textblock > p.negative
{
	background-color: var(--color-bg-semantic-negative);
	border: 1px solid var(--color-semantic-negative);
	border-left: 0.75rem solid var(--color-semantic-negative);
}
section.container .textblock > img
{
	float: right;
	height: 10rem;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media screen and (min-width: 58rem) /* DESKTOP */
{
	/* HEADER */
	section.header > .container > h1.title
	{
		margin-top: var(--spacing-7);
	}

	/* PANEL */
	section.container .panel
	{
		position: absolute;
		top: -15rem;
	}

	/* IMAGES */
	section.images
	{
		width: 58rem;
		margin: 0 auto;
		padding-top: 1.5rem;
	}
	section.images .wrapper
	{
		width: 100%;		
	}
	section.images .wrapper > div
	{
		cursor: pointer;
		display: inline-block;
		position: relative;
		width: 8.22rem;
		height: 8.22rem;
		overflow: hidden;
		margin-right: var(--spacing-2);
		border-radius: var(--radius-large);
		transition: all 0.2s var(--ease-in-out);
		z-index: 10;
	}
	section.images .wrapper > div:last-child { display: none }
	section.images .wrapper > div::before
	{
		content: "\F62C";
		position: absolute;
		right: 0.75rem;
	 	bottom: 0.5rem;
		font-family: bootstrap-icons;
		font-size: 1.25rem;
		color: var(--color-label-primary-alt);
		z-index: 20;
		text-shadow: var(--text-shadow-large);
		transition: all 0.2s var(--ease-in-out);
	}
	section.images .wrapper > div:hover
	{
		box-shadow: var(--shadow-xl);
		transform: scale(1.075);
	}
	section.images .wrapper > div > img
	{
		width: 101%;
	}

	/* DESCRIPTION */
	section.container .description p
	{
		margin: var(--spacing-1) var(--spacing-3) var(--spacing-1) 0;
	}

	/* ARTICLE */
	section.container .textblock > p
	{
		margin: var(--spacing-1) var(--spacing-3) var(--spacing-1) 0;
	}
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media screen and (max-width: 58rem) /* MOBILE */
{
	/* HEADER */
	section.header > .container > p.hierarchy
	{
		font-size: var(--text-xs);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	section.header > .container > h1.title
	{
		position: absolute;
		width: 90%;
		left: var(--spacing-2);
		bottom: var(--spacing-2);
	}

	/* IMAGES */
	section.images
	{
		display: flex;
		align-items: center;
		width: 100%;
		height: 20rem;
		border-bottom: 1px solid var(--color-separator-primary);
		overflow: hidden;
	}
	section.images .wrapper
	{
		width: 500%;
		display: flex;
		animation: 24s slideshow-animation infinite;
		
	}
	section.images .wrapper > div
	{
		width: 100vw;
		overflow: hidden;
	}
	section.images .wrapper > div > img
	{
		width: 100vw;
	}
	
	/* DESCRIPTION */
	section.container .description p
	{
		margin: var(--spacing-1) 0;
	}

	/* ARTICLE */
	section.container .textblock > p
	{
		margin: var(--spacing-1) 0;
	}
}