/* ============================================================
   i18n — 言語切替UI（全言語ページ共通）＋ 言語別タイポ微調整
   既存CSSは変更しない。このファイルは全ページから読み込む。
   ============================================================ */

/* --- ヒーロー右上グループ（言語切替 ＋ OFFICIAL を横並び：切替を左・OFFICIALを右） --- */
/* DOM順は <a official><nav switch> なので row-reverse で切替を左に出す */
.hero__right,
.bqp-hero__right {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 1.15em;
  pointer-events: auto;           /* 親 hero__head が pointer-events:none のため復活させる */
}
.hero__right .hero__official,
.bqp-hero__right .bqp-hero__official {
  margin-top: 0;                  /* 横並びの縦位置を揃える */
}

/* --- 言語切替 --- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .14em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;           /* ★クリック可能にする（未指定だと親から none を継承して押せない） */
  position: relative;
  z-index: 6;
}
.lang-switch a {
  color: inherit;
  text-decoration: none;
  opacity: .55;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: opacity .3s ease, border-color .3s ease;
}
.lang-switch a:hover { opacity: 1; }
.lang-switch a.is-current {
  opacity: 1;
  border-bottom-color: currentColor;
}
.lang-switch .sep {
  opacity: .3;
  font-size: 9px;
}

/* --- フッターの言語切替 --- */
.lang-switch--footer {
  margin-top: 1.8em;
  font-size: 12px;
  letter-spacing: .16em;
}

@media (max-width: 768px) {
  .lang-switch { font-size: 10px; gap: .4em; letter-spacing: .1em; }
  .hero__right, .bqp-hero__right { gap: .55em; }
}

/* ============================================================
   言語別タイポ微調整（禁則・孤立回避など。必要時のみ有効化）
   html[lang="zh-Hant"] / [lang="zh-Hans"] / [lang="ko"] / [lang="en"]
   ============================================================ */
html[lang="en"] .concept__title,
html[lang="en"] .footer-editorial__title { line-height: 1.28; }

html[lang="ko"] { word-break: keep-all; }
html[lang="zh-Hant"],
html[lang="zh-Hans"] { line-break: strict; }

/* --- モバイル：英語のヒーロー添え文は和文かな用の広い字間(.34em)だと
       行数が増えて opening と重なるため、ラテン向けに詰めて3行以内に収める --- */
@media (max-width: 768px) {
  html[lang="en"] .hero__statement p,
  html[lang="en"] .bqp-hero__statement p {
    max-width: 15em;
    font-size: 12.5px;
    line-height: 1.7;
    letter-spacing: .04em;
  }
}


/* ===== descent 3本柱：EN/KR は縦書きが成立しないため横組みに ===== */
html[lang="en"] .descent__vertical,
html[lang="ko"] .descent__vertical {
  writing-mode: horizontal-tb;
  white-space: normal;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.55;
  letter-spacing: .05em;
}

/* KRは短文なので少し絞って3本とも1行に（3本目の専用28px指定より強く上書き） */
html[lang="ko"] .descent__vertical,
html[lang="ko"] .descent__pillar:nth-child(3) .descent__vertical {
  font-size: clamp(16px, 1.45vw, 21px);
}

/* ENの3本目も他の柱とサイズを揃える */
html[lang="en"] .descent__pillar:nth-child(3) .descent__vertical {
  font-size: clamp(19px, 1.6vw, 23px);
}

@media (min-width: 769px) {
  html[lang="en"] .descent__vertical,
  html[lang="ko"] .descent__vertical {
    width: calc(100% - var(--descent-content-left) - var(--descent-content-right));
  }

  /* 3本目の柱は右余白ゼロ設計＋1440ではみ出すため、横組みテキストだけ幅を絞る */
  html[lang="en"] .descent__pillar:nth-child(3) .descent__vertical,
  html[lang="en"] .descent__pillar:nth-child(3) .descent__sub,
  html[lang="ko"] .descent__pillar:nth-child(3) .descent__vertical,
  html[lang="ko"] .descent__pillar:nth-child(3) .descent__sub {
    width: calc(100% - var(--descent-content-left) - 110px);
  }
}

