/* The detail view of an entry over the floor plan (assets/js/app/detail.js); the edit form
   (form.css, assets/js/editor/form.js) reuses its layout. */

/* see-through, so the side areas can't be a separate shadow (it would leave a seam at
   the page edge): one layer spans the middle and both sides */
.detail { color: var(--dark); --side: rgba(255, 255, 255, .97); box-shadow: none; }
.detail::before { content: ""; position: absolute; top: 0; bottom: 0; left: -5000px; right: -5000px; background: var(--side); z-index: -1; }
.detail .back-btn { z-index: 2; }
.detail-title { position: absolute; left: calc(var(--gut) - 20px); right: 42px; top: 37px; z-index: 2; }
.detail-title .sub { font-style: normal; font-weight: 400; font-size: 20px; line-height: 1.6; margin: 0; }
.ext { flex: none; width: 14px; height: 14px; margin-top: 2px; }

/* formatted text from the writer fields (text body, podcast description) */
.rich h2 { font-size: 32px; font-weight: 700; font-style: italic; line-height: 1.1; margin: 52px 0 26px; }
.rich h2:first-child { margin-top: 0; }
.rich ul, .rich ol { margin: 0 0 26px; padding-left: 1.3em; }
.rich li { margin-bottom: 8px; }
.rich li p { margin: 0; }
.rich a { text-decoration: underline; }

/* ------------------------------------------------------------------
   Text (also the edit form): figure and caption on the left, title, details and text on the
   right, both in the flow, so the page grows with whichever is longer
   ------------------------------------------------------------------ */
.text-cols { display: flex; align-items: flex-start; gap: 20px; padding: 45px var(--gut) 120px; }
.text-aside { flex: none; width: 295px; margin-top: 10px; }
.text-main { flex: 0 1 715px; min-width: 0; }
.text-figure { position: relative; height: 420px; overflow: hidden; }
.text-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.text-caption { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12px; line-height: normal; }
.text-caption p { margin: 0; }
.text-title { font-size: 52px; font-weight: 700; line-height: 1.1; margin: 0; }
.text-meta { max-width: 505px; margin-top: 10px; font-size: 12px; line-height: normal; }
.text-meta p { margin: 0; min-height: 16px; }
.text-meta .text-time { margin-top: 16px; }
.text-body { margin-top: 30px; font-size: 20px; line-height: normal; }
.text-body p { margin: 0 0 26px; }

/* ------------------------------------------------------------------
   Audio: the player centred in the height on the left, the description in a column on the right
   (Figma: player 111–752 at 283, text 860–1260); the player takes the width the text column leaves
   ------------------------------------------------------------------ */
.detail-audio { --text-col: clamp(320px, calc(var(--w) * 400 / 1280), 480px); }
.audio-player {
  position: absolute; left: calc(var(--gut) - 14px); top: calc(var(--h) / 2 - 133px); height: 266px;
  width: calc(var(--w) - var(--gut) + 14px - var(--text-col) - 128px);
}
.audio-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.audio-empty { display: flex; align-items: center; justify-content: center; background: var(--bg); font-size: 20px; }
.audio-text { position: absolute; right: 20px; top: 0; width: var(--text-col); font-size: 20px; line-height: normal; }
.audio-text p { margin: 0; }
.audio-text p + p { margin-top: 26px; }
/* on the page, the column is centred in the window height and makes the page longer when the text is */
.detail-audio:not(.edit-view) { display: flex; justify-content: flex-end; }
.detail-audio:not(.edit-view) .audio-text {
  position: relative; right: auto; margin-right: 20px; min-height: var(--h); padding: 150px 0;
  display: flex; flex-direction: column; justify-content: center;
}

/* ------------------------------------------------------------------
   Gallery: images are always shown whole, centred in the frame between the margins; the frame
   starts 12px below the title, however many lines it takes, and ends 72px above the bottom (Figma: 760)
   ------------------------------------------------------------------ */
.gallery-stage { position: absolute; left: calc(var(--gut) - 20px); right: 42px; top: 37px; height: calc(var(--h) - 109px); display: flex; flex-direction: column; }
.gallery-stage .detail-title { position: static; width: auto; }
.gallery-frame { position: relative; flex: 1; width: calc(var(--w) - 2 * var(--gut)); margin: 12px 0 0 20px; }
.gallery-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s ease; }
.gallery-image.is-current { opacity: 1; }
.gallery-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--bg); }
.gallery-info-btn { right: -48px; top: 0; width: 32px; height: 32px; }
.gallery-info-btn:hover img { transform: scale(1.15); }
.gallery-next { right: -44px; top: calc(50% - 12px); width: 24px; height: 24px; }
.gallery-next:hover img { transform: translateX(4px); }

/* below the frame: caption of the current image, counter in the middle, link icon on the right */
.gallery-foot {
  position: absolute; left: var(--gut); right: var(--gut); top: calc(var(--h) - 62px); display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; font-size: 12px; line-height: normal;
}
.gallery-foot .ext { grid-area: 1 / 3; justify-self: end; margin-top: 1px; }
.gallery-caption { grid-area: 1 / 1; max-width: 400px; }
.gallery-caption p { margin: 0; }
.gallery-count { grid-area: 1 / 2; }

/* the yellow info box, opened with the "i" (detail.js toggles .info-open) */
.gallery-info {
  position: absolute; left: calc(50% - 215px); top: calc(var(--h) / 2 - 109px); width: 429px; height: 219px; background: var(--yellow);
  opacity: 0; visibility: hidden; transform: scale(.96) translateY(8px); transform-origin: 50% 40%;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s;
}
.gallery-info .gallery-info-text { position: absolute; left: 20px; top: 20px; width: 400px; }
.gallery-info h4 { font-size: 20px; font-weight: 700; font-style: italic; line-height: normal; margin: 0 0 16px; }
.gallery-info p { font-size: 12px; line-height: normal; margin: 0 0 16px; }
.gallery-info .close-small { left: 401px; top: 10px; width: 14px; height: 14px; }
.detail.info-open .gallery-info { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }