/* Hosted static apps inside Reiro. Do not restyle .post-content typography. */

.hosted-app-embed {
   width: 100%;
   margin: 0 auto 8vh;
}

.post-section.is-hosted-app .post-content {
   margin-bottom: 4vh;
}

.hosted-app-frame {
   display: block;
   width: 100%;
   height: min(78vh, 720px);
   border: 0;
   border-radius: 12px;
   background: #111;
}

.post-section.hosted-app-full {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
}

.post-section.hosted-app-full .hosted-app-full-intro {
   padding-top: 4vh;
}

.post-section.hosted-app-full .hosted-app-full-copy {
   max-width: var(--max-width-post-wrap-one, 720px);
   margin: 0 auto 3vh;
   min-height: 0;
}

.post-section.hosted-app-full .hosted-app-embed {
   margin: 0;
   flex: 1 1 auto;
}

.post-section.hosted-app-full .hosted-app-frame {
   height: calc(100vh - 8rem);
   min-height: 480px;
   border-radius: 0;
}

/* Full-bleed WebGL: Reiro's post-wrap is ~1200px with 4vw gutters and a
   860px iframe cap, which letterboxes the game on laptop/desktop. Tiiny
   already stretches the Unity canvas to 100% of the iframe. */
.post-section.is-genesis-webgl {
   overflow-x: clip;
}

.post-section.is-genesis-webgl .post-header {
   padding-top: 2.5vh;
   padding-bottom: 2vh;
}

.post-section.is-genesis-webgl .post-content:not(:has(*)) {
   display: none;
   margin: 0;
}

.post-section.is-genesis-webgl > .post-wrap.global-padding:not(:has(.post-sidebar, .post-content *)) {
   max-width: none;
   padding: 0;
   margin: 0;
}

.post-section.is-genesis-webgl .hosted-app-embed.is-tiiny-webgl {
   width: 100%;
   margin: 0;
}

.post-section.is-genesis-webgl .hosted-app-frame {
   width: 100%;
   height: calc(100vh - 6.5rem);
   height: calc(100dvh - 6.5rem);
   min-height: 0;
   border-radius: 0;
   background: #000;
}

/* Hosted-app posts: keep the date, hide the small header share icons. */
.post-section.is-hosted-app .post-meta-wrap .post-share-wrap {
   display: none;
}

/* Four-icon share bar sits under the iframe, not above it. */
.post-section.is-hosted-app .post-share {
   margin: 3vh auto 8vh;
   max-width: var(--max-width-post-wrap-one, 720px);
}

.post-section.is-tally-embed .hosted-app-embed.is-tally-form {
   position: relative;
   margin: 0;
   flex: 1 1 auto;
   min-height: calc(100vh - 8rem);
}

.post-section.is-tally-embed .hosted-app-embed.is-tally-form iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
}

@media (max-width: 640px) {
   .hosted-app-frame {
      height: 70vh;
      min-height: 420px;
   }

   .post-section.hosted-app-full .hosted-app-frame {
      height: calc(100vh - 6.5rem);
      height: calc(100dvh - 6.5rem);
   }

   .post-section.is-genesis-webgl .hosted-app-frame {
      height: calc(100vh - 5.5rem);
      height: calc(100dvh - 5.5rem);
   }
}