/* ─────────────────────────────────────────────────────────────────────────────
   ELEMENTOR RESET — keeps the theme, not the builder, in charge of layout.

   Every DataDemy widget draws its own full-width <section> with its own container and
   vertical rhythm. Elementor still wraps each widget in section > column > widget-wrapper
   divs, which ship with their own padding, max-width and flex rules. Left alone, those
   wrappers would inset every section, break the full-bleed dark/warm bands and double the
   page's vertical spacing.

   This file neutralises the wrappers so a DataDemy widget renders exactly as it does when
   the theme draws it directly. It is scoped to .dd-elementor-section / .dd-elementor-widget
   so any section an editor adds themselves keeps Elementor's normal behaviour.
   ───────────────────────────────────────────────────────────────────────────── */

/* The theme's page shell: full-bleed, because sections own their own spacing. */
.dd-page-flow { display: block; width: 100%; }

/* Section-level rhythm helpers used by the page-header and closing sections, reproducing
   the padding .dd-page used to apply to the whole page. */
.dd-section-top { padding-top: 96px; }
.dd-section-bottom { padding-bottom: 130px; }
@media (max-width: 900px) {
  .dd-section-top { padding-top: 48px; }
  .dd-section-bottom { padding-bottom: 56px; }
}

/* ---- Wrapper neutralisation ---- */
.dd-page-flow .elementor-section.dd-elementor-section,
.dd-page-flow .elementor-section.dd-elementor-section > .elementor-container,
.dd-page-flow .dd-elementor-section .elementor-column,
.dd-page-flow .dd-elementor-section .elementor-widget-wrap,
.dd-page-flow .elementor-widget.dd-elementor-widget,
.dd-page-flow .dd-elementor-widget > .elementor-widget-container {
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
}

/* Elementor's container is a centred, max-width flex row by default. DataDemy sections are
   full-bleed blocks that centre their own content via .dd-container. */
.dd-page-flow .elementor-section.dd-elementor-section > .elementor-container {
  display: block;
}

/* Elementor gives top-level sections a min-height and columns a flex basis; neither is
   wanted for a block that sizes to its content. */
.dd-page-flow .dd-elementor-section .elementor-column { min-height: 0; }

/* Elementor's default `.elementor-section-boxed` inner max-width must not apply. */
.dd-page-flow .dd-elementor-section.elementor-section-boxed > .elementor-container { max-width: none; }

/* ---- Editor canvas ----
   Inside the builder, Elementor adds an empty-state min-height and placeholder chrome that
   makes full-bleed sections hard to read. Keep sections visually separated so an editor can
   see and click each one. */
.elementor-editor-active .dd-elementor-section { min-height: 0; }
.elementor-editor-active .dd-elementor-widget { outline-offset: -2px; }

/* ---- Hero collage photos ----
   A collage tile is a fixed grid area with a border-radius mask and a float animation. When
   an editor sets a photo, it fills that tile absolutely and is cropped by object-fit, so the
   tile's aspect ratio, mask, position and motion are unchanged — only the fill differs. */
.hero-collage-grid > div { position: relative; }
.hero-collage-grid > div > .hero-collage-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
}
.hero-collage-grid > div > span { position: relative; z-index: 1; }
/* With a photo behind it, the label needs a scrim to stay legible at any photo brightness. */
.hero-collage-grid > div.has-photo > span {
  background: rgba(21, 18, 15, .55);
  color: #fff !important;
  padding: 4px 9px;
  border-radius: 999px;
  backdrop-filter: blur(2px);
}

/* ---- Empty-state notice for an unconfigured form (shown to admins only) ---- */
.dd-form-empty {
  font-family: var(--dd-font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(21, 18, 15, .55);
  border: 1px dashed rgba(21, 18, 15, .22);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 0;
}

/* ── Editor safety guard ──────────────────────────────────────────────────────
   Belt-and-braces for the invisible-widget failure.

   Every DataDemy section carries [data-reveal], which is opacity:0 until reveal.js adds
   .is-visible. In the Elementor editor a widget is re-rendered over AJAX, and the theme's
   Elementor bridge re-runs reveal.js over the replacement — but if that bridge ever fails
   to load (a JS error elsewhere, a caching plugin mangling the bundle, an Elementor API
   change), a section would silently render invisible and look like it is loading forever.

   Inside the editor, reveal animation is not wanted anyway: an editor needs to SEE what they
   are editing, immediately. So the editor forces every section visible and disables the
   entrance transition entirely. This cannot affect the front end — the body class is only
   present in Elementor's editor preview. */
.elementor-editor-active [data-reveal],
.elementor-editor-preview [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Same reasoning for the milestone chips on the learning-journey timeline. */
.elementor-editor-active [data-mile],
.elementor-editor-preview [data-mile] {
  opacity: 1 !important;
  transform: none !important;
}