/*
 * CCReB Gateway 英語版 差分上書きスタイル
 * ---------------------------------------------------------------
 * /en/ 配下のページでのみ読み込む（functions.php の ccreb_is_en() で分岐）。
 * 和文前提のレイアウトを英文向けに補正する「差分だけ」を置く。
 * 既存ルールより後に読み込まれる前提（gateway-theme-style に依存）。
 */

/* ヘッダの表示メニュー: en では表示リンクが「Hot Word Analysis / IR Storage」の
   2件のみになるため、6件前提の中央寄せをやめて左揃えにする。
   flex item の auto margin による中央寄せ・text-align・flex 配置のいずれの
   実装でも効くよう複数プロパティで上書きする。 */
.g-header .second-menu {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    justify-content: flex-start;
}

/* ホットワードの表示切替タブ（riot コンポーネントが JS で描画）を静的に英語化する。
   ラベルはバンドル JS（assets/index.js）内に日本語直書きで JA/EN 共有のため、
   バンドルを書き換えず en ページの CSS でテキストだけ差し替える。
   - タブ本体: 文字色を transparent にして日本語グリフを隠し、::after で英語を重ねる。
     ::after は font-size を継承するのでレスポンシブなサイズを維持し、クリックも透過する。
   - 「表示切替」ラベル: 継承色を保つため font-size:0 で日本語を潰し ::after で英語を出す。 */
.c-word-v__ui__tab__inner {
    color: transparent !important;
    position: relative;
}
.c-word-v__ui__tab__inner::after {
    content: "Word Cloud";
    color: #0E2A7A;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.c-word-v__ui__tab__inner.-list::after {
    content: "Ranking";
}
.c-word-v__ui__tabs__inner > span {
    font-size: 0;
}
.c-word-v__ui__tabs__inner > span::after {
    content: "View";
    font-size: 0.875rem;
}

/* トップ「最新ホットワード(Latest Hot Words)」見出しバー:
   デスクトップ幅では .c-heading が flex(space-between) で [見出し][説明文][リンク] の3要素に。
   英文は和文より横幅が広く、中央の説明文に押されて見出し(h2)とリンク(a="Hot Word Analysis ＞")が
   flex アイテム内で折り返す（矢印だけ改行される等）。見出しとリンクは1行固定にし、
   可変幅は中央の説明文が負担するようにする。en のみ適用。 */
.p-home__latest_hotword .c-heading h2,
.p-home__latest_hotword .c-heading a {
    white-space: nowrap;
    flex-shrink: 0;
}
/* 中央の説明文がバー高さを決めるため、align-items:center だと見出しの上・リンクの下に
   余白ができる。見出し(h2)は上詰め＋右に余白を足し、リンク(a)は下詰めにして詰める。 */
.p-home__latest_hotword .c-heading h2 {
    align-self: flex-start;
    margin-right: 2rem;
}
.p-home__latest_hotword .c-heading a {
    align-self: flex-end;
}

/* トップ「最新ホットワード(Latest Hot Words)」説明文の表示位置:
   JA/共通CSSでは <1200px になると説明文が見出しバー(h2 + p)から消え、代わりに
   ワードクラウド上の .hotword-view .text へ移動する（位置がズレて見える）。
   EN では「常に Latest Hot Words の右横（見出しバー内）に表示」したい要望のため、
   <1200px でも見出しバー内の説明文を表示し、ワードクラウド上の重複(.text)を隠して
   ≥1200px と同じレイアウトに揃える。en のみ適用（en.css は /en/ のみ後読み）。
   ※≤768px は共通CSSで .c-heading が縦積み(column)になるため、右横ではなく
     見出し(h2)の下に入る（端末幅の制約・ワードクラウド上には戻さない）。 */
@media only screen and (max-width: 1199px) {
    .p-home__latest_hotword .c-heading {
        justify-content: space-between;
    }
    .p-home__latest_hotword .c-heading h2 + p {
        display: block;
    }
    .p-home__latest_hotword .hotword-view .text {
        display: none;
    }
}

/* トップ「IR Storage NEW RELEASE」エリア:
   en では隣の「ビジネスの最新ニュース」(業界動向情報リンク=対象外) を非表示にするため、
   ≥1200px の 2 カラムグリッド(3fr 2.5fr)だと NEW RELEASE が左半分に寄ってしまう。
   -en-solo が付いたときだけ 1 カラム(全幅)に上書きし、右端まで表示させる。
   （<1200px は元々 display:block の単一カラムなので対応不要） */
@media only screen and (min-width: 1200px) {
    .p-home__sct.-type-2.-en-solo {
        grid-template-columns: 1fr;
    }
}