/* =====================================================
   Baywave Content API
   共通スタイル
===================================================== */

.bw-card {
  border: none;
  border-radius: 0px;
  padding: 6px;
  background: #fff;
}

/* =====================================================
   detail：共通（event / report / spot）
===================================================== */
.bw-content-detail {
  width: 100%;
}

.bw-content-title {
  max-width: 950px;
  margin: 0 auto;
  color: #800040;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
}

.bw-content-detail img {
  display: block;
  /*max-width: 950px;*/
  max-width: 100%;
  height: auto;
  margin: 10px auto;
}

.bw-content-detail .bw-desc {
  max-width: 950px;
  margin: 10px auto;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #333;
  text-align: left;
}

.bw-event-detail a, .bw-spot-detail a, .bw-report-detail a {
  text-decoration: underline;
}

/* =============================
   ページネーション
============================= */
.bw-events-pagination, .bw-reports-pagination, .bw-spots-pagination {
  margin-top: 12px;
}

.bw-events-pagination ul, .bw-reports-pagination ul, .bw-spots-pagination ul {
  display: flex;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bw-events-pagination li, .bw-reports-pagination li, .bw-spots-pagination li {
  display: inline-flex;
}

.bw-events-pagination .page-numbers, .bw-reports-pagination .page-numbers, .bw-spots-pagination .page-numbers {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #d9d5c5;
  font-size: 12px;
  color: #333;
  text-decoration: none;
  line-height: 1.2;
}

.bw-events-pagination .page-numbers:hover, .bw-reports-pagination .page-numbers:hover, .bw-spots-pagination .page-numbers:hover {
  background: #f6f3e8;
}

.bw-events-pagination .page-numbers.current, .bw-reports-pagination .page-numbers.current, .bw-spots-pagination .page-numbers.current {
  background: #800040;
  border-color: #800040;
  color: #fff;
  pointer-events: none;
}

/* =============================
   イベント：ステータス色分け
============================= */
.bw-event-status {
  font-size: 0.75rem;
  padding: 3px 8px 2px 8px;
  white-space: nowrap;
  color: #fff;
}

.bw-event-status.is-open {
  background: #02b06d;
}

.bw-event-status.is-upcoming {
  background: #2b4fff;
}

.bw-event-status.is-ended {
  background: #999;
}


/* =====================================================
   TOP：新着情報一覧
   [laravel_events_top]
===================================================== */
#topInfo {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  list-style: none;
  padding: 0 10px;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.2;
  background-color: #ffffff;
  border-left: 1px solid #d9d5c5;
  border-right: 1px solid #d9d5c5;
  border-bottom: 1px solid #d9d5c5;
}

#topInfo li {
  margin: 0 0 8px;
}

#topInfo li p {
  margin: 0;
  color: #333;
  text-align: left;
}

#topInfo li a {
  display: flex;
  gap: 12px;
  /* spanとタイトルの間隔（これが一番簡単） */
  align-items: baseline;
}

#topInfo li a span {
  flex: 0 0 auto;
  color: #666;
}

#topInfo li a {
  color: inherit;
}

#topInfo li a {
  text-decoration: underline;
}

#topInfo li a {
  overflow: hidden;
}

#topInfo li a .topInfoTitle {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}



/* =====================================================
   TOP：イベント一覧（画像＋タイトル 横並び）
   [laravel_events_top]
===================================================== */
.bw-events-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 0;
  background-color: #ffffff;
  border-left: 1px solid #d9d5c5;
  border-right: 1px solid #d9d5c5;
  border-bottom: 1px solid #d9d5c5;
}

