﻿/* 整個內容方塊 */
.index比賽獎項6 {
    /*height : 300px;*/
}

/* glide（如有輪播） */
.index比賽獎項6 .glide .glide__slides {
    justify-content: space-between;
}

/* 內容方塊標題 */
.index比賽獎項6 .blockTitle {
    text-align: center;
}

.index比賽獎項6 .blockTitle h2 {
    margin: 0;
    text-align: center;
    border-bottom: solid 5px var(--dark-red);
    line-height: 1em;
    padding: 0.5em 0;
}

/* 內容方塊標題超連結 */
.index比賽獎項6 .blockTitle a {
}

/* 比賽容器，每個比賽都放在裡面 */
.index比賽獎項6 .loopElementList {
    /*height : 300px;*/
}

/* 內層容器，用 flex 來排每個比賽 */
.index比賽獎項6 .loopElementList .elementContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    padding: var(--r-container-padding, 1em);
    box-sizing: border-box;
}

/* 單一比賽 */
.index比賽獎項6 .eachCompetition {
    flex-basis: 25%;      /* 一行 4 個 */
    box-sizing: border-box;
}

/* 內殼樣式 */
.index比賽獎項6 .innerShell {
    border-right: dashed 1px #808080;
    padding: 1em 2em;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    background-color: rgba(255,255,255,0.5);
    position: relative;
}

.index比賽獎項6 .glide .innerShell {
    padding: 0;
}

.index比賽獎項6 .eachCompetition:last-child .innerShell {
    border-right: none 0;
}

/* 相片外框：固定高度、裁切超出部分 */
.index比賽獎項6 .thumb {
    width: 100%;
    height: 180px;      /* 想要的統一高度 */
    overflow: hidden;
}

/* 圖片：等比放大，超出就從中間裁切 */
.index比賽獎項6 .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* 填滿框，維持比例，必要時裁切 */
    object-position: center center;  /* 以中間為焦點裁切，直相超出的上下也會置中顯示 [web:64][web:82][web:89] */
    display: block;
}
/* 日期 */
.index比賽獎項6 .date {
    font-size: var(--r-smaller-font, 0.8rem);
    line-height: 2em;
    margin-top: 0.5em;
}

/* 標題 */
.index比賽獎項6 .heading {
    font-weight: var(--r-heading-font-weight, 700);
    line-height: 1.3em;
    font-size: var(--r-heading-font-size, 1.2em);
    margin-top: 0.5em;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;  /* 最多兩行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: normal;
}

/* 點整塊都可以 click */
.index比賽獎項6 .eachCompetition .link {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

/* More... 連結 */
.index比賽獎項6 .more {
    text-align: right;
    font-weight: 700;
    font-size: 1.5em;
    margin-right: 2em;
    font-style: italic;
    line-height: 2;
}

/* ===== RWD 設定 ===== */

/* 手機：一行 1 個 */
@media (max-width: 480px) {

    .index比賽獎項6 .eachCompetition {
        flex-basis: 100%;
        margin-bottom: 2em;
    }

    .index比賽獎項6 .innerShell {
        border-right: none 0;
        padding: 2em 2rem;
    }

    /* 如要只顯示頭 3 個，可打開下面這段
    .index比賽獎項6 .eachCompetition {
        display: none;
    }
    .index比賽獎項6 .eachCompetition:nth-child(-n+3) {
        display: block;
    }
    */
}

/* 小平板：一行 2 個 */
@media (min-width: 481px) and (max-width: 767px) {

    .index比賽獎項6 .eachCompetition {
        flex-basis: calc(100%/2);
        margin-bottom: 2em;
        display: none;
    }

    .index比賽獎項6 .eachCompetition:nth-child(-n+6) {
        display: block; /* 只顯示前 6 個比賽，可按需要改數字 [web:33][web:36] */
    }

    .index比賽獎項6 .eachCompetition:nth-child(2) .innerShell,
    .index比賽獎項6 .eachCompetition:nth-child(4) .innerShell,
    .index比賽獎項6 .eachCompetition:nth-child(6) .innerShell {
        border-right: none 0;
    }
}

/* 中平板：一行 2 個 */
@media (min-width: 768px) and (max-width: 979px) {

    .index比賽獎項6 .eachCompetition {
        flex-basis: calc(100%/2);
        margin-bottom: 2em;
        display: none;
    }

    .index比賽獎項6 .eachCompetition:nth-child(-n+6) {
        display: block;
    }

    .index比賽獎項6 .eachCompetition:nth-child(2) .innerShell,
    .index比賽獎項6 .eachCompetition:nth-child(4) .innerShell,
    .index比賽獎項6 .eachCompetition:nth-child(6) .innerShell {
        border-right: none 0;
    }
}

/* 較大螢幕：一行 3 個 */
@media (min-width: 980px) and (max-width:1199px) {

    .index比賽獎項6 .eachCompetition {
        flex-basis: calc(100%/3);
        margin-bottom: 2em;
        display: none;
    }

    .index比賽獎項6 .eachCompetition:nth-child(-n+6) {
        display: block;
    }

    .index比賽獎項6 .eachCompetition:nth-child(3) .innerShell,
    .index比賽獎項6 .eachCompetition:nth-child(6) .innerShell {
        border-right: none 0;
    }
}

/* 桌面：一行 4 個 */
@media (min-width: 1200px) {

    .index比賽獎項6 .eachCompetition {
        flex-basis: calc(100%/4); /* 一行 4 個 [web:8][web:24][web:27] */
        margin-bottom: 2em;
        display: none;
    }

    .index比賽獎項6 .eachCompetition:nth-child(-n+4) {
        display: block;  /* 只顯示前 4 個比賽；如要全部顯示，把 display 相關刪掉 */
    }

    .index比賽獎項6 .eachCompetition:nth-child(4) .innerShell {
        border-right: none 0;
    }
}
