/**
 * Wine List Pattern CSS
 * CSSカウンターで自動採番
 */

/* メインコンテナ */
.wine-list-pattern {
    background: #fafafa !important;
    padding: 64px !important;
    max-width: 720px !important;
    margin: 40px auto !important;
    border-top: 1px solid #666 !important;
    border-bottom: 1px solid #666 !important;
    position: relative !important;
}

/* 外側の1.5px線を疑似要素で追加（Figma準拠） */
.wine-list-pattern::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -4px !important;
    height: 0 !important;
    border-top: 1.5px solid #666 !important;
    pointer-events: none !important;
}

.wine-list-pattern::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -4px !important;
    height: 0 !important;
    border-bottom: 1.5px solid #666 !important;
    pointer-events: none !important;
}

/* タイトル */
.wine-list-pattern .wine-list-title {
    font-family: 'Trajan Pro 3', 'Times New Roman', serif !important;
    font-size: 27px !important;
    text-align: center !important;
    margin: 0 0 16px 0 !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
}

/* ワインアイテムのラッパー - カウンターをリセット */
.wine-items-wrapper {
    counter-reset: wine-counter !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* 各ワインアイテム */
.wine-item {
    display: flex !important;
    gap: 32px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    border-bottom: 0.5px solid #c9c9c9 !important;
    position: relative !important;
    counter-increment: wine-counter !important;
    align-items: baseline !important;
}

/* No.を疑似要素で表示（CSSカウンター） */
.wine-item::before {
    content: "No." counter(wine-counter) !important;
    font-family: 'Trajan Pro 3', 'Times New Roman', serif !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    width: 40px !important;
    flex-shrink: 0 !important;
    line-height: 1.6 !important;
}

/* ワインの詳細 - 横並び */
.wine-details {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    align-items: baseline !important;
}

/* ワイン名グループ（縦並び） */
.wine-name-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 320px !important;
    flex-shrink: 0 !important;
}

/* ワイン名（現地言語） */
.wine-name-original {
    font-family: 'Trajan Pro 3', 'Times New Roman', serif !important;
    font-size: 16px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    letter-spacing: 1px !important;
}

/* ワイン名（日本語） */
.wine-name-japanese {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 13px !important;
    color: #666 !important;
    margin: 0 !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

/* 国 */
.wine-country {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 13px !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    letter-spacing: 1.04px !important;
    width: 80px !important;
    flex-shrink: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* ワインタイプ */
.wine-type {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 13px !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    letter-spacing: 1.04px !important;
    width: 100px !important;
    flex-shrink: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* フッター注記 */
.wine-footer-note {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 13px !important;
    text-align: right !important;
    margin: 40px 0 0 0 !important;
    line-height: 1.6 !important;
}

/* Gutenbergのデフォルトスタイルをリセット */
.wine-list-pattern .wp-block-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.wine-list-pattern p {
    padding: 0 !important;
}

/* ======================================
   レスポンシブ対応
   ====================================== */

/* タブレット（900px未満） */
@media (max-width: 899px) {
    .wine-list-pattern {
        padding: 48px 40px !important;
    }

    .wine-name-group {
        width: 360px !important;
    }

    .wine-country {
        width: 70px !important;
    }

    .wine-type {
        width: 90px !important;
    }
}

/* 小さめタブレット（768px未満） */
@media (max-width: 767px) {
    .wine-list-pattern {
        padding: 40px 24px !important;
    }

    .wine-list-title {
        font-size: 24px !important;
    }

    .wine-item {
        gap: 16px !important;
    }

    .wine-details {
        gap: 16px !important;
    }

    .wine-name-group {
        width: 320px !important;
    }

    .wine-country {
        width: 60px !important;
    }

    .wine-type {
        width: 80px !important;
    }
}

/* モバイル（640px未満） */
@media (max-width: 639px) {
    .wine-list-pattern {
        padding: 40px 24px !important;
    }

    .wine-list-title {
        font-size: 22px !important;
    }

    .wine-item {
        flex-direction: row !important;
        gap: 24px !important;
        align-items: flex-start !important;
    }

    .wine-item::before {
        width: auto !important;
    }

    .wine-details {
        flex-direction: column !important;
        gap: 4px !important;
        align-items: flex-start !important;
        width: 100% !important;
    }

    .wine-name-group {
        width: 100% !important;
    }

    .wine-country,
    .wine-type {
        width: auto !important;
        white-space: normal !important;
    }

    .wine-footer-note {
        margin-top: 32px !important;
        font-size: 12px !important;
    }
}

/* 極小モバイル（480px未満） */
@media (max-width: 479px) {
    .wine-list-pattern {
        padding: 40px 24px !important;
    }

    .wine-list-title {
        font-size: 20px !important;
    }

    .wine-name-original {
        font-size: 15px !important;
    }

    .wine-name-japanese {
        font-size: 13px !important;
    }

    .wine-country,
    .wine-type {
        font-size: 12px !important;
    }
}

/* ブロックエディタ用スタイル調整 */
.block-editor-block-list__block .wine-list-pattern {
    margin: 16px 0 40px !important;
}

.editor-styles-wrapper .wine-list-pattern {
    background: #fafafa !important;
}