/* v14/v15: job photo sections (.wp-photos) — captions on the photo in view, a tap-to-enlarge button, and a full-screen
   viewer (wired-photos.js). Only loaded on pages that have a job photo section. Works on top of wired-carousel. */

/* caption on the photo: dark fade at the bottom, white text (contrast > 7:1 on the darkest part of the fade) */
.wp-photos figure { position: relative; }
.wp-photos figure figcaption {
  display: block !important;   /* the site's older gallery CSS hides figcaptions inside carousels */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0;
  padding: 2.6rem .9rem 1.35rem; font-size: .9rem; line-height: 1.35; font-weight: 600; color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(8, 11, 15, .88) 0%, rgba(8, 11, 15, .6) 55%, rgba(8, 11, 15, 0) 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5); pointer-events: none;
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
}
.wp-photos figure.is-on figcaption,
.wp-photos:not(.wp-lay-carousel) figure figcaption,
.wp-photos .gal3:not(.wc-track) figure figcaption { opacity: 1; transform: none; }

/* enlarge button, top-right of the photo in view */
.wp-zoom {
  position: absolute; top: .6rem; right: .6rem; z-index: 3; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
  background: rgba(11, 15, 20, .55); color: #fff; cursor: zoom-in;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .25s ease;
}
.wp-photos figure.is-on .wp-zoom, .wp-photos figure.is-on .wp-zoom, .wp-photos:not(.wp-lay-carousel) .wp-zoom, .wp-photos .gal3:not(.wc-track) .wp-zoom, .wp-zoom:focus-visible { opacity: 1; }
.wp-zoom svg { width: 20px; height: 20px; }
.wp-zoom:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wp-photos figure.is-on img { cursor: zoom-in; }

