/*
 * nx-detail-responsive.css — Artwork- & Lore-Detail (Shell + Themes)
 * Nach shell-base / Theme-CSS laden.
 * Breakpoints: phone ≤767 · tablet 768–1023 · desktop ≥1024
 */

/* Touch-Geräte: System-Cursor statt Custom-Cursor */
@media (hover: none), (max-width: 1023px) {
  body.nx-detail-page {
    cursor: auto;
  }

  #cur {
    display: none !important;
  }
}

/* Editorial-Basis: Nav, Hero, Blöcke */
@media (max-width: 1023px) {
  .nxi-nav {
    flex-wrap: wrap;
    gap: 10px;
    padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  }

  .nxi-nav-title {
    max-width: 100%;
    order: 3;
    width: 100%;
    text-align: center;
    opacity: 0.45;
  }

  .nxi-hero {
    min-height: min(92vh, 1100px);
    padding: max(72px, 12vh) max(18px, 4vw) max(40px, 6vh);
  }

  .nxi-hero-title {
    max-width: none;
  }

  .nxi-blocks {
    padding: clamp(28px, 6vw, 80px) max(16px, 4vw) clamp(64px, 12vw, 140px);
  }

  .nxi-next {
    min-height: min(56vh, 720px);
  }

  #nx-blocks {
    gap: clamp(14px, 3vw, 28px) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .nxi-nav a {
    font-size: 0.48rem;
    letter-spacing: 0.22em;
  }

  .nxi-lang span {
    padding: 8px 10px;
    font-size: 0.38rem;
  }

  .nxi-hero {
    min-height: auto;
    padding-bottom: max(32px, 8vh);
  }

  .nxi-strip {
    padding: clamp(32px, 8vw, 72px) max(16px, 5vw);
  }

  .nxi-next {
    min-height: 48vh;
  }

  /* Page-Builder-Klassen (Fallback für alle Themes) */
  .di-split,
  .pb-split,
  .di-editorial,
  .pb-editorial,
  .di-text2,
  .pb-text2,
  .di-text3,
  .pb-text3,
  .di-img-lr,
  .pb-lr,
  .di-framed {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .di-full,
  .pb-full-img {
    min-height: 40vh;
    height: auto !important;
  }

  .di-big-word,
  .pb-big-word {
    font-size: clamp(1.8rem, 12vw, 3.5rem) !important;
  }

  .di-copy,
  .pb-copy {
    max-width: none !important;
  }

  .gld-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
  }
}

/* Lore Fokus-Button: Safe Area */
@media (max-width: 767px) {
  #nxLoreFocusBtn {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: max(16px, env(safe-area-inset-right));
    left: auto;
  }
}