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

/* Articles */
article.container.home > .article
{
	display: flex;
	margin-top: var(--spacing-2);
	gap: var(--spacing-2);
}
article.container.home > .article > div:nth-child(1)
{
	flex: 2;
	border-radius: var(--radius-large);
}
article.container.home > .article > div:nth-child(2)
{
	flex: 4;
}
article.container.home > .article.flip > div:nth-child(2)
{
	flex: 4;
	order: -1;
}

/* Opinions */
.opinion
{
	margin: var(--spacing-2) 0;
	border: 1px solid var(--color-separator-primary);
	border-radius: var(--radius-large);
	padding: var(--spacing-2);
}
.opinion .title
{
	font-size: var(--text-small);
	margin: var(--spacing-1) 0;
}
.opinion ul li 
{
	list-style: none;
	display: inline-block;
	padding: 0 3px 5px 0;
	font-size: 15px;
	color: #ffcf38;
	text-shadow: 0px 1px 5px rgba(0,0,0,0.15);
}

/* Assistant */
article.container.home > .assistant
{
	margin: var(--spacing-2) 0;
}
article.container.home > .assistant > #assistant-hint
{
	position: relative;
	padding: var(--spacing-2);
	background-color: var(--color-semantic-informative);
	color: var(--color-label-on-tint);
}
article.container.home > .assistant > #assistant-hint::after
{
	position: absolute;
	font-family: bootstrap-icons;
	font-size: 3.25rem;
	color: var(--color-semantic-informative);
}
article.container.home > .assistant > #assistant-content
{
	background-color: var(--color-fill-primary);
}
article.container.home > .assistant .panel
{
	display: none;
	width: 100%;
	height: 100%;
	animation: animation-fade-in 0.7s var(--ease-in);
}
article.container.home > .assistant .panel.show
{
	display: block;
}
article.container.home > .assistant .panel > ul
{
	margin-top: var(--spacing-1);
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-1);
}
article.container.home > .assistant .panel svg
{
	margin: var(--spacing-2) 0 var(--spacing-1) 0;
	width: 3rem;
	height: 3rem;
	fill: var(--color-semantic-positive);
	animation: rotate-in 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* Products */
article#products > div.product > div > p
{
	font-size: var(--text-small);
	color: var(--color-label-secondary);
	margin: var(--spacing-1) 0;
}

/* Assistant */
.assistant-block .star
{
	position: absolute;
	right: 0;
	top: 0rem;
	font-size: 4.5rem;
	color: var(--color-tint-primary);
	animation: assistant-block-star .4s cubic-bezier(.47,0.000,.745,.715) 0.3s both;
}
.assistant-table
{
	display: flex;
	gap: var(--spacing-3);
}
.assistant-table > div > img
{
	height: 9.35rem;
	border-radius: var(--radius-large);
	border: 1px solid var(--color-separator-primary);
}

.assistant-table > div.info > h6
{
	font-size: var(--text-large);
	font-weight: 500;
}
.assistant-table > div.info > p
{
	margin-top: 0.25rem;
	font-size: var(--text-small);
	color: var(--color-label-secondary);
}

@keyframes assistant-block-star
{
	0%
	{
		transform:scale(2);
		filter:blur(4px);
		opacity:0
	}
	100%
	{
		transform:scale(1);
		filter:blur(0);
		opacity:1
	}
}

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

@media screen and (min-width: 58rem) /* DESKTOP */
{
	/* Title */
	section.container.home
	{
		margin-top: var(--spacing-10);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--spacing-4);
	}
	section.container.home > div:nth-child(1)
	{
		flex: 3;
	}
	section.container.home > div:nth-child(2)
	{
		flex: 4;
		border-radius: var(--radius-large);
	}

	/* Assistant */
	article.container.home > .assistant
	{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	article.container.home > .assistant > #assistant-hint
	{
		flex: 3;
		border-top-left-radius: var(--radius-large);
		border-bottom-left-radius: var(--radius-large);
	}
	article.container.home > .assistant > #assistant-hint::after
	{
		content: "\F231";
		right: -1.85rem;
		top: 0.85rem;
	}
	article.container.home > .assistant > #assistant-content
	{
		flex: 7;
		border-radius: var(--radius-large);
		padding: var(--spacing-3) var(--spacing-2) var(--spacing-3) var(--spacing-5);
	}

	/* Products */
	article#products > div.product
	{
		display: flex;
	}
	article#products > div.product > div:nth-child(1) { flex: 2 }
	article#products > div.product > div:nth-child(2) { flex: 4 }
	article#products > div.product > div:nth-child(1) { border-top-left-radius: var(--radius-large); border-bottom-left-radius: var(--radius-large) }
	article#products > div.product > div:nth-child(2) { border-top-right-radius: var(--radius-large); border-bottom-right-radius: var(--radius-large) }
	article#products div.buttons
	{
		display: flex;
		align-items: center;
		gap: var(--spacing-3);
	} 
	article#products div.buttons > a { flex: 2 }
	article#products div.buttons > a:nth-child(3) { flex: 5 }
	article#products div.buttons > div { flex: 4 }

	/* Lieferstatus */
	article#products > div.product .stock
	{
		position: absolute;
		top: var(--spacing-4);
		right: var(--spacing-3);
	}

	/* Assistant */
	div.assistant-block
	{
		padding: 0 var(--spacing-4);
	}

	/* Features */
	.home-features
	{
		display: flex;
		gap: var(--spacing-3);
	}
	.home-features > div
	{
		position: relative;
		flex: 1;
		font-size: var(--text-xs);
		border-radius: var(--radius-xl);
		border-top: 1px solid var(--color-separator-primary);
		padding: var(--spacing-3) var(--spacing-2) 0 var(--spacing-2);
	}
	.home-features > div::before
	{
		content: "";
		position: absolute;
		left: calc(50% - 25px);
		top: -1.7rem;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: var(--color-bg-primary);
	}
	.home-features > div > i
	{
		position: absolute;
		top: -1.40rem;
		left: calc(50% - 15px);
		font-size: 30px;
		color: var(--color-tint-secondary);
		z-index: 1;
	}
}

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

@media screen and (max-width: 58rem) /* MOBILE */
{
	/* Title */
	section.container.home
	{
		margin-top: var(--spacing-9);
	}
	section.container.home > div:nth-child(2)
	{
		margin-top: var(--spacing-3);
		height: var(--container-3xs);
		border-radius: var(--radius-large);
	}

	/* Article */
	article.container.home > .article
	{
		display: block;
		margin-top: var(--spacing-2);
		gap: var(--spacing-2);
	}
	article.container.home > .article > div:nth-child(1)
	{
		height: 10rem;
		border-radius: var(--radius-large);
		margin-bottom: var(--spacing-2);
	}

	/* Assistant */
	article.container.home > .assistant > #assistant-hint
	{
		text-align: center;
		border-top-left-radius: var(--radius-large);
		border-top-right-radius: var(--radius-large);
	}
	article.container.home > .assistant > #assistant-hint::after
	{
		content: "\F229";
		bottom: -3rem;
		left: calc(50% - 1.5rem);
	}
	article.container.home > .assistant > #assistant-content
	{
		padding: var(--spacing-4) var(--spacing-2) var(--spacing-2) var(--spacing-2);
		border-bottom-left-radius: var(--radius-large);
		border-bottom-right-radius: var(--radius-large);
	}

	/* Products */
	article#products > div.product > div:nth-child(1) { height: 10rem; border-top-left-radius: var(--radius-large); border-top-right-radius: var(--radius-large) }
	article#products > div.product > div:nth-child(2) { border-bottom-left-radius: var(--radius-large); border-bottom-right-radius: var(--radius-large) }
	article#products div.buttons > a 
	{
		display: block;
		width: 100%;
		margin-bottom: var(--spacing-2);
	}
	article#products div.buttons > div
	{
		margin-top: var(--spacing-4);
		text-align: right;
	}

	/* Lieferstatus */
	article#products > div.product .stock
	{
		position: absolute;
		bottom: var(--spacing-3);
		left: var(--spacing-3);
	}

	.assistant-block .star
	{
		right: 0.5rem;
		top: 0.25rem;
	}
	.assistant-table
	{
		flex-direction: column;
	}
	.assistant-table > div > img
	{
		height: 7rem;
	}

	.home-features > div
	{
		display: flex;
		gap: var(--spacing-2);
		align-items: center;
		padding: 0 0 var(--spacing-3) 0;
		font-size: var(--text-xs);
		margin-bottom: var(--spacing-3);
		border-bottom: 1px solid var(--color-separator-primary);
	}
	.home-features > div:last-child
	{
		border: 0;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.home-features > div > i
	{
		
		font-size: 30px;
		color: var(--color-tint-secondary);
	}
}