/* =========================================================
   wallpapers.css  (for pages/wallpapers.php)
   - dl.css が共通UIを担当
   - ここは「壁紙ページ固有」だけ
   - 縦画像が小さくなる問題を確実に潰す
========================================================= */


/* =========================================================
   Note（wallpapers.php の <p class="note"> 用）
========================================================= */

.note {
    max-width: min(1100px, 96vw);
    margin: 0 auto;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.7;
}

.note a {
    color: #5f68ff;
    text-decoration-color: #b6b9ff;
}


/* 壁紙ページ用：グリッドとサムネ高さを変数で管理 */
.dl-grid {
    --min: 260px;
    --gap: 18px;

    /* 横サムネ枠の高さ */
    --thumb-h-land: clamp(160px, 18vw, 240px);

    /* 縦サムネ枠の高さ */
    --thumb-h-port: clamp(240px, 40vw, 420px);
}

/* 念のため：もし他CSSで横並び指定されてても、壁紙カードは縦積みに固定 */
.dl-card {
    display: flex;
    flex-direction: column;
}

/* サムネ全体はカード幅いっぱいを保証（右側スカスカ対策） */
.dl-thumb {
    width: 100%;
}

/* クリック範囲(a)も必ずサムネ全面に（縮み防止） */
.dl-quick {
    display: block;
    width: 100%;
    height: 100%;
}

/* -------------------------
   横カード（今まで通り）
------------------------- */
.dl-card.is-landscape .dl-thumb,
.dl-card:not(.is-portrait) .dl-thumb {
    height: var(--thumb-h-land);
}

.dl-card.is-landscape .dl-thumb img,
.dl-card:not(.is-portrait) .dl-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -------------------------
   縦カード（画像に合うサイズ）
------------------------- */
.dl-card.is-portrait .dl-thumb {
    height: var(--thumb-h-port);
    display: grid;
    place-items: center;
}


.dl-card.is-portrait .dl-thumb img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    padding: 0;
    display: block;
}


/* =========================================================
   Responsive（壁紙ページ向け）
========================================================= */

@media (max-width: 900px) {
    .dl-grid {
        --min: 220px;
        --gap: 14px;

    }
}

@media (max-width: 600px) {
    .dl-grid {
        --min: 160px;
        --gap: 12px;
    }


    .action-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

@media (max-width: 360px) {
    .dl-grid {
        grid-template-columns: 1fr;
    }

}