/*
 * Wakehelm job-card images (job-images.js, docs/job_images.md). A fixed 16:9 box, so a card
 * never shifts when its picture loads or fails. Behind every picture sits a local pattern - the
 * theme's media ground with a soft glow and a few swell lines fading up from the bottom, drawn
 * only with CSS gradients and theme tokens (Graphite and Gold), plainly not a photograph - which
 * is what shows while a picture loads and when it fails. No seam, no text on it except the
 * vessel type tag.
 *
 * The pack's pictures are 1672 x 941 (a few 940), within half a pixel of 16:9 at card size. They
 * are drawn with object-fit: contain, never cropped: a crane jib, a mast or a jack-up leg reaches
 * the frame's edge in several of them (docs/job_images.md, "No cropping"). Whatever sliver
 * contain leaves is the theme's letterbox ground, not a photo edge. The label and the credits
 * button sit in a caption row under the frame, so nothing is drawn over the vessel either.
 */
.wh-job-image {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: var(--mh-radius-card, 12px);
}

/* The picture frame: fixed 16:9 whatever loads, fails or never arrives. */
.wh-job-image__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: inherit;
  background: var(--ap-media-empty, linear-gradient(135deg, #313946, #1b212b));
  contain: layout paint;
}

@supports not (aspect-ratio: 16 / 9) {
  .wh-job-image__frame::before {
    content: "";
    display: block;
    padding-top: 56.25%;
  }
}

.wh-job-image__fallback,
.wh-job-image__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wh-job-image__fallback {
  background: var(--ap-media-empty, linear-gradient(135deg, #313946, #1b212b));
  overflow: hidden;
}

.wh-job-image__fallback::before,
.wh-job-image__fallback::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

/* a soft light above the horizon */
.wh-job-image__fallback::before {
  background: radial-gradient(70% 55% at var(--wh-job-image-x, 62%) 46%, var(--ap-glint, #d8e4ff66) 0%, transparent 72%);
  opacity: 0.4;
}

/* swell lines: wide arcs centred below the box, fading out before the middle */
.wh-job-image__fallback::after {
  background: repeating-radial-gradient(
    ellipse 150% 100% at var(--wh-job-image-x, 62%) 150%,
    transparent 0,
    transparent 22px,
    var(--ap-accent, #d6dce5) 23.5px,
    transparent 25px
  );
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.5) 28%, transparent 55%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.5) 28%, transparent 55%);
}

.wh-job-image[data-variant="1"] { --wh-job-image-x: 38%; }
.wh-job-image[data-variant="2"] { --wh-job-image-x: 50%; }
.wh-job-image[data-variant="3"] { --wh-job-image-x: 74%; }

/* The whole picture, letterboxed in the theme's ground: never cropped. */
.wh-job-image__img {
  object-fit: contain;
  object-position: center;
  background-color: var(--wh-job-image-letterbox, var(--ap-bg, #14171d));
}

.wh-job-image.is-fallback .wh-job-image__img {
  display: none;
}

/* "Illustrative image" and its "Image credits" button: a caption row under the frame, never over
   the picture. 44 px tall in every state (the button's tap target), so a failed picture (label
   hidden) moves nothing. */
.wh-job-image__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 2px var(--mh-density-card-pad-x, 16px) 0;
  color: var(--ap-muted, #a8adb5);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.wh-job-image__label-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wh-job-image__credit {
  min-width: 0;
  color: inherit;
  text-decoration: underline;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 44 px tall, like every other control on the Jobs screen: the caption is small, the target is not. */
.wh-job-image__credits {
  flex: 0 0 auto;
  min-height: 44px;
  margin: 0 -8px 0 0;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ap-accent, #d8be88);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wh-job-image__credits:focus-visible {
  outline: 2px solid var(--ap-focus, #e2c992);
  outline-offset: 1px;
}

/* The vessel type the API classified: a plain tag, top left, in every state. */
.wh-job-image__type {
  position: absolute;
  left: 10px;
  top: 10px;
  max-width: calc(100% - 20px);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--ap-tag-border, #657186);
  background: var(--ap-tag-bg, #222a36);
  color: var(--ap-text-2, #c4cede);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* The same tag in the flow of the job card's text (app.js buildJobCardTypeTagHtml), among the key
   facts above the picture. */
.wh-job-type-tag {
  display: inline-block;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--ap-tag-border, #657186);
  background: var(--ap-tag-bg, #222a36);
  color: var(--ap-text-2, #c4cede);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* No picture at all from the start: a low band of the same pattern instead of an empty 16:9
   box. It never holds a picture, so its height never changes. A picture that fails after
   rendering is not .is-no-picture and keeps its 16:9 frame. */
.wh-job-image.is-no-picture .wh-job-image__frame {
  aspect-ratio: 16 / 3;
}

@supports not (aspect-ratio: 16 / 9) {
  .wh-job-image.is-no-picture .wh-job-image__frame::before {
    padding-top: 18.75%;
  }
}

/* A picture that failed: its caption goes (emptied, aria-hidden), its row stays, nothing moves. */
.wh-job-image__label.is-empty {
  visibility: hidden;
}

/* ---------------------------------------------------------------------------------------------
 * Image credits sheet (job-images.js openImageCredits / openAllImageCredits): a bottom sheet in
 * the theme's sheet colours, above the tab bar, scrolling inside itself.
 * ------------------------------------------------------------------------------------------- */
html.wh-credits-open,
html.wh-credits-open body {
  overflow: hidden;
}

.wh-credits {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.wh-credits[hidden] {
  display: none;
}

.wh-credits__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 9, 0.62);
}

.wh-credits__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: min(86vh, 720px);
  box-sizing: border-box;
  border: 1px solid var(--ap-sheet-border, #45413a);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: var(--ap-sheet-bg, #1b1c20);
  color: var(--ap-text, #f4f4f2);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  outline: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@supports (max-height: 1dvh) {
  .wh-credits__sheet {
    max-height: min(86dvh, 720px);
  }
}

.wh-credits__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px 10px 16px;
  border-bottom: 1px solid var(--ap-divider, #3d3a33);
}

.wh-credits__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.wh-credits__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -6px 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ap-text-2, #c8cbd0);
  cursor: pointer;
}

.wh-credits__close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.wh-credits__close:focus-visible,
.wh-credits__link:focus-visible,
.wh-credits__all:focus-visible {
  outline: 2px solid var(--ap-focus, #e2c992);
  outline-offset: 2px;
}

.wh-credits__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 16px 18px;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.wh-credits__lead,
.wh-credits__status {
  margin: 0 0 12px;
  color: var(--ap-text-2, #c8cbd0);
}

.wh-credits__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0;
}

.wh-credits__fields dt {
  margin-top: 8px;
  color: var(--ap-muted, #a8adb5);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.wh-credits__fields dt:first-child {
  margin-top: 0;
}

.wh-credits__fields dd {
  margin: 0;
  color: var(--ap-text, #f4f4f2);
}

.wh-credits__link {
  color: var(--ap-accent, #d8be88);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wh-credits__all {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
}

.wh-credits__entries {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wh-credits__entry {
  padding: 12px 0;
  border-top: 1px solid var(--ap-divider, #3d3a33);
}

.wh-credits__entry-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.wh-credits__entry-id {
  color: var(--ap-muted, #a8adb5);
  font-size: 12px;
  font-weight: 500;
}