/* ブログカルーセル — 中央フォーカス + カテゴリー色の背景円 + 全幅 */

/*
 * 全幅ブレイクアウト（スタックカード / ブログランキングと同系）
 * テーマの .col overflow・.align* 幅指定が勝つ箇所のみ !important
 * （色・余白など装飾用途には使わない）
 */
.col:has(> .arc-blog-carousel),
.col:has(> .wp-block-arc-editing-blog-carousel) {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  padding-inline: 0;
  overflow: visible !important;
}

.row:has(> .col > .arc-blog-carousel),
.row:has(> .col > .wp-block-arc-editing-blog-carousel) {
  overflow: visible !important;
}

.wp-block-arc-editing-blog-carousel,
.wp-block-arc-editing-blog-carousel.alignfull,
.wp-block-arc-editing-blog-carousel.alignwide {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  float: none !important;
}

/*
 * .arc-showcase-section の max-width:75rem / padding-inline を上書き。
 * 共有 CSS が後勝ちするため複合セレクタで具体性を上げる。
 * カルーセル本体は左右 0。見出しは下でコンテンツ幅を維持。
 */
.arc-blog-carousel.arc-showcase-section {
  --arc-ss-type-heading: clamp(1.5rem, 3.7vw, 2.1875rem);
  /*
   * Harmonies 準拠:
   * - 全スライド同じ幅（490px 相当）
   * - 中央だけ .img を scale(1.42) / SP は 1.33
   * - spaceBetween 65〜170px 相当の隙間
   * - アイキャッチ角丸は左下以外（60px 相当）
   */
  --arc-blog-carousel-active-scale: 1.42;
  --arc-blog-carousel-slide-w: min(30.625rem, 42vw);
  --arc-blog-carousel-gap: clamp(4.0625rem, 9vw, 10.625rem);
  --arc-blog-carousel-radius: 3.75rem 3.75rem 3.75rem 0;
  --arc-blog-card-radius: var(--arc-blog-carousel-radius);
  --arc-blog-carousel-media-ratio: 16 / 10;
  --arc-blog-carousel-circle-size: min(56rem, 130vw);
  --arc-blog-carousel-pad-x: clamp(1rem, 3vw, 2rem);
  /* 見出し左右 = 旧 section pad + 見出し pad（全幅化後も位置を維持） */
  --arc-blog-carousel-heading-pad-x: clamp(2rem, 6vw, 4rem);
  --arc-blog-carousel-glow: var(--arc-blog-accent, #2c2e36);
  --arc-blog-carousel-zoom-duration: 0.8s;
  --arc-blog-carousel-zoom-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --arc-blog-carousel-reveal: clamp(0.5rem, 1.5vw, 0.875rem);
  --arc-blog-reveal-offset: var(--arc-blog-carousel-reveal);
  --arc-blog-carousel-hover-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --arc-blog-carousel-hover-duration: 0.45s;
  --arc-blog-carousel-slide-stack-gap: clamp(0.65rem, 1.5vw, 0.9rem);
  --arc-blog-carousel-copy-gap: 0.65em;
  --arc-blog-carousel-badge-size: 3.75rem;
  --arc-blog-carousel-badge-font: 0.8125rem;
  --arc-blog-carousel-badge-font-sm: 0.6875rem;
  --arc-blog-carousel-badge-top: -1.35rem;
  --arc-blog-carousel-badge-right: -0.85rem;
  position: relative;
  color: var(--arc-brand-dark, #2c2e36);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-block: var(--arc-showcase-pad-block, clamp(3rem, 8vw, 5rem));
  padding-inline: 0;
  overflow-x: clip;
  overflow-y: visible;
}

/* 見出し: 75rem 列内（text-align は .arc-blog-heading--align-* 側） */
.arc-blog-carousel .arc-blog-carousel__heading.arc-split-story__heading {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 75rem;
  margin: 0 auto clamp(0.85rem, 2vw, 1.35rem);
  padding-inline: var(--arc-blog-carousel-heading-pad-x);
  padding-bottom: 1.5rem;
  font-size: var(--arc-ss-type-heading);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--arc-brand-dark, #2c2e36);
}

/*
 * 背景色円はビューポートの overflow 外に置く。
 * 上下はマスク＋ぼかしでハードな切れ目を消す。
 */
.arc-blog-carousel__glow {
  position: absolute;
  top: 48%;
  left: 50%;
  width: var(--arc-blog-carousel-circle-size);
  height: var(--arc-blog-carousel-circle-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--arc-blog-carousel-glow, #2c2e36) 70%, transparent) 0%,
    color-mix(in srgb, var(--arc-blog-carousel-glow, #2c2e36) 35%, transparent) 32%,
    color-mix(in srgb, var(--arc-blog-carousel-glow, #2c2e36) 12%, transparent) 48%,
    transparent 68%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 12%,
    #000 28%,
    #000 72%,
    rgba(0, 0, 0, 0.35) 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 12%,
    #000 28%,
    #000 72%,
    rgba(0, 0, 0, 0.35) 88%,
    transparent 100%
  );
  filter: blur(1.75rem);
  opacity: 0.85;
}

.arc-blog-carousel__viewport {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  /* 中央画像の scale 上下はみ出し分 */
  padding: clamp(3.5rem, 8vw, 5.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.arc-blog-carousel__track {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: max-content;
  max-width: none;
  gap: var(--arc-blog-carousel-gap);
  will-change: transform;
  touch-action: pan-y;
  cursor: grab;
  backface-visibility: hidden;
}

.arc-blog-carousel__track:active {
  cursor: grabbing;
}

.arc-blog-carousel__slide {
  position: relative;
  flex: 0 0 var(--arc-blog-carousel-slide-w);
  width: var(--arc-blog-carousel-slide-w);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--arc-blog-carousel-slide-stack-gap);
  min-width: 0;
  z-index: 1;
  opacity: 0.55;
  transition: opacity 0.35s ease;
  overflow: visible;
}

.arc-blog-carousel__slide.is-active {
  z-index: 2;
  opacity: 1;
}

/* 画像 a / 見出し a — 下線・peek は .arc-blog__card-link に委譲 */
.arc-blog-carousel__link {
  position: relative;
  z-index: 1;
  width: 100%;
  gap: 0;
}

.arc-blog-carousel__headline-link {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--arc-blog-carousel-copy-gap);
  width: 100%;
}

.arc-blog-carousel .arc-blog__card-link:hover .arc-blog__title,
.arc-blog-carousel .arc-blog__card-link:focus-visible .arc-blog__title {
  color: var(--arc-blog-accent, var(--arc-brand-dark, #2c2e36));
}

.arc-blog-carousel .arc-blog__title {
  transition: color 0.3s ease;
}

.arc-blog-carousel .arc-blog__card-link:focus-visible {
  outline-offset: 0.25rem;
}

/*
 * Harmonies:
 * - active .img { transform: scale(1.42) }（原点は中央）
 * - scale はレイアウトを押し広げないため、active 時だけ下方向のはみ出し分を
 *   margin-bottom で確保する（高さ ≈ 幅 × 10/16）。
 */
.arc-blog-carousel__media {
  --arc-blog-carousel-media-h: calc(var(--arc-blog-carousel-slide-w) * 10 / 16);
  --arc-blog-carousel-scale-bleed: calc(
    (var(--arc-blog-carousel-active-scale) - 1) / 2 * var(--arc-blog-carousel-media-h)
  );
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: var(--arc-blog-carousel-media-ratio);
  transform: scale(1);
  transform-origin: center center;
  /* 背面カード peek 用の余白（ブログブロックと同系） */
  margin-right: var(--arc-blog-carousel-reveal);
  margin-bottom: var(--arc-blog-carousel-reveal);
  transition:
    transform var(--arc-blog-carousel-zoom-duration) var(--arc-blog-carousel-zoom-ease),
    margin-bottom var(--arc-blog-carousel-zoom-duration) var(--arc-blog-carousel-zoom-ease);
  overflow: visible;
}

.arc-blog-carousel__slide.is-active .arc-blog-carousel__media {
  transform: scale(var(--arc-blog-carousel-active-scale));
  margin-bottom: calc(
    var(--arc-blog-carousel-scale-bleed) + var(--arc-blog-carousel-reveal)
  );
}

.arc-blog-carousel__media-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--arc-blog-card-bg, var(--arc-blog-accent, #2c2e36));
  transform: rotate(0deg);
  transform-origin: 100% 100%;
  transition: transform var(--arc-blog-carousel-hover-duration)
    var(--arc-blog-carousel-hover-ease);
  pointer-events: none;
}

/* 角丸は変数1か所（--arc-blog-card-radius 経由でブログ共通クラスにも効く） */
.arc-blog-carousel .arc-blog__media-bg,
.arc-blog-carousel .arc-blog__image-wrap,
.arc-blog-carousel .arc-blog-carousel__image {
  border-radius: var(--arc-blog-carousel-radius);
}

.arc-blog-carousel__media > .arc-blog__badge {
  top: var(--arc-blog-carousel-badge-top);
  right: var(--arc-blog-carousel-badge-right);
  width: var(--arc-blog-carousel-badge-size);
  height: var(--arc-blog-carousel-badge-size);
  font-size: var(--arc-blog-carousel-badge-font);
  transition: transform var(--arc-blog-carousel-hover-duration)
    var(--arc-blog-carousel-hover-ease);
}

.arc-blog-carousel__media > .arc-blog__badge--recommend,
.arc-blog-carousel__media > .arc-blog__badge--popular {
  font-size: var(--arc-blog-carousel-badge-font-sm);
}

.arc-blog-carousel__image-clip {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  transform: translate(0, 0);
  transition: transform var(--arc-blog-carousel-hover-duration)
    var(--arc-blog-carousel-hover-ease);
}

.arc-blog-carousel__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/*
 * テキスト帯: 中央拡大は1単位で scale（タイトル行数に依らずタグ間隔が一定）
 * タグは見出し a の外（ネスト禁止）だが同じ copy 内に置く
 */
.arc-blog-carousel__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--arc-blog-carousel-copy-gap);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  transform: scale(1);
  transform-origin: top center;
  margin-bottom: 0;
  transition:
    transform var(--arc-blog-carousel-zoom-duration) var(--arc-blog-carousel-zoom-ease),
    margin-bottom var(--arc-blog-carousel-zoom-duration) var(--arc-blog-carousel-zoom-ease);
}

.arc-blog-carousel__slide.is-active .arc-blog-carousel__copy {
  transform: scale(var(--arc-blog-carousel-active-scale));
  margin-bottom: calc((var(--arc-blog-carousel-active-scale) - 1) * 7.5em);
}

.arc-blog-carousel__slide .arc-blog__meta,
.arc-blog-carousel__slide .arc-blog__title,
.arc-blog-carousel__slide .arc-blog__tags {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.arc-blog-carousel__copy > .arc-blog__tags {
  z-index: 2;
}

/* 日付なしメタは左寄せでカテゴリーだけ（帯全体は画像中央に乗る） */
.arc-blog-carousel__slide .arc-blog__meta {
  justify-content: flex-start;
}

.arc-blog-carousel__nav {
  position: absolute;
  top: calc(
    clamp(3.5rem, 8vw, 5.5rem) +
      (var(--arc-blog-carousel-slide-w) * var(--arc-blog-carousel-active-scale) * 0.32)
  );
  left: 50%;
  transform: translateX(-50%);
  width: min(
    calc(var(--arc-blog-carousel-slide-w) * var(--arc-blog-carousel-active-scale) + 3.5rem),
    96%
  );
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 4;
}

.arc-blog-carousel__arrow {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--arc-brand-yellow, #ffe900);
  color: var(--arc-brand-dark, #2c2e36);
  cursor: pointer;
  box-shadow: 0 0.15rem 0.6rem rgba(44, 46, 54, 0.12);
  transition: transform 0.2s ease, background 0.2s ease;
}

.arc-blog-carousel__arrow:hover,
.arc-blog-carousel__arrow:focus-visible {
  background: color-mix(in srgb, var(--arc-brand-yellow, #ffe900) 80%, #fff);
  transform: scale(1.05);
}

.arc-blog-carousel__arrow:focus-visible {
  outline: 2px solid var(--arc-brand-dark, #2c2e36);
  outline-offset: 0.15rem;
}

.arc-blog-carousel__arrow-icon {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  border-top: 0.125rem solid currentColor;
  border-right: 0.125rem solid currentColor;
}

.arc-blog-carousel__arrow--prev .arc-blog-carousel__arrow-icon {
  transform: rotate(-135deg);
  margin-left: 0.15rem;
}

.arc-blog-carousel__arrow--next .arc-blog-carousel__arrow-icon {
  transform: rotate(45deg);
  margin-right: 0.15rem;
}

.arc-blog-carousel.arc-split-story--colorful {
  --arc-ss-heading-color: var(--arc-brand-dark, #2c2e36);
  --arc-ss-text-color: var(--arc-brand-dark, #2c2e36);
}

@media (max-width: 62rem) {
  .arc-blog-carousel.arc-showcase-section {
    --arc-blog-carousel-active-scale: 1.33;
    --arc-blog-carousel-slide-w: min(15.625rem, 44vw);
    --arc-blog-carousel-gap: clamp(3.5rem, 12vw, 5.3125rem);
    --arc-blog-carousel-radius: 2.5rem 2.5rem 2.5rem 0;
    --arc-blog-carousel-circle-size: min(36rem, 150vw);
  }

  .arc-blog-carousel__arrow {
    width: 2.25rem;
    height: 2.25rem;
  }
}

@media (max-width: 40rem) {
  .arc-blog-carousel.arc-showcase-section {
    /* Harmonies SP: scale(1.33), slide 210px */
    --arc-blog-carousel-active-scale: 1.33;
    --arc-blog-carousel-slide-w: min(13.125rem, 56vw);
    --arc-blog-carousel-gap: clamp(3.25rem, 14vw, 5.3125rem);
    --arc-blog-carousel-radius: 2.5rem 2.5rem 2.5rem 0;
    /* 吹き出し・コピーテキストを一回り小さく（変数差し替えのみ） */
    --arc-blog-carousel-badge-size: 2.75rem;
    --arc-blog-carousel-badge-font: 0.625rem;
    --arc-blog-carousel-badge-font-sm: 0.5rem;
    --arc-blog-carousel-badge-top: -0.85rem;
    --arc-blog-carousel-badge-right: -0.45rem;
    --arc-blog-carousel-copy-meta-size: 0.625rem;
    --arc-blog-carousel-copy-title-size: 0.8125rem;
  }

  .arc-blog-carousel__viewport {
    padding-top: clamp(2.75rem, 12vw, 3.75rem);
  }

  /*
   * SP アイキャッチ: 1:1 と 3:2 の中間 ≈ 5:4
   * 幅は slide-w（13.125rem）基準、高さ = 幅 × 4/5 = 10.5rem
   */
  .arc-blog-carousel__media {
    --arc-blog-carousel-media-h: calc(var(--arc-blog-carousel-slide-w) * 4 / 5);
    aspect-ratio: 5 / 4;
    height: auto;
  }

  .arc-blog-carousel__image-clip {
    height: 100%;
  }

  .arc-blog-carousel__copy .arc-blog__category,
  .arc-blog-carousel__copy .arc-blog__date,
  .arc-blog-carousel__copy .arc-blog__tags {
    font-size: var(--arc-blog-carousel-copy-meta-size);
  }

  .arc-blog-carousel__copy .arc-blog__title {
    font-size: var(--arc-blog-carousel-copy-title-size);
  }

  .arc-blog-carousel__nav {
    /* padding-top 下限 + メディア高さの半分（5:4 → 10.5rem / 2） */
    top: calc(2.75rem + 5.25rem);
    width: min(
      calc(var(--arc-blog-carousel-slide-w) * var(--arc-blog-carousel-active-scale) + 2rem),
      94%
    );
  }

  .arc-blog-carousel__glow {
    filter: blur(1.25rem);
  }
}

@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
  .arc-blog-carousel__glow {
    background: radial-gradient(
      circle at center,
      var(--arc-blog-carousel-glow, #2c2e36) 0%,
      transparent 62%
    );
    opacity: 0.4;
  }

  .arc-blog-carousel__arrow:hover,
  .arc-blog-carousel__arrow:focus-visible {
    background: #fff6a8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arc-blog-carousel.arc-showcase-section {
    --arc-blog-carousel-zoom-duration: 0.01s;
  }

  .arc-blog-carousel__slide,
  .arc-blog-carousel__media,
  .arc-blog-carousel__copy,
  .arc-blog-carousel__media-bg,
  .arc-blog-carousel__image-clip,
  .arc-blog-carousel__media > .arc-blog__badge,
  .arc-blog-carousel__arrow {
    transition: none;
  }
}