@import url('common.css');

*
{
	--story_gap: 3.5rem;
	--story_separator_width: 2.2rem;
	--story_separator_padding: 2.3rem;
	--story_separator_thickness: 0.27rem;
	--story_icon_size: 4.5rem;
}

.story_wrapper
{
	display: block;
	padding-top: 0rem;
	margin-bottom: 2rem;
	background-color: white;
}

.story_element
{
	/*max-width: 40rem;*/
	display: flex;
	flex-direction: column;
	height: fit-content;
	position: relative;
	padding-left: 4rem;
	padding-right: 1rem;
	padding-top: 1.5rem;
	--separator-color: #d0d0d0;
}

.story_image
{
	order: 2;
	max-height: 100vw;
	width: 100%;
	object-fit: cover;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 0;
	margin-top: 1rem;
	transition: filter 0.3s ease;
	image-rendering: -webkit-optimize-contrast;
}

.story_element > p
{
	order: 3;
	line-height: 1.7;
	font-size: 1.3rem;
	margin-bottom: 2.3rem;
	color: #2d2d2d;
	text-align: left;
	transition: color 0.3s ease;
	hyphens: auto;
}

.story_element > p > span
{
	margin-bottom: auto;
}

.story_element > a
{
	/*text-decoration: underline;*/
	text-decoration: none;
	margin-top: 0.85rem;
	order: 4;
	font-size: 1.3rem;
	margin-top: -1.2rem;
	margin-bottom: 2.5rem;
	width: fit-content;
	padding: 0.35rem 1.55rem;
	transition: background-color 0.25s;
	color: var(--faktum-dark-gray);
	border-style: solid;
	border-width: 0.2rem;
	border-color: var(--faktum-dark-gray);
}

.story_element_in_view > a
{
	color: var(--faktum-red);
	border-color: var(--faktum-red);
}

.story_element > a:hover
{
	background-color: var(--faktum-light-red);
	color: white;
}

.story_element > a:visited
{
}

.story_element_in_view > p
{
	color: black;
}

.story_arrow_wrapper
{
	position: absolute;
	left: 1rem;
	display: inline-block;
	width: var(--story_separator_width);
	height: calc(100% - 1rem);
	box-sizing: border-box;
	border-width: var(--story_separator_thickness);
	border-color: var(--separator-color);
	border-left-style: solid;
	transition: border-color 0.4s ease;
}

.story_arrow
{
	position: absolute;
	bottom: 0;
	width: var(--story_separator_width);
	height: calc(var(--story_separator_width) + var(--story_separator_thickness));
	box-sizing: border-box;
	border-width: var(--story_separator_thickness);
	border-color: var(--separator-color);
	border-style: solid;
	border-left-style: none;
	transition: border-color 0.4s ease;
}

.story_arrow_wrapper::after
{
	content: "";
	position: absolute;

	width: calc(0.4 * var(--story_separator_width));
	height: calc(0.4 * var(--story_separator_width));

	bottom: calc(0.45 * var(--story_separator_width));
	left: 50%;

	border-width: var(--story_separator_thickness);
	border-color: var(--separator-color);
	border-right-style: solid;
	border-bottom-style: solid;

	transform: translateX(-50%) rotate(45deg);
	transition: border-color 0.4s ease;
}

.story_element:not(:last-child)::after
{
	order: 4;
	content: "";
	display: block;
	height: 0;
	border-bottom: 1px solid #d0d0d0;
	width: calc(100% - 2rem);
	margin-bottom: 0.7rem;
}

.story_element_in_view
{
	--separator-color: var(--faktum-red);
}

.story_icon
{
	object-fit: contain;
	object-position: left;
	margin-top: 1rem;
	order: 1;
	height: var(--story_icon_size);
	margin-bottom: 1.5rem;
}

