/* ============================================================
   AXL Block Library — shared styles.
   Blocks lean on Bootstrap utilities/variables first. The whole
   library now inherits the "The Explorer" episode look through the
   Bootstrap design tokens defined in theme.css (buttons, cards,
   badges, borders, radii, form controls, typography).

   Below are the bespoke, structural rules that Bootstrap + tokens
   cannot express — each one ported from the approved Episode 001
   design (episode.css) and namespaced .axl-<block>.
   ============================================================ */

/* Editor empty-state placeholder. */
.axl-empty { background: var(--bs-tertiary-bg, #f8f9fa); }

/* Shared heading component spacing. */
.axl-heading { margin-bottom: var(--bs-gutter-x, 1.5rem); }
.axl-heading__intro { max-width: 60ch; }
.axl-heading.text-center .axl-heading__intro { margin-inline: auto; }

/* Episode ".bighead" pattern: inline icon + bold tracked uppercase label. */
.axl-bighead {
  display: flex; align-items: center; gap: 11px;
  color: var(--axl-blue); font-weight: 700; font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase;
}
.axl-bighead svg { flex: none; }

/* Generic "cover" background used by Hero / CTA. */
.axl-cover {
  background-size: cover;
  background-position: center;
  position: relative;
}
.axl-cover__overlay { position: absolute; inset: 0; background: rgba(19, 28, 63, var(--axl-overlay, .45)); }
.axl-cover > .container,
.axl-cover > .container-fluid { position: relative; z-index: 1; }

/* --- hero ---
   Episode hero: 800-weight uppercase headline with balanced wrapping. */
.axl-hero .axl-heading__title {
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Text colour modes. theme.css sets explicit branded colours on the eyebrow,
   headings and intro, so a plain .text-white on the section can't override
   them — these modifiers do, keeping the copy legible over any background. */
.axl-hero--light .axl-heading__title,
.axl-hero--light h1, .axl-hero--light h2, .axl-hero--light h3,
.axl-hero--light h4, .axl-hero--light h5, .axl-hero--light h6 { color: #fff; }
.axl-hero--light .axl-eyebrow { color: #C6D4F5; }
.axl-hero--light .axl-heading__intro,
.axl-hero--light .axl-hero__content { color: rgba(255, 255, 255, .92); }
/* Soft shadow lifts light text off busy images. */
.axl-hero--light .axl-heading,
.axl-hero--light .axl-hero__content { text-shadow: 0 1px 12px rgba(19, 28, 63, .45); }

.axl-hero--dark .axl-heading__title,
.axl-hero--dark h1, .axl-hero--dark h2, .axl-hero--dark h3,
.axl-hero--dark h4, .axl-hero--dark h5, .axl-hero--dark h6 { color: var(--axl-ink-2); }
.axl-hero--dark .axl-eyebrow { color: var(--axl-blue); }
.axl-hero--dark .axl-heading__intro { color: var(--axl-muted); }

/* The subtitle and the copy under it are one thought, so they read closer than
   the heading block's own bottom margin puts them: that margin is sized to
   separate a heading from a SECTION.

   It is the LARGER of the two margins here, which is the whole reason this rule
   exists. `.axl-heading`'s 24px bottom margin and `.axl-hero__content`'s `mt-3`
   are adjacent siblings in normal flow, so they collapse to the bigger one —
   the 16px `mt-3` never applied at all, and raising or lowering it changed
   nothing. Zeroing this side hands the gap back to `mt-3`: 24px -> 16px.

   Guarded by `:has()` so it only fires when that copy is actually present: with
   no content the heading keeps its full margin against the buttons below, which
   is the gap it was written for. */
.axl-hero .axl-heading:has(+ .axl-hero__content) { margin-bottom: 0; }

/* Editor-authored body copy under the subtitle. Sits outside .axl-heading, so
   it takes its own colour rules above; the last-child reset stops the trailing
   paragraph's margin fighting the buttons' own top margin. */
.axl-hero__content > :last-child { margin-bottom: 0; }
.axl-hero--light .axl-hero__content a { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }

/* Height presets — give the hero a minimum height and vertically centre the
   content (the inner container fills the width so text alignment is unchanged). */
.axl-hero--medium,
/* A hero with a declared minimum height centres its copy in that height. Only
   `--tall` used to, so a `--medium` hero reserved 60vh and then pinned its copy to
   the top of it, leaving the dead band underneath that the About page shows. */
.axl-hero--tall,
.axl-hero--medium { display: flex; align-items: center; }
.axl-hero--medium { min-height: 60vh; }
.axl-hero--tall { min-height: 85vh; }
.axl-hero--medium > .container,
.axl-hero--medium > .container-fluid,
.axl-hero--tall > .container,
.axl-hero--tall > .container-fluid { width: 100%; }

/* Media = Video: the embed takes the foreground image's place, framed like a
   card — 16px radius, hairline border and a soft drop shadow. */
.axl-hero__video {
  border: 1px solid var(--axl-line);
  border-radius: 1rem;
  overflow: hidden;
  background: #0B0E2D;
  box-shadow: 0 18px 40px -22px rgba(19, 28, 63, .55);
}

/* ============================================================
   Wide / full-width block alignment.
   The editor offers "Wide" and "Full" (theme supports align-wide), but a
   CLASSIC theme has to supply the CSS — WordPress only styles these itself in
   block themes. The page shell is capped at 1440px and centred, so:
     • Wide  → the block's inner container widens to fill the page shell.
     • Full  → the block breaks out to the full viewport width (edge to edge)
               while its inner .container keeps the text boxed and centred.
   ============================================================ */
.axl-page .alignwide > .container,
.axl-page .alignwide > .container-fluid { max-width: 100%; }
.axl-page .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- feature-grid ---
   Icon sits in the episode's soft tile box (.tile .box). */
.axl-feature-grid__icon {
  width: 52px; height: 52px;
  background: #F1F2F5; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.axl-feature-grid__icon-img { max-width: 32px; max-height: 32px; }

/* --- icon-list --- episode .checkrow: 14px rows, 13px gap. */
.axl-icon-list li,
.axl-icon-list .col > div { font-size: 14px; gap: 13px !important; }
.axl-icon-list__icon { line-height: 0; }

/* --- stats --- episode counter boxes (.cd div). */
.axl-stats__box {
  background: #F1F2F4; border-radius: 10px;
  padding: 18px 12px 14px;
}
.axl-stats__num {
  font-size: 32px; font-weight: 800; color: var(--axl-ink-2);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.axl-stats__label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--axl-muted);
}

/* --- countdown --- episode teaser counter (.cd). */
.axl-countdown__unit--box {
  background: #F1F2F4; border-radius: 10px;
  width: 80px; padding: 12px 0 10px;
}
.axl-countdown__num {
  font-size: 28px; font-weight: 800; color: var(--axl-ink-2);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.axl-countdown__label {
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  color: var(--axl-muted);
}

/* --- timeline --- episode mission timeline (.tl). */
.axl-timeline__list { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.axl-timeline__item { gap: 24px; font-size: 14.5px; }
.axl-timeline__time {
  color: var(--axl-blue); flex-basis: 46px;
  font-variant-numeric: tabular-nums;
}

/* --- downloads --- episode activity-pack tiles (.tile.dl). */
.axl-downloads__tile { border-radius: 10px; font-size: 13.5px; }
.axl-downloads__tile:hover { border-color: var(--axl-btn-outline); }
.axl-downloads__box { background: #F1F2F5; border-radius: 8px; height: 84px; }

/* --- newsletter --- episode subscribe row (.sub). */
.axl-newsletter__card { border-radius: 20px; padding: 22px; gap: 22px; }
.axl-newsletter__text { font-size: 13.5px; min-width: 220px; }
.axl-newsletter__form { max-width: 480px; min-width: 260px; }

/* --- quote --- heavier ink like the episode log copy. */
.axl-quote blockquote { color: var(--axl-ink-2); font-weight: 600; }
.axl-quote .blockquote-footer::before { content: none; }

/* --- testimonials --- brand carousel chrome on light backgrounds. */
.axl-testimonials .carousel-indicators [data-bs-target] { background-color: var(--axl-blue); }
.axl-testimonials .carousel-control-prev-icon,
.axl-testimonials .carousel-control-next-icon { filter: invert(1) grayscale(1) brightness(.3); }

/* --- tabs --- episode mission-log tabs (.tab). */
.axl-tabs .nav-tabs { border-bottom: 1px solid var(--axl-line); }
.axl-tabs .nav-tabs .nav-link {
  border: 0; border-radius: 0; padding: 13px 18px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #7A8496;
}
.axl-tabs .nav-tabs .nav-link.active {
  color: var(--axl-blue); background: transparent;
  box-shadow: inset 0 -3px 0 var(--axl-blue);
}
.axl-tabs .nav-tabs .nav-link:focus-visible { outline: 2px solid var(--axl-blue); outline-offset: -2px; }
.axl-tabs .nav-pills .nav-link { font-weight: 700; letter-spacing: .04em; }

/* --- breadcrumbs --- episode .crumbs: muted 13px with › separators. */
.axl-breadcrumbs .breadcrumb {
  --bs-breadcrumb-divider: '\203A';
  font-size: 13px; color: var(--axl-muted);
}
.axl-breadcrumbs .breadcrumb-item + .breadcrumb-item::before { font-weight: 700; color: var(--axl-muted); }
.axl-breadcrumbs .breadcrumb a { color: var(--axl-muted); text-decoration: none; }
.axl-breadcrumbs .breadcrumb a:hover { color: var(--axl-blue); }
.axl-breadcrumbs .breadcrumb-item.active { color: var(--axl-ink); }

/* --- pricing --- flat episode cards, heavy ink prices. */
.axl-pricing .display-5 { font-weight: 800; color: var(--axl-ink-2); }
.axl-pricing .card.border-primary { border-color: var(--axl-btn-outline); }
.axl-pricing .card.shadow { box-shadow: 0 10px 28px rgba(26, 38, 77, .12) !important; }

/* --- gallery / video / two-column / map --- episode media radii. */
.axl-gallery .ratio,
.axl-video .ratio,
.axl-map-embed .ratio { border-radius: 16px; overflow: hidden; }
.axl-gallery figcaption { font-size: 12.5px; }
.axl-two-column img { border-radius: 16px; }

/* --- logo-strip --- */
.axl-logo-img { max-height: 44px; width: auto; }
.axl-logo-gs { filter: grayscale(1); opacity: .65; transition: filter .2s, opacity .2s; }
a:hover > .axl-logo-gs,
.axl-logo-gs:hover { filter: none; opacity: 1; }

/* --- profile-cards --- episode crew cards. */
.axl-profiles__card { background: #fff; border: 1px solid var(--axl-line); border-radius: 16px; }
.axl-profiles__img { width: 96px; height: 96px; object-fit: cover; }
.axl-profiles__card small {
  text-transform: uppercase; font-weight: 700; letter-spacing: .05em; font-size: 11px;
}

/* --- episode-grid ---
   Renders the same `.card` / `.cover` / `.pill` markup as the episode archive
   feed, so the card itself is styled by axl-ui.css. Only the column count is
   ours: one up on phones, two on tablets, then the block's own setting. */
@media (min-width: 640px) {
  .axl-episode-grid__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .axl-episode-grid__cards { grid-template-columns: repeat(var(--axl-eg-cols, 3), 1fr); }
}

/* ============================================================
   Audio Player — ported from the holding page's theme-song bar
   (assets/static-holding-page/index.html), renamed to .axl-audio.
   The component carries its own dark ground and cyan ink, so it
   looks identical on the light site and the cosmic one; nothing
   here is inherited from the page around it.
   ============================================================ */
.axl-audio__player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding: 1.1rem 1.5rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(20, 26, 74, .9), rgba(11, 14, 45, .9));
  border: 1.5px solid rgba(100, 232, 255, .5);
  box-shadow: 0 0 24px rgba(100, 232, 255, .25), inset 0 0 20px rgba(100, 232, 255, .05);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .2s ease;
}

.axl-audio__player:hover {
  box-shadow: 0 0 32px rgba(100, 232, 255, .4), inset 0 0 20px rgba(100, 232, 255, .08);
}

.axl-audio__player:active { transform: scale(.99); }

.axl-audio__player:focus-visible {
  outline: 2px solid #64e8ff;
  outline-offset: 4px;
}

.axl-audio__left {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.axl-audio__wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 110px;
  height: 40px;
  flex: none;
  filter: drop-shadow(0 0 8px rgba(100, 232, 255, .5));
}

/* Bars are built by blocks.js; height is what the analyser drives. */
.axl-audio__wave span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #a8f0ff, #64e8ff);
  height: 20%;
  transition: height .1s ease;
}

.axl-audio__text {
  display: block;
  text-align: left;
  min-width: 0;
}

.axl-audio__eyebrow,
.axl-audio__title,
.axl-audio__subtitle { display: block; }

.axl-audio__eyebrow {
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #d8dcff;
}

.axl-audio__title {
  font-size: clamp(1rem, 3vw, 1.2rem);
  font-weight: 800;
  color: #64e8ff;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: .15rem 0;
}

.axl-audio__subtitle {
  font-size: 1rem;
  color: #a8b4ff;
}

.axl-audio__button {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: none;
}

.axl-audio__icon {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 0 10px rgba(100, 232, 255, .7));
  transition: transform .2s ease;
}

.axl-audio__player:hover .axl-audio__icon,
.axl-audio__player:focus-visible .axl-audio__icon {
  transform: scale(1.08);
}

.axl-audio__label {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
  line-height: 1.3;
}

@media (max-width: 560px) {
  .axl-audio__player { flex-direction: column; align-items: stretch; }
  .axl-audio__left { justify-content: center; text-align: center; }
  .axl-audio__text { text-align: center; }
  .axl-audio__button { justify-content: center; }
  .axl-audio__label { text-align: center; }
}