/* ─────────────────────────────────────────────────────────────────────────
   Liminal Events — single event page stylesheet

   Scope: the article region only. WordPress wraps this with the theme's
   get_header() / get_footer(). Typography (font family, weights, size,
   line-height, link colors) inherits from the host theme — DO NOT
   hardcode them.

   Honors the existing Customizer variables exposed by the plugin:
     --le-heading           Event H1 color
     --le-accent            Primary brand accent (powers the hero block,
                             CTA button, category emphasis)
     --le-ongoing-border    Left-border accent for ongoing events
     --le-card-bg           Surface tint
     --le-card-border       Hairline border on cards
     --le-card-shadow       Subtle elevation
     --le-muted             Muted text color
     --le-rule              Hairline rule color
     --le-radius            Corner radius (default to 0 — squared off)
     --le-gap               Default vertical rhythm

   Adds two internally-derived tokens (computed from --le-accent so the
   page stays cohesive on any host palette — site admins never have to
   pick more than one color):
     --le-accent-tint   soft-tinted surface behind the date block
     --le-accent-strong slightly darker accent for the bar/CTA hover

   No JS. Pure CSS. Mobile-friendly via one breakpoint.
   ───────────────────────────────────────────────────────────────────────── */

.liminal-events {
  /* Customizer defaults — overridden by theme.json / Customizer */
  --le-heading: #1a1a1a;
  --le-accent: #2a2a2a;
  --le-ongoing-border: var(--le-accent);
  --le-card-bg: #f6f4ef;
  --le-card-border: rgba(0, 0, 0, 0.12);
  --le-card-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  --le-muted: rgba(0, 0, 0, 0.55);
  --le-rule: rgba(0, 0, 0, 0.12);
  --le-radius: 0px;
  --le-gap: 16px;

  /* Derived tokens — leave alone */
  --le-rule-strong: color-mix(in oklab, var(--le-heading) 28%, transparent);
  --le-accent-tint: color-mix(in oklab, var(--le-accent) 14%, var(--le-card-bg));
  --le-accent-fg: color-mix(in oklab, var(--le-accent) 70%, var(--le-heading));
  --le-accent-strong: var(--le-accent);
  --le-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  color: var(--le-heading);
  /* font-family inherits from theme */
}

/* ─────────────────────────────────────────────────────────────────────────
   Breadcrumb
   ───────────────────────────────────────────────────────────────────────── */
.liminal-events__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--le-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--le-muted);
  margin-bottom: 28px;
}
.liminal-events__breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.liminal-events__breadcrumb a:last-child {
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.liminal-events__breadcrumb-sep {
  opacity: 0.5;
}

/* ─────────────────────────────────────────────────────────────────────────
   Hero — colored date block + title
   ───────────────────────────────────────────────────────────────────────── */
.liminal-events__hero {
  display: grid;
  grid-template-columns: 260px 1fr;
  /* --le-cat-tint / --le-cat-bar are set inline per-post via the palette.
     Fall back to the accent-derived tokens when no category is set. */
  background: var(--le-cat-tint, var(--le-accent-tint));
  border-left: 4px solid var(--le-cat-bar, var(--le-accent));
  border-radius: var(--le-radius);
  margin-bottom: 32px;
}
.liminal-events[data-event-type="ongoing"] .liminal-events__hero {
  grid-template-columns: 240px 1fr;
  border-left-color: var(--le-ongoing-border, var(--le-cat-bar, var(--le-accent)));
}

.liminal-events__hero-date {
  padding: 36px 28px;
  border-right: 1px solid color-mix(in oklab, var(--le-heading) 14%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 220px;
  color: var(--le-cat-fg, var(--le-accent-fg));
}
.liminal-events__hero-month,
.liminal-events__hero-weekday,
.liminal-events__hero-time,
.liminal-events__hero-status-label {
  font-family: var(--le-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}
.liminal-events__hero-day {
  font-size: clamp(64px, 8vw, 88px);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--le-heading);
}
.liminal-events__hero-day-end {
  font-size: 0.55em;
  font-weight: 500;
  opacity: 0.55;
}
.liminal-events__hero-weekday {
  margin-top: 8px;
  opacity: 0.7;
}
.liminal-events__hero-time {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklab, var(--le-heading) 14%, transparent);
  letter-spacing: 0.06em;
  opacity: 0.9;
}
.liminal-events__hero-status {
  font-size: clamp(32px, 3.5vw, 42px);
  line-height: 1.0;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 8px;
  color: var(--le-heading);
  /* Don't break "Ongoing" mid-word if it ever runs tight. */
  word-break: keep-all;
  overflow-wrap: normal;
}

.liminal-events__hero-body {
  padding: 36px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Category kicker — supports multiple terms */
.liminal-events__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.liminal-events__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--le-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--le-cat-fg, var(--le-accent-fg));
  background: color-mix(in oklab, var(--le-cat-bar, var(--le-accent)) 18%, var(--le-card-bg));
  text-decoration: none;
  white-space: nowrap;
}
.liminal-events__cat::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--le-cat-bar, var(--le-accent));
}

.liminal-events__title {
  font-family: inherit; /* host theme heading font cascades through */
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.024em;
  margin: 0;
  color: var(--le-heading);
  text-wrap: balance;
}

/* ─────────────────────────────────────────────────────────────────────────
   Fact strip — only renders when at least one fact is present.
   Each fact row only renders when its field has a value (handled in PHP).
   ───────────────────────────────────────────────────────────────────────── */
