/* ============================================================
   King Slayer Sportfishing: /gallery/ page layout only
   Requires tokens.css then base.css.
   Photo-first page: a COMPACT .page-hero band, then one
   responsive grid of every selected image. The grid is the real
   imagery here, so the band only headlines it and never competes
   with the photographs below.
   ============================================================ */

/* ============ Compact photo band ============ */
/* Page-scoped override of the shared .page-hero. This file loads after
   base.css, so these unconditional rules also beat the base.css
   max-width:640px block: the band stays compact at every breakpoint.
   The image is 1440x1080 with the anglers in the upper third, so the
   crop window is raised from the shared 40% to keep faces in frame. */
.page-hero{min-height:clamp(300px,36vh,420px)}
.page-hero-inner{padding:clamp(3rem,7vw,4.5rem) var(--gutter) clamp(1.75rem,3.5vw,2.5rem)}
.page-hero-img{object-position:50% 20%}
.page-hero .crumbs{margin-bottom:1rem}
.page-hero h1{margin-bottom:1rem}
.page-hero-cta{margin-top:1.4rem;padding-top:1.2rem}

/* ============ Photo grid ============ */
.gal-band{
  padding:clamp(2rem,4vw,3rem) 0 clamp(3rem,6vw,5rem);
  background:var(--deep-700);
}
.gal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(.75rem,1.6vw,1.15rem);
  list-style:none;
}
.gal-item{
  border:1px solid var(--line);
  background:var(--panel);
  overflow:hidden;
}
/* height:auto is required: the HTML height attribute is a presentational hint
   that would otherwise beat aspect-ratio and render the photo at full pixel height */
.gal-item img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  /* biased above centre: anglers and fish sit in the upper half of the frame */
  object-position:50% 42%;
  transition:transform .35s ease,opacity .25s ease;
}
.gal-item:hover img{transform:scale(1.035);opacity:.94}

/* ============ Responsive ============ */
@media (max-width:600px){
  .gal-grid{grid-template-columns:1fr;gap:.9rem}
  .gal-item img{aspect-ratio:3/2}
}