/* =========================================================
   ATM Work Gallery — grid + detail panel
   Uses the design system's tokens throughout, so it inherits
   the palette and (now Ubuntu) typography automatically.
   Widget Style controls override these via {{WRAPPER}}.
   ========================================================= */

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}

.work-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 0;
  padding: 0;
  border-radius: var(--radius);
  background: var(--navy);
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}
.work-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.work-card:hover img,
.work-card:focus-visible img { transform: scale(1.06); }

.work-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,13,24,0) 42%, rgba(7,13,24,.82) 100%);
}

.work-card__body {
  position: absolute;
  left: 1.1rem;
  right: 3.4rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.work-card__cat {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.work-card__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  color: #fff;
}

.work-card__go {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--signal);
  transition: transform .4s var(--ease);
}
.work-card__go svg { width: 15px; height: 15px; stroke: #fff; }
.work-card:hover .work-card__go { transform: rotate(90deg); }

/* ---------- Detail panel ---------- */
.work-modal[hidden] { display: none; }
.work-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.work-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7,13,24,.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.work-modal__dialog {
  position: relative;
  width: min(1000px, 100%);
  max-height: 88vh;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(7,13,24,.45);
}
.work-modal__scroll { max-height: 88vh; overflow-y: auto; }

.work-modal__panel[hidden] { display: none; }
.work-modal__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
}
.work-modal__media { position: relative; min-height: 260px; }
.work-modal__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-modal__body { padding: clamp(1.5rem, 3vw, 2.75rem); }
.work-modal__body h3 { margin: .35rem 0 1rem; }
.work-modal__text p { margin-bottom: .9rem; }
.work-modal__text p:last-child { margin-bottom: 0; }

.work-modal__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.work-modal__stat { display: flex; flex-direction: column; }
.work-modal__stat-num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--signal);
  line-height: 1.1;
}
.work-modal__stat-label {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .3rem;
}
.work-modal__body .btn { margin-top: 1.5rem; }

.work-modal__close {
  position: absolute;
  /* Inset far enough to clear the dialog's rounded corner — it was sitting on
     the curve and reading as half-outside the panel. */
  top: 1.1rem;
  right: 1.1rem;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--signal);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(7,13,24,.25);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.work-modal__close:hover { background: var(--signal-dk); transform: rotate(90deg); }

.work-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(7,13,24,.55);
  cursor: pointer;
  transition: background .3s var(--ease);
}
.work-modal__nav:hover { background: var(--signal); }
.work-modal__nav svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }
.work-modal__nav--prev { left: .6rem; }
.work-modal__nav--next { right: .6rem; }

body.work-modal-open { overflow: hidden; }

@media (max-width: 900px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-modal__panel { grid-template-columns: 1fr; }
  .work-modal__media { min-height: 200px; max-height: 34vh; }
}
@media (max-width: 620px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-modal__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .work-card img, .work-card__go { transition: none; }
}

/* ---------- Layout modes ---------- */

/* Mosaic: the first tile spans two columns and two rows, so the grid reads
   like an editorial spread rather than a uniform matrix. */
.work-grid--mosaic > .work-card:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}
.work-grid--mosaic > .work-card:first-child .work-card__title { font-size: 1.4rem; }
@media (max-width: 620px) {
  .work-grid--mosaic > .work-card:first-child { grid-column: span 1; grid-row: span 1; }
}

/* Masonry: CSS columns keep each image at its natural height, which suits a
   mixed set of screenshots, posters and photography. */
.work-grid--masonry {
  display: block;
  column-count: 3;
  column-gap: 1.15rem;
}
.work-grid--masonry > .work-card {
  break-inside: avoid;
  aspect-ratio: auto;
  margin-bottom: 1.15rem;
  display: inline-block;
  width: 100%;
}
.work-grid--masonry > .work-card img {
  position: static;
  height: auto;
  display: block;
}
@media (max-width: 900px) { .work-grid--masonry { column-count: 2; } }
@media (max-width: 620px) { .work-grid--masonry { column-count: 1; } }

/* Text-free tiles (pure imagery) still need the hover affordance, but no
   gradient scrim eating the picture. */
.work-card:not(:has(.work-card__title:not(:empty))) .work-card__scrim { opacity: .35; }

/* ---------- Media collage (service blocks) ----------
   The collage keeps the approved .svc__media grid; only the clickable wrapper
   is new. Buttons are reset so the images sit exactly where <img> did. */
.svc__media-item {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--radius);
  -webkit-appearance: none;
  appearance: none;
}
/* The old site placed the two portrait tiles on the top row and the wide tile
   beneath them, so `last` is the default. Driven by an explicit .is-feature
   class rather than child order, so it survives reordering in the editor. */