.liminal-events__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: baseline;
  padding: 16px 0 22px;
  border-bottom: 1px solid var(--le-rule-strong);
  margin-bottom: 36px;
}
.liminal-events__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.liminal-events__fact-label {
  font-family: var(--le-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}
.liminal-events__fact-value {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
/* Credits / CEUs — visually distinct (key qualifier for pros) */
.liminal-events__fact--credits .liminal-events__fact-value {
  display: inline-block;
  font-family: var(--le-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  background: color-mix(in oklab, var(--le-accent) 22%, var(--le-card-bg));
  border: 1px solid color-mix(in oklab, var(--le-accent) 45%, transparent);
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Two-col layout: main + sticky aside
   ───────────────────────────────────────────────────────────────────────── */
.liminal-events__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: flex-start;
}
.liminal-events__main {
  min-width: 0;
}
.liminal-events__featured {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--le-rule);
  border-radius: var(--le-radius);
  margin-bottom: 32px;
}

/* Body (post_content) — host typography inherits, we just style rhythm */
.liminal-events__body { color: var(--le-heading); }
.liminal-events__body > :first-child {
  font-size: 19px;
  line-height: 1.6;
  margin-top: 0;
}
.liminal-events__body > * + * { margin-top: 16px; }
.liminal-events__body p {
  font-size: 16px;
  line-height: 1.62;
  color: color-mix(in oklab, var(--le-heading) 82%, transparent);
  margin: 0;
}
.liminal-events__body p:first-of-type {
  font-size: 19px;
  color: var(--le-heading);
}
.liminal-events__body a {
  color: inherit;            /* inherit theme link color */
}
.liminal-events__body ul,
.liminal-events__body ol {
  font-size: 16px;
  line-height: 1.62;
  color: color-mix(in oklab, var(--le-heading) 82%, transparent);
  padding-left: 1.4em;
  margin: 0;
}
.liminal-events__body li + li { margin-top: 6px; }

/* ─────────────────────────────────────────────────────────────────────────
   Sidebar
   ───────────────────────────────────────────────────────────────────────── */
.liminal-events__aside {
  position: sticky;
  top: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.liminal-events__cta {
  padding: 22px;
  border: 1px solid var(--le-rule-strong);
  background: var(--le-card-bg);
  border-radius: var(--le-radius);
  box-shadow: var(--le-card-shadow);
}
.liminal-events__cta-label {
  font-family: var(--le-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--le-muted);
  margin-bottom: 12px;
}
.liminal-events__cta-context {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 14px;
  color: var(--le-heading);
}
.liminal-events__cta-blurb {
  font-size: 13px;
  line-height: 1.55;
  color: var(--le-muted);
  margin-bottom: 16px;
}
/* `:where()` zeroes specificity for the COLOR rules so the host theme's
 * `.button` styles (Beaver Builder Theme's Buttons customizer, theme.json
 * block button color, etc.) win when present, while these plugin defaults
 * still apply on themes that don't style `.button`. Layout/structure
 * rules stay at normal specificity since themes never override those.
 */
.liminal-events__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
:where(.liminal-events__btn) {
  background: var(--le-accent);
  color: var(--le-card-bg);
}
:where(.liminal-events__btn:hover) {
  background: color-mix(in oklab, var(--le-accent) 85%, var(--le-heading));
}
.liminal-events__btn:focus-visible {
  outline: 2px solid var(--le-accent);
  outline-offset: 3px;
}
.liminal-events__btn svg { flex: 0 0 auto; }

/* "Add to calendar" group — between primary CTA and back-link */
.liminal-events__addcal {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.liminal-events__addcal-label {
  font-family: var(--le-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--le-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--le-rule-strong);
}
.liminal-events__addcal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.liminal-events__addcal-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--le-rule-strong);
  border-radius: 999px;
  font-family: var(--le-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--le-heading);
  text-decoration: none;
  background: transparent;
  transition: background 0.15s;
}
.liminal-events__addcal-link:hover,
.liminal-events__addcal-link:focus {
  background: color-mix(in oklab, var(--le-heading) 6%, transparent);
  text-decoration: none;
}

.liminal-events__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.liminal-events__contact-label {
  font-family: var(--le-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--le-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--le-rule-strong);
  margin-bottom: 12px;
}
.liminal-events__contact-name {
  font-size: 14px;
  font-weight: 600;
}
.liminal-events__contact-email {
  font-size: 13px;
  color: var(--le-muted);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
}

.liminal-events__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--le-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--le-muted);
  text-decoration: none;
  margin-top: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile — single column. Aside above body so the CTA is visible early.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .liminal-events { padding: 20px 18px 48px; }
  .liminal-events__hero {
    grid-template-columns: 1fr;
    border-left-width: 3px;
  }
  .liminal-events[data-event-type="ongoing"] .liminal-events__hero {
    grid-template-columns: 1fr;
  }
  .liminal-events__hero-date {
    border-right: none;
    border-bottom: 1px solid color-mix(in oklab, var(--le-heading) 14%, transparent);
    min-height: 0;
    padding: 22px 20px;
  }
  .liminal-events__hero-day {
    font-size: 64px;
  }
  .liminal-events__hero-body {
    padding: 24px 20px;
  }
  .liminal-events__facts {
    gap: 18px;
    padding: 14px 0 18px;
    margin-bottom: 28px;
  }
  .liminal-events__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .liminal-events__aside {
    position: static;
    order: -1; /* CTA above body content on mobile */
  }
}