/*
 * AJ Studio — journal blocks added in 1.7.0: embeds (Vimeo, Instagram, Spotify) and before / after.
 * Used on the site and inside the editors (web Studio and the Focalbridge app).
 * © Ahmad Junaid. All rights reserved.
 */

/* Embeds */
.entry .aj-embed { margin: 1.6em 0; }
.entry .aj-embed iframe { display: block; width: 100%; border: 0; background: rgba(0,0,0,.04); }
.entry .aj-embed--vimeo iframe { aspect-ratio: 16 / 9; height: auto; }
.entry .aj-embed--instagram iframe { max-width: 540px; height: 720px; margin: 0 auto; background: #fff; }
.entry .aj-embed--spotify iframe { height: 352px; border-radius: 12px; }
.entry .aj-embed--spotify.aj-embed--compact iframe { height: 152px; }

/* Before / after: the "after" photo is shown to the right of the line. Photos are never cropped. */
.entry .aj-compare { position: relative; margin: 1.6em 0; line-height: 0; overflow: hidden; --pos: 50%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.entry .aj-compare img { display: block; width: 100%; height: auto; margin: 0; }
.entry .aj-compare .aj-compare__after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; clip-path: inset(0 0 0 var(--pos)); }
.entry .aj-compare::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
.entry .aj-compare__knob { position: absolute; top: 50%; left: var(--pos); width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.3); pointer-events: none; z-index: 2; }
.entry .aj-compare__knob::before { content: '‹ ›'; position: absolute; inset: 0; display: grid; place-items: center; font: 600 15px/1 system-ui, sans-serif; color: #222; letter-spacing: 2px; }
.entry .aj-compare__label { position: absolute; top: 10px; z-index: 1; padding: 4px 8px; font: 600 11px/1.2 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.45); border-radius: 3px; pointer-events: none; }
.entry .aj-compare__label:empty { display: none; }
.entry .aj-compare__label--before { left: 10px; }
.entry .aj-compare__label--after { right: 10px; }
.entry .aj-compare__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.entry .aj-compare__range:focus-visible + .aj-compare__knob, .entry .aj-compare:focus-within .aj-compare__knob { outline: 3px solid #1F3F78; }

/* The "type /" menu in the editors */
.aj-slash { position: fixed; z-index: 90; width: 280px; max-width: calc(100vw - 16px); max-height: min(360px, 50vh); overflow-y: auto; padding: 6px; background: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: 12px; box-shadow: 0 14px 40px rgba(20,18,16,.2); font: 15px/1.3 -apple-system, system-ui, sans-serif; }
.aj-slash__item { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: #1E1B18; text-align: left; cursor: pointer; font: inherit; }
.aj-slash__item[aria-selected="true"], .aj-slash__item:hover { background: #F1ECE3; }
.aj-slash__title { font-weight: 500; }
.aj-slash__hint { font-size: 12.5px; color: #7d756c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aj-slash__none { margin: 8px 10px; color: #7d756c; }
@media (prefers-color-scheme: dark) {
  .aj-app .aj-slash { background: #2a2724; border-color: rgba(255,255,255,.15); }
  .aj-app .aj-slash__item { color: #f3ede4; }
  .aj-app .aj-slash__item[aria-selected="true"], .aj-app .aj-slash__item:hover { background: #3a352f; }
}