/* Real play in Doodle World: short, silent, looping clips (assets/js/clips.js). Used on the home page, /doodle-world
   and /club. Each is a figure.clip with an inked frame round the video, a caption under it, and a pause button over
   the corner. Nothing moves until the clip is near the screen; with reduced motion asked for, only the still shows
   until someone presses play. */
.clip { position: relative; display: grid; gap: 0.45rem; margin: 0; align-content: start; }
.clip__frame { position: relative; display: block; background: var(--sheet); overflow: clip; }
.clip video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--sheet); }
.clip figcaption { font-family: var(--font-display); font-weight: 600; font-size: var(--s-small); line-height: 1.25; }
.clip:nth-of-type(odd) .clip__frame { rotate: -0.6deg; } .clip:nth-of-type(even) .clip__frame { rotate: 0.7deg; }

/* the pause / play button: 44px, ink circle, two bars while playing, a triangle while paused */
.clip__pause { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: var(--stroke) solid var(--ink); background: var(--yellow); color: var(--ink); cursor: pointer; opacity: 0.92; }
.clip__pause[hidden] { display: none; }
.clip__pause::before { content: ""; width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; }
.clip__pause[aria-pressed="true"]::before { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; margin-left: 4px; }
.clip__pause:hover { opacity: 1; }
.clip__pause:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; opacity: 1; }

@media (prefers-reduced-motion: reduce) { .clip__frame { rotate: none !important; } }

/* /club: the words, the join card and the walk */
.club-join-page { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-4) var(--sp-5); align-items: start; padding-block: var(--sp-3) var(--sp-5); }
.club-join-page .club-hero__text { gap: var(--sp-2); }
.club-join-card { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: var(--sp-2); background: var(--sheet); padding: var(--sp-4); }
.club-join-card .club-join { display: grid; gap: var(--sp-2); }
.club-join-card .btn { margin: 0; }
.clip--join { grid-column: 1; }
@media (max-width: 899px) {
  .club-join-page { grid-template-columns: minmax(0, 1fr); }
  .club-join-card, .clip--join { grid-column: 1; grid-row: auto; }
  .club-join-card { padding: var(--sp-3) var(--sp-2); }
  .club-join-card .btn { width: 100%; }
}

/* /club/welcome: the card on the left, the walk on the right (a phone: the walk under the card) */
.welcome-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: center; }
.welcome-grid > .engine-card { margin: 0; max-width: none; }
@media (max-width: 899px) { .welcome-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } }