/* CSS Document */

#main{
	overflow: hidden;
	padding-bottom: clamp(80px, calc(120 / 768 * 100dvw), 120px);
	background: #f0f5f7;
}

#detail{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 1080px);
	justify-content: center;
	width: min(100%, 1232px);
	margin-inline: auto;
	padding: clamp(32px, calc(64 / 768 * 100dvw), 64px) 0 clamp(48px, calc(88 / 768 * 100dvw), 88px) 0;
	background: white;
	&:before{
		content: "";
		border-bottom: 1px solid currentColor;
		margin-top: clamp(32px, calc(56 / 768 * 100dvw), 48px);
	}
	#title{
		order: -1;
	}
	#text,
	#table,
	#links,
	#documents,
	#photo{
		margin-top: clamp(40px, calc(56 / 768 * 100dvw), 56px);
	}
	@media (min-width: 992px) {
		margin-top: 80px;
		border-radius: 40px;
		&:has(#photo){
			grid-template-columns: calc(min(var(--wrap-fit), 1080px) - 356px - clamp(64px, calc(80 / 1366 * 100dvw), 80px)) 356px;
			column-gap: clamp(64px, calc(80 / 1366 * 100dvw), 80px);
			&:before{
				grid-column: 1 / 3;
			}
			#title{
				grid-column: 1 / 3;
			}
			#photo{
				grid-column: 2;
				grid-row: 3 /8;
				align-self: start;
			}
		}
	}
}

#title{
	display: grid;
	grid-row-gap: 8px;
	& h2{
		display: grid;
		grid-row-gap: 4px;
		font-weight: 900;
		font-size: clamp(20px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.025em;
	}
	& h2+div{
		order: -1;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		grid-gap: 4px 8px;
	}
	& time{
		margin-right: 8px;
		color: #666;
		font-weight: 600;
		font-size: 14px;
		font-family: 'Montserrat', var(--font);
		letter-spacing: 0.05em;
	}
	& ul{
		display: contents;
		&:empty{
			display: none;
		}
		&[data-type="category"]{
			& li{
				display: grid;
				align-items: center;
				padding: 0 10px;
				background: var(--color);
				border-radius: 10px;
				color: white;
				font-weight: 700;
				font-size: 12px;
				letter-spacing: 0.2em;
				text-align: center;
			}
		}
		&[data-type="user"]{
			& li{
				display: grid;
				align-items: center;
				padding: 0 10px;
				border: 1px solid color-mix(in srgb, white, black 13%);
				border-radius: 10px;
				font-weight: 700;
				font-size: 12px;
				letter-spacing: 0.2em;
				text-align: center;
			}
		}
		&[data-type="tag"]{
			& li{
				color: var(--color-theme);
				font-weight: 800;
				font-family: 'Montserrat', var(--font);
				letter-spacing: 0.025em;
			}
		}
	}
}

#text{
	font-weight: 600;
	letter-spacing: 0.05em;
}

#table{
	padding: clamp(24px, calc(32 / 768 * 100dvw), 32px);
	border: 1px solid currentColor;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.05em;
}

#links,
#documents{
	& h3{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 16px;
		font-weight: 700;
		font-size: 18px;
		letter-spacing: 0.05em;
		&:before{
			content: "";
			margin-top: 0.1em;
			border-left: 2px solid var(--color-theme);
		}
	}
	& h3+div{
		margin-top: 24px;
	}
}

#links{
	& ul{
		display: grid;
		justify-items: start;
		grid-gap: 16px;
		padding-left: 18px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 16px;
		color: #666;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.05em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: var(--color);
			transform: translateY(0.25em);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><path d="M13,10v3H3V3h4"/><polyline points="11 1 15 1 15 5"/><path d="M15,1l-7,7"/></svg>') no-repeat center / contain;
		}
		&:hover{
			color: var(--color-theme);
			&:before{
				background: currentColor;
			}
		}
	}
}

#documents{
	& ul{
		display: grid;
		justify-content: start;
		justify-items: start;
		grid-gap: 16px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 8px;
		min-height: 48px;
		padding: 8px 24px;
		border: 1px solid currentColor;
		border-radius: 24px;
		color: inherit;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		&:hover{
			background: var(--color-theme);
			border-color: transparent;
			color: #fff;
		}
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			transform: translateX(4px);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="11 8 8 11 5 8" /><path d="M8,11V2"/><polyline points="15 13 15 15 1 15 1 13"/></svg>') no-repeat center / contain;
		}
	}
}

#photo{
	display: grid;
	grid-row-gap: clamp(24px, calc(32 / 768 * 100dvw), 32px);
	& dl{
		display: grid;
		grid-row-gap: 8px;
	}
	& dt{
		order: 1;
		font-weight: 500;
		font-size: 14px;
		letter-spacing: 0.05em;
	}
}

#pagenation{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	& ul{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		background: var(--color);
		border-radius: 0 0 24px 24px;
		color: white;
	}
	& li{
		display: grid;
		&:nth-child(n+2){
			grid-template-columns: 0 1fr;
			&:before{
				content: "";
				border-left: 1px solid currentColor;
				margin-block: 8px;
			}
		}
	}
	& a{
		display: grid;
		align-items: center;
		min-height: 48px;
		padding: 8px 1.5em;
		color: inherit;
		font-weight: 800;
		font-size: clamp(12px, calc(16 / 768 * 100dvw), 16px);
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		&[rel="prev"],
		&[rel="next"]{
			column-gap: 8px;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: clamp(10px, calc(14 / 768 * 100dvw), 14px);
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polygon points="0 14 6.5 7 0 0 1.5 0 8 7 1.5 14 0 14"/><polygon points="6 14 12.5 7 6 0 7.5 0 14 7 7.5 14 6 14"/></svg>') no-repeat center / contain;
			}
		}
		&[rel="prev"]{
			grid-template-columns: auto 1fr;
			&:before{
				transform: scale(-1, 1);
			}
		}
		&[rel="next"]{
			grid-template-columns: 1fr auto;
			&:before{
				order: 1;
			}
		}
	}
	@media (min-width: 768px) {
		justify-items: center;
		& a{
			min-width: 182px;
		}
	}
}