/* ============================================================
   Production-only overrides — kept SEPARATE from hifi-styles.css
   so a re-export from Claude Design doesn't blow these away.
   ============================================================ */

/* THE BIG ONE — Claude Design's outer .hf wrapper has a fixed
   width: 1280px which is the artboard size. On any viewport
   smaller than 1280px, the right side gets clipped (because
   .hf also has overflow: hidden). Override to fluid + max. */
.hf {
  width: 100% !important;
  max-width: 1280px;
}

/* Prevent any stray horizontal scroll caused by tiny overflows
   in child elements (e.g. video iframes that briefly exceed). */
html, body {
  overflow-x: hidden;
}

/* Empty-state placeholder when MEDIA["hero.video"] / MEDIA["short.N.video"]
   is unset. Visitors normally never see this once URLs are filled. */
.hf-video-poster-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  display: block;
}

/* Empty-state for Thomas portrait if MEDIA["thomas.portrait"] is unset. */
.hf-portrait-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
}

/* Hide the edit-mode hover/focus highlights on text spans entirely.
   The .hf-edit class is only added when ?edit=1 is in the URL, but
   leftover data-ck attributes shouldn't pick up any cursor:text styling
   in non-edit mode. */
[data-ck]:not(.hf-edit) {
  cursor: inherit;
}