/* ==============================
   ITEM BOXES 16 MIRROR CAROUSEL
   憲法準拠 v1.0
   共通変数＋固有アニメーションのみ
============================== */

/* ---------- カルーセル全体 ---------- */
.item_boxes_16__carousel {
    position: relative;
    overflow: hidden;
    padding: calc(var(--spacing-lg) * 2) 0;
    background: var(--color-bg-main);
}

/* ---------- トラック ---------- */
.item_boxes_16__track {
    display: flex;
    gap: var(--spacing-md);
    will-change: transform;
}

/* ---------- アイテムラッパー ---------- */
.item_boxes_16__item-wrapper {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: var(--spacing-sm);
}

/* ---------- アイテム ---------- */
.item_boxes_16__item {
    position: relative;
    border-radius: var(--radius-panel);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 固有アニメーション */
    background-color: var(--color-bg-panel);
    box-shadow: var(--shadow-panel);
}

/* メイン / ミラー */
.item_boxes_16__item.main,
.item_boxes_16__item.mirror {
    width: 100%;
    max-width: 350px; /* 固有サイズは残す */
    height: auto;
}

.item_boxes_16__item.mirror {
    transform: scaleY(-1); /* 固有アニメーション */
    opacity: 0.25;
}

/* ミラーグラデーション */
.item_boxes_16__mirror-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(255,255,255,0.6), rgba(255,255,255,0));
    pointer-events: none;
    border-radius: inherit;
}

/* ---------- 比率対応 ---------- */
.item_boxes_16__item-wrapper.ratio-1-1 .main,
.item_boxes_16__item-wrapper.ratio-1-1 .mirror { aspect-ratio: 1/1; }
.item_boxes_16__item-wrapper.ratio-16-9 .main,
.item_boxes_16__item-wrapper.ratio-16-9 .mirror { aspect-ratio: 16/9; }
.item_boxes_16__item-wrapper.ratio-4-3 .main,
.item_boxes_16__item-wrapper.ratio-4-3 .mirror { aspect-ratio: 4/3; }
.item_boxes_16__item-wrapper.ratio-3-4 .main,
.item_boxes_16__item-wrapper.ratio-3-4 .mirror { aspect-ratio: 3/4; }
.item_boxes_16__item-wrapper.ratio-9-16 .main,
.item_boxes_16__item-wrapper.ratio-9-16 .mirror { aspect-ratio: 9/16; }

/* ---------- 画像 ---------- */
.item_boxes_16__img-wrap {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-panel);
    overflow: hidden;
}

.item_boxes_16__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease; /* 固有アニメーション */
}

.item_boxes_16__item:hover img {
    transform: scale(1.04); /* 固有アニメーション */
}

/* ---------- オーバーレイ ---------- */
.item_boxes_16__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 70%, rgba(0,0,0,0.12) 100%);
    opacity: 0;
    transition: opacity 0.3s ease; /* 固有アニメーション */
    border-radius: var(--radius-panel);
}

.item_boxes_16__item:hover .item_boxes_16__overlay {
    opacity: 1; /* 固有アニメーション */
}

/* ---------- キャプション ---------- */
.item_boxes_16__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--color-bg-panel);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-sm);
    color: var(--color-text-sub);
    text-align: center;
    opacity: 0;
    transform: translateY(100%) scaleY(0.8);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-panel) var(--radius-panel);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease; /* 固有アニメーション */
    pointer-events: none;
}

.item_boxes_16__item:hover .item_boxes_16__caption,
.item_boxes_16__item.show-caption .item_boxes_16__caption {
    opacity: 1;
    transform: translateY(0) scaleY(1); /* 固有アニメーション */
    background: var(--color-bg-panel);
    pointer-events: auto;
}

/* ================================================
   レスポンシブ（固定値ブレイクポイント、共通変数のみ）
================================================= */

/* タブレット以下: max-width 768px */
@media (max-width: 768px) {
    .item_boxes_16__track {
        gap: var(--spacing-md-sm);
    }
}

/* スマホ以下: max-width 480px */
@media (max-width: 480px) {
    .item_boxes_16__item.main,
    .item_boxes_16__item.mirror {
        max-width: 200px;
    }
    .item_boxes_16__track {
        gap: var(--spacing-sm);
    }
}

/* 小型スマホ以下: max-width 320px */
@media (max-width: 320px) {
    .item_boxes_16__caption {
        font-size: var(--font-sm-sm);
        padding: var(--spacing-sm-sm) var(--spacing-md-sm);
    }
}