/* v0.7 S12: final offer — 数量限定｜最大30%OFF */
/* 「スカイラインを活かすエディトリアル・オファー」案           */
/* sections.css の旧 .s12 定義を安全に上書き                     */

/* ────────────────────────────────────────────
   セクション基盤 — 旧 .s12 を上書き
──────────────────────────────────────────── */
.s12 {
  position: relative;
  min-height: clamp(680px, 78vh, 840px);
  overflow: hidden;
  background: var(--color-dark, #0f0f0e);
  color: #fff;
  display: flex;
  align-items: center;
}

.s12__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.s12__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 44% center;
}

.s12__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(15,15,14,.92) 0%, rgba(15,15,14,.78) 42%, rgba(15,15,14,.18) 82%);
}

.s12__content {
  position: relative;
  z-index: 3;
  width: min(calc(100% - 3rem), var(--content-wide));
  margin-inline: auto;
  padding: clamp(3.5rem, 5vw, 5.5rem) 0;
}

.s12__copy {
  display: grid;
  gap: 1.25rem;
  width: min(540px, 48vw);
}

/* ────────────────────────────────────────────
   タイポグラフィ階層
──────────────────────────────────────────── */

/* 動的小ラベル (data-phase-label) */
.s12 .section-label {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .24em;
  color: rgba(255, 255, 255, .72);
  text-transform: uppercase;
  margin-bottom: .2rem;
}

/* カウントダウン枠 (data-countdown) */
.s12 .countdown {
  display: none;
  font-size: clamp(.85rem, 1.2vw, 1.05rem);
  font-weight: 700;
  color: #55f055;
  letter-spacing: .08em;
  margin-bottom: .4rem;
}

.s12 .countdown.is-visible {
  display: block;
}

/* 主見出し: 数量限定｜最大30%OFF */
.s12__title {
  margin: 0 !important;
  line-height: 1.2 !important;
  color: #fff;
  font-weight: 700;
}

.s12__headline-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .4rem;
}

.s12__limited {
  font-size: clamp(0.85rem, 1.25vw, 1.08rem);
  font-weight: 700;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .75);
}

.s12__divider {
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  color: rgba(255, 255, 255, .4);
}

.s12__discount-block {
  display: inline-flex;
  align-items: baseline;
  gap: .2rem;
  line-height: 1;
}

.s12__max {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 700;
  color: rgba(255, 255, 255, .9);
  letter-spacing: .02em;
}

.s12__discount-number {
  font-size: clamp(3.8rem, 6.5vw, 5.8rem);
  font-weight: 800;
  font-family: "M PLUS 1", var(--font-sans);
  color: #ffffff;
  letter-spacing: -.02em;
  line-height: .9;
}

.s12__discount-unit {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 800;
  color: #ffffff;
  margin-left: .15rem;
}

/* 本文 & クーポン強調 */
.s12 .section-body {
  color: rgba(255, 255, 255, .82);
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  line-height: 1.9;
  margin: 0;
}

.s12__coupon-highlight {
  font-weight: 700;
  color: #ffffff;
  background: rgba(0, 185, 0, 0.22);
  padding: 2px 6px;
  border-radius: 3px;
  border-bottom: 1px solid rgba(0, 185, 0, 0.6);
  white-space: nowrap;
}

/* 最終CTA 配置調整 (ボタン自体は統一スタイル適用) */
.s12 .line-cta.line-cta--s1-spec {
  margin-top: .4rem;
  justify-self: start;
}

/* CTA下部注釈 */
.s12 .cta-note {
  margin: 0;
  font-size: .78rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .55);
}

/* ────────────────────────────────────────────
   SP レイアウト（900px以下）
──────────────────────────────────────────── */
@media (max-width: 900px) {
  .s12 {
    min-height: clamp(600px, 82vh, 720px);
    align-items: flex-end;
  }

  .s12__overlay {
    background: linear-gradient(to top, rgba(15,15,14,.95) 62%, rgba(15,15,14,.35) 88%, rgba(15,15,14,.1) 100%);
  }

  .s12__content {
    width: 100%;
    padding: 2.5rem 1.5rem max(2.5rem, calc(1.875rem + env(safe-area-inset-bottom)));
  }

  .s12__copy {
    width: 100%;
    gap: 1rem;
  }

  .s12__discount-number {
    font-size: clamp(3.2rem, 14vw, 4.4rem);
  }

  .s12__discount-unit {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
  }

  .s12 .line-cta.line-cta--s1-spec {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }
}

@media (max-width: 380px) {
  .s12__headline-row {
    gap: .2rem;
  }
}

/* ────────────────────────────────────────────
   アニメーション (既存 data-reveal をそのまま利用)
──────────────────────────────────────────── */
.s12__copy[data-reveal],
.s12 .section-label[data-reveal],
.s12__title[data-reveal],
.s12 .section-body[data-reveal],
.s12 .line-cta[data-reveal],
.s12 .cta-note[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

.s12__copy.is-visible,
.s12 .section-label.is-visible,
.s12__title.is-visible,
.s12 .section-body.is-visible,
.s12 .line-cta.is-visible,
.s12 .cta-note.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .s12__copy[data-reveal],
  .s12 .section-label[data-reveal],
  .s12__title[data-reveal],
  .s12 .section-body[data-reveal],
  .s12 .line-cta[data-reveal],
  .s12 .cta-note[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}