/* Hoofar Andish — approved host-side adjustments to the frozen hero (hero/ is never edited).
   Load after hero/hero.css. */

/* Approval 3: label corners moderately rounded, not a pill */
.hl-hero .pill { border-radius: 6px; }

/* Approval 4: on wide, short screens the frame never crops more than 8% of the image height,
   and 3/4 of that crop is taken from the empty ceiling so the hood chimney (13% from the top)
   and the bench fronts at the bottom stay in view. The stage keeps the image's exact ratio,
   so the SVG overlay and hit areas stay aligned with the photo. */
@supports (container-type: inline-size) {
  @media (min-width: 768px) {
    .hl-hero { container-type: inline-size; }
    .hl-hero .frame {
      --full-h: calc(100cqw / var(--img-ratio));
      --frame-h: min(var(--full-h), max(calc(var(--full-h) * .92), 440px, calc(100svh - var(--reserve-h))));
      height: var(--frame-h);
    }
    .hl-hero .stage {
      inset: auto 0;
      top: calc((var(--frame-h) - var(--full-h)) * .75);
      height: var(--full-h);
    }
  }
}

/* Phones: the hero's own small pan hint is replaced by the finger cue in index.html (.pan-cue) */
@media (max-width: 767px) {
  .hl-hero .pan-hint { display: none !important; }
}