/* ═══════════════════════════════════════════════════════════════════════
   image-styles.css  —  Robar Salon
   Controls heights for the hero and interior showcase sections.

   Hero image is now an <img> tag in the HTML (LCP optimisation).
   Interior image remains a CSS background.

   Header offsets (matches Tailwind header classes)
     Mobile  h-16 = 4rem (64px)  |  md+  h-20 = 5rem (80px)
═══════════════════════════════════════════════════════════════════════ */


/* ── 1. HERO — HEIGHT ───────────────────────────────────────────────── */
.hero-bg {
  display: block;
  width: 100%;
  /* Mobile: full screen minus fixed h-16 header */
  height: calc(100vh - 4rem);
}

@media (min-width: 768px) {
  .hero-bg {
    /* md+: proportional, clamped; header is h-20 */
    height:     56vw;
    min-height: 420px;
    max-height: 780px;
  }
}


/* ── 2. INTERIOR — HEIGHT & IMAGE ───────────────────────────────────── */
.interior-bg {
  display: block;
  width: 100%;
  height:     56vw;
  min-height: 280px;
  max-height: 700px;
  background-image:    url('../images/salon-side.jpg');
  background-position: center center;
  background-repeat:   no-repeat;
  background-size:     cover;
}