/* Uses the site's existing palette, type and wrap. Kept below the hero. */
#job-media { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
#job-media[hidden] { display: none; }
.media-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.media-heading h2 { margin: 0; font-size: 1.35rem; }
.media-control { font: inherit; color: var(--ink); background: var(--card, #1b1712); border: 1px solid var(--line); border-radius: 7px; padding: .45rem .75rem; cursor: pointer; min-height: 44px; }
.media-strip { overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: thin; padding: .25rem 0 .75rem; }
.media-track { display: flex; gap: .75rem; width: max-content; }
.media-tile { position: relative; display: block; flex: 0 0 240px; height: 168px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card, #1b1712); cursor: pointer; }
.media-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); background: #12100ce6; color: #fff; border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center; }
.media-control:focus-visible, .media-tile:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
#media-dialog { margin: auto; padding: 1rem; width: min(1000px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); border: 1px solid var(--line); border-radius: 10px; background: var(--ground); color: var(--ink); }
#media-dialog::backdrop { background: #000d; }
.media-dialog-head, .media-dialog-nav { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.media-stage { display: grid; place-items: center; min-height: 140px; margin: .75rem 0; }
.media-stage img, .media-stage video { display: block; max-width: 100%; max-height: 65dvh; width: auto; height: auto; object-fit: contain; }
#media-caption { margin: .5rem 0; font-size: .9rem; }
@media (max-width: 600px) { .media-tile { flex-basis: 200px; height: 150px; } .media-heading h2 { font-size: 1.1rem; } }
@media (prefers-reduced-motion: reduce) { .media-strip { scroll-behavior: auto; } }
[data-media-pause][hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { [data-media-pause] { display: none; } }