/*
 * "Why Choose Us" image gallery
 * =============================
 * Companion to why-gallery.js. Loaded after platform.css, mobile-app.css and
 * compact.css from this checkout's override asset root only, so the shared
 * CodeIgniter tree (and the site on :8030) is untouched. Landing page only.
 *
 * Scope: every rule below targets .whyg, a class that exists nowhere else on the
 * site. Nothing here can reach the hero, the rest of the section, or any other
 * page — the surrounding design is deliberately left exactly as it is.
 */

.whyg {
  position: relative;
  width: 100%;
  /*
   * min-width:0 / max-width:100% are load-bearing, not belt-and-braces.
   *
   * .home-why-grid sizes its column from content. Stacked on a phone the copy and
   * the photo share one column, and an aspect-ratio box with a max-height reports a
   * min-content width of height x ratio — which resolved to 384px inside a 363px
   * container and pushed the checklist, the heading and the photo 21px past the
   * right edge. Letting this box shrink below its intrinsic width is what stops it.
   */
  min-width: 0;
  max-width: 100%;
}

/* The grid item the gallery sits in; same reason. */
.home-why-media:has(.whyg) {
  min-width: 0;
  max-width: 100%;
}

/*
 * The slides are stacked and crossfaded, so the box needs its own height rather
 * than taking it from an image. 3:2 is the proportion the single photograph that
 * used to sit here occupied, so the section's balance does not shift.
 */
.whyg__viewport {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 14px;
  background: #e9eef8;
}

.whyg__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  /* visibility, not display: a fade cannot animate from display:none, and keeping
     the node laid out means the browser has already decoded the image. */
  visibility: hidden;
  transition: opacity .55s ease, visibility 0s linear .55s;
}

.whyg__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .55s ease, visibility 0s;
}

.whyg__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Caption plate, carrying the same title and text the hero shows for that slide. */
.whyg__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem .9rem .7rem;
  background: linear-gradient(180deg, rgba(8, 18, 40, 0) 0%, rgba(8, 18, 40, .78) 60%);
  color: #fff;
  display: grid;
  row-gap: .1rem;
}

.whyg__cap strong {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

.whyg__cap span {
  font-size: .78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .84);
}

/* --- arrows --------------------------------------------------------------- */

.whyg__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(15, 31, 68, .12);
  background: rgba(255, 255, 255, .92);
  color: #0f1f44;
  font-size: 1.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 8px rgba(8, 18, 40, .18);
}

.whyg__nav:hover {
  background: #fff;
  border-color: rgba(15, 31, 68, .28);
}

.whyg__nav:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.whyg__nav--prev { left: .55rem; }
.whyg__nav--next { right: .55rem; }

/* --- dots ----------------------------------------------------------------- */

/* Position counter — the phone's stand-in for the dot row. Hidden on desktop. */
.whyg__count {
  display: none;
  text-align: center;
  margin-top: .5rem;
  font-size: .8rem;
  font-weight: 600;
  color: #4a5f8a;
  font-variant-numeric: tabular-nums;
}

.whyg__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .55rem;
  max-width: 100%;
  min-width: 0;
}

/*
 * The dot is a 7px mark inside a 24px hit area. Height and padding carry the
 * target rather than the visible dot, so it stays comfortably tappable without
 * drawing a large circle. 24px is the WCAG 2.2 AA minimum for a control in a
 * row of equivalent controls.
 */
.whyg__dot {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 8px 4px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.whyg__dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(15, 31, 68, .22);
  transition: background .2s ease, width .2s ease;
}

.whyg__dot:hover::before {
  background: rgba(15, 31, 68, .42);
}

.whyg__dot.is-active::before {
  width: 18px;
  border-radius: 4px;
  background: #1a2d5a;
}

.whyg__dot:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
  border-radius: 4px;
}

/* --- phones --------------------------------------------------------------- */

@media (max-width: 768px) {
  /* compact.css caps the photograph that used to be here at 190px as part of the
     density pass. The gallery keeps to that budget rather than reintroducing the
     half-screen image that cap was written to prevent. */
  .whyg__viewport {
    aspect-ratio: 16 / 10;
    max-height: 210px;
    border-radius: 12px;
  }

  /* Back to the 44px minimum every other control on this site holds to. */
  .whyg__nav {
    width: 44px;
    height: 44px;
  }

  /*
   * Ten dots cannot each be a 44px target across ~360px, so the row gives way to
   * the counter and the two arrows above — the same arrangement the hero carousel
   * uses on a phone. Swiping still moves through the photos.
   */
  .whyg__dots {
    display: none;
  }

  .whyg__count {
    display: block;
  }

  .whyg__cap {
    padding: 1.3rem .7rem .6rem;
  }

  .whyg__cap strong { font-size: .85rem; }
  .whyg__cap span { font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .whyg__slide,
  .whyg__slide.is-active {
    transition: none;
  }
}