/* ── Block editor preview overrides ───────────────────────────
   Loaded only inside the block editor (enqueue_block_assets).
   Scoped to the Gutenberg canvas so frontend is unaffected.    */

/* Normalise the editor body to match front-end base */
.editor-styles-wrapper {
  font-family: var(--ff-body, system-ui, sans-serif);
  background: var(--foam, #EEF7FA);
  color: var(--text, #0E1F27);
}

/* Give each block preview a subtle focus ring in the editor */
.wp-block.is-selected > .acf-block-preview {
  outline: 2px solid rgba(63, 167, 201, 0.5);
  outline-offset: 2px;
}

/* ── Hero preview: static gradient replaces live canvas ──────*/
.acf-block-preview .hero {
  min-height: 340px;
  background: linear-gradient(160deg, #07171F 0%, #0C2733 40%, #1B4A60 70%, #1B6589 100%);
  position: relative;
  overflow: hidden;
}
.acf-block-preview .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(63,167,201,0.18) 0%, transparent 70%),
    linear-gradient(to bottom, transparent 60%, rgba(6,18,26,0.55) 100%);
  pointer-events: none;
}
/* Hide the canvas element in editor (no JS animation) */
.acf-block-preview .hero__canvas { display: none; }
/* Ensure hero content is visible */
.acf-block-preview .hero__content {
  position: relative;
  z-index: 1;
  padding: 48px 32px 32px;
  pointer-events: none;
}
.acf-block-preview .hero__scroll { display: none; }

/* ── Section blocks: constrain height in preview ────────────*/
.acf-block-preview .section { padding: 36px 0; }
.acf-block-preview .photo-strip { margin-top: 24px; }

/* ── Results table preview spacing ──────────────────────────*/
.acf-block-preview .bg-depth { padding: 32px 0; }

/* ── Wave dividers: keep visible but reduce height ──────────*/
.acf-block-preview .wave-divider svg { height: 40px; }

/* ── Pull quote preview ──────────────────────────────────────*/
.acf-block-preview .pull-quote p {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
}

/* ── Gallery preview: smaller grid ──────────────────────────*/
.acf-block-preview .gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.acf-block-preview .gallery-item { aspect-ratio: 4/3; }