/* 目錄 ---------------------------------------------------------------- */

/* Number : 直接控制屬性數值，例如 max-width 或 font-size 等。 */
/* Background Color : 背景顏色。 */
/* Content : 內容排版調整。 */
/* Buttons : 按鈕。 */
/* TAGs : 標籤。 */
/* Column : 柱狀容器。 */
/* Heading : 區塊標題。 */
/* Group Box : 菜單形式的框線群組。 */
/* Cards : 卡片。 */
/* Bookmarks : 書籤型卡片。 */
/* Divider : 分隔線。 */
/* Blocks : 內容區塊。 */



/* Number ---------------------------------------------------------------- */

.max64 { max-width: 4rem; }
.max256 { max-width: 16rem; }
.max640 { max-width: 40rem; }
h2.inside { font-size: var(--text-h2-inside); }
h3.inside { font-size: var(--text-h3-inside); }
h4.inside { font-size: var(--text-h4-inside); }



/* Background Color ---------------------------------------------------------------- */

.background1 { background-color: var(--color-background1); }
.background2 { background-color: var(--color-background2); }
.background3 { background-color: var(--color-background3); }
.background4 { background-color: var(--color-background4); }



/* Content ---------------------------------------------------------------- */

/* Clamp 限制行數 */

.clamp {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
}
.clamp.line1 { -webkit-line-clamp: 1; }
.clamp.line2 { -webkit-line-clamp: 2; }
.clamp.line3 { -webkit-line-clamp: 3; }

/* Spread 左右撐滿內容 */

.spread {
	display: flex;
}
.spread .title {
	flex: 1 0 0;
}
.spread .content {
	display: flex;
	gap: 1rem;
}
.spread .content p {
	display: inline-block;
	margin-bottom: 0;
}



/* Buttons ---------------------------------------------------------------- */

.button {
	border: 1px solid var(--color-text);
	border-radius: var(--number-rounded);
	padding: var(--number-6) var(--number-16);
	white-space: normal;
}

/* Size */

.button.small {
	padding: var(--number-4) var(--number-10);
	font-size: var(--text-sm);
}
.button.large {
	padding: var(--number-10) var(--number-20);
	font-size: var(--text-lg);
}
.button.exlarge {
	padding: var(--number-16) var(--number-32);
	font-size: var(--text-xl);
}

/* Outline */

.button.outline {
	background-color: transparent;
	color: var(--color-text);
}
.button.outline:hover {
	background-color: var(--color-text);
	color: var(--color-background1);
}



/* TAGs ---------------------------------------------------------------- */

.tags {
	margin-bottom: 0;
	padding-left: 0;
}
.tags li {
	display: inline-block;
	font-size: var(--text-sm);
	padding: var(--number-2) var(--number-6);
	border-radius: var(--number-rounded);
	margin-bottom: var(--number-6);
}

.tags h1, .tags h2, .tags h3, .tags h4, .tags p {
	margin-bottom: 0;
}

