header
{
	margin-bottom: calc(0px - clamp(2.5rem, 10dvh, 900px));
}

header.front
{
  margin-bottom: calc(0px - clamp(2.5rem, 10dvh, 900px));

  section.image-wrapper
  {
    position: relative;
    background: #9E9E9E;
    anchor-name: --hero-anchor;
    height: 85dvh;
    clip-path: polygon(100% 0, 100% 55%, 35% 100%, 0 70%, 0 0);

    img
    {
      position: absolute;
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  main.text-wrapper
  {
    position-anchor: --hero-anchor;
    max-width: 42rem;
    aspect-ratio: 3/2;
    position: absolute;
    bottom: calc(anchor(bottom) + 4rem);
    left: clamp(2em, 5dvw, 10em);
    clip-path: polygon(85% 0, 100% 60%, 35% 100%, 0 75%, 10% 0);
    padding: clamp(2em, 5dvw, 10em);
    background: var(--splash-color-1);

    h1
    {
		line-height: 1.25em;
      color: white;
    }
  }

  ul.button-wrapper
  {
    display: flex;
    gap: 1em;
    list-style-type: none;
    padding-inline-start: 0px;
    position-anchor: --hero-anchor;
    position: absolute;
    bottom: calc(anchor(bottom) + 0px);
    right: clamp(2em, 5dvw, 10em);
  }

}

header.others
{
	.text-wrapper
	{
		display: flex;
		justify-content: space-between;
		gap: clamp(2em, 5dvw, 10em);
		flex-wrap: wrap;
		
		.page-introduction
		{
			flex: 1;
			max-width: 75ch;
			
			h1
			{
				margin-bottom: 1em;
			}
						
			p.excerpt
			{
				font-size: var(--h3-size);
				font-family: 'Avenir Bold', 'Avenir Bold', sans-serif;
				line-height: 1.2em;
				margin-block-end: 1.5rem;
			}
		}
		
		aside
		{
			
		}
	}
}

header.others.image
{

  section.image-wrapper
  {
    position: relative;
    background: #9E9E9E;
    height: 55dvh;
    clip-path: polygon(100% 0, 100% 55%, 35% 100%, 0 70%, 0 0);

    img
    {
      position: absolute;
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  main.text-wrapper
  {
	  padding: 4rem clamp(2em, 10dvw, 20em);
  }
}

header.others.empty
{
	section.gfx-wrapper
	{
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		background: #E0E5E8;
		height: 25dvh;
		clip-path: polygon(100% 0, 100% 55%, 35% 100%, 0 70%, 0 0);
		z-index: -1;
	}
	
	main.text-wrapper
	{
		padding: 4rem clamp(2em, 10dvw, 20em);
	}
}

header
{
	aside
	{
		max-width: 30em;
		display: inline-flex;
		flex-direction: column;
		gap: 1em;
		border-radius: 1em 1em 0 0;
		background: white;
		padding: 2em 2em 12em 2em;
		clip-path: polygon(100% 0, 100% 85%, 70% 100%, 0 75%, 0 0);
		
		> img
		{
			align-self: center;
			height: auto;
			width: 80%;
		}
		
		ul.tags
		{
			display: flex;
			flex-wrap: wrap;
			gap: 1em;
			padding-inline-start: 0px;
			list-style-type: none;
			margin-bottom: 1em;

			li a
			{
				display: flex;
				text-decoration: none;
				align-items: center;
				color: black;
				font-size: 85%;
				border: 1px solid black;
				border-radius: .5em;
				padding: .2em .4em;
			}

			li.regio a
			{
				background: var(--splash-color-2);
				border-color: var(--splash-color-2);
			}
		}
		
		ul.contact
		{
			list-style-type: none;
			padding-inline-start: 0px;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			gap: 1rem;
			
			li
			{
				display: grid;
				grid-template-columns: 1.5rem 1fr;
				grid-gap: 1rem;
				
				> div
				{
					display: flex;
					justify-content: center;
					align-items: center;
					aspect-ratio: 1/1;
					border-radius: .25em;
					padding: .25em;
					background: var(--splash-color-1);
					color: white;
					
					span
					{
						font-size: 1rem;
					}
				}
				
				> a
				{
					color: black;
					text-decoration: none;
					transition: all 250ms ease-in-out;
				}
				
				> a:hover
				{
						color: var(--splash-color-1);
				}
			}
		}
	}
}

@media ( width < 850px)
{
	header.front
	{
		section.image-wrapper
		{
			clip-path: polygon(100% 0, 100% 85%, 65% 100%, 0 60%, 0 0);
		}
		
		main.text-wrapper
		{
			clip-path: polygon(100% 0, 100% 60%, 35% 100%, 0 75%, 10% 0);
			left: 0px;
			right: 0px;
		}
		
		ul.button-wrapper
		{
			display: none;
		}
	}
	
	header.others
	{
		.text-wrapper
		{		
			.page-introduction
			{
				order: 2;
			}

			aside
			{
				order: 1;
			}
		}
	}
}

nav.rank-math-breadcrumb
{
	a,
	span.separator
	{
		text-decoration: none;
		color: var(--splash-color-1);
		font-family: 'Avenir Bold', 'Avenir Bold', sans-serif;
	}
	
	a:hover
	{
		text-decoration: underline;
	}
}