@media (min-width: 576px) {
  .bw-events-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bw-events-top .bw-top-item {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

/* サムネイル */
.bw-events-top .bw-top-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex: 0 0 auto;
}

/* 画像が無い場合 */
.bw-events-top .bw-top-thumb--empty {
  width: 56px;
  height: 56px;
  background: #f2f2f2;
  flex: 0 0 auto;

  /* 中央寄せ用 */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bw-events-top .bw-top-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  font-size: 0.75rem;
  line-height: 1.2;
  color: #333;
  text-align: left;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bw-events-top-header {
  border-bottom: solid 1px #800040;
  grid-column: 1 / -1;
  text-align: right;
  margin: 8px 8px 0px 8px;
}

.bw-events-top-footer {
  border-top: solid 1px #800040;
  grid-column: 1 / -1;
  text-align: right;
  margin: 12px 8px 0px 8px;
}

.bw-events-top-footer a, .bw-events-top-header {
  font-size: 0.75rem;
  text-decoration: none;
}


/* =====================================================
   LIST：イベント一覧
   [laravel_events_list]
===================================================== */
.bw-events-list {
  width: 100%;
}

.bw-events-list .bw-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid #d9d5c5;
}

.bw-events-list .bw-left {
  display: flex;
  justify-content: center;
}

.bw-events-list .bw-left img {
  width: 96px;
  height: auto;
  object-fit: cover;
}

.bw-events-list .bw-left:empty::before {
  content: "";
  width: 96px;
  height: 96px;
  background: #f2f2f2;
}

.bw-events-list .bw-right {
  width: 100%;
  min-width: 0;
  text-align: left;
}

.bw-events-list .bw-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  padding-left: 5px;
}

.bw-period {
  color: #444;
  font-size: 12px;
  white-space: nowrap;
  text-align: right;
  border-bottom: solid 1px #800040;
}

.bw-desc {
  color: #333;
  line-height: 1.6;
  font-size: 0.75rem;
  margin-top: 5px;
}

.bw-category-area {
  margin-top: 6px;
  color: #666;
  font-size: 12px;
}

@media (min-width: 576px) {
  .bw-events-list .bw-row {
    flex-direction: row;
    gap: 14px;
  }

  .bw-events-list .bw-left {
    flex: 0 0 100px;
    justify-content: flex-start;
  }

  .bw-events-list .bw-right {
    flex: 1;
  }
}

/* =====================================================
   detail:イベント詳細
   [laravel_events_detail]
===================================================== */
.bw-event-detail {
  width: 100%;
}

/* タイトル＋ステータス */
.bw-event-detail .bw-event-title {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 950px;
  margin: 0 auto;
  color: #800040;
}

.bw-event-detail .bw-event-title-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  padding-top: 2px;
}

.bw-event-detail .bw-event-status {
  font-size: 1.0rem;
  padding: 5px 8px 5px 8px;
  white-space: nowrap;
  color: #fff;
}

/* 画像 */
.bw-event-detail img {
  display: block;
  max-width: 950px;
  margin: 10px auto;
}

/* 期間 */
.bw-event-detail .bw-period {
  max-width: 950px;
  margin: 6px auto;
  font-size: 12px;
  color: #444;
  border-bottom: 1px solid #800040;
}

/* 説明文 */
.bw-event-detail .bw-desc {
  max-width: 950px;
  margin: 10px auto;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #333;
  text-align: left;
}

/* =====================================================
   TOP：レポート一覧（画像＋タイトル 横並び）
   [laravel_reports_top]
===================================================== */
.bw-reports-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 0;
  background-color: #ffffff;
  border-left: 1px solid #d9d5c5;
  border-right: 1px solid #d9d5c5;
  border-bottom: 1px solid #d9d5c5;
}