/* "8 photos · tap to enlarge" hint under the heading */
.wp-hint { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: .85rem; font-weight: 600; color: #4a5160; }
.wp-hint svg { width: 16px; height: 16px; }

/* full-screen viewer */
.wp-lb {
  position: fixed; inset: 0; z-index: 2147483000; display: none; flex-direction: column;
  background: #06080B; color: #fff; isolation: isolate;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.wp-lb.open { display: flex; }
html.wp-lock, html.wp-lock body { overflow: hidden; }
html.wp-lock .stick { visibility: hidden; }   /* the floating Call / Estimate bar would sit over the viewer */
.wp-lb-top { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; gap: 1rem; }
.wp-lb-count { font-size: .95rem; font-weight: 700; letter-spacing: .02em; }
.wp-lb-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.wp-lb-stage img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block;
  user-select: none; -webkit-user-drag: none; transition: opacity .2s ease;
}
.wp-lb .wp-lb-cap { color: #fff; padding: .9rem 1.1rem 1.2rem; font-size: 1rem; line-height: 1.45; text-align: center; max-width: 46rem; margin: 0 auto; }
.wp-lb button {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff;
}
.wp-lb button:hover { background: rgba(255, 255, 255, .2); }
.wp-lb button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wp-lb button[disabled] { opacity: .3; cursor: default; }
.wp-lb button svg { width: 22px; height: 22px; }
.wp-lb-prev, .wp-lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.wp-lb-prev { left: .6rem; }
.wp-lb-next { right: .6rem; }
@media (max-width: 640px) {
  .wp-lb-prev, .wp-lb-next { top: auto; bottom: -3.6rem; transform: none; }
  .wp-lb-stage { margin-bottom: 3.6rem; }
  .wp-lb-prev { left: 1rem; }
  .wp-lb-next { right: 1rem; }
  .wp-lb-cap { padding-bottom: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-photos figure figcaption, .wp-zoom, .wp-lb-stage img { transition: none; }
}

/* social section (v14): links to Wired's own profiles */
.wp-social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 1.2rem; }
@media (min-width: 720px) { .wp-social { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wp-social a {
  display: flex; align-items: center; gap: .7rem; min-height: 56px; padding: .7rem .9rem; border-radius: 16px;
  background: #fff; border: 1px solid rgba(11, 15, 20, .1); color: #0B0F14; text-decoration: none;
  box-shadow: 0 1px 2px rgba(11, 15, 20, .06), 0 10px 20px -14px rgba(11, 15, 20, .45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wp-social a:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(11, 15, 20, .08), 0 16px 26px -14px rgba(11, 15, 20, .5); }
.wp-social a:focus-visible { outline: 3px solid #0B0F14; outline-offset: 2px; }
.wp-social .ic { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; }
.wp-social .ic svg { width: 20px; height: 20px; fill: currentColor; }
.wp-social b { display: block; font-size: .95rem; line-height: 1.2; }
.wp-social small { display: block; font-size: .8rem; color: #4a5160; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-social span:last-child { min-width: 0; }
@media (prefers-reduced-motion: reduce) { .wp-social a { transition: none; } .wp-social a:hover { transform: none; } }

/* ---------------- v15 layouts ---------------- */
.wp-photos figure img { display: block; }
.wp-photos:not(.wp-lay-carousel) figure { margin: 0; overflow: hidden; border-radius: 22px; background: #E9E5DC; cursor: zoom-in;
  box-shadow: 0 1px 2px rgba(11, 15, 20, .1), 0 18px 36px -18px rgba(11, 15, 20, .55); }
.wp-photos:not(.wp-lay-carousel) figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { .wp-photos:not(.wp-lay-carousel) figure:hover img { transform: scale(1.04); } }
.wp-hidden { display: none !important; }

/* solo: one big feature photo */
.wp-solo { aspect-ratio: 4 / 3; max-width: 1040px; margin: 0 auto !important; }
@media (min-width: 900px) { .wp-solo { aspect-ratio: 16 / 9; } }
.wp-solo figcaption { font-size: 1rem !important; padding: 3.2rem 1.2rem 1.2rem !important; }

/* mosaic: one large tile + small ones */
.wp-mosaic { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.wp-mosaic .wp-tile { aspect-ratio: 1 / 1; }
.wp-mosaic .wp-big { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.wp-mosaic .wp-tile:not(.wp-big) figcaption { font-size: .78rem !important; padding: 2rem .7rem .7rem !important; }
.wp-mosaic.wp-n2 .wp-tile:not(.wp-big), .wp-mosaic.wp-n4 .wp-tile:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .wp-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(170px, 17vw, 250px); }
  .wp-mosaic .wp-tile, .wp-mosaic .wp-big { aspect-ratio: auto !important; grid-column: auto; grid-row: auto; }
  .wp-mosaic .wp-big { grid-column: span 2; grid-row: span 2; }
  .wp-mosaic.wp-n2 .wp-tile:not(.wp-big) { grid-column: span 2; grid-row: span 2; }
  .wp-mosaic.wp-n3 .wp-tile:not(.wp-big) { grid-column: span 2; }
  .wp-mosaic.wp-n4 .wp-tile:last-child { grid-column: span 2; }
}

/* band: full-width photo with the heading on it */
.wp-lay-band { position: relative; padding: 0 !important; overflow: hidden; background: #0B0F14; color: #fff; }
.wp-lay-band .wp-band-fig { position: absolute; inset: 0; margin: 0; border-radius: 0; box-shadow: none; cursor: zoom-in; }
.wp-lay-band .wp-band-fig figcaption { display: none !important; }
.wp-lay-band .wp-band-img { width: 100%; height: 100%; object-fit: cover; }
.wp-lay-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 15, 20, .15) 0%, rgba(11, 15, 20, .35) 45%, rgba(11, 15, 20, .9) 100%); }
.wp-band-text { position: relative; z-index: 2; min-height: min(78vh, 640px); display: flex; align-items: flex-end; padding: 6rem 0 2.6rem; pointer-events: none; }
.wp-band-text .wrap { width: 100%; }
.wp-band-text .eyebrow { color: #FF6B60 !important; }
.wp-band-text .d2 { color: #fff !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); max-width: 18ch; }
.wp-band-text .deck { color: #E5E8EC !important; max-width: 46ch; margin-top: .6rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.wp-band-btn { pointer-events: auto; margin-top: 1.1rem; min-height: 48px; padding: .75rem 1.3rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; font-size: 1rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wp-band-btn:hover { background: rgba(255, 255, 255, .24); }
.wp-band-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wp-lay-band .wp-zoom { top: 1rem; right: 1rem; opacity: 1; }

/* strip: a slow moving row of photos (two copies of the row; the second is hidden from screen readers) */
.wp-strip-viewport { overflow: hidden; padding: .4rem 0 1.2rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.wp-strip-track { display: flex; gap: 14px; width: max-content; animation: wp-drift calc(var(--n) * 6s) linear infinite; }
.wp-strip-track .wp-sfig { flex: 0 0 auto; width: min(64vw, 340px); aspect-ratio: 4 / 3; }
.wp-strip-track .wp-sfig figcaption { font-size: .8rem !important; padding: 2rem .8rem .8rem !important; }
.wp-strip-viewport:hover .wp-strip-track, .wp-strip-viewport:focus-within .wp-strip-track, .wp-strip-track.wp-paused { animation-play-state: paused; }
@keyframes wp-drift { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) {
  .wp-strip-track { animation: none; }
  .wp-strip-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .wp-strip-track [aria-hidden="true"] { display: none; }
  .wp-photos:not(.wp-lay-carousel) figure img { transition: none; }
}

/* v15b: wide band. The photo is always shown whole, never covered by text.
   Phones: the photo on top, then the heading on the dark panel; a short fade blends the photo into the panel.
   Wide screens: the heading on the dark panel at the left, the photo on the right, its left edge fading into the panel. */
.wp-band-wide .wp-band-fig { position: relative; inset: auto; aspect-ratio: 16 / 9; }
.wp-band-wide .wp-band-fig::after { content: ""; position: absolute; inset: auto 0 0 0; height: 16%; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 15, 20, 0), #0B0F14); }
.wp-band-wide.wp-lay-band::after { display: none; }
.wp-band-wide .wp-band-text { min-height: 0; padding: .4rem 0 2.2rem; }
.wp-band-wide .d2, .wp-band-wide .deck { text-shadow: none !important; }
@media (min-width: 900px) {
  .wp-band-wide .wp-band-fig { position: absolute; inset: 0 0 0 34%; aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%); }
  .wp-band-wide .wp-band-fig::after { display: none; }
  .wp-band-wide .wp-band-text { min-height: min(56vh, 520px); align-items: center; padding: 3.5rem 0; }
  .wp-band-wide .wp-band-text .wrap > * { max-width: 30rem; }
}
/* switching word: every word sits in the same grid cell, so the heading never changes size */
.wp-rot { display: inline-grid; justify-items: start; vertical-align: bottom; color: #FF6B60; }
.wp-rot > span { grid-area: 1 / 1; opacity: 0; transform: translateY(.3em); transition: opacity .45s ease, transform .45s ease; white-space: nowrap; }
.wp-rot > span.on { opacity: 1; transform: none; }
.wp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .wp-rot > span { transition: none; } }
/* small mosaic tiles on phones: no caption over the photo (it shows in the full-screen viewer) */
@media (max-width: 899px) { .wp-mosaic .wp-tile:not(.wp-big) figcaption { display: none !important; } }

/* v17: photo reel (carousel layout). Big photos in a row, the next one peeking in, caption + service line on the photo,
   arrows, dots, gentle auto-advance (stops on touch, hover, keyboard and for reduced motion). */
.wp-reel { position: relative; margin-top: clamp(1rem, 3vw, 2rem); }
.wp-reel-track { display: flex; gap: clamp(.75rem, 2vw, 1.25rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: .25rem .25rem 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.wp-reel-track::-webkit-scrollbar { display: none; }
.wp-reel-track:focus-visible { outline: 3px solid #C70200; outline-offset: 4px; border-radius: 24px; }
.wp-reel .wp-card { position: relative; flex: 0 0 84%; scroll-snap-align: start; margin: 0; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden;
  background: #1A1E24; cursor: zoom-in; box-shadow: 0 14px 40px rgba(11,15,20,.18); transform: scale(.965); opacity: .78; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s; }
.wp-reel .wp-card.is-cur { transform: none; opacity: 1; }
@media (min-width: 700px) { .wp-reel .wp-card { flex-basis: calc(50% - .6rem); } }
@media (min-width: 1100px) { .wp-reel .wp-card { flex-basis: calc(46% - .6rem); } }
.wp-reel .wp-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .wp-reel .wp-card:hover img { transform: scale(1.045); } }
.wp-reel .wp-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 2.6rem 1.1rem 1rem; color: #fff !important;
  background: linear-gradient(180deg, rgba(11,15,20,0) 0%, rgba(11,15,20,.82) 70%); display: flex !important; flex-direction: column; gap: .3rem; text-align: left; }
.wp-reel .wp-cap { font: 600 clamp(.92rem, 1.4vw, 1.02rem)/1.3 var(--sans, system-ui, sans-serif); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.wp-reel .wp-kw { align-self: flex-start; font: 700 .7rem/1 var(--sans, system-ui, sans-serif); letter-spacing: .06em; text-transform: uppercase;
  background: #C70200; color: #fff; padding: .38rem .6rem; border-radius: 999px; }
.wp-reel-btn { position: absolute; top: calc(50% - 1.6rem); width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center;
  font: 400 30px/1 system-ui, sans-serif; color: #0B0F14; background: rgba(255,255,255,.92); box-shadow: 0 6px 20px rgba(11,15,20,.25); cursor: pointer; z-index: 3;
  transition: transform .2s, opacity .2s; }
.wp-reel-btn:hover { transform: scale(1.08); }
.wp-reel-btn[disabled] { opacity: 0; pointer-events: none; }
.wp-prev { left: -10px; } .wp-next { right: -10px; }
@media (max-width: 699px) { .wp-reel-btn { display: none; } }
.wp-reel-dots { display: flex; justify-content: center; gap: .45rem; margin-top: .2rem; }
.wp-reel-dots i { width: 8px; height: 8px; border-radius: 99px; background: #CFC9BD; transition: width .3s, background .3s; }
.wp-reel-dots i.on { width: 26px; background: #C70200; }
@media (prefers-reduced-motion: reduce) { .wp-reel-track { scroll-behavior: auto; } .wp-reel .wp-card, .wp-reel .wp-card img { transition: none; } }
/* reel captions: the older gallery rules fade or hide figcaptions in carousels; on the reel they always show */
.wp-photos .wp-reel .wp-card figcaption { opacity: 1 !important; transform: none !important; visibility: visible !important; position: absolute !important; }
.wp-photos .wp-reel .wp-reel-track { background: none !important; }