/* DreamRunner-inspired card hero: retain LoreRefuge branding/content while using a cinematic full-bleed landing scene. */
.detail-hero {
  min-height: min(760px, 100vh);
}

.detail-backdrop {
  filter: blur(2px);
  opacity: .8;
  background-image: linear-gradient(90deg, #080d11d9, #080d1170 45%, #080d1133), linear-gradient(0deg, #080d11f2, #080d1100 58%), var(--detail-cover);
}

.detail-inner {
  max-width: 100%;
  min-height: min(760px, 100vh);
  padding: 30px clamp(20px, 5vw, 72px) 56px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.back-link {
  position: absolute;
  top: 30px;
  left: clamp(20px, 5vw, 72px);
}

.detail-layout {
  display: block;
}

.detail-cover {
  display: none;
}

.detail-copy {
  width: min(900px, 100%);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid #ffffff24;
  border-radius: 20px;
  background: #080d11b8;
  box-shadow: 0 24px 70px #0009;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.detail-copy h1 {
  font-size: clamp(38px, 5vw, 64px);
}

.detail-premise {
  max-width: 820px;
}

@media (width <= 640px) {
  .detail-hero,
  .detail-inner {
    min-height: 720px;
  }

  .detail-inner {
    padding: 24px 14px 24px;
  }

  .detail-copy {
    border-radius: 16px;
    padding: 20px;
  }

  .detail-actions {
    flex-wrap: wrap;
  }
}