/* CSS Document */

#main{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	align-content: start;
	&:before{
		content: "";
		grid-column: 1 / 4;
		grid-row: 1;
		background: #f2f2f2;
	}
	&>*{
		grid-column: 2;
	}
}

#subject{
	grid-row: 1;
	justify-self: center;
	display: grid;
	grid-template-columns: 1.5em auto 1.5em;
	grid-gap: 0 0.5em;
	margin: 40px 0;
	color: #4d4d4d;
	font-size: 24px;
	font-family: var(--font-min);
	text-align: center;
	@media (min-width: 992px){
		font-size: 32px;
	}
	&:before{
		content: "";
		grid-column: 1;
		grid-row: 1 / 3;
		align-self: end;
		aspect-ratio: 1;
		background: currentColor;
		transform: translateY(50%);
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><path d="M41.03,7.51c-1.14-.4-3.99,5.31-5.34,5.32l-4.39.04c1.6-1.76,2.86-3.72,1.9-4.58-1.6-1.43-4.43-1.59-6.68.07l-6.29,4.63-13.06.13c-1.23.13-2.3.44-3.22.86,0,0,0,0,0,0-.56.25-2.4,1.17-3.35,2.77,0,0,0,0,0,0-.08.12-.16.23-.23.35-.79,1.29-.31,2.8,1.44,3.12.76.14,6.95.23,13.83.28,0,0,0,0,.01,0,.04.04.07.08.11.12l11.11,10.61c2.02,1.93,4.84,2.14,6.62.92,1.58-1.08-1.37-5.17-3.31-7.3l-3.9-4.29h0c5.37.02,9.48.03,9.48.03,2.7-.03,4.71-1.35,5.57-3.94,0,0,1.66-8.47-.31-9.15ZM26.53,16.36c-.52,0-.95-.41-.95-.93,0-.52.41-.94.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95ZM20.84,15.48c0-.52.41-.95.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95-.52,0-.94-.41-.95-.93ZM17.03,14.58c.26,0,.5.1.67.28.17.17.27.4.27.65,0,.52-.41.94-.93.95-.36,0-.68-.2-.84-.5-.07-.13-.11-.27-.11-.43,0-.52.41-.94.93-.95ZM3.01,17.02l-1.54.04c-.23,0-.44-.05-.63-.15.92-1.55,2.77-2.46,3.27-2.68.07.15.12.32.12.51l.02.98c.02.7-.54,1.29-1.24,1.3ZM7.76,16.55c-.52,0-.94-.41-.95-.93,0-.52.41-.94.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95ZM11.36,15.57c0-.52.41-.94.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95-.52,0-.94-.41-.95-.93ZM31.27,16.31c-.52,0-.94-.41-.95-.93,0-.52.41-.94.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95Z"/></svg>') center no-repeat;
		-webkit-mask-size: min(100%, 42px);
	}
	&:after{
		content: "";
		grid-column: 2;
		grid-row: 2;
		height: 2px;
		margin: 0 -0.25em;
		background: currentColor;
		border-radius: 1px;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 2"><path d="M5,2H1c-.55,0-1-.45-1-1S.45,0,1,0h4c.55,0,1,.45,1,1s-.45,1-1,1Z"/></svg>') left top repeat-x;
		-webkit-mask-size: 12px 2px;
	}
	}

#detail{
	display: grid;
	align-items: start;
	grid-gap: 24px 40px;
	margin-top: 64px;
	padding: 24px;
	border: 2px solid var(--color-theme);
	border-radius: 4px;
	background: #fff;
	@media (min-width: 768px) {
		&:has(#detailPhotos){
			grid-template-columns: 1fr min(30vw, 320px);
			&>*{
				grid-column: 1;
			}
			#detailHeader{
				grid-column: 1 / 3;
			}
			#detailPhotos{
				order: -1;
				grid-column: 2;
				grid-row: 2;
			}
			&:has(#detailDocuments),
			&:has(#detailLinks){
				grid-template-rows: auto auto 1fr;
				#detailPhotos{
					grid-row: 2 / 4;
				}
			}
			&:has(#detailDocuments):has(#detailLinks){
				grid-template-rows: auto auto auto 1fr;
				#detailPhotos{
					grid-row: 2 / 5;
				}
			}
			#back{
				grid-column: 1 / 3;
			}
		}
	}
	@media (min-width: 992px) {
		grid-gap: 40px 64px;
		padding: 48px;
		margin-top: 80px;
	}
}

