/* ===== Deploy 7: page photos ("CAM 04–09"). Loaded only on the pages that have a photo:
   jobs.html (CAM 04), job pages (CAM 06), career-guides.html (CAM 05), radar.html + archive months (CAM 07),
   about.html (CAM 08), news.html (CAM 09), cv-builder.html (CAM 10, Deploy 8). Classes cam-… only; nothing here touches another page.
   The photo fades itself out (CSS mask) on the text side, top and bottom, so there is no edge line.
   Phones (≤ 640 px): a short photo strip above the title, the title starts on its fade. ===== */

.cam-hero { position: relative; overflow: hidden; background: var(--ground, #24282e); }
.cam-photo {
  position: absolute; top: 0; bottom: 0; right: 0; width: var(--cam-w, 66%);
  background-image: var(--cam-1x); background-image: image-set(var(--cam-1x) 1x, var(--cam-2x) 2x);
  background-size: cover; background-position: var(--cam-pos, 50% 50%); background-repeat: no-repeat;
  --fx: linear-gradient(270deg, #000 0%, #000 38%, rgba(0,0,0,.88) 50%, rgba(0,0,0,.65) 61%, rgba(0,0,0,.4) 72%, rgba(0,0,0,.18) 83%, rgba(0,0,0,.05) 92%, transparent 100%);
  --fy: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.8) 10%, #000 20%, #000 var(--cam-y1, 66%), rgba(0,0,0,.6) var(--cam-y2, 80%), rgba(0,0,0,.2) var(--cam-y3, 92%), transparent 100%);
  -webkit-mask-image: var(--fx), var(--fy); mask-image: var(--fx), var(--fy);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.cam-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #24282e 0%, rgba(36,40,46,0.85) 30%, rgba(36,40,46,0.45) 44%, rgba(36,40,46,0) 60%); }
.cam-label { position: absolute; top: 24px; right: 32px; z-index: 1; background: rgba(31,35,40,0.8); color: var(--text, #eef0f2);
  font-family: var(--mono); font-size: 12px; letter-spacing: 1px; padding: 6px 10px; white-space: nowrap; }
.cam-label .cam-s { display: none; }
.cam-hero .cam-copy { position: relative; }
.cam-hero.cam-big .cam-copy h1, .cam-hero.cam-big .cam-copy .lead { max-width: 640px; }
.cam-hero .h-joint { display: none; }

/* photo on the LEFT, text on the right (job board) */
.cam-left .cam-photo { right: auto; left: 0;
  --fx: linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,.9) 50%, rgba(0,0,0,.7) 60%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.22) 80%, rgba(0,0,0,.07) 90%, transparent 100%);
  --fy: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.8) 10%, #000 22%, #000 62%, rgba(0,0,0,.6) 78%, rgba(0,0,0,.2) 90%, transparent 100%); }
.cam-left .cam-shade { background: linear-gradient(270deg, #24282e 0%, rgba(36,40,46,0.82) 22%, rgba(36,40,46,0.45) 38%, rgba(36,40,46,0) 56%); }
.cam-left .cam-label { right: auto; left: 32px; }

/* the photos */
.cam04 { --cam-1x: url(../images/cam/cam04-offshore-sunset-1600.jpg); --cam-2x: url(../images/cam/cam04-offshore-sunset-2400.jpg);
  --cam-w: 80%; --cam-pos: 50% 72%; --cam-m-size: 160% auto; --cam-m-pos: 17% 66%; --cam-m-h: 150px; }
.cam05 { --cam-1x: url(../images/cam/cam05-transition-piece-dusk-1600.jpg); --cam-2x: url(../images/cam/cam05-transition-piece-dusk-2400.jpg);
  --cam-pos: 50% 64%; --cam-y1: 70%; --cam-y2: 84%; --cam-y3: 94%; --cam-m-size: 145% auto; --cam-m-pos: 100% 80%; }
.cam06 { --cam-1x: url(../images/cam/cam06-blades-on-deck-1000.jpg); --cam-2x: url(../images/cam/cam06-blades-on-deck-1500.jpg);
  --cam-m-pos: 50% 62%; --cam-m-h: 170px; }
.cam07 { --cam-1x: url(../images/cam/cam07-tower-sections-port-1600.jpg); --cam-2x: url(../images/cam/cam07-tower-sections-port-2400.jpg);
  --cam-pos: 60% 42%; --cam-m-pos: 62% 40%; }
.cam08 { --cam-1x: url(../images/cam/cam08-crew-at-work-1600.jpg); --cam-2x: url(../images/cam/cam08-crew-at-work-2400.jpg);
  --cam-pos: 50% 50%; --cam-m-pos: 46% 50%; }
.cam10 { --cam-1x: url(../images/cam/cam10-jack-up-night-1600.jpg); --cam-2x: url(../images/cam/cam10-jack-up-night-2400.jpg);
  --cam-w: 62%; --cam-pos: 45% 50%; --cam-y1: 62%; --cam-y2: 80%; --cam-y3: 92%; --cam-m-size: 175% auto; --cam-m-pos: 48% 55%; --cam-m-h: 200px; }
.cam09 { --cam-1x: url(../images/cam/cam09-jack-up-vessel-1000.jpg); --cam-2x: url(../images/cam/cam09-jack-up-vessel-1500.jpg);
  --cam-pos: 50% 62%; --cam-m-pos: 30% 64%; }

/* hero heights and text placement on wide screens */
.cam-hero.cam-big .cam-copy { padding-top: 96px; padding-bottom: 96px; }
.cam04 { min-height: 460px; display: flex; align-items: center; }
.cam04 .cam-copy { width: 100%; box-sizing: border-box; display: flex; justify-content: flex-end; }
.cam04 .cam-text { max-width: 540px; }
.cam04 .cam-text h1 { max-width: none; }

/* CV builder (Deploy 8): text stays on the left, the photo fills the free right side */
.cam10 .cvb-hero { padding-top: 72px; padding-bottom: 56px; }
.cam10 .cvb-hero h1, .cam10 .cvb-hero .lead { max-width: 620px; }
.cam10 .cvb-privacy { max-width: 620px; background: rgba(11,26,22,0.9); }

/* Job pages: a faint photo inside the right half of the job card (approved option D) */
.job-page { max-width: 960px; }
.job-detail { position: relative; }
.job-detail > :not(.cam-ghost):not(.cam-ghost-label) { position: relative; }
.cam-ghost { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; pointer-events: none;
  background-image: var(--cam-1x); background-image: image-set(var(--cam-1x) 1x, var(--cam-2x) 2x);
  background-size: cover; background-position: 50% 42%; background-repeat: no-repeat;
  --gx: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 18%, rgba(0,0,0,.75) 38%, #000 58%, #000 88%, rgba(0,0,0,.4) 96%, transparent 100%);
  --gy: linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
  -webkit-mask-image: var(--gx), var(--gy); mask-image: var(--gx), var(--gy);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.cam-ghost { opacity: 0.28; }
.cam-ghost-label { position: absolute; top: 16px; right: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--text-muted, #a9b1ba); pointer-events: none; }
.cam-strip { display: none; }

/* ===== Phones ===== */
@media (max-width: 640px) {
  .cam-hero, .cam04 { display: block; min-height: 0; }
  .cam-photo, .cam-left .cam-photo { position: relative; left: auto; right: auto; width: 100%; height: var(--cam-m-h, 220px);
    background-size: var(--cam-m-size, cover); background-position: var(--cam-m-pos, 50% 50%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.4) 0%, #000 16%, #000 55%, rgba(0,0,0,.6) 72%, rgba(0,0,0,.2) 88%, transparent 100%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.4) 0%, #000 16%, #000 55%, rgba(0,0,0,.6) 72%, rgba(0,0,0,.2) 88%, transparent 100%); }
  .cam-shade { display: none; }
  .cam-label, .cam-left .cam-label { top: 12px; left: 12px; right: auto; font-size: 10px; padding: 4px 8px; }
  .cam-left .cam-label { left: auto; right: 12px; }
  .cam-label .cam-l, .cam-hero .eyebrow .cam-l { display: none; } .cam-label .cam-s { display: inline; }
  .cam-hero .cam-copy, .cam-hero.cam-big .cam-copy { margin-top: -40px; padding-top: 0 !important; padding-bottom: 24px; }
  .cam04 .cam-copy { display: block; margin-top: -34px; padding-bottom: 16px; }
  .cam04 .cam-text { max-width: none; }
  /* job pages: the strip above the card, no faint photo inside the card */
  .cam-strip { display: block; position: relative; }
  .cam-strip + .job-page { margin-top: -56px; padding-top: 0; position: relative; }
  .cam-ghost, .cam-ghost-label { display: none; }
}

/* About (text page): the first heading sits in the photo hero, the text continues below */
.cam-page-head { padding-top: 0; padding-bottom: 0; }
.cam-page-head h1 { font-size: clamp(42px, 6.4vw, 72px); line-height: 0.98; margin: 0; max-width: 600px; }
.cam-page-rest { padding-top: 8px; }
@media (max-width: 640px) { .cam-page-head h1 { font-size: 40px; } }