/*
 * Dynamic Post Grid Styles v1.5.3
 * Final & Robust Version
 * --- MODIFIED: Added rule to allow mobile column override ---
 */

/*
 * --- [核心修正] 響應式長寬比設定 ---
 * 使用 Class 選擇器，並加入 !important 確保最高權重
 * 同時將規則放入對應的 @media 查詢中
 */

/* --- ① 桌面版 (大於 1024px) --- */
.dpg-wrapper.dpg-cols-desktop-1 .dpg-item-inner {
    aspect-ratio: 31 / 9 !important;
}
.dpg-wrapper.dpg-cols-desktop-2 .dpg-item-inner {
    aspect-ratio: 1 / 1 !important;
}


/* --- ② 平板 (小於等於 1024px) --- */
@media (max-width: 1024px) {
    .dpg-wrapper.dpg-cols-tablet-1 .dpg-item-inner {
        aspect-ratio: 1 / 1 !important;
    }
    .dpg-wrapper.dpg-cols-tablet-2 .dpg-item-inner {
        aspect-ratio: 1 / 1 !important;
    }
}


/* --- ③ 行動裝置 (小於等於 767px) --- */
@media (max-width: 767px) {
    .dpg-wrapper.dpg-cols-mobile-1 .dpg-item-inner {
        aspect-ratio: 1 / 1 !important;
    }
    .dpg-wrapper.dpg-cols-mobile-2 .dpg-item-inner {
        aspect-ratio: 1 / 1 !important;
    }
}

/* --- [修正結束] --- */


/* --- 以下為不變的代碼 --- */

/* 篩選器樣式 */
.dpg-filter-bar {
    margin-bottom: 25px;
    text-align: center;
}
.dpg-filter-btn {
    background-color: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 8px 20px;
    margin: 0 5px 10px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: all 0.3s ease;
}
.dpg-filter-btn:hover {
    background-color: #f0f0f0;
    border-color: #ccc;
}
.dpg-filter-btn.active {
    background-color: #FF5733;
    color: #ffffff;
    border-color: #FF5733;
    font-weight: bold;
}

/* ① 全局預設值，可被 shortcode 覆寫 */
:root {
  --dpg-columns-desktop: 3;
  --dpg-columns-tablet: 2;
  --dpg-columns-mobile: 1; /* 手機預設為 1 欄 */
}

/* ② 給 wrapper 一個統一入口變數 */
.dpg-wrapper { --dpg-columns: var(--dpg-columns-desktop); }

/* ③ Tablet ≤1024px */
@media (max-width:1024px) {
  .dpg-wrapper { --dpg-columns: var(--dpg-columns-tablet); }
}

/* ④ Mobile ≤767px */
@media (max-width:767px) {
  /* 手機預設欄數應用 */
  .dpg-wrapper { --dpg-columns: var(--dpg-columns-mobile); }

  /* --- [此處為新增的關鍵規則] --- */
  /* 當後台設定為手機 2 欄時，覆蓋預設值 */
  .dpg-wrapper.dpg-cols-mobile-2 {
      --dpg-columns: 2;
  }
}


/* --- Isotope 佈局樣式 --- */
.dpg-grid-container { }

.dpg-wrapper {
    margin: 0 calc(var(--dpg-gap, 20px) / -2);
}

.dpg-item {
    width: calc(100% / var(--dpg-columns, 3));
    padding: calc(var(--dpg-gap, 20px) / 2);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    float: left;
    transition: opacity 0.3s ease;
}

.dpg-item-inner {
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    border-radius: 8px;
    /* 預設的長寬比，會被上面的新規則覆蓋 */
    aspect-ratio: 4 / 3;
    width: 100%;
    height: 100%;
}

.dpg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- 遮罩與文字樣式 --- */
.dpg-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(40,46,38,.7);
    display:flex;
    justify-content:flex-start;
    align-items:center;
    opacity:0;
    transition:opacity .4s ease;
    box-sizing:border-box
}

.dpg-text-wrap {
    padding:20px 20px 20px 40px;
    width:100%;
    text-align:left
}

.dpg-title {
    color:#fff;
    font-size:1.8em;
    font-weight:bold;
    line-height:1.2;
    margin:0;
    transform:translateY(20px);
    opacity:0;
    transition:opacity .4s ease;
    transition-delay:.1s
}

.dpg-category {
    color:#fff;
    font-size:1em;
    margin:8px 0 0;
    font-weight:normal;
    letter-spacing:1px;
    transform:translateY(20px);
    opacity:0;
    transition:opacity .4s ease;
    transition-delay:.2s
}


/* --- Hover 效果 --- */
.dpg-item:hover img {
    transform:scale(1.1)
}

.dpg-item:hover .dpg-overlay {
    opacity:1
}

.dpg-item:hover .dpg-title,
.dpg-item:hover .dpg-category {
    transform:translateY(0);
    opacity:1;
    transition:transform .4s ease, opacity .4s ease;
}