.tags .yolk { background-color: var(--color-background3); color: var(--color-primary); }
.tags .green { background-color: var(--color-tags-green); color: var(--color-white); }
.tags .orange { background-color: var(--color-tags-orange); color: var(--color-white); }
.tags .translucent { background-color: #FBF5E88F; }



/* Column ---------------------------------------------------------------- */

.column {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-self: stretch;
	gap: var(--gap-content);
}
.column h3 {
	font-size: var(--text-h3-inside);
}
.column h1, .column h2, .column h3, .column h4, .column p {
	margin-bottom: 0;
}

.column h3, .column h4, {
	margin-top: var(--gap-list);
}

/* Gap */

.column.column-title { gap: var(--gap-title); } /* 12px */
.column.column-list { gap: var(--gap-list); } /* 16px */
.column.column-group { gap: var(--gap-group); } /* 24px */
.column.column-object { gap: var(--gap-object); } /* 32px */
.column.column-page-half { gap: var(--gap-page-half); } /* 48px */
.column.column-page { gap: var(--gap-page); } /* 96px */



/* Heading ---------------------------------------------------------------- */

.heading {
	display: flex;
	align-items: flex-end; /* 讓內容從底部對齊 */
}
.heading .heading-title {
	flex: 1; /* 讓文字區域佔據圖片的剩餘空間 */
	padding-right: var(--number-32); /* 與右邊圖示保持距離 */
	display: flex;
	flex-direction: column;
	gap: var(--gap-title);
}
.heading .heading-title .title {
	margin-bottom: 0;
	line-height: 120%;
}
.heading .heading-title .description {
	line-height: 1.6;
	margin-bottom: 0;
}
.heading .heading-title .meta {
	display: flex;
	gap: var(--gap-title);
}
.heading h1, .heading h2, .heading h3, .heading h4, .heading p {
	margin-bottom: 0;
}


/* Group Box ---------------------------------------------------------------- */

.group-box {
	display: flex;
	flex-direction: column; /* 讓內容由上往下排 */
	padding: var(--number-16);
	gap: var(--number-16);
}
.group-box .content {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-self: stretch;
	gap: var(--gap-content);
}
.group-box .actions {
	margin-top: auto;
}

/* Solid */

.group-box.solid {
	border: 1px solid var(--color-text);
}

/* Dashed */

.group-box.dashed {
	border: 1px dashed var(--color-text);
}

/* Background Color */

.group-box.background3 { background-color: var(--color-background3); }



/* Cards ---------------------------------------------------------------- */

.cards {
	display: flex;
	color: var(--cnvs-themecolor);
}

@media ( max-width: 576px ) {
	.cards {
		display: grid;
	}
}

.cards h2, .cards h3, .cards h4, .cards h5 {
	margin-bottom: 0;
}

/* Background Horizontal */

.cards.background-horizontal {
	border-radius: var(--number-rounded);
	padding: var(--number-16) var(--number-12);
	gap: var(--number-24);
}
.cards.background-horizontal .image {
	flex-shrink: 0;
	overflow: hidden;
	max-width: var(--number-160);
	border-radius: var(--number-rounded);
}
.cards.background-horizontal .image img {
	object-fit: cover;
}
@media ( max-width: 576px ) {
	.cards.background-horizontal .image {
		max-width: fit-content;
	}
}

/* Border Horizontal */

.cards.border-horizontal {
	border: 1px solid var(--color-text);
	border-radius: var(--number-rounded);
	padding: var(--number-16) var(--number-12);
	gap: var(--number-24);
}
.cards.border-horizontal .image {
	flex-shrink: 0;
	overflow: hidden;
	max-width: var(--number-160);
	border-radius: var(--number-rounded);
}
.cards.border-horizontal .image img {
	object-fit: cover;
}
@media ( max-width: 576px ) {
	.cards.border-horizontal .image {
		max-width: fit-content;
	}
}

/* Border Vertical */

.cards.border-vertical {
	border: 1px solid var(--color-text);
	border-radius: var(--number-rounded);
	padding: var(--number-16) var(--number-12);
	gap: var(--gap-title);
	flex-direction: column;
}

/* Photo Text Media */

.cards.photo-text-media {
	flex-direction: column;
	gap: var(--gap-list);
}
.cards.photo-text-media h3 {
	margin-top: 0;
	font-size: var(--text-md);
	font-weight: 300;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-all;
}
.cards.photo-text-media time {
	font-weight: 100;
}
.cards.photo-text-media .image {
	overflow: hidden;
	border-radius: var(--number-rounded);
}

/* Image Around */

.cards.image-around {
	position: relative;
	overflow: hidden;
	border-radius: var(--number-rounded);
}
.cards.image-around .content {
	position: absolute;
	max-width: 80%;
}

.cards.image-around .content.top-left { top: 10% ; left: 10%; }
.cards.image-around .content.bottom-left { bottom: 10% ; left: 10%; }



/* Bookmarks ---------------------------------------------------------------- */

.bookmarks {
	display: flex;
	flex-direction: column;
	gap: var(--gap-content);
	padding: var(--number-12);
	border-radius: var(--number-rounded);
}
.bookmarks h3 {
	font-size: var(--number-16);
	margin-top: var(--gap-content);
}
.bookmarks .image {
	width: 3rem;
	height: 3rem;
	overflow: hidden;
	border-radius: var(--number-rounded);
}
.bookmarks .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.bookmarks h3, .bookmarks li {
	margin-bottom: 0;
}


/* Rounded */

.bookmarks.bookmarks-rounded {
	flex-direction: row;
	border-radius: var(--number-160);
	border: 1px solid;
	align-items: center;
	gap: var(--gap-title);
}
.bookmarks.bookmarks-rounded p {
	line-height: 140%;
}
.bookmarks.bookmarks-rounded .number {
	font-size: var(--number-24);
	font-weight: bold;
}

/* Shadow */

.bookmarks.bookmarks-shadow {
	box-shadow: 0 0.25rem 1rem #0000001C;
}

/* Unactive */

.bookmarks.unactive {
	color: var(--color-gray);
	border-color: var(--color-gray);
}
.bookmarks.unactive h3 {
	color: var(--color-gray);
}



/* Divider ---------------------------------------------------------------- */

hr.bold {
	border-top: var(--number-10) solid;
	opacity: 1;
}



/* Blocks ---------------------------------------------------------------- */

.blocks {
	padding: var(--number-24) var(--number-32);
}
.blocks .content {
	display: flex;
	flex-direction: column;
	gap: var(--number-24);
}
.blocks .content h2,
.blocks .content h3,
.blocks .content p {
	margin-bottom: 0;
}