/* hero-fit — contain-mode image box for detail page heroes.
   Replaces the old ratio-16x9 crop with a padded contain so
   tall/square/portrait images aren't sliced — they sit inside
   the 16:9 box with a subtle brand-tint background.  */

.hero-fit {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 99, 216, 0.08);
  border-radius: 20px;
  overflow: hidden;
}
.hero-fit > img,
.hero-fit > picture,
.hero-fit > picture > img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
}

/* ── Subheader banner — crop-accurate mode ─────────────────
   When a banner image has been cropped to 16:5 in the admin
   panel, jarallax's parallax re-crops the already-cropped
   image — breaking the admin preview. This mode replaces
   jarallax with a pure CSS background so admin crop = frontend
   display, pixel-perfect.

   HOW IT WORKS:
   1. The <picture> gets .subheader-bg instead of .jarallax-img.
   2. The <section> gets .subheader-cropped instead of .jarallax.
   3. Jarallax ignores it (no .jarallax class), CSS handles positioning.
   4. The overlay layers (.de-overlay) still work identically.          */

#subheader.subheader-cropped {
  position: relative;
  overflow: hidden;
  /* Match the admin crop preview ratio (16:5) while keeping
     the container content (title, breadcrumbs) vertically
     centered with minimum readable height on small screens. */
  padding: 0;
  min-height: 220px;
  aspect-ratio: 16 / 5;
}
/* On very wide screens cap the height so the banner doesn't
   become absurdly tall (1920 * 5/16 = 600px).  */
@media (min-width: 1400px) {
  #subheader.subheader-cropped {
    max-height: 600px;
    aspect-ratio: auto;
    height: min(600px, 31.25vw); /* 31.25vw ≈ 100vw * 5/16 */
  }
}
/* Mobile: drop aspect-ratio, let section grow with content
   so subtitle + h1 + breadcrumb all fit without clipping. */
@media (max-width: 767px) {
  #subheader.subheader-cropped {
    aspect-ratio: unset;
    min-height: 220px;
    height: auto;
    padding-bottom: 30px;
  }
  /* Scale down the page title so it fits comfortably on
     narrow screens without wrapping into 3+ lines. */
  #subheader.subheader-cropped h1 {
    font-size: 28px;
    letter-spacing: -0.5px;
    line-height: 1.15;
  }
}

/* The inner content overlay sits absolutely centered on desktop.
   Uses absolute positioning so Bootstrap .row/.col grids
   inside the container continue to work (services/show
   has a two-column layout inside the subheader). */
#subheader.subheader-cropped > .container {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 60px;   /* navbar clearance */
  padding-bottom: 20px;
  /* Prevent text from touching edges on any screen size */
  padding-left: max(var(--bs-gutter-x, 1.5rem), 1.5rem);
  padding-right: max(var(--bs-gutter-x, 1.5rem), 1.5rem);
  box-sizing: border-box;
}
/* Mobile: switch to flow layout so section height can grow
   with the content instead of staying collapsed at min-height. */
@media (max-width: 767px) {
  #subheader.subheader-cropped > .container {
    position: relative;
    inset: auto;
    padding-top: 80px; /* extra navbar clearance on mobile */
    width: 100%;
  }
}

/* Let the .row inside fill the container width so Bootstrap
   columns (.col-lg-6, etc.) size correctly. */
#subheader.subheader-cropped > .container > .row {
  width: 100%;
}

/* services/show has a hero-fit image in the right col-lg-6.
   Hide it on tablet/mobile so it doesn't push the section
   height and cause the background image to mismatch. */
@media (max-width: 991px) {
  #subheader.subheader-cropped .hero-fit {
    display: none;
  }
  #subheader.subheader-cropped .col-lg-6:first-child {
    text-align: center;
  }
}

/* The background picture fills the section edge-to-edge.
   Works whether the container is absolute (desktop) or
   relative (mobile) since it targets the section directly. */
#subheader .subheader-bg,
#subheader .subheader-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* ── Blog / card image crop ──────────────────────────────────
   Blog list cards and similar content cards that show a cover
   image. Force a consistent 16:9 crop so portrait uploads
   don't blow out the card height. Uses object-fit:cover
   (unlike hero-fit which uses contain) because card thumbnails
   look better cropped-to-fill than letter-boxed.  */

.bloglist .post-image,
.card-cover-fit {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}
.bloglist .post-image img,
.bloglist .post-image picture img,
.card-cover-fit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}