/* Japan Explorers — YouTube 連携 (front-end styles)
 * ラグジュアリー旅雑誌スタイル。テーマ側と干渉しないよう je-yt- で名前空間化。
 */
.je-yt-grid,
.je-yt-hero,
.je-yt-live { --je-shu:#D6452E; --je-kin:#C9A24B; --je-ink:#141019; --je-cream:#F1EADD;
  --je-muted:#8a8290; --je-yt:#FF3B30; --je-line:#e2dccf;
  --je-serif:"Didot","Bodoni 72",Georgia,serif;
  --je-mincho:"Yu Mincho","Hiragino Mincho ProN",serif; }

/* ---- トップページ挿入セクション ---- */
.je-yt-home{ background:#141019; padding:40px 0; border-bottom:1px solid #33293C; }
.je-yt-home-inner{ max-width:1120px; margin:0 auto; padding:0 20px; }
.je-yt-home-title{ font-family:"Didot","Bodoni 72",Georgia,serif; color:#F1EADD; font-weight:400;
  letter-spacing:.06em; font-size:1.5rem; margin:26px 0 18px; padding-bottom:12px;
  border-bottom:1px solid #33293C; }
.je-yt-home-title span{ font-family:"Yu Mincho","Hiragino Mincho ProN",serif; color:#C9A24B;
  margin-right:12px; }
.je-yt-home .je-yt-hero{ margin-bottom:24px; }

/* ---- カード（ファサード） ---- */
.je-yt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,32px); }
.je-yt-card { display:flex; flex-direction:column; gap:12px; padding:0; margin:0; border:0;
  background:transparent; text-align:left; font:inherit; color:inherit; cursor:pointer; width:100%; }
.je-yt-frame { position:relative; overflow:hidden; aspect-ratio:16/9; background:#0a0710;
  border:1px solid rgba(0,0,0,.15); }
.je-yt-frame.je-yt-play { cursor:pointer; }
.je-yt-frame.je-yt-play:focus-visible { outline:2px solid var(--je-kin); outline-offset:3px; }
.je-yt-frame img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease; }
.je-yt-card:hover .je-yt-frame img { transform:scale(1.05); }
.je-yt-frame::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,4,10,.55), transparent 55%); }
.je-yt-badge { position:absolute; left:0; top:0; z-index:2; font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; color:var(--je-ink); background:var(--je-kin);
  padding:4px 9px; font-variant-numeric:tabular-nums; }
.je-yt-playicon { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:58px; height:58px; border-radius:50%; border:1.5px solid rgba(255,255,255,.85);
  background:rgba(10,7,16,.4); transition:transform .3s, background .3s, border-color .3s;
  display:flex; align-items:center; justify-content:center; }
.je-yt-playicon::after { content:""; margin-left:3px; border-left:16px solid #fff;
  border-top:10px solid transparent; border-bottom:10px solid transparent; }
.je-yt-card:hover .je-yt-playicon { transform:translate(-50%,-50%) scale(1.08);
  background:var(--je-yt); border-color:var(--je-yt); }
.je-yt-card:focus-visible { outline:2px solid var(--je-kin); outline-offset:4px; }
.je-yt-title { font-family:var(--je-mincho); font-weight:600; font-size:1.02rem; line-height:1.5;
  letter-spacing:.01em; }
.je-yt-card.is-big .je-yt-playicon { width:76px; height:76px; }
.je-yt-card.is-big .je-yt-title { font-size:1.3rem; }

/* ---- 記事内 YouTube 埋め込み ---- */
.je-yt-embed-iframe { width:100%; aspect-ratio:16/9; height:auto; border:0; display:block; background:#000; }

/* ---- 全画面モーダル・プレーヤー ---- */
.je-yt-modal{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center;
  background:rgba(6,4,10,.94); padding:20px; }
.je-yt-modal.open{ display:flex; }
.je-yt-modal-stage{ position:relative; background:#000; margin:auto;
  width:min(94vw, calc(88vh * 16 / 9), 1440px); aspect-ratio:16/9;
  box-shadow:0 20px 80px rgba(0,0,0,.6); }
.je-yt-modal-stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.je-yt-modal-close{ position:fixed; top:18px; right:22px; z-index:2; width:46px; height:46px; border-radius:50%;
  background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff; font-size:1.2rem; line-height:1;
  cursor:pointer; transition:.2s; }
.je-yt-modal-close:hover{ background:#FF3B30; border-color:#FF3B30; }
@media(max-width:600px){ .je-yt-modal-close{ top:10px; right:12px; width:40px; height:40px; } }

/* ---- インライン再生プレーヤー（旧・未使用） ---- */
.je-yt-player { position:relative; aspect-ratio:16/9; width:100%; background:#000;
  border:1px solid rgba(0,0,0,.2); }
.je-yt-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---- ライブ / 予約バナー ---- */
.je-yt-live { display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px;
  padding:18px clamp(18px,3vw,32px); color:var(--je-cream);
  background:linear-gradient(100deg,#2a0d0d,#14101a 60%); border:1px solid rgba(255,255,255,.08); }
.je-yt-live-pill { display:inline-flex; align-items:center; gap:9px; flex:0 0 auto;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  padding:7px 13px; border-radius:2px; }
.je-yt-live.is-upcoming .je-yt-live-pill { color:var(--je-kin); border:1px solid var(--je-kin); }
.je-yt-live.is-live .je-yt-live-pill { color:#fff; background:var(--je-yt); }
.je-yt-pip { width:9px; height:9px; border-radius:50%; background:currentColor; }
.je-yt-live.is-live .je-yt-pip { background:#fff; animation:je-blink 1.3s steps(2,start) infinite; }
@keyframes je-blink { 50% { opacity:.25; } }
.je-yt-live-txt { flex:1 1 240px; min-width:200px; }
.je-yt-live-lbl { font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--je-muted); }
.je-yt-live-txt h3 { margin:4px 0 0; font-family:var(--je-mincho); font-weight:600;
  font-size:1.05rem; line-height:1.4; color:#fff; }
.je-yt-live-when { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; flex:0 0 auto; }
.je-yt-cd { font-family:var(--je-serif); font-variant-numeric:tabular-nums; font-size:1.4rem;
  letter-spacing:.03em; color:var(--je-kin); white-space:nowrap; }
.je-yt-live-date { font-size:.72rem; letter-spacing:.14em; color:var(--je-muted);
  font-variant-numeric:tabular-nums; }
.je-yt-sub { flex:0 0 auto; background:var(--je-yt); color:#fff; border:0; cursor:pointer;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  padding:11px 20px; border-radius:2px; }
.je-yt-sub:hover { filter:brightness(1.12); }

.je-yt-empty { color:var(--je-muted); font-size:.9rem; }

@media (max-width:860px) { .je-yt-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .je-yt-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) {
  .je-yt-frame img, .je-yt-playicon { transition:none; }
  .je-yt-live.is-live .je-yt-pip { animation:none; }
}