/* ============================================================
   event-test.css — 館内イベント案内 (/event-test/) ページ固有CSS
   二次リリース③ 2026-08-14
   ・共通部品(sub-hero/page-intro/onsen-section-heading/anchor-nav/
     feature-block/spec-table-inline/btn-outline/related-section/is-bg-*)は
     /css/style.01f19af3.css と /css/shodoshima-kanko.fc315dbd.css 側。
     ここは季節カード・開催期間バッジ・年間カレンダー表のみ。
   ・★本適用時: このファイルの中身で css/event.css を置き換え、
     event-test.css は削除する(公開中ガワページとの共存のための別名。
     詳細は 指示書-Code-二次リリース-03館内イベント.md)
   ============================================================ */

/* --- feature-block / カード内の詳細ボタン --- */
.event-detail-cta {
  margin-top: 24px;
}

/* --- 季節のお楽しみ カード (#seasonal / soft帯)
       画像/タイトル/期間バッジ/本文の4行を subgrid で行揃え --- */
.event-card-grid {
  max-width: var(--container-width);
  margin: 48px auto 0;
  padding: var(--container-pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 30px;
}
.event-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
  background: #fff;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.event-card-image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--c-bg-gray);
}
.event-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.event-card:hover .event-card-image img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .event-card:hover .event-card-image img { transform: none; }
}
.event-card-title {
  padding: 20px 22px 0;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(1.0625rem, 1rem + 0.26vw, 1.25rem);
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--c-text);
}
.event-card-period {
  padding: 12px 22px 0;
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);
  line-height: 1.7;
  color: var(--c-text);
}
.event-badge {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 12px;
  background: var(--c-accent);
  color: #fff;
  border-radius: 999px;
  font-size: clamp(0.75rem, 0.6rem + 0.55vw, 0.9375rem);
  letter-spacing: 0.08em;
  white-space: nowrap;
  vertical-align: 1px;
}
.event-card-body {
  padding: 14px 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.event-card-text {
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);
  line-height: 1.875;
  letter-spacing: 0.04em;
  color: var(--c-text-light);
  word-break: auto-phrase;
}
.event-card-body .spec-table-inline { width: 100%; }
.event-card-body .event-detail-cta { margin-top: 4px; }

/* --- 年間イベントカレンダー (#calendar / cream帯) --- */
.table-scroll {
  max-width: var(--container-width);
  margin: 48px auto 0;
  padding: var(--container-pad);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.event-calendar {
  width: 100%;
  min-width: 880px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.event-calendar th,
.event-calendar td {
  padding: 14px 10px;
  text-align: center;
  font-size: clamp(0.8125rem, 0.75rem + 0.33vw, 0.9375rem);
  line-height: 1.6;
  border-bottom: 1px solid var(--c-border);
}
.event-calendar thead th {
  font-family: var(--ff-serif);
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-bg-cream);
  white-space: nowrap;
}
.event-calendar tbody tr:last-child th,
.event-calendar tbody tr:last-child td { border-bottom: none; }
.event-calendar td { color: var(--c-accent); }
.event-calendar-name {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  text-align: left !important;
  white-space: nowrap;
  font-family: var(--ff-serif);
  font-weight: 500;
  color: var(--c-text);
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.event-calendar thead .event-calendar-name { background: var(--c-bg-cream); }
.event-calendar-note {
  /* 2026-08-14 チェックバック: PC1行で収める(15px×52字+字間≈812px。860pxでは内寸不足で折れていた) */
  max-width: 960px;
  margin: 20px auto 0;
  padding: 0 50px;
  text-align: center;
  font-size: clamp(0.8125rem, 0.75rem + 0.33vw, 0.9375rem);
  line-height: 1.9;
  color: var(--c-text-muted);
}

/* --- SP --- */
@media (max-width: 767px) {
  .event-card-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .event-card-title { padding: 16px 16px 0; }
  .event-card-period { padding: 10px 16px 0; }
  .event-card-body { padding: 12px 16px 20px; }
  .table-scroll { padding: 0 20px; }
  .event-calendar-note { padding: 0 20px; }
  .event-detail-cta { margin-top: 20px; }
}


/* --- セクション下端の余白 (2026-08-14 チェックバック対応) ---
   .l-section は共通CSSに定義が無く、余白は中身の部品任せのため、
   最後の子が margin のみのセクションは次セクションと密着していた。
   ページ側で一律に下パディングを確保する(帯セクションは帯の内側余白になる)。
   feature-block が最後のセクションは自前の下60pxを打ち消して計100pxに揃える。 */
.l-section.section-anchor { padding-bottom: 100px; }
.l-section.section-anchor > .feature-block:last-child { padding-bottom: 0; }
@media (max-width: 767px) {
  .l-section.section-anchor { padding-bottom: 64px; }
}

/* --- 帯オフセット (2026-08-14 チェックバック対応) ---
   #seasonal(soft帯)の直後に #calendar(cream帯)が連続すると薄い色同士で見栄えが悪いため、
   cream帯を上端からでなく途中(--band-start)から下に敷く
   (お食事ページ #french の .cream-block-wrap::before 方式)。 */
.is-bg-cream-offset { position: relative; z-index: 0; background: transparent; }
.is-bg-cream-offset::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--band-start, 42%);
  bottom: 0;
  background: var(--c-bg-cream);
  z-index: -1;
}