/* ══════════════════════════════════════════════════════════
   CAREERS — "SHARE JOB" POSTER DIALOG (assets/js/careers-poster.js)

   The dialog is always a WHITE surface with dark text and orange accents,
   whatever the light/dark toggle says (explicit values, like the job pages).
   The poster itself is drawn on a canvas in its own red / maroon / yellow
   palette and is not affected by anything here.
   ══════════════════════════════════════════════════════════ */

html.cpm-lock { overflow: hidden; }

dialog.cpm {
  position: fixed;
  inset: 0;
  z-index: 1500;                      /* only matters when showModal() is unavailable */
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 1rem;
  border: 0;
  background: transparent;
  color: #14171C;
  font-family: var(--font-body, "Helvetica Neue", Helvetica, Arial, sans-serif);
  overflow: auto;
}
dialog.cpm:not([open]) { display: none; }
dialog.cpm[open] { display: flex; align-items: center; justify-content: center; }
dialog.cpm::backdrop { background: rgba(8, 12, 20, .68); }

.cpm-card {
  position: relative;
  width: min(1000px, 100%);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.cpm [hidden] { display: none !important; }

.cpm-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #3A3D42;
  background: #FFFFFF;
  border: 1.5px solid #D5D9DF;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(16, 24, 40, .14);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.cpm-close svg { width: 18px; height: 18px; }
.cpm-close:hover { color: #C1440E; border-color: #FF6A1F; background: #FFF8F3; }
.cpm-close:focus-visible, .cpm-btn:focus-visible, .cpm-link:focus-visible { outline: 2px solid #FF6A1F; outline-offset: 3px; }

.cpm-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  min-height: 0;
}

/* ── preview column ── */
.cpm-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  padding: 1.25rem;
  background: #F1F2F4;
}
.cpm-canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(calc(100dvh - 4.5rem), 840px);
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  box-shadow: 0 10px 34px rgba(16, 24, 40, .28);
}
.cpm-loading, .cpm-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: min(100%, 360px);
  aspect-ratio: 3 / 4;
  padding: 1.5rem;
  text-align: center;
  color: #4A4F57;
  font-size: .95rem;
  background: #FFFFFF;
  border: 1px dashed #D5D9DF;
  border-radius: 8px;
}
.cpm-error-text { margin: 0; color: #B42318; font-weight: 600; line-height: 1.5; }
.cpm-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid #FFE3D1;
  border-top-color: #FF6A1F;
  border-radius: 50%;
  animation: cpm-spin .8s linear infinite;
}
@keyframes cpm-spin { to { transform: rotate(360deg); } }

/* ── details + actions column ── */
.cpm-side {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 2.4rem 1.75rem 1.75rem;
  min-width: 0;
}
.cpm-kicker {
  margin: 0;
  font-family: var(--font-mono, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #C1440E;
}
.cpm-title {
  margin: 0;
  font-family: var(--font-display, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 1.5rem;
  line-height: 1.2;
  text-transform: none;
  color: #14171C;
  overflow-wrap: anywhere;
}
.cpm-loc { display: flex; align-items: flex-start; gap: .5rem; margin: 0; font-size: .95rem; line-height: 1.45; color: #4A4F57; }
.cpm-pin { display: inline-flex; flex-shrink: 0; margin-top: .1rem; color: #FF6A1F; }
.cpm-pin svg { width: 18px; height: 18px; }
.cpm-hint { margin: .25rem 0 .25rem; font-size: .9rem; line-height: 1.55; color: #5A5F68; }

.cpm-actions { display: flex; flex-direction: column; gap: .65rem; margin-top: .25rem; }
.cpm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .7rem 1.4rem;
  font-family: var(--font-mono, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 2.5rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.cpm-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.cpm-btn--primary { color: #fff; background: linear-gradient(135deg, #FF8A3D, #FF6A1F); box-shadow: 0 8px 20px rgba(255, 106, 31, .3); }
.cpm-btn--primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 106, 31, .4); }
.cpm-btn--ghost { color: #3A3D42; background: #fff; border-color: #D5D9DF; }
.cpm-btn--ghost:hover:not(:disabled) { color: #C1440E; border-color: #FF6A1F; background: #FFF8F3; }
.cpm-btn--sm { min-height: 40px; padding: .45rem 1.2rem; font-size: .74rem; }
.cpm-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.cpm-status { min-height: 2.9em; margin: 0; font-size: .88rem; line-height: 1.45; color: #4A4F57; overflow-wrap: anywhere; }
.cpm-status.is-ok { color: #1B7F3B; font-weight: 600; }
.cpm-status.is-error { color: #B42318; font-weight: 600; }

.cpm-linkrow { display: flex; flex-direction: column; gap: .35rem; margin-top: auto; }
.cpm-linklabel { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5A5F68; }
.cpm-link {
  width: 100%;
  padding: .6rem .8rem;
  font: inherit;
  font-size: .82rem;
  color: #3A3D42;
  background: #F7F8FA;
  border: 1px solid #E2E5EA;
  border-radius: .6rem;
  text-overflow: ellipsis;
}

/* ── phones: full-screen sheet, preview on top, full-width buttons ── */
@media (max-width: 760px) {
  dialog.cpm { padding: 0; }
  .cpm-close { position: fixed; }       /* the card scrolls here; keep × reachable */
  .cpm-card { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .cpm-body { grid-template-columns: minmax(0, 1fr); }
  .cpm-stage { min-height: 0; padding: 3.4rem 1rem 1rem; }
  .cpm-canvas { max-height: 58dvh; }
  .cpm-loading, .cpm-error { width: min(100%, 300px); }
  .cpm-side { padding: 1.25rem 1.1rem 1.5rem; }
  .cpm-title { font-size: 1.3rem; }
}
@media (max-width: 760px) and (max-height: 560px) {
  .cpm-canvas { max-height: 70dvh; }
}

@media (prefers-reduced-motion: reduce) {
  .cpm-btn, .cpm-close { transition: none; }
  .cpm-btn--primary:hover:not(:disabled) { transform: none; }
  .cpm-spinner { animation-duration: 2.4s; }
}