/* CANAL PASS — Channel Updates block (single-channel classic list reuses
   news-frontend.css; this file covers the Timeline view — a 2-column
   "zigzag" masonry layout, or a single "one side" column). */

.cpau-timeline-wrap {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}
.cpau-timeline-heading {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0b1b2b;
  margin: 0 0 16px;
}

/* ---- Shared: date/time, title, excerpt, tags ---- */
.cpau-timeline-date {
  font-size: .72rem;
  color: #6b7c8f;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
  cursor: default;
}
.cpau-timeline-title {
  font-size: .96rem;
  font-weight: 600;
  color: #0b1b2b;
  margin: 0 0 6px;
}
.cpau-timeline-excerpt {
  font-size: .86rem;
  color: #3b4e62;
  line-height: 1.5;
  margin: 0 0 8px;
}
.cpau-timeline-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cpau-tag {
  background: #f5f7fa;
  color: #0a3d62;
  font-size: .68rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---- Shared: pulsing dot markers ----
   - .is-latest  → subtle navy pulse on the newest item's marker
   - .is-urgent  → always red + a more noticeable pulse; wins over
                   .is-latest styling when an item is both (source-order
                   below beats .is-latest since specificity is equal) */
@keyframes cpau-pulse-navy {
  0%, 100% { box-shadow: 0 0 0 2px rgba(10,61,98,.28), 0 0 10px 3px rgba(10,61,98,.28); }
  50%      { box-shadow: 0 0 0 4px rgba(10,61,98,.12), 0 0 14px 5px rgba(10,61,98,.16); }
}
@keyframes cpau-pulse-red {
  0%, 100% { box-shadow: 0 0 0 3px rgba(178,59,59,.38), 0 0 16px 5px rgba(178,59,59,.45); }
  50%      { box-shadow: 0 0 0 6px rgba(178,59,59,.16), 0 0 22px 8px rgba(178,59,59,.28); }
}
.cpau-timeline-dot.is-latest {
  animation: cpau-pulse-navy 2.8s ease-in-out infinite;
}
.cpau-timeline-dot.is-urgent {
  background: #b23b3b;
  border-color: #b23b3b;
  animation: cpau-pulse-red 2.1s ease-in-out infinite;
}

/* ---- Shared scroll wrapper ---- */
.cpau-vtimeline-scroll {
  overflow-y: auto;
  /* No border/background — the block blends into the page instead of
     looking like a boxed widget. Generous horizontal padding keeps the
     line/markers from feeling glued to the edge of the content column. */
  padding: 16px 36px;
}
.cpau-vtimeline-scroll::-webkit-scrollbar { width: 6px; }
.cpau-vtimeline-scroll::-webkit-scrollbar-thumb { background: #dde4ec; border-radius: 3px; }
.cpau-vtimeline-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---- Shared item marker (dot + connector stub to the line) ----
   The marker box is the ONLY reserved gap between content and the
   line — columns/containers themselves carry no extra padding for
   this, so the math for "where does the dot land" stays in one place. */
.cpau-vtimeline-item {
  position: relative;
  display: flex;
  margin-bottom: 20px;
}
.cpau-vtimeline-item:last-child { margin-bottom: 0; }

.cpau-vtimeline-marker {
  position: relative;
  width: 26px;
  flex: 0 0 26px;
}
.cpau-vtimeline-marker .cpau-vtimeline-connector {
  position: absolute;
  top: 9px;
  left: 0;
  right: 0;
  height: 2px;
  background: #dde4ec;
}
.cpau-vtimeline-marker .cpau-timeline-dot {
  position: absolute;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #0a3d62;
  box-sizing: border-box;
  z-index: 1;
}
.cpau-timeline-content { min-width: 0; flex: 1; }

/* ============================================================
   ZIGZAG — single sequential list, one item per row, alternating
   which side of a shared centerline the item renders on. Strict
   sequential order keeps dots at regular intervals (no independent
   columns racing ahead of each other and bunching markers up).
   ============================================================ */
.cpau-vtimeline--zigzag {
  position: relative;
}
.cpau-vtimeline--zigzag::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #dde4ec;
  transform: translateX(-50%);
  z-index: 0;
}
.cpau-vtimeline--zigzag .cpau-vtimeline-item {
  width: 50%;
  box-sizing: border-box;
}
.cpau-vtimeline--zigzag .cpau-vtimeline-item.is-left {
  margin-left: 0;
  flex-direction: row-reverse;
  text-align: right;
}
.cpau-vtimeline--zigzag .cpau-vtimeline-item.is-left .cpau-timeline-tags { justify-content: flex-end; }
.cpau-vtimeline--zigzag .cpau-vtimeline-item.is-right {
  margin-left: 50%;
}
.cpau-vtimeline--zigzag .cpau-vtimeline-item.is-left .cpau-timeline-dot { right: -7px; }
.cpau-vtimeline--zigzag .cpau-vtimeline-item.is-right .cpau-timeline-dot { left: -7px; }

@media (max-width: 640px) {
  /* Zigzag needs width to breathe — collapse to a single side below that. */
  .cpau-vtimeline--zigzag::before { left: 6px; transform: none; }
  .cpau-vtimeline--zigzag .cpau-vtimeline-item,
  .cpau-vtimeline--zigzag .cpau-vtimeline-item.is-left,
  .cpau-vtimeline--zigzag .cpau-vtimeline-item.is-right {
    width: 100%;
    margin-left: 0;
    flex-direction: row;
    text-align: left;
  }
  .cpau-vtimeline--zigzag .cpau-vtimeline-item.is-left .cpau-timeline-tags { justify-content: flex-start; }
  .cpau-vtimeline--zigzag .cpau-timeline-dot,
  .cpau-vtimeline--zigzag .cpau-vtimeline-item.is-left .cpau-timeline-dot,
  .cpau-vtimeline--zigzag .cpau-vtimeline-item.is-right .cpau-timeline-dot {
    left: -1px;
    right: auto;
  }
}

/* ============================================================
   ONE SIDE — single column, one continuous line, all markers on
   one edge. "right" = updates/content on the right, line on the
   left (the original design); "left" mirrors it, line on the right.
   ============================================================ */
.cpau-vtimeline--oneside {
  position: relative;
}
.cpau-vtimeline--oneside::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #dde4ec;
}

