/* Hallmark · check · built: the project · redesign: polish · genre: editorial · component: image lightbox shared by the case studies */
/* Hallmark · dismissed 3 · the three-up galleries are app screenshots side by side, not icon tiles */
/* Hallmark · dismissed 29 · the close control blurs the enlarged screenshot behind it, not a flat field */

/* Tap/click to zoom lightbox — shared across all case studies.
   Layout of inline images is untouched; this only adds an overlay on activation. */

.study-main img,
.intro-stage img:not([aria-hidden="true"]),
.zoomable {
  cursor: zoom-in;
}

/* Gallery crops pair `width: 100%` with `aspect-ratio`, but the
   width/height attributes on the markup ALSO map to a presentational
   height hint — and with height resolved (not auto) the ratio is
   ignored, so every gallery rendered at full natural height with its
   sides cropped away. :where() keeps this at zero specificity: it
   beats UA-origin hints yet loses to any real rule (intro % heights,
   logo px heights), so it only ever restores the default. */
:where(.study-main img) {
  height: auto;
}

.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 15, 15, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
  touch-action: none;
  overscroll-behavior: contain;
}

.img-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.img-lightbox__stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-lightbox__img {
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  cursor: zoom-in;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  border-radius: 6px;
  background: #1a1a1a;
}

.img-lightbox.is-open .img-lightbox__img {
  animation: lightbox-img-in 240ms cubic-bezier(.22,.61,.36,1);
}

/* Mirror the entrance: closing plays the same pop, reversed, so the image
   leaves along the same path it arrived on instead of just vanishing under
   the overlay's fade (spatial consistency — enter and exit stay symmetric). */
.img-lightbox.is-closing .img-lightbox__img {
  animation: lightbox-img-out 200ms cubic-bezier(.36,0,.64,.22) forwards;
}

@keyframes lightbox-img-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes lightbox-img-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .img-lightbox.is-open .img-lightbox__img,
  .img-lightbox.is-closing .img-lightbox__img {
    animation: none;
  }
}

.img-lightbox.is-zoomed .img-lightbox__img {
  cursor: grab;
}

.img-lightbox.is-panning .img-lightbox__img {
  cursor: grabbing;
  transition: none;
}

.img-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.12);
  color: #fbf8f3;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transform: scale(1);
  transition: background 150ms ease, transform 80ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.img-lightbox__close:hover {
  background: rgba(255,255,255,0.22);
}

.img-lightbox__close:active {
  transform: scale(0.9);
  background: rgba(255,255,255,0.28);
}

@media (prefers-reduced-transparency: reduce) {
  .img-lightbox__close {
    background: rgba(24, 24, 24, 0.92);
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .img-lightbox__close {
    border-color: rgba(255,255,255,0.6);
  }
}

@media (max-width: 640px) {
  .img-lightbox__close {
    top: 12px;
    right: 12px;
  }
}

/* -------------------------------------------------------------------------
   Preserve desktop image-row layouts on mobile.
   Image grids stay horizontal — users tap to zoom for detail instead of
   having images stack vertically.
   ------------------------------------------------------------------------- */
@media (max-width: 960px) {
  /* Prevent grid items / figures from forcing their parents wider than the
     viewport when intrinsic image sizes exceed available width. */
  .study-main,
  .study-main > .study-section,
  .study-main figure,
  .study-main .ob-img-panel__col {
    min-width: 0 !important;
  }
  .study-main img {
    max-width: 100% !important;
    height: auto;
  }

  /* onboarding-registration */
  .onboarding-page .ob-img-panel--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 8px !important;
  }
  .onboarding-page .ob-img-panel--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  .onboarding-page .ob-otp-row,
  .onboarding-page .ob-phone-flow {
    flex-wrap: nowrap !important;
    justify-content: space-around !important;
    gap: 4px !important;
    align-items: flex-start !important;
  }
  .onboarding-page .ob-phone-flow img {
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
  }
  .onboarding-page .ob-otp-group {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .onboarding-page .ob-otp-screens {
    gap: 2px !important;
    width: 100% !important;
  }
  .onboarding-page .ob-otp-screens img {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 50% !important;
    height: auto !important;
    aspect-ratio: 156 / 338 !important;
    object-fit: cover !important;
    object-position: top center !important;
  }
  .onboarding-page .ob-otp-screens img:only-child {
    margin: 0 auto !important;
  }
  .onboarding-page .ob-arrow {
    width: 14px !important;
    height: 14px !important;
  }

  /* dana-wallet-v3 */
  .dana-wallet-v3-page .problem-gallery,
  .dana-wallet-v3-page .evolution-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px 10px 10px !important;
  }
  .dana-wallet-v3-page .small-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .dana-wallet-v3-page .wide-gallery {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  /* main-gate-of-the-app */
  .main-gate-page .initiative-media--two,
  .main-gate-page .comparison-grid,
  .main-gate-page .initiative-media--protection {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .main-gate-page .footmark-grid {
    grid-template-columns: minmax(0, 347fr) minmax(0, 279fr) minmax(0, 404fr) !important;
    gap: 10px 8px !important;
  }

  /* foreign-account */
  .foreign-account-page .fa-project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* weather-but-fun */
  .weather-but-fun-page .weather-competitor-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .weather-but-fun-page .weather-competitor-grid figure,
  .weather-but-fun-page .weather-competitor {
    min-width: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }
  .weather-but-fun-page .weather-competitor img,
  .weather-but-fun-page .weather-competitor-grid img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .weather-but-fun-page .weather-mood-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .weather-but-fun-page .weather-mood-grid > * {
    min-width: 0 !important;
  }
  .weather-but-fun-page .weather-mood-grid img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .weather-but-fun-page .weather-hierarchy-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) !important;
    gap: 10px !important;
  }
  .weather-but-fun-page .weather-hierarchy-row figure,
  .weather-but-fun-page .weather-hierarchy-row > * {
    min-width: 0 !important;
  }
  .weather-but-fun-page .weather-hierarchy-row img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .weather-but-fun-page .weather-widget-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  .weather-but-fun-page .weather-widget-row > * {
    min-width: 0 !important;
  }
  .weather-but-fun-page .weather-widget-row img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Smaller text inside preserved image rows so captions don't overflow */
@media (max-width: 640px) {
  .onboarding-page .ob-img-panel--3 .ob-img-panel__col p,
  .onboarding-page .ob-img-panel--6 .ob-img-panel__col p,
  .dana-wallet-v3-page .problem-gallery figcaption,
  .dana-wallet-v3-page .evolution-gallery figcaption,
  .main-gate-page .footmark-grid figcaption,
  .weather-but-fun-page .weather-competitor-grid figcaption,
  .weather-but-fun-page .weather-hierarchy-row figure figcaption {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
}

/* the lightbox floor is near-black, so its controls take a paper ring
   instead of the site-wide ink one */
.img-lightbox :focus-visible {
  outline: 2px solid #fbf8f3;
  outline-offset: 3px;
}