@media (max-width: 768px) {
  html[lang="en"] .descent__vertical,
  html[lang="ko"] .descent__vertical {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 18px;
  }

  html[lang="en"] .descent__stamp,
  html[lang="ko"] .descent__stamp { grid-row: 3; }
}

/* ===== EN: concept本文が下の素材パレットに近いため、行間を締めてパレットを下げる ===== */
html[lang="en"] .concept__copy { line-height: 1.85; }

@media (min-width: 769px) {
  html[lang="en"] .concept__textile { top: calc(var(--concept-row-gap) + 22px); }
}


/* ===== footer: ホテル名は全言語で英語＝長い。縮小してでも常に1行に収める ===== */
html:not([lang="ja"]) .footer-editorial__name {
  white-space: nowrap;
  font-size: clamp(14px, 1.95vw, 30px);
  letter-spacing: .09em;
  line-height: 1.32;
}

@media (max-width: 768px) {
  html:not([lang="ja"]) .footer-editorial__name {
    font-size: clamp(13px, 4vw, 16px);
  }
}

/* タイトルは2行OK。ただし1セグメントが列幅を超えても内部で折り返せるようにし、
   ワイド画面（列幅が1520px上限で固定される帯）でのはみ出しを防ぐ */
html:not([lang="ja"]) .footer-editorial__title,
html:not([lang="ja"]) .footer-editorial__title .ib { white-space: normal; }


/* ===== SP: index ヒーローの statement — .34em トラッキングは CJK/ハングルには広すぎ、
   セグメント途中で折れて1〜2文字の孤立が出るため言語別に調整 ===== */
@media (max-width: 768px) {
  html[lang="zh-Hant"] .hero__statement p,
  html[lang="zh-Hans"] .hero__statement p {
    max-width: none;
    letter-spacing: .22em;
  }

  html[lang="ko"] .hero__statement p {
    max-width: none;
    letter-spacing: .14em;
    line-height: 1.9;
  }
}

/* ===== concept 締めの一文：JA以外は長いので折返し許可（nowrapだと画面外へ溢れる） ===== */
html:not([lang="ja"]) .concept__closing { white-space: normal; }

/* descent リード文も同様（EN長文がnowrapで溢れる） */
html:not([lang="ja"]) .descent__lede { white-space: normal; }


/* ===== hotels67: 英語の地域名は長いのでSPチップを専用調整 ===== */
@media (max-width: 768px) {
  html[lang="en"] .h67-chip {
    font-size: 9.5px;
    letter-spacing: 0;
    padding: 7px 1px 8px;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
  }
}


/* ===== footer(非JA): 画面縮小時のはみ出し対策 ===== */
html:not([lang="ja"]) .footer-editorial__actions {
  flex-wrap: wrap;
  row-gap: 14px;
}

html:not([lang="ja"]) .footer-editorial__opening { white-space: normal; }

@media (max-width: 768px) {
  html:not([lang="ja"]) .footer-editorial__name {
    font-size: clamp(11px, 3.5vw, 15px);
    letter-spacing: .08em;
  }
}

/* ===== hotels67(EN): チップの英語ラベル対策 ===== */
/* 九州・沖縄だけ2枠ぶち抜き → 1段目4つ・2段目3つ(うち1つ幅広)で全部1行に */
html[lang="en"] .h67-chip[data-region="kyushu"] { grid-column: span 2; }

@media (min-width: 769px) {
  html[lang="en"] .hotels67__regions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  html[lang="en"] .h67-chip {
    font-size: clamp(11px, .9vw, 13.5px);
    letter-spacing: .04em;
    padding: 9px 4px 10px;
    justify-content: center;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }
}


/* ===== footer(EN/SP): タイトルを縮めて意図した2行に ===== */
@media (max-width: 768px) {
  html[lang="en"] .footer-editorial__title {
    font-size: clamp(15px, 4.5vw, 18px);
    letter-spacing: .06em;
    line-height: 1.75;
  }
}
