/*
 * ONEEXISTS v1.8.1 — Mega-panel dropdown for OBJECTS + PERSONALIZATION.
 * Loads after v170. Mobile: mega-panels stay hidden (drawer covers mobile nav).
 * Brief §8-9 & §22.
 */

/* ============================================================================
   MEGA PANEL — full-width, floats below header, hidden on mobile
   ============================================================================ */
.oe-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 90; /* below header (100), above page content */
  background: rgb(10 10 11 / 0.94);
  -webkit-backdrop-filter: blur(28px) saturate(1.1);
          backdrop-filter: blur(28px) saturate(1.1);
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  color: rgb(var(--oe-white));
  padding: clamp(1.75rem, 4vh, 3rem) 0 clamp(2rem, 5vh, 3.5rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 240ms var(--oe-ease-material),
              transform 320ms var(--oe-ease-material),
              visibility 0s linear 320ms;
  pointer-events: none;
}

.oe-mega[data-oe-mega-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 280ms var(--oe-ease-material),
              transform 380ms var(--oe-ease-material),
              visibility 0s linear 0s;
  pointer-events: auto;
}

.oe-mega__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr) minmax(0, 320px);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}

/* Column headings */
.oe-mega__heading {
  font-family: var(--oe-font-mono, "JetBrains Mono", monospace);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(var(--oe-white) / 0.55);
  margin: 0 0 1.25rem;
}

/* Item lists */
.oe-mega__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.oe-mega__list a,
.oe-mega__list span {
  display: inline-block;
  font-family: var(--oe-font-head, "Fraunces", serif);
  font-size: 0.9375rem;
  line-height: 1.9;
  color: rgb(var(--oe-white));
  text-decoration: none;
  padding: 0.1875rem 0;
  position: relative;
  transition: color 200ms var(--oe-ease-material);
}

.oe-mega__list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.375rem;
  height: 1px;
  background: currentColor;
  transition: right 260ms var(--oe-ease-material);
}
.oe-mega__list a:hover::after,
.oe-mega__list a:focus-visible::after { right: 0; }

/* Coming-soon dim state */
.oe-mega__soon {
  color: rgb(var(--oe-white) / 0.4);
  cursor: default;
}
.oe-mega__soon::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 0.5rem;
  opacity: 0.6;
}

/* Sub-navigation "View all…" link */
.oe-mega__more {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--oe-font-mono, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--oe-white) / 0.7);
  text-decoration: none;
  transition: color 200ms var(--oe-ease-material);
}
.oe-mega__more:hover,
.oe-mega__more:focus-visible { color: rgb(var(--oe-white)); }

/* Panel CTA button — same voice as ghost */
.oe-mega__cta {
  display: inline-block;
  margin-top: 1.75rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgb(var(--oe-white) / 0.4);
  color: rgb(var(--oe-white));
  font-family: var(--oe-font-ui, "Inter", sans-serif);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 240ms var(--oe-ease-material),
              background-color 240ms var(--oe-ease-material);
}
.oe-mega__cta:hover,
.oe-mega__cta:focus-visible {
  border-color: rgb(var(--oe-white));
  background: rgb(var(--oe-white) / 0.06);
}

/* Editorial feature — right-most column */
.oe-mega__feature {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  text-decoration: none;
  color: rgb(var(--oe-white));
  background-color: #000;
  isolation: isolate;
}
.oe-mega__feature-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 700ms var(--oe-ease-material);
}
.oe-mega__feature:hover .oe-mega__feature-media,
.oe-mega__feature:focus-visible .oe-mega__feature-media { transform: scale(1.04); }

.oe-mega__feature-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.15) 0%, transparent 45%, rgb(0 0 0 / 0.85) 100%);
}

.oe-mega__feature-body {
  position: absolute;
  left: clamp(1rem, 1.5vw, 1.5rem);
  right: clamp(1rem, 1.5vw, 1.5rem);
  bottom: clamp(1rem, 1.5vw, 1.5rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.oe-mega__feature-eyebrow {
  font-family: var(--oe-font-mono, monospace);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(var(--oe-white) / 0.7);
}

.oe-mega__feature-title {
  font-family: var(--oe-font-head, serif);
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-top: 0.125rem;
}

.oe-mega__feature-cta {
  font-family: var(--oe-font-mono, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--oe-white));
  margin-top: 0.625rem;
}

/* ============================================================================
   SCRIM — dark backdrop below mega, click-outside close
   ============================================================================ */
.oe-mega-scrim {
  position: fixed;
  inset: 0;
  z-index: 89; /* just under .oe-mega */
  background: rgb(0 0 0 / 0.55);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms var(--oe-ease-material),
              visibility 0s linear 240ms;
  pointer-events: none;
}
.oe-mega-scrim[data-oe-mega-scrim-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 240ms var(--oe-ease-material),
              visibility 0s linear 0s;
}

/* When any mega is open, lock header to its scrolled visual state */
.oe-header--v170[data-oe-mega-any-open="true"] {
  background: rgb(10 10 11 / 0.94);
  border-bottom-color: rgb(255 255 255 / 0.08);
  -webkit-backdrop-filter: blur(28px) saturate(1.1);
          backdrop-filter: blur(28px) saturate(1.1);
}

/* Nav-item active state while its mega is open */
.oe-nav__item[data-oe-nav-item][data-oe-mega-open="true"] > .oe-nav-link::after {
  left: 0;
  right: 0;
}

/* ============================================================================
   Mobile: mega + scrim are inert (drawer covers mobile navigation)
   ============================================================================ */
@media (max-width: 63.99rem) {
  .oe-mega,
  .oe-mega-scrim { display: none !important; }
}

/* ============================================================================
   Reduced motion — hide the slide, keep the fade
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .oe-mega,
  .oe-mega[data-oe-mega-open="true"] { transform: none !important; }
  .oe-mega__feature-media { transition: none !important; }
  .oe-mega__feature:hover .oe-mega__feature-media { transform: none !important; }
}