/* ============================================================
 * ドウジンナビ レコメンドブロック専用 CSS
 *
 * 役割:
 *   - 記事下「同ジャンルのおすすめ」カードグリッド（Phase 1）
 *   - Lv4 A トンマナ（FAF7F2 / ワインレッド / ゴールド）に整合
 *
 * カラー変数は tonmana-fanza-inspired.css の :root を再利用する。
 * このファイルは tonmana CSS の後ろに enqueue される前提。
 *
 * BEM: .dn-recommend-block, .dn-recommend-list, .dn-recommend-card, etc.
 * （`.dn-recommend__*` ではなく、シンプルなハイフン区切りで統一）
 *
 * @package SwellChild
 * @since   2026-05-15
 * ============================================================ */

/* ----- ブロック外枠 ----- */
.dn-recommend-block {
    margin: 3em 0 2em;
    padding: 1.6em 1.2em;
    background: var(--dn-color-bg, #FAF7F2);
    border: 1px solid var(--dn-color-card-border, #E5E0D6);
    border-radius: 6px;
    position: relative;
}

/* 2ブロック並列出力時（同サークル + 同ジャンル）のスペーシング */
.dn-recommend-block + .dn-recommend-block {
    margin-top: 2em;
}

.dn-recommend-block::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--dn-color-primary, #722F37) 0%,
        var(--dn-color-primary, #722F37) 60%,
        var(--dn-color-cta, #D4AF37) 100%
    );
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* ----- タイトル ----- */
.dn-recommend-title {
    margin: 0 0 1.1em;
    padding: 0 0 0.6em;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dn-color-primary, #722F37);
    border-bottom: 2px solid var(--dn-color-accent, #F5F0E1);
    line-height: 1.4;
}

/* ----- カードリスト ----- */
.dn-recommend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 900px) {
    .dn-recommend-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .dn-recommend-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

/* ----- カード本体 ----- */
.dn-recommend-card {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--dn-color-card-border, #E5E0D6);
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.dn-recommend-card:hover {
    box-shadow: 0 4px 14px var(--dn-color-card-hover, rgba(114, 47, 55, 0.18));
    transform: translateY(-2px);
}

.dn-recommend-card > a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.dn-recommend-card > a:hover,
.dn-recommend-card > a:focus {
    text-decoration: none;
    color: inherit;
}

/* ----- サムネ（3:4 縦比） ----- */
.dn-recommend-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #F2EDE3;
}

.dn-recommend-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.22s ease;
}

.dn-recommend-card:hover .dn-recommend-thumb img {
    transform: scale(1.04);
}

/* ----- メタ情報 ----- */
.dn-recommend-meta {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.dn-recommend-name {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dn-color-text, #1F1F1F);
    /* 2行省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.dn-recommend-circle {
    font-size: 0.72rem;
    color: var(--dn-color-text-mute, #6B7280);
    line-height: 1.3;
    /* 1行省略 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dn-recommend-foot {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding-top: 2px;
}

.dn-recommend-price {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--dn-color-price, #C12534);
    line-height: 1;
}

.dn-recommend-rating {
    font-size: 0.78rem;
    color: var(--dn-color-cta, #D4AF37);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* ----- ダーク/ライト両対応の念のためのリセット ----- */
.dn-recommend-block * {
    box-sizing: border-box;
}

/* ============================================================
 * Phase 3: サイドAVおすすめウィジェット（縦カード型・写真大きめ）
 *
 * BEM: .dn-side-recommend / .dn-side-recommend__*
 * 表示位置: SWELL サイドバーウィジェットエリア
 * 整合: Lv4 A トンマナ（ワインレッド・ゴールド・アイボリー）
 *
 * レイアウト: サムネ全幅（3:4縦比）+ 下にタイトル・メーカー・評価
 *            サイドバー幅 ~280px 想定 → サムネ ~280×374px 程度
 * ============================================================ */

.dn-side-recommend {
    margin: 0 0 2em;
    padding: 1.1em 0.9em 1em;
    background: var(--dn-color-bg, #FAF7F2);
    border: 1px solid var(--dn-color-card-border, #E5E0D6);
    border-radius: 6px;
    position: relative;
}

.dn-side-recommend::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--dn-color-primary, #722F37) 0%,
        var(--dn-color-primary, #722F37) 60%,
        var(--dn-color-cta, #D4AF37) 100%
    );
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.dn-side-recommend__title {
    margin: 0 0 0.4em;
    padding: 0 0 0.45em;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dn-color-primary, #722F37);
    border-bottom: 2px solid var(--dn-color-accent, #F5F0E1);
    line-height: 1.4;
}

.dn-side-recommend__note {
    margin: 0 0 0.8em;
    font-size: 0.7rem;
    color: #B23A48;
    line-height: 1.3;
    opacity: 0.85;
}

.dn-side-recommend__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px; /* 縦 横 */
}

.dn-side-recommend__card {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--dn-color-card-border, #E5E0D6);
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dn-side-recommend__card:hover {
    box-shadow: 0 4px 14px var(--dn-color-card-hover, rgba(114, 47, 55, 0.18));
    transform: translateY(-2px);
}

/* 縦カード: a 要素は flex column。サムネが上、メタが下に並ぶ */
.dn-side-recommend__card > a {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    text-decoration: none;
    color: inherit;
}

.dn-side-recommend__card > a:hover,
.dn-side-recommend__card > a:focus {
    text-decoration: none;
    color: inherit;
}

/* サムネを全幅・縦長3:4比率に */
.dn-side-recommend__thumb {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #F2EDE3;
    border-radius: 0;
}

.dn-side-recommend__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.22s ease;
}

.dn-side-recommend__card:hover .dn-side-recommend__thumb img {
    transform: scale(1.04);
}

/* メタはサムネの下に配置 */
.dn-side-recommend__meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 6px 8px 8px;
}

.dn-side-recommend__name {
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dn-color-text, #1F1F1F);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.dn-side-recommend__maker {
    font-size: 0.66rem;
    color: var(--dn-color-text-mute, #6B7280);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dn-side-recommend__rating {
    font-size: 0.7rem;
    color: var(--dn-color-cta, #D4AF37);
    font-weight: 600;
    line-height: 1;
    margin-top: 2px;
}

.dn-side-recommend * {
    box-sizing: border-box;
}