/* Real photos in the cards and hotspot popups, the lightbox and the intro starfield canvas. */

/* REAL PHOTOS inside the interior cards (atrium, Al Mahara). Click / Enter opens the lightbox.
   To add one to another card, copy a <figure class="ab-real-photo"> block and point src + data-full at your image.
   Every photo (these and the lightbox's) has its corners cut 12px by alfuix (al-corner al-corner-all-12 in the
   markup; the hotspot popup's photo only its top two, al-ts-12 al-te-12), so no border-radius; these card photos
   keep a faint 1px outline along the cut
   (al-border al-border-1, coloured by --al-border-bg), which turns white and 2px when focused (an outline would be
   clipped) */
.ab-real-photo { margin: 0 0 18px; overflow: hidden; cursor: zoom-in; --al-border-bg: rgba(255,255,255,0.14); }
.ab-real-photo img { display: block; width: 100%; height: clamp(96px, 19vh, 200px); object-fit: cover; transition: transform 0.6s ease; }
.ab-real-photo:hover img, .ab-real-photo:focus-visible img { transform: scale(1.04); }
.ab-real-photo:focus-visible { outline: 0; --al-border-bg: #fff; --al-border: 2px !important; }
.ab-real-photo figcaption { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: end; gap: 8px;
  padding: 18px 10px 7px; background: linear-gradient(transparent, rgba(0,0,0,0.72)); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: #fff; }
.ab-real-photo .ab-tag { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; white-space: nowrap; }
.ab-real-photo .ab-cr { opacity: 0.8; text-align: right; }
body.ab-cyber .ab-real-photo { --al-border-bg: rgba(0,229,255,0.45); }
body.ab-cyber .ab-real-photo .ab-tag { color: var(--cy); }
/* real photo at the top of a hotspot popup (see PIN_PHOTOS in the script) */
#pincard.ab-has-photo { width: min(310px, calc(100vw - 32px)); }
#pincard .ab-pin-photo { position: relative; margin: -14px -16px 6px; height: 140px; overflow: hidden; cursor: zoom-in; background: #dfe6ea; }
#pincard .ab-pin-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#pincard .ab-pin-photo figcaption { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; gap: 8px; padding: 16px 10px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; }
#pincard .ab-pin-photo .ab-tag { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; white-space: nowrap; }
#pincard .ab-pin-photo .ab-cr { opacity: 0.85; text-align: right; }
#pincard.ab-has-photo .ab-x { z-index: 2; background: rgba(0,0,0,0.5); color: #fff; }
body.ab-cyber #pincard .ab-pin-photo { border-bottom: 1px solid rgba(0,229,255,0.4); }
body.ab-cyber #pincard .ab-pin-photo .ab-tag { color: var(--cy); }
/* SPACE PARTICLES behind the intro text (canvas added by the "intro starfield" script) */
.ab-intro { position: relative; overflow: hidden; }
.ab-intro > :not(.ab-space-fx) { position: relative; z-index: 1; }
.ab-space-fx { inset: 0; z-index: 0; }
.ab-photo-box { inset: 0; z-index: 9999; display: none; place-items: center; background: rgba(0,0,0,0.88); }
.ab-photo-box.ab-open { display: grid; }
.ab-photo-box figure { margin: 0; display: grid; gap: 10px; max-width: min(1280px, 100%); }
.ab-photo-box img { max-width: 100%; max-height: 82vh; object-fit: contain; }
.ab-photo-box figcaption { color: #fff; font-family: var(--mono); font-size: 12px; opacity: 0.85; text-align: center; }
.ab-photo-box button { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.14); color: #fff; font-size: 22px; cursor: pointer; }
@media (max-width: 600px) { .ab-real-photo img { height: clamp(80px, 15vh, 140px); } }