/*======================================================================
  File   : /wp-content/themes/swell_child/css/event-single-extras.css
  Title  : Event Single Extras (CTA / QR / Region guide)
  Version: 1.2
  Created: 2026-01-11 JST
  Updated: 2026-01-11 JST
======================================================================*/

/* ==========================================================
   Calendar CTA
   ========================================================== */
.calendar-cta{
  margin: 0 0 1.2em;
  padding: 1em;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.02);
}

.calendar-cta__title{
  margin: 0 0 .2em;
  font-weight: 700;
  letter-spacing: .02em;
}

.calendar-cta__subtitle{
  margin: 0 0 .9em;
  color: rgba(0,0,0,.68);
  font-size: .95em;
}

/* rows */
.calendar-cta__buttons{
  display: grid;
  gap: .6em;
}

.calendar-cta__row{
  display: grid;
  grid-template-columns: 1fr 56px;
  gap: .45em .7em;
  align-items: center;
}

/* SWELLの .swl-btn に依存せず、必ずボタンに見せる */
.calendar-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .65em .9em;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.04);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
}

/* hover も最低限 */
.calendar-cta__btn:hover{
  background: rgba(0,0,0,.06);
  text-decoration: none;
}

.calendar-cta__count{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  font-size: .9em;
  color: rgba(0,0,0,.65);
  white-space: nowrap;
}

/* NOTE をスッキリ */
.calendar-cta__note{
  margin: .9em 0 0;
  text-align: left;
  color: rgba(0,0,0,.62);
  font-size: 12.5px;
  line-height: 1.55;
}

.calendar-cta__note code{
  font-size: 12px;
}

/* ==========================================================
   QR Block（Rさんの現行HTMLが別でも壊れないよう “緩め” に）
   ========================================================== */
.event-qr-block{
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 0 0 1.2em;
  padding: 1em;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.02);
}

.event-qr-block__qr{
  width: 140px;
  height: 140px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .35em;
}

.event-qr-block__title{
  margin: 0 0 .4em;
  font-weight: 700;
  letter-spacing: .02em;
}

.event-qr-block__desc{
  margin: 0 0 .8em;
  line-height: 1.6;
  color: rgba(0,0,0,.75);
  font-size: .95em;
}

.event-qr-block__btn{
  border: none;
  padding: .65em 1em;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 700;
  width: 100%;
  max-width: 320px;
}

.event-qr-block__hint{
  margin: .7em 0 0;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

/* SP：縦積みにする */
@media (max-width: 640px){
  .event-qr-block{
    flex-direction: column;
  }
  .event-qr-block__qr{
    width: 160px;
    height: 160px;
  }
}

/* ==========================================================
   Region guide
   ========================================================== */
.region-links-guide{
  margin: 1.2em 0;
  padding: 1em 0 0;
  border-top: 2px solid rgba(0,0,0,.12);
}

.region-links-guide__a{
  font-weight: 700;
  text-decoration: none;
}

.region-links-guide__desc{
  margin-top: .25em;
  font-size: .92em;
  color: rgba(0,0,0,.7);
}
/* ==========================================================
   Event Sidebar layout tweaks (Calendar / QR)
   Version: 1.3 add-on
   Created: 2026-01-11 JST
   Updated: 2026-01-11 JST
   ========================================================== */

/* ------------------------------
   Calendar：縦積み維持 + ボタン幅を揃える
   ------------------------------ */
.calendar-cta__row{
  grid-template-columns: 1fr !important; /* カウントは下へ落とす（縦積み安定） */
}

.calendar-cta__count{
  justify-content: flex-start !important;
  margin-top: .25em;
  font-size: .9em;
}

/* ボタンを “同じ長さ（幅100%）” で揃える */
.calendar-cta .calendar-cta__btn{
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ------------------------------
   QR：横並び→縦積みに強制
   ※既存HTMLは .event-qr-block に inline style があるので !important で上書き
   ------------------------------ */
.event-qr-block{
  flex-direction: column !important;
  align-items: stretch !important;
}

.event-qr-block #event-qr{
  width: 160px !important;
  height: 160px !important;
  margin: 0 auto !important;
}

/* QR説明文を読みやすく */
.event-qr-block .event-qr-info{
  flex: none !important;
}

.event-qr-block .event-qr-info p{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ダウンロードボタン：横幅揃える */
.event-qr-block #download-qr-btn{
  display: block !important;
  width: 100% !important;
  max-width: 360px !important;
  margin: .6em auto 0 !important;
  box-sizing: border-box !important;
}
/* ==========================================================
   QR image center align (final)
   Created: 2026-01-11 JST
   Updated: 2026-01-11 JST
   ========================================================== */

.event-qr-block #event-qr{
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 生成された img/canvas も確実に中央 */
.event-qr-block #event-qr img,
.event-qr-block #event-qr canvas{
  display: block !important;
  margin: 0 auto !important;
}
/* ==========================================================
   QR container center align (parent)
   Created: 2026-01-11 JST
   Updated: 2026-01-11 JST
   ========================================================== */

/* “白い枠”側（親）を中央に寄せる */
.event-qr-block .event-qr-block__qr{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 現行HTMLが class を使ってない場合があるので保険：最初の子要素も中央に */
.event-qr-block > *:first-child{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* QR本体は中央で描画 */
.event-qr-block #event-qr{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 生成された img/canvas も中央 */
.event-qr-block #event-qr img,
.event-qr-block #event-qr canvas{
  display: block !important;
  margin: 0 auto !important;
}

.calendar-cta__count{
  min-height: 1.2em;
}