/* =========================================================
   ASE Event Carousel - external CSS (complete)
   Place: /wp-content/themes/your-child-theme/assets/css/ase-event-carousel.css
   ---------------------------------------------------------
   カスタム変数を変えれば配置や色を一括調整できます
   ========================================================= */
.ase-event-carousel{
  /* Theme variables */
  --ase-primary: #0b5cad;
  --ase-gray: #d9d9d9;

  /* Toolbar (右上ナビ) 位置 */
  --ase-toolbar-right: 8px;
  --ase-toolbar-top: -100px;

  /* Controls sizes */
  --ase-nav-size: 50px;      /* 右上ナビの丸ボタン */
  --ase-toggle-size: 32px;   /* 下の再生/停止ボタン */
  --ase-icon-size: 16px;     /* 矢印アイコンサイズ */
  --ase-dot-size: 8px;       /* ページネーションのドット */

  position: relative;
}

/* 右上にハミ出す要素を隠さない */
.ase-event-carousel.swiper{ overflow: visible; }

/* =========================================================
   右上ナビ（図2の配置）
   ========================================================= */
.ase-event-carousel .ase-evc__toolbar{
  position: absolute;
  right: var(--ase-toolbar-right);
  top: var(--ase-toolbar-top);
  display: flex;
  gap: 10px;
  z-index: 100;
}
.ase-event-carousel .ase-evc__nav{
  width: var(--ase-nav-size);
  height: var(--ase-nav-size);
  border-radius: 50%;
  border: 1px solid #d7d7d7;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  position: relative;
  cursor: pointer;
}
.ase-event-carousel .ase-evc__nav::before{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: var(--ase-icon-size);
  height: var(--ase-icon-size);
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--ase-icon-size) var(--ase-icon-size);
}
/* ← 戻る */
.ase-event-carousel .ase-evc__prev::before{
  background-image: url('/wp-content/uploads/2025/08/eventleft.svg');
}
/* → 進む */
.ase-event-carousel .ase-evc__next::before{
  background-image: url('/wp-content/uploads/2025/08/eventright.svg');
}
.ase-event-carousel .ase-evc__nav:hover{
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.ase-event-carousel .ase-evc__nav:focus-visible{
  outline: 2px solid var(--ase-primary);
  outline-offset: 2px;
}

/* スマホはナビを内側に */
@media (max-width: 767px){
  .ase-event-carousel .ase-evc__toolbar{
    top: -80px;
    right: 8px;
  }
}

/* =========================================================
   スライド（カード）レイアウト
   ========================================================= */
.ase-event-carousel .swiper-wrapper{ align-items: stretch; }
.ase-event-carousel .swiper-slide{ width:440px; height: auto; }

.ase-event-carousel .ase-event-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #D9D9D9;
  border-radius: 0;
  overflow: hidden; /* カード内で綺麗に切る */
}

/* 画像エリア：周囲に内側余白＋角丸＋アスペクト固定 */
.ase-event-carousel .ase-event-card__media{
  padding: 40px 40px 24px 40px;
  background: #fff;
}
.ase-event-carousel .ase-event-card__media-inner{
  aspect-ratio: 4/3;
  background: #F5F6F9;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ase-event-carousel .ase-event-card__media img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border: 1px solid #D9D9D9;
}

/* テキスト部 */
.ase-event-carousel .ase-event-card__meta{ padding: 12px 16px 16px; }
.ase-event-carousel .ase-event-card__date{
  font-size: 13px; color: #333333; margin-bottom: 6px;
}
.ase-event-carousel .ase-event-card__title{
  font-size: 18px; line-height: 1.4; margin: 0;
}

/* =========================================================
   下部コントロール（図1：左 = 再生/停止、右 = ドット）
   ========================================================= */
.ase-event-carousel .ase-evc__controls{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0 6px;
}

/* 一時停止（再生）ボタン：正円＋Union.svg（Pause） */
.ase-event-carousel .ase-evc__toggle{
  width: var(--ase-toggle-size);
  height: var(--ase-toggle-size);
  border-radius: 50%;
  flex: 0 0 auto;
  position: relative;
  border: 1px solid #d7d7d7;
  background: #fff url('/wp-content/uploads/2025/08/Union.svg') no-repeat center center;
  background-size: 12px 12px; /* ここでPauseアイコンのサイズ調整 */
  cursor: pointer;
}
/* 停止中はPlay（三角）をCSSで描画 */
.ase-event-carousel .ase-evc__toggle.is-paused{ background-image: none; }
.ase-event-carousel .ase-evc__toggle.is-paused::after{
  content: "";
  position: absolute;
  top: 7px; left: 9px;
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid var(--ase-primary);
}

/* ドット（右側に横並び） */
.ase-event-carousel .swiper-pagination{
  position: static !important; /* 既定のabsoluteを無効化して横並びに */
  display: flex;
  align-items: center;
}
.ase-event-carousel .swiper-pagination-bullet{
  width: var(--ase-dot-size);
  height: var(--ase-dot-size);
  background: #c9cdd3;
  opacity: 1;
  margin: 0 5px !important;
}
.ase-event-carousel .swiper-pagination-bullet-active{
  background: var(--ase-primary);
}

/* ▼ ページネーション一式を中央寄せに固定 */
.ase-event-carousel .ase-evc__controls{
  width:100%;
  margin:0 auto;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:12px;
  text-align:center;
}

/* ドット側も内側で中央寄せ */
.ase-event-carousel .swiper-pagination{
  position:static !important;     /* 横並び運用 */
  width:auto;                     /* 100%指定を解除 */
  margin:0;                       /* 余計な左右余白を消す */
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex:0 0 auto;                  /* 伸び縮みさせず塊で扱う */
}

/* 左の丸ボタンも“塊”化（中央寄せの安定化） */
.ase-event-carousel .ase-evc__toggle{
  flex:0 0 auto;
}

/* タイトルは2行分の高さを常に確保して高さ揃え + 超過は省略 */
.ase-event-carousel .ase-event-card__meta{
  display:flex; flex-direction:column;
}
.ase-event-carousel .ase-event-card__title{
  line-height:1.4;
  height: calc(1.4em * 3);           /* ← 2行分を常に確保（1行でも2行分の高さ） */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;             /* 2行でカットして「…」 */
  /* （必要なら）フォントサイズは既存のまま */
}

/* スマホは3行見せたい場合の例（任意） */
@media (max-width: 639px){
  .ase-event-carousel .ase-event-card__title{
    height: calc(1.4em * 3);
    -webkit-line-clamp: 3;
  }
}