/* Slate — shared creative renderer styles.
   Loaded everywhere window.AquaOSCreativeRenderer is used: kiosk
   display, campaign-editor preview, share previews, email previews.
   Source-of-truth: kept in sync with the inline block in
   public/cms-original/index.html (lines 7611–7740) so the editor's
   "what you see is what you ship" promise actually holds.

   Every rule scopes through .cp-slide so it never bleeds into the
   surrounding chrome. Dark on purpose — these styles describe the
   physical screen content, not the CMS chrome.
*/

/* Phase 18: .cp-slide is a container-query root itself, so the
   creative's type/scale rules resolve even when the slide is
   injected into a parent that isn't wrapped (legacy overlay layers,
   share-preview, email previews, etc). Belt-and-braces with the
   .ce-preview-frame / #app / .preview-frame roots.
   Live-test fix: container-type: size so aspect-ratio queries
   (portrait + square branches) resolve. .cp-slide is absolute
   with inset:0 so its size is fully parent-determined. */
.cp-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
  container-type: size;
  container-name: species-card;
}

.cp-slide .cp-bg-image {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.55);
}
.cp-slide video.cp-bg-image,
.cp-slide .cp-bg-video {
  width: 100%; height: 100%;
  object-fit: cover;
}

.cp-element-canvas { position: absolute; inset: 0; overflow: hidden; }
.cp-el-canvas-bg-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  object-fit: cover;
  filter: brightness(0.72);
}
.cp-el {
  position: absolute;
  box-sizing: border-box;
  overflow: visible;
}
.cp-el-text-inner { width: 100%; height: 100%; white-space: pre-wrap; overflow: hidden; }
.cp-el-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(255,255,255,0.35); border-radius: 8px;
  color: rgba(255,255,255,0.58);
  font-size: 16px;
  background: rgba(255,255,255,0.06);
}
.cp-el-button-inner { box-sizing: border-box; }

.cp-slide .cp-bg-tint,
.cp-slide .cp-bg-gradient { position: absolute; inset: 0; }
.cp-slide .cp-bg-gradient { mix-blend-mode: multiply; }

.cp-slide .cp-content {
  position: relative; z-index: 1;
  padding: 6% 8%;
  max-width: 80%;
}

/* Phase 18: cqw (container-query width) — type scales with the
   preview frame, not the viewport. Same declarations fire on the
   kiosk where container-name: species-card is set on #app, so a
   creative looks proportional on both surfaces. Viewport fallbacks
   retained via @supports for older browsers. */
.cp-slide h1 {
  font-size: 4.2cqw; font-weight: 800; line-height: 1.05;
  margin: 0 0 0.4em; letter-spacing: -0.02em;
}
.cp-slide .cp-subtitle    { font-size: 2cqw;   opacity: 0.85; margin-bottom: 0.4em; }
.cp-slide .cp-description { font-size: 1.3cqw; line-height: 1.5; max-width: 36em; opacity: 0.92; margin-bottom: 1.2em; }
.cp-slide .cp-cta {
  display: inline-block;
  padding: 0.7em 1.6em; border-radius: 99px;
  font-weight: 700; font-size: 1.2cqw;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--cp-accent, var(--brand-primary, #00c8b4));
  color: #001a3d;
}

@supports not (container-type: inline-size) {
  .cp-slide h1 { font-size: 4.2vw; }
  .cp-slide .cp-subtitle { font-size: 2vw; }
  .cp-slide .cp-description { font-size: 1.3vw; }
  .cp-slide .cp-cta { font-size: 1.2vw; }
}

.cp-slide .cp-logo {
  position: absolute; top: 3%; right: 3%;
  max-height: 8%; max-width: 20%;
  z-index: 2; opacity: 0.9;
}

/* Split layout */
.cp-split { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.cp-split .cp-media { background-size: cover; background-position: center; }
.cp-split video.cp-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-split .cp-side { padding: 6% 7%; display: flex; flex-direction: column; justify-content: center; }
.cp-split .cp-footer { margin-top: 1em; font-size: 0.9cqw; opacity: 0.65; }

/* QR layout */
.cp-qr-focus { flex-direction: column; gap: 1.2em; }
.cp-qr-focus .cp-qr-img {
  width: 30%; aspect-ratio: 1/1;
  background: #fff;
  border-radius: 12px; padding: 1em;
  display: flex; align-items: center; justify-content: center;
  color: #000;
  font-family: var(--aqos-ff-sans, 'Inter', system-ui, sans-serif); font-size: 0.9cqw; text-align: center;
}

/* Countdown */
.cp-countdown-clock {
  font-size: 8cqw; font-weight: 800; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; line-height: 1;
}

/* Offer */
.cp-offer-price  { font-size: 7cqw; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.cp-offer-strike { font-size: 2.5cqw; text-decoration: line-through; opacity: 0.6; margin-right: 0.3em; }
.cp-offer-badge  {
  display: inline-block;
  padding: 0.2em 0.6em; border-radius: 6px;
  background: #ef4444; color: #fff;
  font-weight: 700; font-size: 1.4cqw;
  transform: rotate(-4deg);
}

/* Conservation */
.cp-stat-row { font-size: 3cqw; font-weight: 700; }
.cp-progress-track {
  width: 100%; height: 14px;
  border-radius: 99px; background: rgba(255,255,255,0.15);
  overflow: hidden;
  margin: 1em 0;
}
.cp-progress-fill { height: 100%; background: var(--cp-accent, var(--brand-primary, #00c8b4)); }

/* Empty-slot placeholder — visible in editor preview, not on real
   screens (the renderer skips emitting the placeholder on kiosks). */
.cp-empty-slot {
  border: 2px dashed rgba(255,255,255,0.15); border-radius: 6px;
  padding: 0.4em 0.8em;
  color: rgba(255,255,255,0.4);
  font-size: 0.9cqw; text-align: center;
}

@supports not (container-type: inline-size) {
  .cp-qr-focus .cp-qr-img { font-size: 0.9vw; }
  .cp-countdown-clock    { font-size: 8vw; }
  .cp-offer-price        { font-size: 7vw; }
  .cp-offer-strike       { font-size: 2.5vw; }
  .cp-offer-badge        { font-size: 1.4vw; }
  .cp-stat-row           { font-size: 3vw; }
  .cp-empty-slot         { font-size: 0.9vw; }
}