.svc__media--feature-first > .is-feature,
.svc__media--feature-last  > .is-feature { grid-column: 1 / -1; }
.svc__media:not(.svc__media--natural) > .is-feature img { aspect-ratio: 16/9; }

/* With an odd number of portrait tiles the last one sits alone in a two-column
   row and leaves a hole beside it. Any tile that would be orphaned spans the
   full width instead, so the collage always reads as a solid block.
   Covers both the "feature last" case (orphan is second-from-last) and a
   plain grid (orphan is last). */
/* All of these are crop-mode rules. Each carries :not(.svc__media--natural)
   so they cannot reach into a natural collage — the orphan rule below was
   matching a natural collage's only child (an only child is also
   last-child:nth-child(odd)) and forcing the Kenya composite into a 16:9
   box, which object-fit:contain then letterboxed into a small centred strip.
   Excluding natural mode here is cleaner than out-specifying it there. */
.svc__media--feature-last:not(.svc__media--natural) > .svc__media-item:not(.is-feature):nth-last-child(2):nth-child(odd),
.svc__media--feature-first:not(.svc__media--natural) > .svc__media-item:not(.is-feature):last-child:nth-child(even),
.svc__media:not([class*="feature"]):not(.svc__media--natural) > .svc__media-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.svc__media--feature-last:not(.svc__media--natural) > .svc__media-item:not(.is-feature):nth-last-child(2):nth-child(odd) img,
.svc__media--feature-first:not(.svc__media--natural) > .svc__media-item:not(.is-feature):last-child:nth-child(even) img,
.svc__media:not([class*="feature"]):not(.svc__media--natural) > .svc__media-item:last-child:nth-child(odd) img {
  aspect-ratio: 16/9;
}
.svc__media:not(.svc__media--natural) > .svc__media-item:not(.is-feature) img { aspect-ratio: 4/5; }

/* Natural mode: no cropping at all — every tile keeps its own proportions.
   This is what the client means by "show the full image like the live site".

   Laid out as JUSTIFIED ROWS, the way the old site arranges them: a tile
   stands alone at full width, or shares its row with a neighbour. Paired
   tiles are given widths in proportion to their aspect ratios (--w, set by
   the widget or by work-gallery.js), which is what makes two differently
   shaped images come out the same height with nothing cropped. The result is
   compact — no half-width tile with a hole beneath it, no lone tile in a
   half-width cell.

   It has to beat three earlier rules in this file: the feature tile's 16/9,
   the orphan tile's 16/9, and the 4/5 portrait default. It also has to beat
   the widget's own per-element aspect-ratio, which Elementor emits at 0,2,0 —
   hence the extra class on the selector. */
.svc__media.svc__media--natural {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  --collage-gap: .75rem;
  gap: var(--collage-gap);
}
.svc__media.svc__media--natural > .svc__media-item {
  /* Width is a share of the row minus the one gap between a pair. The 0.5px
     absorbs sub-pixel rounding so a pair never wraps onto two lines. */
  flex: 0 0 calc((100% - var(--collage-gap)) * var(--w, 1) - 0.5px);
  width: auto;
  max-width: 100%;
  min-width: 0;
  grid-column: auto;
}
/* Whole-row tiles, and every tile until rows have been assigned. */
.svc__media.svc__media--natural > .svc__media-item.is-solo,
.svc__media.svc__media--natural:not([data-collage-rows]) > .svc__media-item {
  flex-basis: 100%;
}
.svc__media.svc__media--natural > .svc__media-item img {
  aspect-ratio: auto;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  object-fit: contain;
}
.svc__media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease);
}
.svc__media-item:hover img,
.svc__media-item:focus-visible img { transform: scale(1.05); }

.svc__media-zoom {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(7,13,24,.55);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.svc__media-zoom svg { width: 15px; height: 15px; stroke: #fff; }
.svc__media-item:hover .svc__media-zoom,
.svc__media-item:focus-visible .svc__media-zoom { opacity: 1; transform: none; }

/* Image-only panels fill the dialog instead of leaving an empty text column */
.work-modal__panel--image-only { grid-template-columns: 1fr; }
.work-modal__media--contain { background: var(--ink); }
.work-modal__media--contain img { object-fit: contain; max-height: 78vh; }

@media (prefers-reduced-motion: reduce) {
  .svc__media-item img, .svc__media-zoom { transition: none; }
}


/* ---------- Collage lightbox: image + text ----------
   Mirrors the live site's arrangement — image on the left at its natural
   proportions, copy in a calm column on the right — but on the design
   system's surface rather than the Wix pink. */
.work-modal__panel--collage {
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  align-items: stretch;
  min-height: 0;
}
.work-modal__panel--collage .work-modal__media {
  background: var(--paper);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2.5vw, 2rem);
  min-height: 0;
}
.work-modal__panel--collage .work-modal__media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(7,13,24,.18);
}
.work-modal__panel--collage .work-modal__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  background: var(--white);
}
.work-modal__panel--collage .eyebrow { margin-bottom: .5rem; }
.work-modal__panel--collage h3 { margin: 0 0 .9rem; font-size: 1.35rem; }
.work-modal__panel--collage .work-modal__text {
  font-size: .975rem;
  line-height: 1.7;
  color: var(--muted-dk, var(--muted));
}