.story_span
{
	display: block;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

@media(min-width: 950px)
{
	.story_wrapper
	{
		max-width: min(calc(var(--max-content-width) - 2rem), calc(100vw - 4rem));
		width: 100%;
		position: relative;
		left: 50%;
		margin-top: 2rem;
		margin-bottom: 0.5rem;
	}

	.story_arrow_wrapper
	{
		position: absolute;
		left: 0;
		height: 100%;
		margin-top: 0;
		transform: none;
	}

	.story_element
	{
		display: block;
		width: 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
		padding-top: 0;
		min-height: 28rem;
		margin-bottom: var(--story_gap);
	}

	.story_element:last-child
	{
		margin-bottom: 0;
	}

	.story_element > p
	{
		font-size: 1.65rem;
		line-height: 1.55;
		margin-top: 0;
		margin-bottom: 0;
		text-align: justify;
		width: calc(50% - var(--story_separator_width) - var(--story_separator_padding));
	}

	.story_element > a
	{
		font-size: 1.6rem;
	}

	.story_image
	{
		height: 100%;
		width: 50%;
		margin-top: 0;
	}

	.story_icon
	{
		margin-top: 0;
		float: none;
	}

	.story_wrapper:nth-child(odd) .story_element:nth-child(even) > p,
	.story_wrapper:nth-child(even) .story_element:nth-child(odd) > p
	{
		position: relative;
		left: -50%;
		top: 0;
		transform: none;
	}

	.story_wrapper:nth-child(odd) .story_element:nth-child(even) > a,
	.story_wrapper:nth-child(even) .story_element:nth-child(odd) > a
	{
		position: absolute;
		left: -50%;
		bottom: 0;
		margin-bottom: 0;
	}

	.story_wrapper:nth-child(odd) .story_element:nth-child(even) > .story_image,
	.story_wrapper:nth-child(even) .story_element:nth-child(odd) > .story_image
	{
		position: absolute;
		left: 0;
		top: 0;
		transform: none;
	}

	.story_wrapper:nth-child(odd) .story_element:nth-child(even) > .story_icon,
	.story_wrapper:nth-child(even) .story_element:nth-child(odd) > .story_icon
	{
		position: relative;
		left: -50%;
	}

	.story_wrapper:nth-child(odd) .story_element:nth-child(even) > .story_arrow_wrapper,
	.story_wrapper:nth-child(even) .story_element:nth-child(odd) > .story_arrow_wrapper
	{
		left: calc(-1 * var(--story_separator_width) - var(--story_separator_padding));
		transform: none;
		border-left-style: none;
		border-right-style: solid;
	}

	.story_wrapper:nth-child(odd) .story_element:nth-child(even) .story_arrow,
	.story_wrapper:nth-child(even) .story_element:nth-child(odd) .story_arrow
	{
		border-right-style: none;
		border-left-style: solid;
		left: auto;
		right: 0;
	}

	.story_element:not(:last-child)::after
	{
		display: none;
	}

	.story_wrapper:nth-child(odd) .story_element:nth-child(odd) > p,
	.story_wrapper:nth-child(even) .story_element:nth-child(even) > p
	{
		position: relative;
		left: calc(var(--story_separator_width) + var(--story_separator_padding));
		transform: none;
	}

	.story_wrapper:nth-child(odd) .story_element:nth-child(odd) > a,
	.story_wrapper:nth-child(even) .story_element:nth-child(even) > a,
	{
		position: absolute;
		bottom: 0;
		margin-bottom: 0;
		left: 50%;
		transform: translateX(-100%);
	}

	.story_wrapper:nth-child(odd) .story_element:nth-child(odd) > .story_image,
	.story_wrapper:nth-child(even) .story_element:nth-child(even) > .story_image
	{
		position: absolute;
		top: 0;
		left: -50%;
		transform: none;
	}

	.story_wrapper:nth-child(odd) .story_element:nth-child(odd) > .story_icon,
	.story_wrapper:nth-child(even) .story_element:nth-child(even) > .story_icon
	{
		margin-left: calc(var(--story_separator_width) + var(--story_separator_padding));
	}

	.story_wrapper:nth-child(odd) .story_element:nth-child(odd) > .story_arrow_wrapper,
	.story_wrapper:nth-child(even) .story_element:nth-child(even) > .story_arrow_wrapper
	{
		left: var(--story_separator_padding);
	}
}

@media(min-width: 1000px)
{
	.story_element
	{
		min-height: 26rem;
	}
}

@media(min-width: 1100px)
{
	.story_element
	{
		min-height: 24rem;
	}
}

@media(max-width: 620px)
{
	.story_element p
	{
		font-size: 1.2rem;
	}
}