@import url("standard-presets.css");
@import url("standard-maps.css");
@import url("standard-supports.css");
@import url("standard-defaults.css");

:root
{
	--bg-scrolled	:  #8266AB;
	--bs-secondary	:  #8266AB;
	--bs-secondary-rgb	: 130, 102, 171;
}

:where(.alumnus-quote-banner.zone)
{
	--quote-size	: auto;
	background	: var(--bs-secondary);
	display	: grid;
	grid-template-rows	:
		[quote-start]
			var(--quote-size)
		[quote-end]
	;
	
	&>:where(.quote)
	{
		grid-row	: quote;
		place-self	: stretch;
		
		grid-template-rows	: 1fr;
		
		padding		: 8rem 0 4rem 0;
		display	: grid;
		
		&>:where(blockquote)
		{
			grid-row	: 1;
			place-self	: center;
			display	: grid;
			grid-template-rows	: auto;
			grid-template-columns	: auto;
			
			&>:where(.shine)
			{
				grid-row	: 1;
				grid-column	: 1;
			}
			
			&>:where(p)
			{
				place-self	: center;
				text-align	: center;
				----color	: white;
				
				--quote-mark-opacity	: calc(var(--shining) * 1 + (1 - var(--shining) ) * 0.6);
				--quote-mark-scale		: calc(var(--shining) * 1.25 + (1 - var(--shining) ) * 1);
				--quote-mark-rotate		: calc(var(--shining) * 3deg + (1 - var(--shining) ) * 0deg);
				--quote-mark-offset		: 200%;
				--quote-mark-glow		: calc(var(--shining) * 5px + (1 - var(--shining) ) * 0px);
				
				&::before
				{
					display	: inline-block;
					transition	: all 0.5s;
					content	: open-quote;
					opacity	: var(--quote-mark-opacity);
					transform	: scale( var(--quote-mark-scale)) rotateZ( var(--quote-mark-rotate));
					color	: var(--bs-primary);
					
					transform-origin	: calc(100% + var(--quote-mark-offset)) 100%;
					
					text-shadow	: 0 0 var(--quote-mark-glow) white;
				}
				&::after
				{
					display	: inline-block;
					transition	: all 0.5s;
					content	: close-quote;
					opacity	: var(--quote-mark-opacity);
					transform	: scale( var(--quote-mark-scale)) rotateZ( var(--quote-mark-rotate));
					color	: var(--bs-primary);
					
					transform-origin	: calc(0% - var(--quote-mark-offset)) 0%;
					
					text-shadow	: 0 0 var(--quote-mark-glow) white;
				}
			}
			
			
			
			quotes	: "『" "』";
		}
	}
}

:where(.title-banner.zone)
{
	--highlight-size	: 0.5rem;
	--title-size	: 10rem;
	--title-size	: auto;
	
	--highlight-color	: var(--bs-primary);
	--badge-color	: var(--bs-primary);
	row-gap	: 0;
	
	display	: grid;
	grid-template-rows	:
		[highlight-start]
			var(--highlight-size)
		[highlight-end title-start]
			var(--title-size)
		[title-end]
	;
	
		
	
	&>:where(._badge)
	{
		grid-row	: title;
		justify-self	: start;
		align-self	: start;
		background	: var(--badge-color);
		padding	: 0 1rem 0.25rem 1rem;
		border-radius	: 0 0 0.5rem 0;
		margin-left	: 0rem;
	}
	
	&>:where(.highlight)
	{
		grid-row	: highlight;
		place-self	: stretch;
		background	: var(--highlight-color);
	}
	
	&>:where(.title)
	{
		grid-row	: title;
		align-self	: center;
		justify-self	: start;
		
		padding	: 2.5rem 0;
	}
}

:where(.zone[data-leaf])
{
	padding-top	: 0;
}

:where(.content.main-content-and-aside)
{
	
	display	: grid;
	
	:where(.xs, .sm, .md) &
	{
		grid-template-areas	:
			"content"
		;
		
		grid-template-columns	: 1fr;
		grid-template-rows	: auto;
	}
	
	:where(.lg, .xl, .xxl) &
	{
		grid-template-areas	:
			"content aside"
		;
		
		grid-template-rows	: auto;
		
		grid-template-columns	: 2fr 1fr;
		
		column-gap	: 5rem;
		
	}
	
	:where(&>.main-content)
	{
		grid-area	: "content";
	}
	
}