/* =========================================================
   CRS MASTER RACK HEADER
   Purpose: 1U rack unit immediately below sticky navigation
   Asset: Master Rack Header.png from Cloudflare R2
   Load: After header CSS
   ========================================================= */

/* ==========================================
   CONTAINER: Rack Unit Below Sticky Nav
   ========================================== */

.rack-header-container {
  /* Sits at the very top - BEFORE sticky nav */
  width: 100%;
  background: transparent; /* Transparent PNG - no background needed */
  overflow: hidden; /* Clean edges */
  line-height: 0; /* Removes ghost spacing below image */
  position: relative;
  z-index: 100; /* Below sticky nav (nav is z-index 1000) */
}

/* ==========================================
   IMAGE: Full-Width Desktop Rack Unit
   ========================================== */

.rack-header-img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: crisp-edges; /* Sharp rendering for technical asset */
}

/* ==========================================
   STICKY NAV: Top Rail Shadow Effect
   Nav bar sticks to top when Master Rack scrolls away
   ========================================== */

/* No additional styles needed - handled in crs-header-three-zone.css */

/* ==========================================
   MOBILE: Center-Crop to Keep Text Readable
   DO NOT shrink - keep fixed height and center
   ========================================== */

@media (max-width: 768px) {
  .rack-header-container {
    height: 80px; /* Fixed readable height */
    overflow: hidden; /* Crop sides */
  }
  
  .rack-header-img {
    width: auto; /* Let it be wider than screen */
    height: 80px; /* Match container height */
    
    /* Center the "COWLEY ROAD STUDIOS" plate */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    
    /* Ensure minimum width to keep text readable */
    min-width: 100%; /* Don't let it be narrower than screen */
  }
}

/* ==========================================
   TABLET: Intermediate Responsive Step
   ========================================== */

@media (min-width: 769px) and (max-width: 1024px) {
  .rack-header-container {
    height: 100px; /* Slightly taller for tablets */
  }
  
  .rack-header-img {
    height: 100px;
  }
}

/* ==========================================
   ANTI-DRIFT: Lock the Physics
   ========================================== */

.rack-header-container * {
  box-sizing: border-box;
}

/* Remove any inherited margins that could break alignment */
.rack-header-container img {
  margin: 0;
  padding: 0;
  border: 0;
}