@charset "utf-8";
/* ============================================================================
   JRA-VAN ／ 凱旋門賞2026 ファン参加企画
   report.css ─ 現地レポートページ
   ----------------------------------------------------------------------------
   目次
     01. 企画共通の色（金）
     02. ヒーロー
     03. コメントカード
     04. 動画・写真
   ----------------------------------------------------------------------------
   コメントだけ／動画だけ／写真だけ／全部入り、どれが来ても崩れないように
   1カラムの記事レイアウトで組んでいる。人数・役職が増えても縦に伸びるだけ。
   ========================================================================== */


/* ============================================================
   01. 企画共通の色（金）── 企画概要ページと同じ
   ============================================================ */
:root{
  --h1:      #B8862F;
  --h1-lt:   #E0BC72;
  --h2:      #E9C87A;
  --h2-lt:   #F5E2AC;
  --btn-fg:  #1A1408;
}


/* ============================================================
   02. ヒーロー
   ============================================================ */
.rp-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:calc(var(--header-h) + 64px) 60px;
}
.rp-hero__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(80% 54% at 20% 108%, rgba(198,146,52,.40), transparent 64%),
    radial-gradient(56% 40% at 84% 96%,  rgba(233,200,122,.16), transparent 62%),
    linear-gradient(178deg,#12141F 0%,#06080F 62%,#0C0D16 100%);
}
.rp-hero__bg::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 190px 22px rgba(0,0,0,.6);
}

.rp-hero__title{
  margin-top:18px;
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(30px,8vw,58px);
  line-height:1.34; letter-spacing:.03em;
}
.rp-hero__title .accent{
  background:linear-gradient(100deg,var(--h2) 0%,var(--h2-lt) 52%,var(--h1-lt) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rp-hero__lead{
  margin-top:22px;
  font-size:15px; line-height:2.1; color:var(--text-2);
}
.rp-hero__meta{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:26px; padding:8px 16px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.04);
  font-family:var(--f-en); font-size:13px; font-weight:600;
  letter-spacing:.14em; color:var(--text-2);
}


/* ============================================================
   03. コメントカード
   ============================================================ */
.rp-sec{ border-top:1px solid var(--line-soft); }

.rp-list{ display:grid; gap:22px; }

.rp-card{
  padding:24px 22px 26px;
  border:1px solid var(--line-soft); border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
}
@media (min-width:700px){
  .rp-card{ padding:30px 32px 32px; }
}

.rp-card__head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 14px;
  padding-bottom:16px; margin-bottom:20px;
  border-bottom:1px solid var(--line-soft);
}
.rp-card__who{ min-width:0; }

.rp-role{
  display:inline-block;
  padding:3px 11px; border-radius:999px;
  border:1px solid rgba(233,200,122,.45);
  background:rgba(233,200,122,.1);
  font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--h2-lt);
}
.rp-name{
  margin-top:9px;
  font-family:var(--f-disp); font-weight:700;
  font-size:21px; line-height:1.4; letter-spacing:.06em;
}

/* 馬名タグ。勝負服の色で塗り分ける */
.rp-horse{
  flex:none;
  padding:5px 13px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.05em;
  border:1px solid var(--c, var(--line-hard));
  color:var(--c, var(--text-2));
  background:rgba(255,255,255,.04);
}
.rp-horse[data-horse="meisho-tabaru"]{ --c:#FA7BE8; }
.rp-horse[data-horse="admire-terra"] { --c:#40CCFF; }

.rp-card__body{ font-size:15px; line-height:2.05; color:var(--text); }
.rp-card__body p + p{ margin-top:1.1em; }

/* 動画・写真があるときは、本文との間隔をとる */
.rp-card__media + .rp-card__body{ margin-top:22px; }


/* ============================================================
   04. 動画・写真
   ============================================================ */
.rp-card__media{ display:grid; gap:14px; }
/* 2枚以上のときだけ2列に。1枚のときは幅いっぱい */
@media (min-width:560px){
  .rp-card__media.is-multi{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.rp-media{ margin:0; min-width:0; }
.rp-media img{
  display:block; width:100%; height:auto;
  /* auto を先に書くと、写真の実比率が分かればそれを使い、
     分かるまで（＝読み込み前）は 3:2 で場所を取る。高さ0で潰れるのを防ぐ */
  aspect-ratio:auto 3 / 2;
  border-radius:12px; background:rgba(255,255,255,.05);
}
.rp-media__cap{
  margin-top:9px;
  font-size:12px; line-height:1.8; color:var(--text-3); letter-spacing:.03em;
}

/* YouTube。16:9を保ったまま幅いっぱいに */
.rp-frame{
  position:relative; width:100%; aspect-ratio:16 / 9;
  border-radius:12px; overflow:hidden; background:#000;
}
.rp-frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
}

/* 素材が届く前の枠 */
.rp-ph{
  display:grid; place-items:center;
  width:100%; border-radius:12px;
  border:1px dashed var(--line-hard);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 8px, transparent 8px 16px),
    rgba(255,255,255,.02);
  font-size:12px; letter-spacing:.06em; color:var(--text-3); text-align:center;
  padding:16px;
}

/* コメントを大きく引用したいとき */
.rp-quote{
  margin:0; padding:20px 22px;
  border-left:3px solid var(--h2); border-radius:0 10px 10px 0;
  background:rgba(233,200,122,.07);
  font-family:var(--f-hand); font-weight:600;
  font-size:17px; line-height:2; color:var(--text);
}

.rp-empty{
  padding:52px 20px; text-align:center;
  border:1px dashed var(--line); border-radius:16px;
  font-size:14px; line-height:2; color:var(--text-3);
}


/* ============================================================
   モーション設定
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .rp-hero__bg{ background-attachment:scroll; }
}