/* =========================================================================
   ZZLab site — reusable scrolling photo band ("hero-frame")
   -------------------------------------------------------------------------
   HOW TO ADD A PHOTO TO ANY PAGE (no CSS editing, ever):

       <div class="hero-frame"><img src="../images/YOURFILE.jpg" alt=""></div>

   Put as many of these as you like, anywhere on the page — one photo,
   two, five, however many. Each one:
     - shows the WHOLE photo, never cropped, whatever size/shape it is
     - on any screen (phone, iPad, computer), as you scroll the page
       past it, the photo scrolls too so you see all of it top to bottom
     - needs zero setup: no picking an id, no CSS, no size numbers to
       hand-tune, works the same for every future photo Zhiwu adds

   Include assets/js/hero.js once near the end of the page (same place
   the other <script> tags already are) — that's what drives the
   scroll effect, and it works the same on phone, iPad, and computer.

   Want a photo to just sit still instead of scrolling (handy when you
   have a lot of photos in a row and want to break up the rhythm)? Add
   "hero-frame hero-frame--static" instead of just "hero-frame":

       <div class="hero-frame hero-frame--static"><img src="..." alt=""></div>

   That photo shows in full immediately (shrunk to fit its window,
   letterboxed if needed) and never moves as you scroll past it.
   ========================================================================= */

.hero-frame {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #15151a;   /* shows briefly while a tall photo loads */
	height: 42vh;
	min-height: 240px;
	max-height: 560px;
}

	@media screen and (max-width: 980px) {
		.hero-frame {
			height: 34vh;
			min-height: 190px;
			max-height: 380px;
		}
	}

.hero-frame img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;      /* natural aspect ratio -- the whole photo, never cropped */
	display: block;
	will-change: transform;
}

/* Static variant: whole photo shown at rest (letterboxed if needed),
   never scrolls, hero.js skips these entirely. */
.hero-frame--static img {
	position: absolute;
	inset: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: none !important;
}

/* Stack of multiple hero-frames on one page (e.g. a page with 3 photos):
   a small gap so each band reads as its own photo rather than
   running together. */
.hero-frame + .hero-frame {
	margin-top: 4px;
}

/* -------------------------------------------------------------------------
   Content card that follows the hero-frame(s).
   Pages built with the new pattern should add class="uses-hero" to <body>.
   This cancels out the old site-wide ".wrapper" rule (main.css) that used
   to yank the text card up over the photo with a negative percentage
   margin — that's the rule that caused the original truncation bug. The
   card now just sits cleanly below the photo(s) at any screen width.
   ------------------------------------------------------------------------- */
body.uses-hero .wrapper {
	margin-top: 0;
	padding-top: 2em;
}
