/*
  檔案功能：_card.css
  被引用目的：作品卡片與內容卡片樣式，用來呈現作品縮圖、標題、說明與模組化內容。
  編寫安排：以模組化方式集中管理相關 class，讓 style.css 可以用 @import 組合多個小檔案，避免所有樣式混在單一大檔中。
  與 HTML 的關係：HTML 先使用語意清楚的 class 名稱，本檔再針對這些 class 定義可重複使用的視覺規則。
*/

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.card {
  /* 設定 CSS 屬性 box-shadow，用來微調版面或視覺表現。 */
  box-shadow: 0 0 2px rgba(0, 1, 2, 0.2);
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: relative;}

/* 媒體查詢，依螢幕寬度調整響應式版面。 */
@media (min-width: 992px) {
  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .card-horizontal .card-content {
    /* 設定背景顏色，建立區塊層次與視覺識別。 */
    background-color: #fff;
    /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
    position: absolute;
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 50%;
    /* 設定元素高度。 */
    height: 100%;
    /* 搭配定位使用，設定上方位移。 */
    top: 0;
    /* 搭配定位使用，設定右側位移。 */
    right: 0;
    /* 控制重疊順序，數值越高越靠上。 */
    z-index: 1;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .card-horizontal-left .card-content {
    /* 搭配定位使用，設定右側位移。 */
    right: auto;
    /* 搭配定位使用，設定左側位移。 */
    left:;  }}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.card-content {
  /* 設定內距，控制內容與邊界之間的空間。 */
  padding: 15px;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
/*.card-content:after {
	content: "";
	display: block;
	clear: both;
}*/
/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.card .title {
  /* 設定上方外距。 */
  margin-top: 0;
  /* 設定下方外距。 */
  margin-bottom: 5px;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.card .title + p {
  /* 設定上方外距。 */
  margin-top: 0;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.card > .table {
  /* 設定 CSS 屬性 border-left，用來微調版面或視覺表現。 */
  border-left: none;
  /* 設定 CSS 屬性 border-right，用來微調版面或視覺表現。 */
  border-right: none;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.card > .nav .nav-link {
  /* 設定內距，控制內容與邊界之間的空間。 */
  padding: 5px 15px;
  /* 設定 CSS 屬性 border-top，用來微調版面或視覺表現。 */
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  /* 設定元素顯示模式，例如 block、inline-block、flex。 */
  display: block;}

