/* ==========================================================================
   JStore City Clocks Widget — Task 3
   ========================================================================== */

.jstore-clock-widget {
  background: var(--adg-surface);
  border: 1px solid var(--adg-bdr);
  border-radius: var(--r-lg);
  padding: 16px;
  overflow: hidden;
}

.jstore-clock-widget__label {
  font-family: var(--f-mono);
  font-size: 8px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--adg-gold);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 14px;
}

/* ── 3-column grid on desktop, 2-col tablet, 1-col mobile ─────────── */
.jstore-clock-widget__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 1023px) { .jstore-clock-widget__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .jstore-clock-widget__grid { grid-template-columns: 1fr; } }

/* ── Clock face card ──────────────────────────────────────────────── */
.jstore-clock-face {
  background: var(--adg-card-bg);
  border: 1px solid var(--adg-bdr);
  border-radius: var(--r-md);
  padding: 12px 14px 10px;
  transition: background 180ms ease, border-color 180ms ease;
}
.jstore-clock-face:hover {
  background: var(--adg-card-bg-h);
  border-color: rgba(196,146,10,.22);
}

/* ── Header row: flag, abbr, offset, sync dot ─────────────────────── */
.jstore-clock-face__header {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 6px;
}
.jstore-clock-face__flag   { font-size: 13px; line-height: 1; }
.jstore-clock-face__abbr   {
  font-family: var(--f-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--adg-text2);
}
.jstore-clock-face__offset {
  font-family: var(--f-mono); font-size: 8px; color: var(--adg-muted);
  margin-left: auto;
}

/* ── Sync indicator dot ───────────────────────────────────────────── */
.jstore-clock__sync {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--adg-muted); opacity: .4;
  transition: background 300ms ease, opacity 300ms ease;
  flex-shrink: 0;
}
.jstore-clock__sync.is-synced {
  background: var(--type-researcher); /* green */
  opacity: 1;
  animation: sync-pulse 2s ease-out 1;
}
@keyframes sync-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(24,135,106,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(24,135,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(24,135,106,0); }
}

/* ── Time display ─────────────────────────────────────────────────── */
.jstore-clock__time {
  font-family: var(--f-mono);
  font-size: 22px; font-weight: 600; letter-spacing: .04em;
  color: var(--adg-text);
  line-height: 1;
  margin-bottom: 4px;
  /* Monospace digits prevent layout jitter on each tick */
  font-variant-numeric: tabular-nums;
}

.jstore-clock-face__date {
  font-family: var(--f-mono); font-size: 9px;
  color: var(--adg-muted); letter-spacing: .04em;
}