/* =========================================================================================
   Expedia アフィリエイト用ブログカード CSS（v6）
   対応JS: sc_blogcard_expedia_v8.js
   ─────────────────────────────────────────
   カード背景      : #1E243A（Expedia 公式ネイビー）
   外枠ボーダー    : #2e3650（控えめな濃紺）
   ホバー背景      : #232a43
   ドメインバッジ  : #FDDB32（Expedia 公式イエロー）× #1E243A（濃紺文字）
   バッジアイコン  : Font Awesome fa-link（既存 .ex と同じ）
   タイトル        : #ffffff（白）
   レーティング    : .expedia-score — #1A7A4A（グリーン）丸四角 × 白文字
   概要文          : #c8d0e8（薄青白）
   フッター文字    : #8fa0c8
   ファビコン      : https://www.expedia.co.jp/favicon.ico
   ─────────────────────────────────────────
   ※ 既存の blogcard.css の【後】に読み込むこと
   ※ Font Awesome 5 がテーマに読み込まれていること
   ========================================================================================= */

/* ------------------------------------------------------------------
   カード全体
   既存 #blogcard の position / border-radius / word-wrap /
   box-shadow / display / min-height はそのまま継承
   ------------------------------------------------------------------ */
div#blogcard.expedia {
    background-color: #1E243A;
    border: 1px solid #2e3650;           /* 強調しすぎない控えめな枠 */
}

div#blogcard.expedia:hover {
    background-color: #232a43;
}

/* ------------------------------------------------------------------
   ドメインバッジ
   既存 position:absolute / transform / font-size / padding を継承
   色とアイコンだけ上書き
   ------------------------------------------------------------------ */
div#blogcard.expedia .blogcard_domain {
    background-color: #FDDB32;           /* Expedia 公式イエロー */
    color: #1E243A;                      /* 濃紺文字（視認性確保）*/
    font-weight: 800;
}

/* fa-link アイコン（既存 .ex と同じ）*/
div#blogcard.expedia .blogcard_domain::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f0c1';                    /* fa-link */
    margin-right: 2px;
}

/* ------------------------------------------------------------------
   サムネイル画像
   既存 width:170px / height:110px / object-fit:cover を継承
   ------------------------------------------------------------------ */
div#blogcard.expedia div.blogcard_thumbnail img {
    display: block;
}

/* ------------------------------------------------------------------
   タイトル：白文字
   既存 font-size / font-weight / line-height / padding を継承
   ------------------------------------------------------------------ */
div#blogcard.expedia div.blogcard_title {
    color: #ffffff;
}

/* ------------------------------------------------------------------
   レーティングバッジ（グリーン丸四角）
   PHP 側で <span class="expedia-score">9.6</span> を出力
   JS の rating="" パラメータが空なら非表示
   ------------------------------------------------------------------ */
.expedia-score {
    display: inline-block;
    background-color: #1A7A4A;          /* Expedia サイトのグリーン */
    color: #ffffff;
    font-size: 0.72em;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;                 /* 丸四角 */
    margin-left: 7px;
    vertical-align: middle;
    letter-spacing: .02em;
    line-height: 1.5;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   概要文：薄青白（濃紺背景上で読みやすい）
   既存 font-size / line-height / padding を継承
   ------------------------------------------------------------------ */
div#blogcard.expedia div.blogcard_excerpt {
    color: #c8d0e8;
}

/* ------------------------------------------------------------------
   フッター：ファビコン + URL + サイト名
   既存 font-size / padding / text-align を継承
   ------------------------------------------------------------------ */
div#blogcard.expedia div.blogcard_link {
    color: #8fa0c8;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ファビコン：https://www.expedia.co.jp/favicon.ico */
div#blogcard.expedia div.blogcard_link .favicon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-bottom: -2px;
    margin-right: 3px;
}

/* =========================================================================================
   スマホ表示（〜599px）: 既存スタイルに準拠
   ========================================================================================= */
@media (max-width: 599px) {

    div#blogcard.expedia {
        margin: 10px 0;
    }

    div#blogcard.expedia div.blogcard_thumbnail img {
        width: 105px;
        height: 70px;
    }

    div#blogcard.expedia div.blogcard_title {
        font-size: 0.9em;
        padding-bottom: 17px;
    }

    /* 概要文・フッターはスマホでは非表示（既存スタイルに準拠）*/
    div#blogcard.expedia div.blogcard_excerpt {
        display: none;
    }

    div#blogcard.expedia div.blogcard_link {
        display: none;
    }
}