#detailHeader{
	display: grid;
	grid-gap: 8px;
	padding-bottom: 8px;
	border-bottom: 4px solid var(--color-theme);
	& h2{
		order: 1;
		width: 100%;
		font: 700 24px var(--font-min);
		@media (min-width: 992px) {
			font-size: 32px;
		}
	}
	& h2+div{
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		grid-gap: 4px 8px;
		color: #595757;
		font-size: 14px;
		&:before{
			content: "";
			order: -1;
			width: 100%;
		}
		@media (min-width: 576px){
			font-size: 16px;
			&:before{
				content: none;
			}
		}
	}
	& time{
		color: #4d4d4d;
	}
	& ul{
		display: contents;
	}
	& li{
		&[class]{
			order: -2;
			display: grid;
			align-items: center;
			padding: 0 16px;
			background: var(--color-theme);
			color: #fff;
			font-weight: 500;
			font-size: 12px;
			text-transform: uppercase;
			@media (min-width: 576px){
				order: unset;
				min-height: 24px;
				font-size: 14px;
			}
			&.tagNew{
				background: var(--color-point);
			}
		}
		&:not([class]){
			display: flex;
			flex-wrap: wrap;
			grid-gap: 4px;
			&:before,
			&:after{
				content: "-";
			}
		}
	}
}

#detailText{
	color: #4d4d4d;
}

#detailPhotos{
	display: grid;
	grid-gap: 16px;
	@media (min-width: 992px) {
		grid-gap: 40px;
	}
	& figure{
		display: grid;
		grid-gap: 8px;
	}
	& figcaption{
		color: #4d4d4d;
		font-size: 14px;
	}
	& img{
		border-radius: 4px;
	}
}

#detailDocuments,
#detailLinks{
	display: grid;
	grid-gap: 24px;
	margin-top: 16px;
	& h3{
		display: grid;
		grid-template-columns: 4px auto;
		grid-gap: 12px;
		font-weight: 700;
		font-size: 20px;
		@media (min-width: 992px) {
			font-size: 24px;
		}
		&:before{
			content: "";
			margin: 0.35em 0 0.25em 0;
			background: var(--color-theme);
			border-radius: 2px;
		}
	}
	& ul{
		display: grid;
		justify-content: start;
		grid-gap: 8px;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr 12px;
		align-items: center;
		grid-gap: 8px;
		min-height: 48px;
		padding: 8px 16px;
		background: #fff;
		border: 1px solid currentColor;
		border-radius: 24px;
		color: var(--color-theme);
		font-size: 16px;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		letter-spacing: 0.025em;
		div:has(>&){
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			grid-gap: 16px 24px;
		}
		&:hover{
			&:after{
				transform: translateX(4px);
			}
		}
		&:after{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			transition: transform 0.2s ease-out;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 12"><polygon points="6 6 0 12 0 0 6 6" /></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
	}
}

#detailDocuments{
	& a{
		grid-template-columns: 16px auto;
		&:hover{
			&:after{
				transform: translateY(2px);
			}
		}
		&:after{
			order: -1;
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1,5H0v11h11v-1H1V5ZM4,0v12h12V0H4Zm11,11H5V1h10v10Z"/></svg>') ;
		}
	}
}

#back{
	display: flex;
	justify-content: center;
	padding: 16px 0;
	border-top: 1px solid var(--color-border);
	transform: translateY(24px);
	@media (min-width: 992px) {
		padding: 24px 0;
		transform: translateY(48px);
	}
	& a{
		display: grid;
		grid-template-columns: auto 50px;
		align-items: center;
		justify-content: center;
		grid-gap: 16px;
		color: inherit;
		font-weight: 700;
		text-decoration: none;
		&:hover{
			&:before,
			&:after{
				transform: translateX(4px);
			}
		}
		&:before,
		&:after{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1;
			transition: transform 0.2s ease-out;
		}
		&:before{
			border: 1px solid var(--color-border);
			border-radius: 100%;
		}
		&:after{
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.16 15.71"><polygon points="9.31 0 8.6 .71 15.25 7.35 0 7.35 0 8.35 15.25 8.35 8.6 15 9.31 15.71 17.16 7.85 9.31 0" /></svg>') center no-repeat;
			-webkit-mask-size: 17.16px 15.71px;
			background: var(--color);
		}
	}
}