/* ============================================================
   banners.css — PR・特集バナー(T46)。トップのカルーセルと、記事・店舗・競馬場・イベント・宿泊ページの小さな横長バナー
   - バナーを出すページだけで読み込む(BannerService が枠の先頭に <link> を出す)。バナーの無いページの HTML は変わらない
   - 配色・角丸・影は style.css のトークン(--c-card / --c-rule / --radius-sm / --shadow)に合わせる。強い枠・派手な動きはしない
   - カード: 画像 3:1(cover = 枠いっぱい / contain = 全体を表示)+ 下に「PR / 特集」と短い見出し。PC の高さは約 150px
   - カルーセル: 本文幅以内・最大 960px。PC は 2.6 枚(2〜3 枚)、スマホは 1 枚 + 次の一部。横スクロール + scroll-snap(スワイプ)
   ============================================================ */
.pr-wrap { padding-top: 4px; }
.pr-slot { margin: 28px auto; max-width: 960px; }
.pr-slot--single { max-width: 480px; }
.pr-slot--top_carousel { margin: 24px auto 4px; }
.article .pr-slot { margin: 28px auto; }

/* ---- カード(カード全体がリンク) ---- */
.pr-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--c-card, #fff); color: var(--c-ink, #1f1f1f); text-decoration: none;
  border: 1px solid var(--c-rule, #e2dcd1); border-radius: var(--radius-sm, 8px); overflow: hidden;
  box-shadow: var(--shadow, 0 1px 2px rgba(0, 0, 0, .05));
  transition: box-shadow .2s ease;
}
.pr-card:hover { box-shadow: var(--shadow-hover, 0 2px 4px rgba(0, 0, 0, .06)); color: var(--c-ink, #1f1f1f); }
/* 記事本文のリンク装飾(下線・朱色)を受けない */
.pr-slot a.pr-card, .pr-slot a.pr-card:hover { color: var(--c-ink, #1f1f1f); text-decoration: none; }
.pr-card:focus-visible { outline: 3px solid var(--c-shu, #ad3b24); outline-offset: 2px; }
.pr-card__media { display: block; aspect-ratio: 3 / 1; background: var(--c-paper-2, #f2eee6); overflow: hidden; }
.pr-card__media picture { display: contents; }
.pr-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pr-card--contain .pr-card__media img { object-fit: contain; }
/* 四角いバナー(300x250 など): 3:1 の枠に入れず画像の形のまま。単独枠は画像の幅まで */
.pr-card--square .pr-card__media { aspect-ratio: auto; background: none; }
.pr-card--square .pr-card__media img { height: auto; object-fit: initial; }
.pr-slot--square { max-width: 302px; }
/* 細長い帯(728x90・468x60 など。横:縦 5 以上。T63): 3:1 の枠・カルーセルに入れず、画像の形のまま最大 728px で中央寄せ。スマホは幅いっぱいに縮む */
.pr-card--strip .pr-card__media { aspect-ratio: auto; background: none; }
.pr-card--strip .pr-card__media img { height: auto; object-fit: initial; }
.pr-slot--strip { max-width: 730px; }
/* 競馬場ページの「ヘッダー写真の横」(slot after_intro。四角専用。T63): course.html / course-nar.html の .course-head(写真ヘッダー + この枠)の中。
   1024px 以上は写真の右に縦中央で重ねる(右端は本文の container にそろえ、見出し側はその分だけ右に余白を取る)。1024px 未満は写真の下に単独の四角カード */
.course-head { position: relative; }
.course-head > .pr-slot--hero_side { margin: 20px auto 4px; }
@media (min-width: 1024px) {
  .course-head > .pr-slot--hero_side {
    position: absolute; z-index: 2; top: 50%; right: max(24px, calc((100% - var(--max, 1160px)) / 2 + 24px));
    width: 302px; margin: 0; transform: translateY(-50%);
  }
  .course-head > .pr-slot--hero_side .pr-card { box-shadow: var(--shadow-hover, 0 2px 4px rgba(0, 0, 0, .06)); }
  .course-head:has(> .pr-slot--hero_side) .page-head__body { padding-right: calc(24px + 302px + 32px); }
  .course-head:has(> .pr-slot--hero_side) .page-head--photo { min-height: max(340px, min(42vh, 420px)); }   /* 低い画面でも四角(約 305px)が写真からはみ出さない */
}
.pr-card__body { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; font-size: .88rem; line-height: 1.45; }
.pr-card__label {
  flex-shrink: 0; padding: 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; line-height: 1.7;
  color: var(--c-ink-2, #5a5650); background: #fff; border: 1px solid var(--c-ink-2, #5a5650); border-radius: 4px;
}
.pr-card__label--feature { color: var(--c-shu-deep, #8a2d1a); background: var(--c-shu-soft, #f8ebe6); border-color: var(--c-shu, #ad3b24); }
.pr-card__title {
  font-weight: 600; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ---- カルーセル ---- */
.pr-carousel { position: relative; }
.pr-carousel__track {
  display: flex; gap: 16px; margin: 0; padding: 4px 2px 8px; list-style: none;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pr-carousel__track::-webkit-scrollbar { display: none; }
.pr-carousel__track:focus-visible { outline: 3px solid var(--c-shu, #ad3b24); outline-offset: 2px; border-radius: var(--radius-sm, 8px); }
.pr-carousel__item { flex: 0 0 calc((100% - 32px) / 2.6); min-width: 0; scroll-snap-align: start; }
.pr-carousel .pr-card__title { -webkit-line-clamp: 1; }   /* カルーセルは 1 行(カードの高さをそろえる。全文は画像の代替テキスト・リンク先で) */
.pr-carousel[data-count="1"] .pr-carousel__item { flex-basis: 100%; max-width: 480px; }
.pr-carousel__controls { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 2px; }
.pr-carousel__controls[hidden] { display: none; }
.pr-carousel__btn, .pr-carousel__toggle {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 10px;
  font: inherit; font-size: .82rem; color: var(--c-ink, #1f1f1f); background: var(--c-card, #fff);
  border: 1px solid var(--c-rule, #e2dcd1); border-radius: 999px; cursor: pointer;
}
.pr-carousel__btn { width: 40px; padding: 0; }
.pr-carousel__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pr-carousel__btn:hover, .pr-carousel__toggle:hover { border-color: var(--c-ink-2, #5a5650); }
.pr-carousel__btn:focus-visible, .pr-carousel__toggle:focus-visible { outline: 3px solid var(--c-shu, #ad3b24); outline-offset: 2px; }
.pr-carousel__status { min-width: 3.5em; text-align: center; font-size: .8rem; color: var(--c-ink-2, #5a5650); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .pr-slot { margin: 20px auto; }
  .pr-carousel__track { gap: 12px; }
  .pr-carousel__item { flex-basis: 84%; }
  .pr-card__body { min-height: 36px; padding: 6px 10px; font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-carousel__track { scroll-behavior: auto; }
  .pr-card { transition: none; }
}

/* ===== T64 バナー枠の上下の空き・見出しの折り返し ===== */
/* 白い .section の直後のバナー枠: セクションの下余白(72px)+ 枠の上(32px)で上だけ大きく空いていた。下余白を詰めて上下をそろえる */
.section:not(.section--alt):has(+ .pr-wrap) { padding-bottom: 20px; }
/* 記事: 本文末尾の枠(end)のすぐ後に関連記事前の枠が続くので、記事の下余白は無しにする(枠どうしの間 132px → PC 80px・スマホ 72px) */
.section--article:has(+ .pr-wrap) { padding-bottom: 0; }
/* バナーの見出し: 「(楽天競馬)」「(特P)」の最後の 1〜2 文字だけが 2 行目に落ちないよう、語のまとまりで折り返す */
.pr-card__title { word-break: auto-phrase; text-wrap: pretty; }