/* Playground */

/* Hero: Rive scaled 1.1 inside a clipped box */
.pg-hero { display: flex; width: 100%; height: 316px; border-radius: 10px; overflow: hidden; will-change: transform; }
.pg-hero .rive { flex: 1 0 0; width: 1px; height: 100%; transform: scale(1.1); }

/* Overview paragraphs are separated by one empty line */
.pg-intro p + p { margin-top: 1.2em; }

/* Blocks: caption above one or more media rows */
.pg-blocks { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.pg-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 15px;
  overflow: hidden;
}
.pg-block:not(:last-child) { box-shadow: inset 0 -1px rgba(77, 77, 77, .11); }

.pg-note { width: 100%; font: italic 400 15px/1.2 "Inter", sans-serif; color: #666; white-space: pre-wrap; }
.pg-note.is-right { text-align: right; }

.pg-row { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }

/* Media box: square by default, 5px corners */
.pg-m { position: relative; flex: 1 0 0; width: 1px; aspect-ratio: 1; border-radius: 5px; overflow: hidden; }
.pg-m > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.pg-m.is-wide { aspect-ratio: 1.00917; }
.pg-m.is-flat { aspect-ratio: 1.00275; border-radius: 0; }
.pg-m.is-sharp { border-radius: 0; }

/* Rive block */
.pg-skeleton, .pg-skeleton-line { flex: 1 0 0; width: 1px; height: 535px; }
.pg-garbage { flex: none; width: 367px; height: 367px; }


@media (max-width: 809.98px) {
  .pg-row { flex-direction: column; }
  .pg-m { flex: none; width: 100%; }
  /* The 1080x1200 loop sets this box's height on phone */
  .pg-m.is-portrait { aspect-ratio: .9; }

  .pg-rive, .pg-rive .pg-row { gap: 0; }
  .pg-skeleton, .pg-skeleton-line { flex: none; width: 100%; height: 282px; }
  .pg-skeleton-line { height: 316px; }
  .pg-garbage { width: 231px; height: 231px; }
}