/* ZoodleBug Theater (home page). 3 across on computers and iPads, 1 on phones. */
.zth { margin: 30px auto 10px; }
.zth-header { display: block; width: min(1000px, 100%); height: auto; margin: 0 auto 16px; border-radius: 18px; }
.zth-heading { margin: 22px 0 12px; color: #101827 !important; font-size: 28px; font-weight: 800; text-align: left; }
.zth-heading:first-child { margin-top: 0; }
.zth-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
@media (max-width: 640px) { .zth-grid { grid-template-columns: 1fr; } }
.zth-card { margin: 0; background: #f4f7fc; border: 2px solid #d8e0ee; border-radius: 16px; overflow: hidden; }
/* "all: unset" so the home page's big button style doesn't apply here. */
.zth-play { all: unset; box-sizing: border-box; position: relative; cursor: pointer; }
/* The home page gives every button a border, shadow and color with !important. */
button.zth-play, button.zth-play:hover, button.zth-play:active {
  border: 0 !important; box-shadow: none !important; background: #000 !important; transform: none !important;
  border-radius: 0 !important; padding: 0 !important; margin: 0 !important; width: 100% !important; min-height: 0 !important;
}
.zth-play, .zth-card iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; margin: 0; background: #000; }
.zth-play img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.zth-icon { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%);
  background: #ff0033; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.45); transition: transform .15s; }
.zth-icon::after { content: ""; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #fff; }
.zth-play:hover .zth-icon, .zth-play:focus-visible .zth-icon { transform: translate(-50%, -50%) scale(1.1); }
.zth-play:focus-visible { outline: 3px solid #ffd23f; outline-offset: -3px; }
.zth-card figcaption { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px 12px; color: #101827; line-height: 1.35; }
.zth-name { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 15px; }
.zth-length { flex: 0 0 auto; margin-left: auto; color: #4b5873; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }