/* ============================================================
   slider.css — homepage hero fit + caption scrim
   Loaded from partials/header_test1.blade.php.
   Anchored on .ahci-slider (user/index_test1.blade.php wraps the
   slider in <div class="ahci-slider container">), which gives
   specificity (0,4,0) and beats every competing rule (max 0,3,0)
   with no !important.

   Fixes, measured on live prod before this file existed:
     .sliderImg   height:441px + overflow:hidden  (from 5_test1.css
                  .sliderImg) with the <img> rendering 609px tall at
                  1440 -> the bottom ~27% of every slide was cut off.
     .bannerCaption/.sliderText had a flat opaque panel colour and no
                  scrim, so the caption was illegible over the photo.
   ============================================================ */

/* 1. the wrapper must size to the photo instead of clipping it */
.ahci-slider .indexBanner .contentWidthSlider .sliderImg {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

/* 2. the photo keeps its native 1170x500 ratio at every width */
.ahci-slider .indexBanner .contentWidthSlider .sliderImg img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 1170 / 500;
  object-fit: contain;
  object-position: center;
  /* 5_test1.css hides the <img> (opacity:0/visibility:hidden) and expects JS
     to paint the photo as a background-image on .sliderImg instead. That
     fallback is absent whenever the page script errors, which leaves the
     banner as an empty grey box. The <img> is the real content, so show it. */
  opacity: 1;
  visibility: visible;
}

/* 2b. the caption wrapper carries background: var(--brand-key) from
      colours.css. With the wrapper now sizing to the photo that panel can
      paint as a solid bar behind the scrim, so neutralise it here; the
      scrim (desktop) and the panel colour (<=640px) below supply the
      background instead. */
.ahci-slider .indexBanner .contentWidthSlider .bannerCaption {
  background-color: transparent;
  background-image: none;
}

/* 3. caption scrim over the bottom of the photo */
.ahci-slider .indexBanner .contentWidthSlider .sliderText {
  background-color: transparent;
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.55) 55%,
    rgba(0, 0, 0, 0) 100%
  );
  padding: 48px 20px 16px;
  min-height: 0;
  max-height: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.ahci-slider .indexBanner .contentWidthSlider .sliderText .title {
  margin: 0 0 4px;
  line-height: 1.35;
  font-size: clamp(0.95rem, 1.5vw, 1.3rem);
  /* .title carries a solid #162F6A block; over the scrim it reads as a
     stray blue bar, so let the gradient carry the background. */
  background-color: transparent;
  background-image: none;
}

.ahci-slider .indexBanner .contentWidthSlider .sliderText .date {
  margin: 0;
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  opacity: 0.88;
}

/* 4. <=640px the caption sits UNDER the photo (18_test1.css switches it
      to position:static there), so a transparent scrim over the page
      background would be unreadable. Use the site's own mobile panel
      colour instead, and drop the max-height clamp that would crop it. */
/* 4a. Phones: the hero is inset by two layers of container padding, which
      leaves navy gutters either side and a floating-card look. Let it run
      edge to edge. The banner also keeps a min-height from the base theme
      that shows as an empty navy band under the caption. */
@media (max-width: 767px) {
  .ahci-slider.container,
  .ahci-slider {
    padding-left: 0;
    padding-right: 0;
  }

  .ahci-slider .indexBanner {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .ahci-slider .indexBanner .contentWidthSlider .sliderText {
    background-image: none;
    background-color: #144c84;
    /* declare the static placement here rather than inheriting it from the
       async-loaded 18_test1.css, which is not always applied yet */
    position: static;
    bottom: auto;
    left: auto;
    padding: 12px 15px 14px;
    min-height: 0;
    max-height: none;
    text-shadow: none;
  }

  /* owl carousel sizes .owl-stage to the TALLEST slide, so one long title
     used to leave 20-80px of empty navy under every other slide. Clamp the
     title to 3 lines and give it a fixed 3-line box so every caption is the
     same height and the banner stops having dead space. */
  .ahci-slider .indexBanner .contentWidthSlider .sliderText .title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.3;
    min-height: 3.9em;
    max-height: 3.9em;
    margin-bottom: 6px;
  }

  .ahci-slider .indexBanner .contentWidthSlider .sliderText .date {
    font-size: 0.78rem;
  }
}