/**
 * Axadle Breaking News — Corner Ribbon + Banners
 *
 * Visual language:
 *   • Corner ribbon on every listing thumbnail (top-right, diagonal)
 *     – .ax-ribbon-corner     = large  (Classic-3, grid-1, blog-* images)
 *     – .ax-ribbon-corner.ax-ribbon-sm = small (Classic-1/2 thumbs 72-110 px)
 *   • Full-width banner bar for blog-3 (text-only row), single-post header
 *   • Pulsing white live-dot on the ribbon corner for "Breaking" status
 *
 * Two status colours:
 *   .ax-ribbon-breaking  — #c0392b red
 *   .ax-ribbon-update    — #c0620d amber
 *
 * Injection is done by initBreakingNewsBanners() in axadle-modern.js.
 *
 * @package Axadle
 * @version 1.1.0
 */

/* ==============================================================
   1. PULSING DOT ANIMATION (shared)
   ============================================================== */

@keyframes ax-live-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.3; transform: scale(0.55); }
}

/* ==============================================================
   2. CORNER RIBBON — injected into .featured / article
   ============================================================== */

.ax-ribbon-corner {
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;        /* clips the rotated span */
  z-index: 10;
  pointer-events: none;

  /* Default / large size */
  width: 120px;
  height: 120px;
}

/* The diagonal strip */
.ax-ribbon-corner span {
  position: absolute;
  display: block;
  width: 170px;
  padding: 10px 0;
  text-align: center;
  top: 28px;
  right: -42px;
  transform: rotate(45deg);

  font-family: var(--ax-font-sans, system-ui, -apple-system, sans-serif);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ---- Colour variants ---- */
.ax-ribbon-corner.ax-ribbon-breaking span { background: #c0392b; }
.ax-ribbon-corner.ax-ribbon-update   span { background: #c0620d; }

/* ---- Pulsing live dot — top-right corner of ribbon (Breaking only) ---- */
.ax-ribbon-corner.ax-ribbon-breaking::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.6);
  animation: ax-live-pulse 1.4s ease-in-out infinite;
  z-index: 11;
}

/* ==============================================================
   3. SMALL RIBBON — Classic-1 / Classic-2 thumbnails (72-110 px)
   ============================================================== */

.ax-ribbon-corner.ax-ribbon-sm {
  width: 80px;
  height: 80px;
}

.ax-ribbon-corner.ax-ribbon-sm span {
  width: 112px;
  padding: 7px 0;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  top: 19px;
  right: -28px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}

.ax-ribbon-corner.ax-ribbon-sm::after {
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.5);
}

/* ==============================================================
   4. CARD BORDER ACCENT — removed; ribbon on thumbnail is sufficient
   ============================================================== */

/* ==============================================================
   5. FULL-WIDTH INLINE BANNER (Blog-3, text-only rows)
   ============================================================== */

.ax-breaking-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.7rem;
  border-radius: 3px;
  font-family: var(--ax-font-sans, system-ui, sans-serif);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
  user-select: none;
  margin-bottom: 0.55rem;
  align-self: flex-start;
}

.ax-breaking-banner.ax-breaking-breaking { background: #c0392b; }
.ax-breaking-banner.ax-breaking-update   { background: #c0620d; }

/* Live dot inside inline banner */
.ax-breaking-banner .ax-breaking-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: ax-live-pulse 1.4s ease-in-out infinite;
}

/* ==============================================================
   6. SINGLE-POST HEADER BANNER
   ============================================================== */

.ax-breaking-single-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.1rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  font-family: var(--ax-font-sans, system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.ax-breaking-single-header.ax-breaking-breaking { background: #c0392b; }
.ax-breaking-single-header.ax-breaking-update   { background: #c0620d; }

.ax-breaking-single-header .ax-breaking-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: ax-live-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* ==============================================================
   7. DARK MODE
   ============================================================== */

/* Ribbon colours don't change between light/dark — already opaque solid backgrounds */

/* ==============================================================
   8. REDUCED MOTION
   ============================================================== */

@media (prefers-reduced-motion: reduce) {
  .ax-ribbon-corner.ax-ribbon-breaking::after,
  .ax-breaking-banner .ax-breaking-dot,
  .ax-breaking-single-header .ax-breaking-dot { animation: none; opacity: 1; }
}

/* ==============================================================
   9. PRINT
   ============================================================== */

@media print {
  .ax-ribbon-corner,
  .ax-breaking-banner,
  .ax-breaking-single-header { display: none !important; }
}