/* embed.css: loads after city.css (its tokens, countdown tiles, midnight state and .back-link are reused, not copied).
   1. The embed pages, /embed/ and /embed/{slug}/ (templates/embed.html): one card that fills an iframe from 250 x 150 pixels up with
      no scrollbar. Sizes come from the frame (vw, vh), because inside an iframe those are the frame. assets/city.js drives the
      countdown; the midnight state is city.css's: the greeting is laid over the tiles and the caption, nothing moves.
   2. The "Embed this countdown" block on the city pages and the homepage (scripts/pages/embed.js). */

/* ===== The embed page ===== */
.embed, .embed body { height: 100%; }
.embed body {
  display: block; min-height: 0; overflow: hidden;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(192,132,252,0.20), transparent 62%),
    radial-gradient(100% 80% at 100% 100%, rgba(56,189,248,0.12), transparent 62%),
    var(--bg);
}
[data-theme="light"] .embed body {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(192,132,252,0.22), transparent 62%),
    radial-gradient(100% 80% at 100% 100%, rgba(56,189,248,0.16), transparent 62%),
    var(--bg);
}
.embed-card {
  box-sizing: border-box; height: 100%; max-width: 100%;
  display: grid; grid-template: auto minmax(0, 1fr) auto / minmax(0, 1fr); row-gap: clamp(0.2rem, 2vh, 0.6rem); /* one column that may not outgrow the frame */
  padding: clamp(0.55rem, 4.6vh, 1.15rem) clamp(0.7rem, 4.4vw, 1.5rem);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* City on the left, the year on the right: the city may be cut with an ellipsis, the year never. */
.embed-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; min-width: 0; margin: 0;
  font-size: 1rem; font-weight: 400; line-height: 1.15;
}
.embed-title__main {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: clamp(1.05rem, min(6.4vw, 11vh), 1.9rem); font-weight: 800; letter-spacing: -0.01em; color: var(--text);
}
.embed-title__side {
  flex: none; font-size: clamp(0.68rem, min(3.3vw, 5.4vh), 0.9rem); font-weight: 600; color: var(--text-secondary);
}

/* The tiles and the caption sit in the middle row, centred in whatever height is left. */
.embed-countdown { align-self: center; min-width: 0; }
.embed .countdown-grid { gap: clamp(0.25rem, 1.8vw, 0.6rem); margin-bottom: clamp(0.25rem, 2vh, 0.55rem); }
.embed .countdown-unit {
  padding: clamp(0.34rem, 3.6vh, 0.95rem) 0.15rem clamp(0.3rem, 3vh, 0.8rem); border-radius: clamp(0.5rem, 1.5vw, 0.85rem);
}
.embed .countdown-num { font-size: clamp(1.35rem, min(9.4vw, 19vh), 3.1rem); }
.embed .countdown-lbl { margin-top: clamp(0.2rem, 1.2vh, 0.45rem); font-size: clamp(0.56rem, min(2.1vw, 3.6vh), 0.74rem); letter-spacing: 0.1em; }
.embed .countdown-label-city { font-size: clamp(0.68rem, min(3.1vw, 5.2vh), 0.86rem); line-height: 1.35; }
.embed .celebration-msg { padding: 0 0.25rem; font-size: clamp(1rem, min(6.4vw, 11vh), 2rem); overflow-wrap: anywhere; }

/* The branded link back: city.css's .back-link, sized for the frame, with colours that read on both themes. */
.embed-brand { margin: 0; text-align: center; }
.embed-brand__link {
  display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 0.15rem;
  font-size: clamp(0.8rem, min(3.9vw, 6.6vh), 1.05rem);
  background-image: linear-gradient(135deg, #FF6B6B, #C084FC, #38BDF8);
}
[data-theme="light"] .embed-brand__link { background-image: linear-gradient(135deg, #b91c1c, #6d28d9, #075985); }

/* ===== The "Embed this countdown" block ===== */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.embed-cta { padding: 1.15rem 1.1rem 1.2rem; }
/* On the homepage the block sits under the FAQ and is capped like it: the same width from the same breakpoint (home.css .home-faq). */
@media (min-width: 960px) {
  main.home-main > .embed-cta { max-width: 50rem; }
}
.embed-cta .section-title { margin-bottom: 0.5rem; }
.embed-cta__text { max-width: 62ch; margin: 0 0 0.9rem; font-size: 0.9375rem; line-height: 1.6; color: var(--text-secondary); }
.embed-cta__code {
  margin: 0; padding: 0.8rem 0.95rem;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: rgba(0,0,0,0.28);
  color: var(--body-text); font: 500 0.74rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
[data-theme="light"] .embed-cta__code { background: rgba(255,255,255,0.72); }
.embed-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.85rem; }
.embed-cta__copy {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.5rem 1.15rem;
  border: 1px solid var(--hairline-strong); border-radius: 999px; background: var(--surface); color: var(--text);
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.embed-cta__copy:hover { background: var(--glass-hover); border-color: var(--ink-accent); }
.embed-cta__copy.is-copied { border-color: var(--accent-5); }
[data-theme="light"] .embed-cta__copy.is-copied { border-color: #047857; }
.embed-cta__hint { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--text-secondary); }