/*
 * Overrides that replace behaviours the legacy jQuery (assets/js/custom.js) applied at
 * runtime on the old site. Loaded LAST so it wins over style.css / common.css.
 */

/* --- Full-width layout (per request) ---
 * Bootstrap's .container caps content width and centres it (big empty side margins
 * on desktop). Make every container span the viewport with responsive side gutters
 * so it reads edge-to-edge but never glued to the screen edge. Scales 16px on phones
 * up to ~64px on wide desktops. */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 100%;
  width: 100%;
  padding-left: clamp(16px, 4vw, 64px);
  padding-right: clamp(16px, 4vw, 64px);
}

/* --- Home hero banner ---
 * Legacy custom.js set the absolute transparent header's height as the banner's
 * top-padding so the hero heading clears it. The banner also had z-index:-1 which,
 * without the JS layering, hid the heading. Restore both statically. */
.home-banner {
  z-index: 0;
  min-height: 440px;
  padding-top: 130px; /* clear the absolute header; heading sits in the upper band */
  padding-bottom: 48px;
  display: flex;
  align-items: center;
}
.home-banner .banner-content {
  width: 100%;
}
.home-banner .banner-content {
  position: relative;
  z-index: 2;
  width: 100%;
}
/* keep the hexagon pattern visible but behind the text */
.home-banner .banner-pattern {
  z-index: 0;
}

@media (max-width: 991px) {
  .home-banner {
    padding-top: 110px;
    min-height: 320px;
  }
}

/* The fund-performance card overlaps the bottom of the navy banner (margin-top:-240px).
 * The banner is positioned with z-index:0, so without this the banner paints OVER the
 * white card and the first fund table looks like it's on navy. Lift the card above it. */
.home-banner-bottom-sec {
  position: relative;
  z-index: 2;
}

/* --- Fund performance: CSS-only horizontal scroll for the period cards
 * (legacy used Swiper). Classes match the ported markup in FundPerformance.tsx. */
.performance-swiper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.performance-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 4px 20px 12px 0;
  cursor: default;
}
.performance-swiper .swiper-slide {
  flex: 0 0 auto;
  min-width: 110px;
}
@media (max-width: 768px) {
  .fund-slider-container {
    flex-wrap: nowrap;
  }
  .fund-names {
    width: 140px;
  }
  .performance-swiper {
    width: calc(100% - 140px);
  }
}

/* --- "As Featured On" logos: legacy used a slick carousel; render as a calm wrap row. */
.logo-slider {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px 40px;
}
.logo-slider .gallery-item {
  flex: 0 0 auto;
  width: 16.66%;
  min-width: 150px;
}
.logo-slider img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.85;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.logo-slider img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* --- Smooth section rhythm so pages match the live spacing without JS reveal animations. */
.home-section {
  overflow: hidden;
}