/* ============================================================
   Peek-character hover effect
   Vegimax characters peek out from behind buttons/cards on hover.
   Pure CSS, no JS. Sibling-structure for true 'behind button' rendering.
   ============================================================ */

/* ----- Wrappers ----- */
.peek-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.peek-wrap > .btn-primary,
.peek-wrap > .btn-ghost {
  position: relative;
  z-index: 1;
}

.peek-wrap-card {
  position: relative;
  display: block;
}
.peek-wrap-card > .vs-card {
  position: relative;
  z-index: 1;
}

/* ----- 3-V cards hover (Venture/Value/Vegetable) ----- */
.vs-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: default;
}
.vs-card:hover {
  transform: translateY(-3px);
}
.vs-card:not(.vs-card-accent):hover {
  box-shadow: 0 24px 48px -24px rgba(17,94,89,0.18);
  border-color: var(--accent);
}
.vs-card-accent:hover {
  box-shadow: 0 28px 48px -20px rgba(17,94,89,.65);
}

/* ----- Base character ----- */
.peek-char {
  position: absolute;
  width: 60px;
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  pointer-events: none;
  /* Default: top peek (head pops up from button's top edge) */
  top: 50%;
  right: 12px;
  transform: translateY(-30%) scale(0.85);
  opacity: 0;
  z-index: 0;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.25s ease;
}

/* ----- Character variants (per letter) ----- */
.peek-char-v { background-image: url('../images/20220924_V.png'); }
.peek-char-e { background-image: url('../images/20220924_E.png'); }
.peek-char-g { background-image: url('../images/20220924_G.png'); }
.peek-char-i { background-image: url('../images/20220924_I.png'); }
.peek-char-m { background-image: url('../images/20220924_M.png'); }
.peek-char-a { background-image: url('../images/20220924_A.png'); }
.peek-char-x { background-image: url('../images/20220924_X.png'); }

/* ----- Default hover: peek UP from button's top ----- */
.peek-wrap:hover .peek-char {
  opacity: 1;
  transform: translateY(-95%) scale(1);
}

/* ----- Size: small (header button) ----- */
.peek-char-sm {
  width: 46px;
  height: 46px;
}

/* ----- Direction variant: peek from RIGHT side (for buttons near top edge) ----- */
.peek-char-right {
  /* Reset top-peek defaults */
  top: 50%;
  right: 0;
  /* Initial: hidden behind button, vertically centered */
  transform: translateY(-50%) translateX(0) scale(0.85);
}
.peek-wrap:hover .peek-char-right {
  opacity: 1;
  /* Slide right so character pokes out the right edge */
  transform: translateY(-50%) translateX(75%) scale(1);
}

/* ----- Card variant: peek from CENTER TOP of card ----- */
.peek-char-card {
  width: 70px;
  height: 70px;
  top: 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(-30%) scale(0.85);
}
.peek-wrap-card:hover .peek-char-card {
  opacity: 1;
  transform: translateX(-50%) translateY(-80%) scale(1);
}

/* ----- prefers-reduced-motion: skip the spring, just fade in ----- */
@media (prefers-reduced-motion: reduce) {
  .peek-char {
    transition: opacity 0.2s ease;
  }
  .peek-wrap:hover .peek-char {
    transform: translateY(-95%) scale(1);
  }
  .peek-wrap:hover .peek-char-right {
    transform: translateY(-50%) translateX(75%) scale(1);
  }
  .peek-wrap-card:hover .peek-char-card {
    transform: translateX(-50%) translateY(-80%) scale(1);
  }
}

/* ============================================================
   Breaking-news (速報) badge + notice block
   Color: #E8483B (independent red, not derived from --accent)
   ============================================================ */

/* Red badge — shared between card thumbnails and article-detail headers.
   Base values match .article-tag (card thumbnail context). The detail-page
   header context overrides below to match .article-detail-cat sizing. */
