/* WASSIMVISUALS 1.9 / Stable Portfolio
   Keep the existing grid, alignment, columns and project typography intact.
   Only the image receives the frosted glass. */
#work.section.wrap {
  width: 100%;
  max-width: 1700px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 80px);
}
#project-grid {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 60px 24px;
  align-items: start;
}
#project-grid > .case-link {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  opacity: 1;
  filter: none !important;
  transform: none !important;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  position: relative;
  display: block;
}
#project-grid > .case-link .portfolio-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.7;
  overflow: hidden;
  isolation: isolate;
  background: #ddd9d2;
  contain: layout paint;
}
#project-grid .portfolio-media > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
#project-grid .portfolio-placeholder {
  width: 100%;
  height: 100%;
}
#project-grid .portfolio-media > .glass-wipe-canvas,
#project-modal-image-wrap > .glass-wipe-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity .2s ease;
  will-change: opacity;
}
#project-grid .portfolio-media.glass-ready { cursor: crosshair; }
#project-grid .case-link h3, #project-grid .case-link p {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
#project-grid > .case-link:hover h3 {letter-spacing: -.055em}
#project-grid > .case-link:focus-visible .glass-wipe-canvas {opacity: 0}
/* Dim unfocused visuals — no blur/filter/scale on the cards or grid. */
@media (hover: hover) and (pointer: fine) {
  #project-grid:hover > .case-link:not(:hover) .portfolio-media {filter: brightness(.88)}
  #project-grid > .case-link .portfolio-media {transition:filter .35s ease}
}
@media (max-width: 600px) {
  #project-grid {grid-template-columns: 1fr !important;gap: 38px}
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  #project-grid .glass-wipe-canvas, #project-modal-image-wrap > .glass-wipe-canvas {display: none !important}
  #project-grid .portfolio-media {cursor: pointer}
  #project-grid:hover > .case-link:not(:hover) .portfolio-media {filter: none}
}
#project-modal-image-wrap {position:relative;isolation:isolate;overflow:hidden;cursor:crosshair}
#project-modal-image-wrap img {transform:none!important;filter:none!important;transition:none!important}

/* V2.1 — Mobile columns. Override previous one-column !important rules
   without changing the original desktop grid width or alignment. */
@media (max-width: 600px) {
  #work.section.wrap { padding-inline: clamp(16px, 5vw, 24px); }
  #project-grid.portfolio-grid {
    grid-template-columns: repeat(var(--mobile-cols, 1), minmax(0, 1fr)) !important;
    column-gap: clamp(12px, 3.2vw, 18px);
    row-gap: 36px;
    align-items: start;
  }
  #project-grid.portfolio-grid > .case-link { width:100%; min-width:0; }
  #project-grid.portfolio-grid .portfolio-media { aspect-ratio: 4 / 4.7; }
  #project-grid.portfolio-grid .portfolio-media > img {
    display: block; width:100%; height:100%; object-fit:cover;
    object-position:center; filter:none !important;
    -webkit-filter:none !important; image-rendering:auto;
    transform:none !important; backface-visibility:visible;
    -webkit-backface-visibility:visible;
  }
  /* Touch preview = original source pixels. No blur, canvas, overlay or opacity fade. */
  #project-grid .glass-wipe-canvas,
  #project-modal-image-wrap > .glass-wipe-canvas { display:none !important; }
  #project-grid.portfolio-grid .portfolio-media,
  #project-grid.portfolio-grid > .case-link {filter:none!important;opacity:1!important;}
  #project-grid.portfolio-grid .case-link h3 {
    font-size:clamp(15px,3.7vw,21px);line-height:1.2;
    margin:12px 0 6px;letter-spacing:-.055em;
    overflow-wrap:anywhere;
  }
  #project-grid.portfolio-grid .case-link p {
    font-size:11px;line-height:1.45;overflow-wrap:anywhere;
  }
}
/* Wipe is desktop-pointer-only. It must never degrade touch screen image sharpness. */
@media (hover:none), (pointer:coarse) {
  #project-grid .glass-wipe-canvas,
  #project-modal-image-wrap > .glass-wipe-canvas { display:none !important; }
  #project-grid .portfolio-media > img { filter:none!important; -webkit-filter:none!important; image-rendering:auto; }
}