/* shared */
/* ============================================================
   Circus Extreme — Shared block utilities
   ------------------------------------------------------------
   Emitted ONCE, before any block CSS, by both the frontend and
   admin asset endpoints (/adz-blocks-css/). Block stylesheets
   may override anything here with block-scoped selectors.

   Keep this small. It is downloaded on every block page, so only
   genuinely cross-block patterns belong here — anything used by
   a single block belongs in that block's own stylesheet.
   ============================================================ */

/* ── Container ────────────────────────────────────────────────
   Replaces Bootstrap's .container. Blocks are full-bleed
   sections; this constrains their inner content.
   ─────────────────────────────────────────────────────────── */

.ce-container {
  width: 100%;
  max-width: var(--container-max, 1320px);
  margin-inline: auto;
  padding-inline: var(--container-pad, 20px);
}

.ce-container--narrow {
  max-width: 900px;
}

/* ── Section rhythm ─────────────────────────────────────────── */

.ce-section {
  position: relative;
  padding-block: var(--section-y, 100px);
}

.ce-section--tight {
  padding-block: calc(var(--section-y, 100px) / 2);
}

.ce-section--flush-top    { padding-top: 0; }
.ce-section--flush-bottom { padding-bottom: 0; }

/* ── Section headings ───────────────────────────────────────── */

.ce-section-head {
  max-width: 62ch;
  margin-bottom: var(--space-lg, 40px);
}

.ce-section-head > * + * {
  margin-top: var(--space-xs, 8px);
}

/* Tagline above or below the title, per the block's own field. */
.ce-eyebrow {
  display: inline-block;
  color: var(--circus-yellow);
  font-family: var(--body-font);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ── Media ──────────────────────────────────────────────────── */

.ce-media {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
}

.ce-media img,
.ce-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reserves the aspect ratio while an image loads, so blocks below
   do not jump once it arrives. */
.ce-media--16x9 { aspect-ratio: 16 / 9; }
.ce-media--4x3  { aspect-ratio: 4 / 3; }
.ce-media--1x1  { aspect-ratio: 1 / 1; }

/* ── Cards ──────────────────────────────────────────────────── */

.ce-card {
  background: var(--circus-card-bg);
  border-radius: 20px;
  padding: var(--space-md, 24px);
  color: var(--color-white);
}

/* ── Social icon row ────────────────────────────────────────── */

.ce-social {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ce-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-white-color);
  color: var(--color-white);
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}

.ce-social a:hover,
.ce-social a:focus-visible {
  color: var(--circus-purple);
  background: var(--circus-yellow);
  border-color: var(--circus-yellow);
}

/* ── Anchor offset ──────────────────────────────────────────
   The header is sticky, so an in-page anchor would otherwise
   land underneath it.
   ─────────────────────────────────────────────────────────── */

[id] {
  scroll-margin-top: calc(var(--header-height, 86px) + 20px);
}