/* Syllabus 課程
 *
 * 樣式刻意保守：只處理版面結構，顏色與字型留給佈景主題或 Elementor 控制。
 * 外掛硬塞品牌色的話，每個裝了它的網站都要先花時間把樣式蓋掉。
 */

.sy-categories { margin: 0 0 1.5rem; }

.sy-categories__title {
	font-size: 1rem;
	margin: 0 0 .6rem;
}

.sy-categories__name {	
	background-color: #e5e5e5;
	padding-left: .75rem;
    padding-right: .75rem;
	padding-bottom: .5rem;
    padding-top: .5rem;
	font-size: .875rem;
    line-height: 1.25rem;
	border-radius: .25rem;
}

.sy-categories__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .75rem;
}

.sy-categories--stack .sy-categories__list {
	flex-direction: column;
	gap: .35rem;
}

.sy-categories__item a {
	display: inline-block;
	padding: .35rem .85rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
	font-size: .9rem;
	line-height: 1.6;
	opacity: .75;
	transition: opacity .15s ease;
}

.sy-categories--stack .sy-categories__item a {
	border: 0;
	border-radius: 0;
	padding: .2rem 0;
}

.sy-categories__item a:hover,
.sy-categories__item.is-current a { opacity: 1; }
.sy-categories__item.is-current a { font-weight: 600; }

.sy-categories__count {
	font-size: .8em;
	opacity: .6;
	margin-left: .25em;
}

/* 課程列表 */
.sy-courses__title { margin: 0 0 1rem; }

.sy-courses__grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sy-cols-1 { grid-template-columns: minmax(0, 1fr); }
.sy-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sy-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sy-card { overflow: hidden; }
.sy-card__link { display: block; text-decoration: none; color: inherit; height: 100%; }
.sy-card__media img { display: block; width: 100%; height: auto; }
.sy-card__body { padding: 1rem 0 0; }
.sy-card__title { margin: 0 0 .35rem; font-size: 1.05rem; line-height: 1.5; }

.sy-card__meta {
	margin: 0 0 .5rem;
	font-size: .85rem;
	opacity: .7;
}

.sy-card__summary {
	margin: 0;
	font-size: .9rem;
	line-height: 1.8;
	opacity: .85;
}

/* 單一課程內容 */
.sy-detail { margin-top: 2rem; }
.sy-detail__meta { font-size: .95rem; opacity: .7; }
.sy-detail__summary { font-size: 1.05rem; line-height: 1.9; }
.sy-detail__section { margin-top: 2rem; }
.sy-detail__heading { font-size: 1.15rem; margin: 0 0 .75rem; }

.sy-list,
.sy-outline__items {
	margin: 0 0 1rem;
	padding-left: 1.4em;
	line-height: 1.9;
}

.sy-outline__title {
	font-size: 1rem;
	margin: 1.25rem 0 .5rem;
}

/* 中文的行距要比英文鬆才好讀 */
.sy-detail,
.sy-card__summary { line-height: 1.85; }

@media (max-width: 900px) {
	.sy-courses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.sy-courses__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   本頁篩選

   選取狀態用邊框與字重表達，不靠顏色——顏色由佈景主題或 Elementor 控制，
   只靠顏色的話色盲使用者也分不出哪個被選中。
   -------------------------------------------------------------------------- */
.sy-categories--inpage .sy-categories__item a { cursor: pointer; }

.sy-categories--inpage .sy-categories__item.is-current a {
	opacity: 1;
	font-weight: 600;
	border-width: 2px;
}

.sy-courses__empty {
	margin: 2rem 0;
	text-align: center;
	opacity: .7;
}

/* 篩選結果只給螢幕閱讀器，畫面上不顯示 */
.sy-courses__status {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 被篩掉的卡片。hidden 屬性在某些佈景主題會被 display:grid 之類的規則蓋掉。 */
.sy-courses__grid .sy-card[hidden] { display: none !important; }