.article-flash-badge {
  display: inline-block;              /* match .article-detail-cat box model; .article-tag in wrapper is also non-flex */
  gap: 0.2rem;                        /* harmless on inline-block (no effect), kept for ::before margin reference */
  padding: 0.35rem 0.8rem;            /* match .article-tag */
  background: #E8483B;
  color: #fff;
  border-radius: 9999px;              /* pill, match .article-tag */
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.66rem;                 /* match .article-tag */
  letter-spacing: 0.08em;             /* match .article-tag */
  font-weight: 700;
  /* line-height intentionally not set — inherit body's 1.5 like .article-tag and .article-detail-cat do */
  white-space: nowrap;
}
.article-flash-badge::before {
  content: '⚡';
  display: inline-flex;
  align-items: center;
  font-size: 0.85em;                  /* shrink icon weight to balance with sibling labels */
  line-height: 1;
}

/* Detail-page header context — match .article-detail-cat sizing exactly */
.article-detail-cat + .article-flash-badge {
  padding: 4px 12px;                  /* exact match with .article-detail-cat */
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-family: inherit;
}

/* Card variant: a wrapper that lets article-tag and article-flash-badge
   sit side-by-side on the thumbnail's top-left. New cards always emit
   this wrapper; existing 15 cards predate it and keep the bare
   <span class="article-tag">. CSS handles both shapes. */
.article-thumb-tags {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.article-thumb-tags .article-tag {
  position: static;
  top: auto;
  left: auto;
}

/* Independent ⚡ toggle on /articles, sits to the right of the category tabs */
.filter-flash-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  margin-left: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #E8483B;
  background: #FFF;
  border: 1px solid #E8483B;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.filter-flash-toggle:hover { background: #FDECEA; }
.filter-flash-toggle.is-active {
  background: #E8483B;
  color: #fff;
}
.filter-flash-toggle .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 0.45rem;
  border-radius: 9999px;
  background: rgba(232,72,59,0.12);
  font-size: 0.7rem;
  font-weight: 700;
  font-family: 'Inter Tight','Inter',sans-serif;
  color: #E8483B;
}
.filter-flash-toggle.is-active .count {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

/* Notice block — placed inside .article-detail-body, just before the lead paragraph */
.article-flash-notice {
  margin: 0 0 2rem;
  padding: 0.85rem 1.1rem;
  background: #FDECEA;
  border-left: 3px solid #E8483B;
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.7;
  color: #6B1A12;
}
.article-flash-notice strong {
  color: #E8483B;
  font-weight: 700;
}

/* ============================================================
   Article timeline (4-milestone migration/sunset schedule)
   Used in article-19 onwards. Horizontal on desktop, vertical
   on mobile. Pure HTML+CSS, no JS, no SVG. Designed to coexist
   with .article-table and .article-summary-grid.
   ============================================================ */
.article-timeline {
  margin: 32px 0 28px;
  padding: 28px 18px 18px;
  background: var(--accent-wash);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.article-timeline-row {
  display: flex;
  position: relative;
}
.article-timeline-row::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--accent);
  opacity: 0.45;
  z-index: 0;
}
.article-timeline-step {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 6px;
}
.article-timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: var(--accent);
  border: 3px solid var(--accent-wash);
  margin: 0 auto 12px;
}
.article-timeline-date {
  font-family: 'Inter Tight','Inter',sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-dark);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.article-timeline-event {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
}
@media (max-width: 640px) {
  .article-timeline {
    padding: 20px 18px 16px;
  }
  .article-timeline-row {
    flex-direction: column;
    gap: 18px;
  }
  .article-timeline-row::before {
    top: 8px;
    bottom: 8px;
    left: 7px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .article-timeline-step {
    text-align: left;
    padding: 0 0 0 28px;
  }
  .article-timeline-dot {
    position: absolute;
    left: 0;
    top: 1px;
    margin: 0;
  }
}