/**
 * Mobile-only universal Hero photo fix
 * 
 * FORENSICS RESULTS:
 * - Source of crop: .cd-hero-image-wrapper with overflow: hidden + aspect-ratio: 16/9 + max-height
 * - Image uses: object-fit: cover + height: 100%
 * - Media queries override at 900px and 599px
 * 
 * FIX STRATEGY:
 * - Remove overflow: hidden (allows image to be fully visible)
 * - Remove aspect-ratio constraint (allows natural image ratio)
 * - Change object-fit: cover → contain (no cropping)
 * - Allow natural height with reasonable max-height
 * 
 * Selector source: city-page.php
 * Hero container: .cd-hero-image-wrapper
 * Hero image: .cd-hero-image-wrapper .cd-hero-image
 */

/* Mobile: 599px and below (most restrictive breakpoint) */
@media (max-width: 599px) {
  /* Container: remove all cropping constraints */
  .cd-hero-image-wrapper {
    height: auto !important;
    min-height: auto !important;
    max-height: 70vh !important; /* Reasonable limit, but not cropping */
    aspect-ratio: unset !important; /* Remove 16/9 constraint */
    overflow: visible !important; /* CRITICAL: allow image to be fully visible */
    position: relative !important; /* Keep positioning context */
    background: #f5f5f5 !important; /* Neutral background for contain */
  }

  /* Image: always fully visible, no cropping */
  .cd-hero-image-wrapper .cd-hero-image {
    width: 100% !important;
    height: auto !important; /* Natural height, not 100% */
    min-width: auto !important;
    min-height: auto !important;
    max-width: 100% !important;
    max-height: 70vh !important;
    object-fit: contain !important; /* CRITICAL: show full image */
    object-position: center center !important;
    display: block !important;
  }
}

/* Tablet/Mobile: 768px and below (wider mobile range) */
@media (max-width: 768px) and (min-width: 600px) {
  .cd-hero-image-wrapper {
    height: auto !important;
    max-height: 70vh !important;
    aspect-ratio: unset !important;
    overflow: visible !important;
    background: #f5f5f5 !important;
  }

  .cd-hero-image-wrapper .cd-hero-image {
    width: 100% !important;
    height: auto !important;
    max-height: 70vh !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* ===== HERO VIDEO FIX (mobile only) ===== */
/* Video requires fixed geometry, different from photo */
@media (max-width: 768px) {
  /* Video container: fixed geometry for proper video display */
  .cd-hero-video-wrapper {
    height: 60vh !important;
    max-height: 60vh !important;
    min-height: 60vh !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    background: #000 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Video element: cover to fill container */
  .cd-hero-video-wrapper .cd-hero-video,
  .cd-hero-video {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }
}

/* Mobile: 599px and below - ensure video is visible */
@media (max-width: 599px) {
  .cd-hero-video-wrapper {
    height: 60vh !important;
    max-height: 60vh !important;
    min-height: 60vh !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
  }

  .cd-hero-video-wrapper .cd-hero-video,
  .cd-hero-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}