/* The media under a project's story (media.mjs): pictures, videos, drawn devices, embeds, comparisons, carousels and
   code. Loaded only on project pages that have media. The colours and type come from styles.css. */

.media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(12px, 1.6vw, 24px); padding: 0 var(--pad) clamp(72px, 13vh, 170px); }
.media > *, .media figure { margin: 0; min-width: 0; }
.media > .full, .media > .devices, .media > .embed, .media > .compare, .media > .carousel, .media > .code { grid-column: 1 / -1; }
.media figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.4; color: var(--mute); }

/* A picture, and a clip or a player. A video starts at 16:9 and takes its own shape once the browser knows it. */
.media .photo, .media .vid { border-radius: 10px; overflow: hidden; background: #111; }
.media .photo img { display: block; width: 100%; height: auto; }
.media .vid { position: relative; aspect-ratio: var(--ratio, 16 / 9); }
.media .vid video, .media .vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.media > .full .vid { width: min(100%, calc(84svh * var(--ratio, 1.778))); margin-inline: auto; }

/* Devices. Everything about a device is sized from its own width (cqw), so it scales as one piece. --shape is the
   whole device's width over height, which keeps it from standing taller than the screen it is seen on. Drawn flat for
   the dark page: a near-black body inside a lighter rim, and no shadow. */
.media > .devices { --n: 1; --g: clamp(16px, 3.4vw, 56px); display: grid; grid-template-columns: repeat(var(--n), minmax(0, var(--max))); justify-content: center; align-items: start; gap: var(--g); padding: clamp(8px, 2vh, 28px) 0; }
.devices.n2 { --n: 2; }
.devices.n3 { --n: 3; }
.devices.n4 { --n: 4; }
.devices.k-iphone, .devices.k-iphone-home { --max: 300px; }
.devices.k-ipad { --max: 460px; }
.devices.k-ipad-landscape { --max: 680px; }
.devices.k-macbook { --max: 760px; }
.devices.k-browser { --max: 1fr; }
.device-block { display: grid; justify-items: center; gap: 14px; }
.device-block figcaption { margin: 0; max-width: 420px; text-align: center; }
.device { --tall: 80svh; --metal: #0b0b0b; --edge: #5d5c57; --deep: #000; position: relative; container-type: inline-size; width: min(100%, var(--max), calc(var(--tall) * var(--shape))); margin-inline: auto; }
.device-iphone { --max: 300px; --shape: 0.483; }
.device-iphone-home { --max: 300px; --shape: 0.515; }
.device-ipad { --max: 460px; --shape: 0.715; }
.device-ipad-landscape { --max: 680px; --shape: 1.4; }
.device-macbook { --max: 760px; --shape: 1.65; }
.device-browser { width: min(100%, calc((var(--tall) - 38px) * var(--screen))); }
.device-body, .device-lid { position: relative; background: var(--metal); box-shadow: inset 0 0 0 0.45cqw var(--edge), inset 0 0 0 0.9cqw var(--deep); }
.device-screen { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: var(--screen); background: #000; }
.device-screen > .zoom, .device-screen > .fill, .device-screen > iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.device-screen img, .device-screen video, .device-screen .fill > iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.device-screen > iframe { border: 0; background: var(--bone); }
/* A picture on a device's screen stays still on hover, like a real display; a click still opens it larger */
.device-screen .zoom:hover img { transform: none; }
.device-screen .zoom:focus-visible { outline-offset: -3px; }
/* The buttons on a phone's sides */
.device-iphone .device-body::before, .device-iphone-home .device-body::before, .device-iphone .device-body::after, .device-iphone-home .device-body::after { content: ""; position: absolute; width: 1.1cqw; border-radius: 0.6cqw; background: #4a4945; }
.device-iphone .device-body::before, .device-iphone-home .device-body::before { left: -0.9cqw; top: 19%; height: 7%; box-shadow: 0 11cqw 0 #4a4945; }
.device-iphone .device-body::after, .device-iphone-home .device-body::after { right: -0.9cqw; top: 25%; height: 12%; }
.device-iphone .device-body { padding: 4cqw; border-radius: 16cqw; }
.device-iphone .device-screen { border-radius: 12.4cqw; }
.device-island { position: absolute; z-index: 3; top: 6.6cqw; left: 50%; width: 29cqw; height: 8.4cqw; translate: -50% 0; border-radius: 999px; background: #000; pointer-events: none; }
.device-iphone-home .device-body { padding: 18cqw 5.5cqw; border-radius: 15cqw; }
.device-iphone-home .device-screen { border-radius: 0.8cqw; }
.device-speaker { position: absolute; top: 8.1cqw; left: 50%; width: 17cqw; height: 1.8cqw; translate: -50% 0; border-radius: 999px; background: #000; box-shadow: inset 0 0 0 0.3cqw #2a2a28; }
.device-speaker::before { content: ""; position: absolute; left: -7cqw; top: 50%; width: 2.4cqw; height: 2.4cqw; translate: 0 -50%; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 0.45cqw #2a2a28; }
.device-home { position: absolute; bottom: 3cqw; left: 50%; width: 12cqw; height: 12cqw; translate: -50% 0; border-radius: 50%; box-shadow: inset 0 0 0 0.7cqw #3c3b38; }
.device-ipad .device-body { padding: 4.4cqw; border-radius: 6.5cqw; }
.device-ipad .device-screen { border-radius: 2.6cqw; }
.device-ipad-landscape .device-body { padding: 3.1cqw; border-radius: 4.6cqw; }
.device-ipad-landscape .device-screen { border-radius: 1.8cqw; }
.device-lens { position: absolute; z-index: 3; top: 1.75cqw; left: 50%; width: 1.1cqw; height: 1.1cqw; translate: -50% 0; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 0.25cqw #33322f; }
.device-ipad-landscape .device-lens { top: 1.2cqw; width: 0.8cqw; height: 0.8cqw; }
.device-lid { margin: 0 6.5%; padding: 2.2cqw 2.2cqw 3cqw; border-radius: 2.8cqw 2.8cqw 0 0; box-shadow: inset 0 0 0 0.35cqw var(--edge), inset 0 0 0 0.6cqw var(--deep); }
.device-macbook .device-screen { border-radius: 0.5cqw; }
.device-macbook .device-lens { top: 0.75cqw; width: 0.7cqw; height: 0.7cqw; }
.device-base { position: relative; height: 2.4cqw; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(#6a6964, #2a2a28 65%); }
.device-scoop { position: absolute; top: 0; left: 50%; width: 15cqw; height: 1cqw; translate: -50% 0; border-radius: 0 0 1.2cqw 1.2cqw; background: #141414; }

/* A browser window. With a page in it, its third button opens it larger (media.js); the window is a dialog that is
   always open, so in the page it is an ordinary box. */
.device-browser .device-body { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #141414; box-shadow: none; }
.device-browser dialog.device-body { display: block; inset: auto; width: auto; max-width: none; height: auto; max-height: none; margin: 0; padding: 0; color: inherit; }
.device-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-bottom: 1px solid var(--line); }
.device-bar i, .device-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: rgba(236, 235, 230, 0.2); }
.device-address { flex: 1; max-width: 46%; height: 20px; margin-inline: auto; translate: -20px 0; border: 1px solid var(--line); border-radius: 999px; }
.device-dot { position: relative; padding: 0; border: 0; background: var(--yellow); cursor: pointer; transition: scale 0.3s var(--ease); }
.device-dot::before { content: ""; position: absolute; inset: -13px -8px; }
.device-dot:disabled { background: rgba(236, 235, 230, 0.2); cursor: default; pointer-events: none; }
.device-dot:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
@media (hover: hover) { .device-dot:hover { scale: 1.3; } }
.device-browser .device-screen { background: #111; }
.device-browser.is-page { --screen: 1.4; }
.device-browser dialog.device-body.is-big { position: fixed; inset: clamp(10px, 2.4vw, 32px); display: flex; flex-direction: column; max-width: 1480px; margin: auto; animation: window-in 0.4s var(--ease); }
.device-body.is-big > .device-bar { flex: none; }
.device-browser .device-body.is-big > .device-screen { flex: 1; min-height: 0; max-height: none; aspect-ratio: auto; }
.device-body::backdrop { background: rgba(14, 14, 14, 0.82); }
@keyframes window-in { from { opacity: 0; transform: scale(0.96); } }

/* An embed that is not in a device */
.embed-frame { position: relative; aspect-ratio: var(--ratio, 16 / 9); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #111; }
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed.is-strip .embed-frame { aspect-ratio: auto; border: 0; background: transparent; }

/* Before and after: the after sits over the before, cut at the handle */
.compare-stage { position: relative; isolation: isolate; aspect-ratio: var(--ratio, 16 / 9); overflow: hidden; border-radius: 10px; background: #111; cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.compare-before, .compare-after { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare-after { clip-path: inset(0 0 0 var(--pos)); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 0; pointer-events: none; }
.compare-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--bone); }
.compare-knob, .compare-pause { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--bone); border-radius: 50%; background: rgba(20, 20, 20, 0.78); color: var(--bone); transition: transform 0.3s var(--ease); }
.compare-knob { position: absolute; top: 50%; left: 0; width: 46px; translate: -50% -50%; }
.compare-stage:hover .compare-knob { transform: scale(1.08); }
.compare-stage.is-dragging .compare-knob { transform: scale(0.94); }
.compare-range { position: absolute; left: var(--pos); top: 50%; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.compare-range:focus-visible ~ .compare-handle .compare-knob { outline: 2px solid var(--yellow); outline-offset: 4px; }
.compare-label { position: absolute; top: 12px; z-index: 1; padding: 7px 10px; border-radius: 999px; background: rgba(20, 20, 20, 0.84); color: var(--bone); font-size: 10px; pointer-events: none; transition: opacity 0.3s; }
.compare-label.is-before { left: 12px; }
.compare-label.is-after { right: 12px; }
.compare-stage.near-left .compare-label.is-before, .compare-stage.near-right .compare-label.is-after { opacity: 0; }
.compare-pause { position: absolute; left: 12px; bottom: 12px; z-index: 3; width: 38px; padding: 0; cursor: pointer; }

/* A carousel: one row at one height, swiped, dragged or stepped through */
.carousel { --fill: 86cqw; container-type: inline-size; }
.carousel.is-single { --fill: 100cqw; }
.carousel-track { --h: min(calc(var(--fill) / var(--mid)), 66svh); position: relative; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); height: var(--h); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-user-select: none; user-select: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { flex: none; width: min(calc(var(--h) * var(--a)), var(--fill)); aspect-ratio: var(--a); scroll-snap-align: start; overflow: hidden; border-radius: 10px; background: #111; }
.carousel-slide:first-child { margin-left: auto; }
.carousel-slide:last-child { margin-right: auto; }
.carousel-slide .zoom { height: 100%; }
.carousel-slide img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.carousel.is-dragging .carousel-track { scroll-snap-type: none; }
.carousel.is-dragging .carousel-track, .carousel.is-dragging .zoom { cursor: grabbing; }
.carousel-bar { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.carousel-bar[hidden] { display: none; }
.carousel-bar figcaption { flex: 1; min-width: 0; margin: 0; }
.carousel-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.carousel.is-static .carousel-nav { display: none; }
.carousel-count { margin-right: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.carousel-arrow { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--bone); cursor: pointer; transition: border-color 0.3s, background 0.3s, color 0.3s, opacity 0.3s; }
.carousel-arrow:hover:not(:disabled) { background: var(--yellow); border-color: var(--yellow); color: var(--char); }
.carousel-arrow:disabled { opacity: 0.3; cursor: default; }

/* Code */
.code { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #111; }
.media .code-bar { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--line); font: 400 11.5px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--mute); }
.code-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: 0; color: var(--bone); }
.code-lang { text-transform: uppercase; }
.code-copy { height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit; font: inherit; text-transform: uppercase; cursor: pointer; transition: color 0.3s, border-color 0.3s; }
.code-copy:hover { color: var(--bone); border-color: rgba(236, 235, 230, 0.5); }
.code pre { margin: 0; padding: 18px 20px 22px; overflow-x: auto; font: 400 13.5px/1.7 var(--mono); tab-size: 2; color: var(--bone); scrollbar-color: rgba(236, 235, 230, 0.25) transparent; }
.code pre:focus-visible { outline: 2px solid var(--yellow); outline-offset: -3px; }

@media (max-width: 860px) {
  .media { grid-template-columns: 1fr; }
  .device-browser.is-page { --screen: 0.9; width: 100%; }
  .device-browser.is-page .device-screen { max-height: calc(var(--tall) - 38px); }
  .carousel-track { margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad); }
}
/* On a phone three or four upright devices stand two to a row, and an odd one out sits in the middle below */
@media (max-width: 600px) {
  .devices.n3, .devices.n4 { --n: 2; }
  .devices.n3 > :last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--g) / 2); }
}
@media (prefers-reduced-motion: reduce) {
  .device-browser dialog.device-body.is-big { animation: none; }
}