@media (min-width: 576px) {
  .bw-reports-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .bw-reports-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bw-reports-top .bw-top-item {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

/* サムネイル */
.bw-reports-top .bw-top-thumb {
  width: 88px;
  height: 56px;
  object-fit: cover;
  flex: 0 0 auto;
}

/* 画像が無い場合 */

.bw-reports-top .bw-top-thumb--empty {
  width: 88px;
  height: 56px;
  background: #f2f2f2;
  flex: 0 0 auto;

  /* 中央寄せ用 */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bw-reports-top .bw-top-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  font-size: 0.75rem;
  line-height: 1.2;
  color: #333;
  text-align: left;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bw-reports-top-header {
  border-bottom: solid 1px #800040;
  grid-column: 1 / -1;
  text-align: right;
  margin: 8px 8px 0px 8px;
}

.bw-reports-top-footer {
  border-top: solid 1px #800040;
  grid-column: 1 / -1;
  text-align: right;
  margin: 12px 8px 0px 8px;
}

.bw-reports-top-footer a, .bw-reports-top-header {
  font-size: 0.75rem;
  text-decoration: none;
}

/* =====================================================
   LIST：レポート一覧
   [laravel_reports_list]
===================================================== */

.bw-reports-list {
  width: 100%;
}

/* =========================
   デフォルト（<576px）
   画像 → 文章（上下）
========================= */
.bw-reports-list .bw-report-row {
  display: flex;
  flex-direction: column;
  /* ★ 縦並び */
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid #d9d5c5;
}

/* 画像は中央寄せ */
.bw-reports-list .bw-report-left {
  display: flex;
  justify-content: center;
}

/* テキストは全幅 */
.bw-reports-list .bw-report-right {
  width: 100%;
  text-align: left;
}

/* タイトル */
.bw-reports-list .bw-report-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  color: #800040;
}

/* 日付（右寄せ） */
.bw-reports-list .bw-report-date {
  margin-top: 4px;
  font-size: 12px;
  color: #444;
  text-align: right;
  white-space: nowrap;
}

/* 日付の下のボーダー */
.bw-reports-list .bw-report-date-border {
  margin-top: 6px;
  border-bottom: 1px solid #800040;
}

/* 内容（抜粋） */
.bw-reports-list .bw-report-desc {
  margin-top: 8px;
  color: #333;
  line-height: 1.6;
  font-size: 0.8rem;
}

/* 画像（SPサイズ） */
.bw-reports-list .bw-report-thumb,
.bw-reports-list .bw-report-thumb--empty {
  width: 180px;
  height: 120px;
}

.bw-reports-list .bw-report-thumb {
  object-fit: cover;
  display: block;
}

.bw-reports-list .bw-report-thumb--empty {
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bw-reports-list .bw-report-thumb--empty::before {
  content: "No Image";
  font-size: 11px;
  color: #999;
}

/* =========================
   576px以上
   画像（左）＋文章（右）
========================= */
@media (min-width: 576px) {
  .bw-reports-list .bw-report-row {
    flex-direction: row;
    /* ★ 横並び */
    align-items: flex-start;
    gap: 14px;
  }

  .bw-reports-list .bw-report-left {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  .bw-reports-list .bw-report-right {
    flex: 1;
    min-width: 0;
  }

  /* 画像サイズを大きく */
  .bw-reports-list .bw-report-thumb,
  .bw-reports-list .bw-report-thumb--empty {
    width: 140px;
    height: 90px;
  }
}


/* =====================================================
   detail:レポート詳細
   [laravel_report_detail]
===================================================== */
.bw-report-detail {
  width: 100%;
}

/* タイトル＋ステータス */
.bw-report-detail .bw-report-title {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 950px;
  margin: 0 auto;
  color: #800040;
}

.bw-report-detail .bw-report-title-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  padding-top: 2px;
}

.bw-report-detail .bw-report-status {
  font-size: 1.0rem;
  padding: 5px 8px 2px 8px;
  white-space: nowrap;
  color: #fff;
}

/* 画像 */
.bw-report-detail img {
  display: block;
  max-width: 950px;
  margin: 10px auto;
}

/* 期間 */
.bw-report-detail .bw-period {
  max-width: 950px;
  margin: 6px auto;
  font-size: 12px;
  color: #444;
  border-bottom: 1px solid #800040;
}

/* 説明文 */
.bw-report-detail .bw-desc {
  max-width: 950px;
  margin: 10px auto;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #333;
  text-align: left;
}

/* =====================================================
   TOP：スポット一覧（画像→タイトル→説明）
   [laravel_spots_top]
===================================================== */
.bw-spots-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 0;
  background-color: #ffffff;
  border-left: 1px solid #d9d5c5;
  border-right: 1px solid #d9d5c5;
  border-bottom: 1px solid #d9d5c5;
}

/* サムネイル（中央寄せ） */
.bw-spots-top .bw-top-thumb,
.bw-spots-top .bw-top-thumb--empty {
  width: 88px;
  height: 56px;
  margin: 0 auto;
  flex: 0 0 auto;
}

/* ブレークポイント：必要なら調整 */
@media (min-width: 576px) {
  .bw-spots-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 781px) {
  .bw-spots-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bw-spots-top .bw-top-thumb,
  .bw-spots-top .bw-top-thumb--empty {
    width: 100px;
    height: 67px;
  }
}

@media (min-width: 992px) {
  .bw-spots-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bw-spots-top .bw-top-thumb,
  .bw-spots-top .bw-top-thumb--empty {
    width: 128px;
    height: 80px;
  }
}

/* カード */
.bw-spots-top .bw-card {
  border: none;
  border-radius: 0;
  padding: 6px;
  background: #fff;
}

/* ★縦積み（画像→タイトル→説明） */
.bw-spots-top .bw-top-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* 画像 */
.bw-spots-top .bw-top-thumb {
  object-fit: cover;
  display: block;
}

/* 画像が無い場合（No Image中央表示） */
.bw-spots-top .bw-top-thumb--empty {
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bw-spots-top .bw-top-thumb--empty::before {
  content: "No Image";
  font-size: 11px;
  color: #999;
  letter-spacing: 0.05em;
}

/* タイトル（画像の下） */
.bw-spots-top .bw-top-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  font-size: 0.75rem;
  line-height: 1.3;
  color: #333;
  text-align: center;
  /* 下に来るので中央寄せが自然 */
  font-weight: 500;
  margin: 0 6px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 説明文 */
.bw-spots-top .bw-desc {
  color: #333;
  line-height: 1.6;
  font-size: 0.75rem;
  margin: 0 6px;
  text-align: left;
}

/* =====================================================
   LIST：スポット一覧（Mobile First）
   [laravel_spots_list]
===================================================== */

/* ===== 共通 ===== */
.bw-spots-list {
  width: 100%;
}

/* 1件 */
.bw-spots-list .bw-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #d9d5c5;
}

/* 左：画像（モバイル） */
.bw-spots-list .bw-left {
  flex: 0 0 90px;
}

.bw-spots-list .bw-spot-thumb,
.bw-spots-list .bw-spot-thumb--empty {
  width: 90px;
  height: 60px;
}

.bw-spots-list .bw-spot-thumb {
  object-fit: cover;
  display: block;
}

.bw-spots-list .bw-spot-thumb--empty {
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bw-spots-list .bw-spot-thumb--empty::before {
  content: "No Image";
  font-size: 11px;
  color: #999;
}

/* 右：テキスト */
.bw-spots-list .bw-right {
  flex: 1;
  min-width: 0;
  text-align: left;
}

/* タイトル */
.bw-spots-list .bw-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
}

/* 住所・電話 */
.bw-spots-list .bw-meta {
  margin-top: 4px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #555;
}

.bw-spots-list .bw-phone a {
  color: inherit;
  text-decoration: none;
}

.bw-spots-list .bw-phone a:hover {
  text-decoration: underline;
}

/* ===== タブレット以上（576px〜） ===== */
@media (min-width: 576px) {
  .bw-spots-list .bw-row {
    gap: 14px;
    padding: 14px 0;
  }

  .bw-spots-list .bw-left {
    flex: 0 0 110px;
  }

  .bw-spots-list .bw-spot-thumb,
  .bw-spots-list .bw-spot-thumb--empty {
    width: 100px;
    height: 67px;
  }

  .bw-spots-list .bw-title {
    font-size: 0.95rem;
  }
}


/* =====================================================
   detail:スポット詳細
   [laravel_spot_detail]
===================================================== */
.bw-spot-detail {
  width: 100%;
}

/* タイトル＋ステータス */
.bw-spot-detail .bw-spot-title {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 950px;
  margin: 0 auto;
  color: #800040;
}

.bw-spot-detail .bw-spot-title-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  padding-top: 2px;
}

.bw-spot-detail .bw-spot-status {
  font-size: 1.0rem;
  padding: 5px 8px 2px 8px;
  white-space: nowrap;
  color: #fff;
}

/* 画像 */

.bw-spot-detail img {
  display: block;
  max-width: 950px;
  width: 100%;
  height: auto;
  margin: 10px auto;
}


/* 期間 */
.bw-spot-detail .bw-period {
  max-width: 950px;
  margin: 6px auto;
  font-size: 12px;
  color: #444;
  border-bottom: 1px solid #800040;
}

/* 説明文 */
.bw-spot-detail .bw-desc {
  max-width: 950px;
  margin: 10px auto;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #333;
  text-align: left;
}

/* テーブルデザイン */
.bw-spot-table {
  width: 100%;
  margin: 10px auto;
  border-collapse: collapse;
  border: 1px #a69668 solid;
  text-align: left;
}

.bw-spot-table th,
.bw-spot-table td {
  padding: 5px;
  border: 1px #a69668 solid;
  font-size: 14px;
  line-height: 1.4;
}

.bw-spot-table th {
  font-size: 14px;
  background: #c6e88b;
  text-align: left;
  color: #402a0f;
}

.bw-spot-table a {
  text-decoration: underline;
}