/* Counter so a visitor knows where they are in the set */
.work-modal__counter {
  position: absolute;
  left: 50%;
  bottom: .85rem;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  color: rgba(255,255,255,.9);
  background: rgba(7,13,24,.55);
  padding: .3rem .7rem;
  border-radius: 999px;
}



/* =========================================================
   ATM Social Grid — curated client Instagram wall
   ========================================================= */
.social-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--marine-dk, var(--navy));
  margin-bottom: clamp(1.1rem, 2.2vw, 1.8rem);
}
.social-head svg { width: 22px; height: 22px; fill: currentColor; flex: none; }

.social-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .6rem;
}

.social-tile {
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy);
}
.social-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease);
}
.social-tile:hover img,
.social-tile:focus-visible img { transform: scale(1.07); }

.social-tile__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .3rem;
  padding: .75rem;
  background: linear-gradient(180deg, rgba(7,13,24,0) 45%, rgba(7,13,24,.82) 100%);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.social-tile:hover .social-tile__overlay,
.social-tile:focus-visible .social-tile__overlay { opacity: 1; }

.social-tile__caption {
  font-size: .8rem;
  line-height: 1.4;
  color: rgba(255,255,255,.9);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.social-tile__client {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}

.social-follow { text-align: center; margin-top: clamp(1.2rem, 2.5vw, 2rem); }

@media (max-width: 900px) { .social-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .social-grid { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .social-tile img, .social-tile__overlay { transition: none; }
}


/* =========================================================
   Lightbox — small screens
   Appended last so these win over the desktop rules above.

   Portrait images were overflowing the dialog: the desktop cap of 76vh sits
   later in the file than the old mobile block, so it took precedence, and a
   tall magazine cover ran past the panel with the copy showing through behind
   it. The dialog is now a flex column that cannot exceed the viewport, and the
   image is capped against the panel rather than the screen.
   ========================================================= */
@media (max-width: 900px) {
  .work-modal { padding: .75rem; align-items: stretch; }

  .work-modal__dialog {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;              /* excludes mobile browser chrome */
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .work-modal__scroll {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .work-modal__panel,
  .work-modal__panel--collage {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .work-modal__media,
  .work-modal__panel--collage .work-modal__media {
    flex: 0 0 auto;
    padding: .75rem;
    min-height: 0;
    overflow: hidden;
  }
  /* Cap the image in viewport units directly. `max-height: 100%` needs a
     definite height on the parent to resolve against — a parent with only a
     max-height does not provide one, so the image fell back to its natural
     size and ran past the dialog. */
  .work-modal__media img,
  .work-modal__panel--collage .work-modal__media img,
  .work-modal__media--contain img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 50vh;
    max-height: 50dvh;
    object-fit: contain;
    margin-inline: auto;
    display: block;
  }

  .work-modal__body,
  .work-modal__panel--collage .work-modal__body {
    flex: 0 1 auto;
    padding: 1rem 1.1rem 1.4rem;
  }
  .work-modal__panel--collage h3 { font-size: 1.15rem; }
  .work-modal__text { font-size: .9rem; }

  /* Close button clear of the image, counter clear of the text */
  .work-modal__close { top: .6rem; right: .6rem; width: 36px; height: 36px; }
  .work-modal__counter { bottom: .5rem; }
}

@media (max-width: 560px) {
  .work-modal__media img,
  .work-modal__panel--collage .work-modal__media img,
  .work-modal__media--contain img {
    max-height: 42vh;
    max-height: 42dvh;
  }
  .work-modal__nav { display: none; }   /* swipe/tap the tiles instead */
}

/* Landscape phones have very little height — give the image less of it. */
@media (max-height: 520px) and (orientation: landscape) {
  .work-modal__media img,
  .work-modal__panel--collage .work-modal__media img { max-height: 58vh; }
  .work-modal__dialog { max-height: 96vh; }
}