#course-search-panel a
{
	color	: black;
	font-weight	: bold;
	text-decoration	: underline;
}

#course-search-panel a:hover
{
	color	: white;
	background	: black;
}

:where(.lg, .xl, .xxl) #course-search-panel dl
{
	border-left	: 1px solid black;
	
	
}

#course-search-panel
{
	--hat-1	: 0.25rem;
	border-bottom	: var(--hat-1) solid var(--bs-secondary);
	background	: white;
}










:root
{
  --content-width-sm	: 540px;
  --content-width-md	: 720px;
  --content-width-lg	: 960px;
  --content-width-xl	: 1140px;
  --content-width-xxl	: 1320px;
}

/* grid-section */

:where(.grid-section)
{
	display	: grid;
	grid-template-columns	: 
		[full-start] minmax(0, 1fr)
		[content-start] min(100%, var(--content-width)) [content-end]
		minmax(0, 1fr) [full-end];
	background	: var(--background);
	padding	: var(--padding);
	gap	: var(--gap);
}

:where(.grid-section>.grid-content)
{
	grid-column	: content;
}

:where(.grid-section>.grid-content-fullwidth)
{
	grid-column	: full;
}

@media (min-width	: 576px) { 	:root { --content-width	: var(--content-width-sm); } }
@media (min-width	: 768px) { 	:root { --content-width	: var(--content-width-md); } }
@media (min-width	: 992px) { 	:root { --content-width	: var(--content-width-lg); } }
@media (min-width	: 1200px) { 	:root { --content-width	: var(--content-width-xl); } }
@media (min-width	: 1400px) { 	:root { --content-width	: var(--content-width-xxl); } }


/* banner */
:where(.banner-content)
{
	justify-items	: center;
	align-items	: center;
	padding	: 6cqh 6cqw;
}

