/* Pictures, swipe rows, 3D models and the NBA predictor on the notebook pages. */

/* ---------- pictures ---------- */
.page figure { position: relative; margin: 10px 0 6px; padding: 6px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.page figure img { display: block; width: 100%; height: auto; }
.page figure::before, .page figure::after { content: ""; position: absolute; width: 18px; height: 18px; background: var(--nb-spine); z-index: 1; }
.page figure::before { left: -3px; top: -3px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.page figure::after { right: -3px; bottom: -3px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.page figcaption { padding: 6px 2px 0; font-size: 0.8rem; color: color-mix(in srgb, currentColor 86%, transparent); } /* darker than --soft: the lighter grey fell under 4.5:1 on white */
.page figure.sq img { width: 96px; height: 96px; object-fit: cover; }
.page figure.vid { padding: 0; background: #141c2b; }
.page figure.vid video { display: block; width: 100%; height: auto; }
.page .steps figure.shot { margin: 6px 0 8px; }
.page .gap { margin-top: 20px; }

.page .pair { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: 10px; margin: 8px 0; align-items: stretch; }
.page .pair figure { margin: 0; }
.page .pair img { height: 100%; object-fit: cover; }

.page .covers { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.page .covers img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }

.page .job { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; }
.page .job-mark { display: grid; place-items: center; width: 64px; height: 64px; padding: 6px; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-md); }
.page .job-mark img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

/* a club's picture beside its words; when the page is too narrow for both (a small desktop window) the picture goes above them */
.page .club { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
.page .club figure { margin: 0; flex: 0 0 120px; }
.page .club > :not(figure) { flex: 1 1 11rem; min-width: 0; }
.page .club img { height: 88px; width: 100%; object-fit: contain; }
.page .schools { display: grid; gap: 14px; margin-top: 8px; }
.page .schools figure { margin: 0; }
.page .classes .chips a, .page .archive a, .page .club a { color: var(--pen); }

/* ---------- swipe rows ---------- */
.page .slides {
  list-style: none; margin: 8px 0 0; padding: 0 0 4px; display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px;
  touch-action: pan-x pan-y; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; scroll-behavior: smooth;
}
.page .slides::-webkit-scrollbar { display: none; }
.page .slide { scroll-snap-align: start; min-width: 0; }
.page .slide figure { margin: 0 0 6px; }
.page .slide time { display: block; font: 500 0.75rem/1.5 var(--font-mono); letter-spacing: 0.06em; color: var(--soft); }
.page .slide p { margin: 2px 0 0; font-size: 0.9rem; line-height: 1.45; }
.page .slides.themes { grid-auto-columns: 62%; }
html.no-js .page .model-view { display: none; }
html.no-js .page .slides { display: grid; grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
.page .slides-bar { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 8px; }
.page .slides-bar button {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font: 800 1.1rem/1 var(--font-sans);
  background: #fff; color: var(--nb-ink); border: var(--edge) solid var(--nb-ink); box-shadow: var(--lift-sm);
}
.page .slides-bar button:disabled { opacity: 0.35; box-shadow: none; cursor: default; }
.page .slides-count { min-width: 5.5em; text-align: center; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.06em; color: var(--soft); }

/* ---------- 3D models ---------- */
.page .model-view { position: relative; aspect-ratio: 1; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: radial-gradient(circle at 50% 60%, #fff 0 40%, #f1ead6 75%); }
.page model-viewer, .page .model-ph { display: block; width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
.page .model-toggle {
  position: absolute; right: 6px; bottom: 6px; padding: 5px 10px; border-radius: var(--radius-pill); cursor: pointer;
  font: 700 0.75rem/1 var(--font-sans); color: var(--ink-fixed); background: var(--hi); border: 1.5px solid var(--ink-fixed);
}
.page .model-toggle.is-on { background: #fff; }
.page .model-text { display: grid; gap: 1px; margin-top: 6px; }
.page .model-text b { font-size: 0.9rem; line-height: 1.2; }
.page .model-links { display: flex; flex-wrap: wrap; gap: 2px 10px; font: 600 0.75rem/1.4 var(--font-sans); }
.page .model-links a { color: var(--pen); }

/* ---------- the NBA predictor ---------- */
.page .predictor { display: grid; gap: 8px; margin: 8px 0 12px; padding: 12px; max-width: 320px; border: 1.5px dashed var(--rule); border-radius: var(--radius-md); }
.page .predictor-k { margin: 0; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.page .predictor label { display: grid; gap: 3px; font: 500 0.75rem/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.page .predictor select { font: 500 0.95rem var(--font-sans); padding: 7px 10px; color: var(--nb-ink); background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line-control); border-radius: 6px; }
.page .predict-go {
  justify-self: start; min-height: 36px; padding: 6px 16px; cursor: pointer; font: 700 0.9rem/1.2 var(--font-sans);
  color: #fff; background: var(--blue-600); border: var(--edge) solid var(--ink-fixed); border-radius: var(--radius-md); box-shadow: var(--lift-sm);
}
.page .predict-go:disabled { opacity: 0.5; box-shadow: none; }
.page .predict-result { margin: 0; font-size: 0.9rem; line-height: 1.4; min-height: 2.8em; }

@media (min-width: 900px), (orientation: landscape) and (min-width: 640px) {
  .page .covers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page .slides { grid-auto-columns: 78%; }
  .page .slides.models { grid-auto-columns: 62%; }
}

@media (prefers-reduced-motion: reduce) { .page .slides { scroll-behavior: auto; } }

/* On the narrowest phones (the page is about 225px wide) the logo goes above the words instead of beside them, so words do not break */
@media (max-width: 359px) {
  .page .job { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .page .job-mark { width: 52px; height: 52px; }
}

/* One entry holding several jobs (the tennis coaching): the places sit under its title, each with its own logo */
.page .job.job-group { display: block; }
.page .job-group .places { margin-top: 4px; }
.page .job-group .places .job { padding: 10px 0 0; border-top: 0; }