/* "right": line/dot on the LEFT edge, content in normal reading order. */
.cpau-vtimeline--oneside.is-right::before { left: -1px; }
.cpau-vtimeline--oneside.is-right .cpau-timeline-dot { left: -7px; }

/* "left": mirrored — line/dot on the RIGHT edge, content stays normally
   left-aligned, only the marker flips to the item's other side. */
.cpau-vtimeline--oneside.is-left::before { right: -1px; }
.cpau-vtimeline--oneside.is-left .cpau-vtimeline-item { flex-direction: row-reverse; }
.cpau-vtimeline--oneside.is-left .cpau-timeline-dot { right: -7px; }

/* ============================================================
   Channel vessel-count display (Northbound / Southbound circles)
   ============================================================ */
.cpau-stats-display {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  text-align: center;
  /* Establishes a container query context so, by default (no explicit
     --small/--medium/--large size class), the circles scale to whatever
     column/card width this block is actually placed in — not the
     viewport. Falls back gracefully to the clamp() bounds below in
     browsers without container query support. */
  container-type: inline-size;
}
.cpau-stats-circle-row {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 8cqw, 36px);
}
.cpau-stats-circle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 1.6cqw, 10px);
}
.cpau-stats-circle {
  /* Diameter shrunk from the original clamp(36px…72px) — font-size below
     is untouched, so the numbers stay the same size, just less padding
     around them. */
  width: clamp(28px, 17cqw, 54px);
  height: clamp(28px, 17cqw, 54px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e2ca89;
  border: 2px solid #c9a86a;
  color: #0b1b2b;
  font-size: clamp(.85rem, 7cqw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
}
.cpau-stats-label {
  /* --cpau-label-scale is set inline on the wrapper (default 1) so the
     "Label text size" slider nudges this up/down without breaking the
     responsive clamp()/cqw sizing underneath it. */
  font-size: calc(clamp(.58rem, 3.2cqw, .74rem) * var(--cpau-label-scale, 1));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  /* White + a soft shadow — this block sits on the dark photo-background
     canal cards, where the previous muted navy label was unreadable. */
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  white-space: nowrap;
}
.cpau-stats-freshness {
  /* Pulled in close to the circles, per feedback — was clamp(6px…14px). */
  margin-top: clamp(2px, 1cqw, 5px);
  font-size: clamp(.66rem, 2.6cqw, .78rem);
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* "center" mode — freshness note sits in the gap between the two circles
   instead of a separate row underneath, so the whole block stays compact.
   align-items:end (not center) — with center, the note lands at the
   midpoint of the *whole* label+circle stack, which visually reads as
   sitting up near the labels. end pins it level with the circles instead. */
.cpau-stats-display--freshness-center .cpau-stats-circle-row {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: end;
  justify-content: center;
  gap: clamp(6px, 3cqw, 14px);
}
.cpau-stats-freshness--center {
  margin-top: 0;
  /* Nudges up from the circle's bottom edge toward its vertical center. */
  margin-bottom: clamp(8px, 5cqw, 18px);
  /* Was clamp(.5rem….62rem) originally, then a small bump to .68-.84rem
     that still read as too small in a real card. Sized up again, further —
     bold stays for the same reason: make it stand out, not just fit. */
  font-size: clamp(.82rem, 4cqw, 1rem);
  font-weight: 700;
  line-height: 1.2;
  max-width: 92px;
  white-space: normal;
  text-align: center;
}

/* ---- Explicit size overrides — fixed values, ignore container width,
   for when exact manual control is wanted regardless of context. Circle
   diameters shrunk, font-sizes kept as before so the numbers don't shrink. ---- */
.cpau-stats-display--small .cpau-stats-circle-row { gap: 18px; }
.cpau-stats-display--small .cpau-stats-circle-item { gap: 4px; }
.cpau-stats-display--small .cpau-stats-circle { width: 34px; height: 34px; font-size: 1rem; }
.cpau-stats-display--small .cpau-stats-label { font-size: calc(.62rem * var(--cpau-label-scale, 1)); letter-spacing: .04em; }
.cpau-stats-display--small .cpau-stats-freshness { font-size: .68rem; margin-top: 4px; }

.cpau-stats-display--medium .cpau-stats-circle-row { gap: 26px; }
.cpau-stats-display--medium .cpau-stats-circle-item { gap: 8px; }
.cpau-stats-display--medium .cpau-stats-circle { width: 44px; height: 44px; font-size: 1.3rem; }
.cpau-stats-display--medium .cpau-stats-label { font-size: calc(.68rem * var(--cpau-label-scale, 1)); }
.cpau-stats-display--medium .cpau-stats-freshness { font-size: .74rem; margin-top: 5px; }

.cpau-stats-display--large .cpau-stats-circle-row { gap: 36px; }
.cpau-stats-display--large .cpau-stats-circle-item { gap: 10px; }
.cpau-stats-display--large .cpau-stats-circle { width: 54px; height: 54px; font-size: 1.6rem; }
.cpau-stats-display--large .cpau-stats-label { font-size: calc(.74rem * var(--cpau-label-scale, 1)); }
.cpau-stats-display--large .cpau-stats-freshness { font-size: .78rem; margin-top: 6px; }