:where(#hero-banner)
{
	--background	: lightgray;
}

/* search-panel */

@media (min-width	: 0px)
{
	:where(.search-panel)
	{
		--cols	: 1fr;
		--rows	: auto auto minmax(0, 1fr) auto;
		--areas	:
			"filters"
			"result-status"
			"result"
			"pagination"
		;
		--column-gap	: 2rem;
		--row-gap		: 2rem;
		--padding	: 0;
	}
}

@media (min-width	: 992px)
{
	:where(.search-panel)
	{
		--cols	: 24rem 1fr;
		--rows	: auto minmax(0, 1fr) auto;
		--areas	:
			"filters result-status"
			"filters result"
			"filters pagination"
		;
		--column-gap	: 5rem;
		--row-gap		: 2rem;
		--padding	: 0;
	}
}

:where(.grid-map)
{
	display	: grid;
	grid-template-columns	: var(--cols);
	grid-template-rows	: var(--rows);
	grid-template-areas	: var(--areas);
	column-gap	: var(--column-gap);
	row-gap		: var(--row-gap);
	padding	: var(--padding);
}



:where(.result-status)
{
	grid-area	: result-status;
	place-self	: center start;
}

:where(.filters)
{
	grid-area	: filters;
}

:where(.result)
{
	grid-area	: result;
}

:where(.pagination)
{
	grid-area	: pagination;
	place-self	: center end;
}

/* result */

/* 强制 result 占 10 行高度（动态计算） */
:where(.result)
{
	--item-height	: 0;
	--gap	: 0;
	--padding-top	: 0;
	--padding-bottom	: 0;
	
	display	: grid;
	grid-template-rows	: repeat(10, var(--item-height));
	gap	: var(--gap);
	padding-top	: var(--padding-top);
	padding-bottom	: var(--padding-bottom);
	min-height	: calc(
		10 * var(--item-height) + 
		9 * var(--gap) + 
		var(--padding-top) + 
		var(--padding-bottom)
	);

	/* 10行 + 9间隙 + 上下 Padding */
}

@media (min-width	: 0px)
{
	:where(.result)
	{
		--item-height	: 8rem;
		--gap	: 1rem;
		--padding-top	: 0rem;
		--padding-bottom	: 0rem; 
	}
}

@media (min-width	: 768px)
{
	:where(.result)
	{
		--item-height	: 8rem;
		--gap	: 1rem;
		--padding-top	: 0rem;
		--padding-bottom	: 0rem; 
	}
}

/* filters 高度同步 result */
:where(.filters)
{
	background	: white;
}

@media (min-width	: 0px)
{
	:where(.filters)
	{
		--cols	: 1fr;
		--rows	: repeat(3, min-content);
		--areas	:
			"programmes"
			"schools"
			"subjects"
		;
		
		--gap	: 1rem;
		--padding-top	: 1rem;
		--padding-bottom	: 1rem; 
	}
}

@media (min-width	: 768px)
{
	:where(.filters)
	{
		overflow-y	: auto;
		height	: 70rem;
		--cols	: 1fr;
		--rows	: repeat(3, min-content);
		--areas	:
			"programmes"
			"schools"
			"subjects"
		;
		
		--gap	: 1rem;
		--padding-top	: 1rem;
		--padding-bottom	: 1rem; 
	}
}

:where(#programmes, #filter-group-programmes)
{
	grid-area	: programmes;
}

:where(#schools, #filter-group-schools)
{
	grid-area	: schools;
}

:where(#subjects, #filter-group-subjects)
{
	grid-area	: subjects;
}

/* filter-group*/
:where(.filter-group details+div)
{
	overflow	: hidden;
	contain	: layout; /* 告诉浏览器独立布局此区域 */
}

:where(.filter-group details+div>div)
{
	will-change	: margin-top; /* 预提示浏览器 */
}

:where(.filter-group details:not([open])+div>div)
{
	margin-top	: calc(-4.25rem * var(--item-count));
}

:where(.filter-group details[open]+div>div)
{
	margin-top	: 0;
}


/* summary */

.filter-group summary
{
	display	: grid;
}

:where(.filter-group summary)
{
	transition: transform 0.2s;
	list-style: none;
	display: grid;
	grid-template-columns: [number] 3rem [title] 1fr [caret] 3rem;
	cursor: pointer;
    height: 3rem;
    align-items: center;
    justify-items: center;
	background	: black;
	color	: var(--bs-primary);
}

:where(.filter-group summary)::before
{
	content	: var(--checked-count);
	grid-column	: number;
}

:where(.filter-group summary)::after
{
	font-family: "Font Awesome 6 Free";
	content: "\f0da";
	grid-column: caret;
	transition: transform 0.2s;
}

:where(.filter-group [open] summary)::after
{
	transform: rotate(90deg);
}

/* check-list */

:where(.check-list)
{
	display	: grid;
	grid-template-columns	: 1fr;
	grid-auto-rows	: 4rem;
	padding	: 0.25rem 0.25rem;
	gap	: 0.25rem;
	transition	: all 0.2s;
}

/* check-item */

label.check-item
{
	display	: grid;
}

:where(.check-item)
{
	display	: grid;
	grid-template-columns	:
		[label] 1fr
		[check] 3rem;
	align-items	: stretch;
	padding	: 0.5rem 1rem;
	cursor	: pointer;
	position	: relative;
}

/* 扩展点击区域（含padding） */
:where(.check-item)::after
{
	content	: "";
	position	: absolute;
	inset	: 0;
}

:where(.label)
{
	grid-column	: label;
	padding-right	: 1rem;
	z-index	: 1;
	display	: flex;
	align-items	: center;
	min-height	: 100%;
}

:where(.checkbox)
{
	grid-column	: check;
	z-index	: 1;
	margin	: auto;
	appearance	: none;
	display	: flex;
	align-items	: center;
	justify-content	: center;
}

/* 自定义复选框样式 */
:where(.checkbox)::before
{
	content	: "";
	display	: inline-block;
	width	: 24px;
	height	: 24px;
	border	: 0.1em solid currentColor;
	/*border-radius	: 0.25em;*/
	background-color	: transparent;
	transition	: all 0.2s;
}

:where(.checkbox:checked)::before
{
	background-color	: currentColor;
	background-image	: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
	background-size	: contain;
	background-repeat	: no-repeat;
}

/* 选中状态 */
:where(.check-item:has(.checkbox:checked))
{
	background	: var(--bs-primary);
}

:where(.check-item:has(.checkbox:checked) .label)
{
	font-weight	: bold;
}


/* result-item */

:where(.result .result-item)
{
	display	: grid;
	grid-template-columns	: 1fr 8rem;
	grid-template-rows		: 1.5rem auto;
	gap	: 0;
	grid-template-areas	:
		".	programme"
		"title	view-more"
	;
	transition	: all 0.2s;
	position	: relative;
	border-bottom	: 0.25rem solid var(--bs-primary);
	overflow	: hidden;
}

:where(.result .result-item .title)
{
	grid-area	: title;
	background	: white;
}

:where(.result .result-item .programme)
{
	grid-area	: programme;
	display	: flex;
	align-items	: center;
	justify-content	: center;
	background	: white;
	font-size	: small;
	padding	: 0.25rem 0.25rem 0 0.25rem;
}

:where(.result .result-item .view-more)
{
	grid-area	: view-more;
	display	: flex;
	align-items	: center;
	justify-content	: center;
	background	: white;
}

:where(.result .result-item:hover)
{
	color	: var(--bs-secondary);
	border-bottom	: 0.25rem solid var(--bs-secondary);
}

:where(.result .result-item article)
{
	padding	: 0.5rem 1rem;
	display	: flex;
	flex-direction	: column;
	justify-content	: center;
	height	: 100%;
}

.pagination a
{
	aspect-ratio	: 1/1 !important;
	border-radius	: 100% !important;
	border-color	: transparent;
	width	: 2.5rem;
	margin	: 0 0.25rem !important;
}