/* ===== 企画カード（event-card デザイン） =====
   Downloads/event-card/card.css を元に、一覧表示（.event-cards）・
   お気に入りボタン・カード全体リンクに対応させたもの。
   card_functions.js の renderCard()（JS）と search/lib/lib.php の v2_event_card()（PHP）が出す
   .event-card 系クラスに対応する。企画検索TOP・企画詳細（この団体の他の企画・関連企画）で使う。
   使うページ側で <link rel="stylesheet" href="/visitor/search/assets/card.css"> を追加すること。

   カードの中の並び
     企画名（下線）
     [写真 95×95]  団体名
                   品目（品目のある企画だけ）
                   📍 場所 / 🕒 日程 / ジャンル        ♥
*/
:root {
  --card-border: #80aabb;
  --card-title: #0c5f81;
  --card-text: #3e3a38;
  --card-sub: #6b6461;      /* 団体名など、一段控えめな文字 */
  --card-shadow: rgba(128, 170, 187, .67);
}

/* 並べ方の既定（ページ側で上書きしてよい） */
.event-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 0 10%;
}

.event-card {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 310px;
  min-height: 148px;
  padding: 10px 16px 12px;
  background: #fff;
  border: 1.5px solid var(--card-border);
  border-radius: 15px;
  box-shadow: 2px 4px 4px 0 var(--card-shadow);
  font-family: "Kiwi Maru", serif;
  color: var(--card-text);
  transition: transform .2s ease;
}

/* カード全体を覆うリンク。お気に入りボタンより z-index を下げて、
   ハートの上をクリックしたときは遷移させない */
.event-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.event-card__link:focus-visible {
  outline: 2px solid var(--card-title);
  outline-offset: 2px;
}

/* ---------- 企画名 ---------- */
/* サイト共通の h3（common_general.css）の余白・文字・五角形の飾りを打ち消す。
   dev/card_preview.html は共通 CSS を読まないので、そこでは見えない */
.event-card__title {
  position: relative;
  margin: 0;
  padding: 0 2px 6px;
  color: var(--card-title);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-card__title::before {
  content: none;
}
.event-card__title::after {   /* 下線（写真の左端からカードの右の余白まで） */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid var(--card-border);
}

/* ---------- 写真と情報 ---------- */
.event-card__body {
  display: flex;
  align-items: center;   /* 情報が少ないときも写真の高さの中で上下中央に */
  gap: 14px;
  margin-top: 10px;
}

.event-card__thumb {
  flex: 0 0 95px;
  box-sizing: border-box;
  height: 95px;
  background: #fff;
  border: 1.5px solid var(--card-border);
  border-radius: 4px;
  overflow: hidden;
}
.event-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-card__info {
  flex: 1;
  min-width: 0;
}

.event-card__org,
.event-card__item,
.event-card__meta li {
  margin: 0;
  color: var(--card-text);   /* サイト共通の p の色（common_general.css）に負けないよう明示する */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 団体名 */
.event-card__org {
  color: var(--card-sub);
  font-size: 11px;
  line-height: 16px;
}

/* 品目（飲食・物販のみ） */
.event-card__item {
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
}

/* 場所・日程・ジャンル */
.event-card__meta {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}
.event-card__meta li {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 20px;
  /* 上の overflow: hidden を外す。ジャンルのアイコンは左へ 2px はみ出させているので（下）、切ると
     展示（枠の形）のアイコンの左の線が欠けて見えた。字のはみ出しは中の span が「…」にする */
  overflow: visible;
}
.event-card__meta li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 最後の行（ジャンル）は右下のハートに重ならないよう、右を空ける */
.event-card__meta li:last-child {
  padding-right: 26px;
}

.event-card__icon {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
}
/* ジャンル（最後の行）のアイコンは縦長（飲食）・横長（体験型・展示）があり、13px の正方形だと
   小さく潰れて見えるので、少し大きい箱に contain で収める（企画詳細の上部 .genre_icon と同じ考え方）。
   左右に 2px ずつはみ出させて中心と文字の位置を場所・時間の行にそろえる */
.event-card__meta li:last-child .event-card__icon {
  flex-basis: 17px;
  width: 17px;
  height: 16px;
  margin: 0 -2px;
  object-fit: contain;
}

/* ---------- お気に入り（ハート） ---------- */
.event-card__heart {
  position: absolute;
  right: 14px;
  bottom: 13px;
  z-index: 2;
  width: 22px;
  height: 22px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 押せる範囲をまわりに広げる（22px だとスマホで外しやすく、外れるとカードのリンクが拾って詳細へ移る） */
.event-card__heart::before {
  content: "";
  position: absolute;
  inset: -12px;
}
.event-card__heart img {
  display: block;
  width: 100%;
  height: 100%;
}
/* 押したときに弾ませる（addMypage_other.js が .clicked を付け外しする） */
.event-card__heart.clicked img {
  animation: card-heart-pop .4s ease-out;
}
@keyframes card-heart-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---------- マウス操作の環境だけ ---------- */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .event-card:hover {
    transform: scale(1.03);
  }
}

/* ===== いま開催中・まもなく（本祭の当日だけ） =====
   カードの「開催中・14:00まで」「まもなく・13:30から」（card_functions.js の cardLiveLine()）。
   色と点の脈打ちは、検索TOP の「いま」の札（css/search_top.css）・企画詳細の印（css/detail.css）と共通なので
   ここに置く（どちらのページもこのファイルを読む） */
:root {
  /* サイトのテーマ色（common/common_general.css の --theme*）から取る。赤はテーマに無いので使わない */
  --live-now: #0c5f81;        /* 開催中の文字・枠・塗り（--themeocean） */
  --live-now-pale: #cbe8ec;   /* 開催中の面（--themeskyblue。上の文字で 5:1 以上） */
  --live-soon: #324e5a;       /* まもなくの文字（--themevintage） */
  --live-soon-pale: #f6e3a2;  /* まもなくの面・「今日」の札などの差し色（--themecream。上の文字で 7:1 以上） */
}
.live-toggle__dot,
.event-card__live-dot,
.detail_live__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
/* 開催中の点は、ゆっくり脈打たせる（「いま動いている」ことが伝わるように） */
.live-toggle__dot,
.event-card__live.is-running .event-card__live-dot,
.detail_live.is-running .detail_live__dot {
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
  .live-toggle__dot,
  .event-card__live-dot,
  .detail_live__dot { animation: none !important; }
}

.event-card__live {
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 4px;
  padding: 1px 8px 1px 6px;
  border-radius: 9px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  white-space: nowrap;
}
.event-card__live.is-running {
  background: var(--live-now-pale);
  color: var(--live-now);
}
/* 終日の企画（「現在開催中」で終日も含めたときだけ）。開催中と同じ面の色で、点は脈打たせず、カードの枠も濃くしない
   （ほとんどの企画が当たるので、時刻の決まった開催中の企画を目立たせたままにする） */
.event-card__live.is-allday {
  background: var(--live-now-pale);
  color: var(--live-now);
}
.event-card__live.is-soon {
  background: var(--live-soon-pale);
  color: var(--live-soon);
}
.event-card__live-dot {
  width: 6px;
  height: 6px;
}
/* 開催中のカードは枠も濃い青にして、一覧の中で見つけやすくする */
.event-card.is-live-running {
  border-color: var(--live-now);
}