/* Home hero banner — cross-device layout (works with .sum-hero-v8.sum-hero-clean) */

.sum-hero-v8 .banner-sec-info h1,
.sum-hero-v8 .banner-sec-info h2 {
  color: #15274e;
}

.sum-hero-v8.sum-hero-clean .sum-hero-slide--lead-light .banner-sec-info h1,
.sum-hero-v8.sum-hero-clean .sum-hero-slide--lead-light .banner-sec-info h2,
.sum-hero-v8.sum-hero-clean .sum-hero-slide--lead-light .sum-hero-lead-title {
  color: inherit;
  text-shadow: none;
}

.sum-hero-v8.sum-hero-clean .sum-hero-slide--lead-light .sum-hero-lead-desc {
  color: #4a5568 !important;
  text-shadow: none;
}

.sum-hero-v8.sum-hero-clean .banner-slide:not(.sum-hero-slide--lead-light) .banner-sec-info h1,
.sum-hero-v8.sum-hero-clean .banner-slide:not(.sum-hero-slide--lead-light) .banner-sec-info h2 {
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

.sum-hero-v8.sum-hero-clean .banner-slide:not(.sum-hero-slide--lead-light) .banner-sec-info p {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}

.sum-hero-v8.sum-hero-clean .banner-sec-info p {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}

.sum-hero-v8.sum-hero-clean {
  --sum-hero-banner-h: clamp(
    360px,
    calc(100svh - var(--sum-header-stack, 118px) - 10px),
    680px
  );
}

@supports (height: 100dvh) {
  .sum-hero-v8.sum-hero-clean {
    --sum-hero-banner-h: clamp(
      360px,
      calc(100dvh - var(--sum-header-stack, 118px) - 10px),
      680px
    );
  }
}

@media (min-width: 992px) {
  .sum-hero-v8.sum-hero-clean {
    --sum-hero-banner-h: clamp(
      400px,
      calc(100svh - var(--sum-header-stack, 172px) - 16px),
      720px
    );
  }

  @supports (height: 100dvh) {
    .sum-hero-v8.sum-hero-clean {
      --sum-hero-banner-h: clamp(
        400px,
        calc(100dvh - var(--sum-header-stack, 172px) - 16px),
        720px
      );
    }
  }
}

/* Tablet */
@media (max-width: 991.98px) {
  .sum-home-mobile-match .sum-hero-v8 {
    padding-top: 0;
  }

  .sum-hero-v8.sum-hero-clean .banner-slide-eight {
    border-radius: 0 0 14px 14px;
  }

  .sum-hero-v8.sum-hero-clean .sum-hero-controls {
    bottom: 10px;
  }

  .sum-hero-v8.sum-hero-clean .sum-hero-controls-inner {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Phone: stack copy at bottom, image as backdrop */
@media (max-width: 767.98px) {
  .sum-hero-v8.sum-hero-clean {
    --sum-hero-banner-h: clamp(
      380px,
      calc(100svh - var(--sum-header-stack, 108px) - 6px),
      580px
    );
  }

  @supports (height: 100dvh) {
    .sum-hero-v8.sum-hero-clean {
      --sum-hero-banner-h: clamp(
        380px,
        calc(100dvh - var(--sum-header-stack, 108px) - 6px),
        580px
      );
    }
  }

  .sum-hero-v8.sum-hero-clean .banner-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
  }

  .sum-hero-v8.sum-hero-clean .banner-content > .sum-hero-banner-img,
  .sum-hero-v8.sum-hero-clean .sum-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }

  .sum-hero-v8.sum-hero-clean .banner-content > .sum-hero-banner-img,
  .sum-hero-v8.sum-hero-clean .sum-hero-media .sum-hero-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .sum-hero-v8.sum-hero-clean .sum-hero-media .sum-hero-banner-img--campus {
    object-position: center 38%;
  }

  .sum-hero-v8.sum-hero-clean .sum-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      180deg,
      rgba(15, 35, 65, 0.45) 0%,
      rgba(21, 39, 78, 0.28) 38%,
      rgba(15, 35, 65, 0.62) 72%,
      rgba(15, 35, 65, 0.78) 100%
    );
  }

  .sum-hero-v8.sum-hero-clean .banner-text {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 0;
    transform: none;
    z-index: 2;
    flex: 0 0 auto;
    padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  }

  .sum-hero-v8.sum-hero-clean .banner-text .container-style8 {
    padding-left: 8px;
    padding-right: 8px;
  }

  .sum-hero-v8.sum-hero-clean .sum-hero-copy {
    max-width: none;
    padding: 14px 14px 16px;
    border-radius: 14px;
    background: rgba(15, 35, 65, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
  }

  .sum-hero-v8.sum-hero-clean .sum-hero-copy--lead {
    padding: 0 0 10px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .sum-hero-v8 .banner-sec-info h1,
  .sum-hero-v8 .banner-sec-info h2 {
    font-size: clamp(1.35rem, 6.2vw, 1.85rem);
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  .sum-hero-v8 .banner-sec-info p {
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  .sum-hero-v8.sum-hero-clean .btn-style8.v8 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 48px;
    line-height: 1.25;
    padding: 12px 20px;
    text-align: center;
    white-space: normal;
  }

  .sum-hero-side-arrows {
    display: flex;
    padding: 0 8px;
    z-index: 8;
  }

  .sum-hero-side-arrows .sum-hero-slick-arrow--side {
    width: 42px;
    height: 42px;
    line-height: 42px;
  }

  .sum-hero-side-arrows .sum-hero-slick-arrow--side i {
    font-size: 16px;
    line-height: 42px;
  }
}

/* Small phones — stacked layout uses image aspect ratio, not fixed banner height */
@media (max-width: 575.98px) {
  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-content > .sum-hero-banner-img,
  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-content > img {
    aspect-ratio: 16 / 11;
  }

  .sum-hero-v8.sum-hero-clean .sum-hero-copy {
    padding: 12px 12px 14px;
  }

  .sum-slider-dots .slick-dots {
    gap: 8px;
    justify-content: center;
  }
}

/* Landscape phones / short viewports */
@media (max-height: 520px) and (orientation: landscape) {
  .sum-hero-v8.sum-hero-clean {
    --sum-hero-banner-h: min(
      calc(100svh - var(--sum-header-stack, 72px)),
      380px
    );
  }

  @supports (height: 100dvh) {
    .sum-hero-v8.sum-hero-clean {
      --sum-hero-banner-h: min(
        calc(100dvh - var(--sum-header-stack, 72px)),
        380px
      );
    }
  }

  .sum-hero-v8.sum-hero-clean .banner-text {
    padding-bottom: 36px;
  }

  .sum-hero-v8.sum-hero-clean .sum-hero-copy {
    padding: 10px 12px;
  }

  .sum-hero-v8 .banner-sec-info h1,
  .sum-hero-v8 .banner-sec-info h2 {
    font-size: 1.25rem;
  }

  .sum-hero-v8 .banner-sec-info p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
  }

  .sum-hero-v8.sum-hero-clean .btn-style8.v8 {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 14px;
  }
}

/* Large desktops — keep copy readable */
@media (min-width: 1400px) {
  .sum-hero-v8.sum-hero-clean .sum-hero-copy {
    max-width: 820px;
  }

  .sum-hero-v8.sum-hero-clean .banner-content > .sum-hero-banner-img {
    object-position: center 32%;
  }
}

/* Ultra-wide: cap banner height */
@media (min-width: 1600px) {
  .sum-hero-v8.sum-hero-clean {
    --sum-hero-banner-h: 680px;
  }
}

/* Mobile / tablet: keep image + copy visible (override style.css absolute centering) */
@media (max-width: 991.98px) {
  .sum-hero-side-arrows {
    display: flex;
    z-index: 8;
  }

  .sum-hero-v8.sum-hero-clean .banner-content {
    display: grid !important;
    grid-template: "stack" minmax(var(--sum-hero-banner-h), 1fr) / 1fr;
    min-height: var(--sum-hero-banner-h);
    height: 100%;
  }

  .sum-hero-v8.sum-hero-clean .banner-content > .sum-hero-banner-img,
  .sum-hero-v8.sum-hero-clean .banner-content > img {
    grid-area: stack;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center center;
  }

  .sum-hero-v8.sum-hero-clean .banner-content > .sum-hero-overlay {
    grid-area: stack;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
  }

  .sum-hero-v8.sum-hero-clean .banner-slide-eight .banner-text,
  .sum-hero-v8.sum-hero-clean .banner-text {
    grid-area: stack;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin-top: 0 !important;
    transform: none !important;
    z-index: 2;
    align-self: end;
    display: flex !important;
    align-items: flex-end;
    min-height: 100%;
    height: auto;
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
    box-sizing: border-box;
  }

  .sum-hero-v8.sum-hero-clean .banner-slide-eight .banner-text .container-style8,
  .sum-hero-v8.sum-hero-clean .banner-text .container-style8 {
    pointer-events: auto;
    width: 100%;
  }

  .sum-hero-v8.sum-hero-clean:has(.sum-hero-slide--lead-light)::after {
    z-index: 3;
    height: 22%;
    background: linear-gradient(180deg, rgba(15, 35, 65, 0) 0%, rgba(15, 35, 65, 0.25) 100%);
  }

  .sum-hero-v8.sum-hero-clean .sum-hero-slide--lead-light .banner-text {
    min-height: 0 !important;
    max-height: none;
    align-self: end;
    padding-bottom: calc(42px + env(safe-area-inset-bottom, 0px));
  }

  .sum-hero-v8.sum-hero-clean .sum-hero-slide--lead-light .banner-content > .sum-hero-banner-img--campus {
    object-position: center 18% !important;
    z-index: 0 !important;
  }
}

/* Home phones only: full-width image, content below (desktop/tablet unchanged) */
@media (max-width: 767.98px) {
  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean {
    overflow: visible;
    --sum-hero-mobile-img-ratio: 10 / 16;
  }

  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-slide-eight {
    overflow: visible;
  }

  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-slide-eight,
  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-slide-eight .slick-list,
  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-slide-eight .slick-track,
  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-slide-eight .slick-slide,
  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-slide {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-slide-eight .slick-slide > div {
    min-height: 0 !important;
    height: auto !important;
  }

  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-content {
    display: flex !important;
    flex-direction: column !important;
    grid-template: none !important;
    height: auto !important;
    min-height: 0 !important;
    background: #f6f8fc;
  }

  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-content > .sum-hero-banner-img,
  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-content > img {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto;
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
  }

  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-content > .sum-hero-overlay {
    display: none !important;
  }

  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-slide-eight .banner-text,
  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-text {
    order: 2;
    position: relative !important;
    grid-area: unset !important;
    align-self: stretch !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: auto !important;
    margin-top: 0 !important;
    padding: 12px 0 10px !important;
    pointer-events: auto;
    background: #f6f8fc !important;
    box-sizing: border-box;
  }

  body.sum-home-mobile-match .sum-hero-slide--lead-light .banner-text {
    background: #fff !important;
  }

  body.sum-home-mobile-match .sum-hero-slide--standard .banner-text {
    background: linear-gradient(180deg, #eef4fb 0%, #f6f8fc 100%) !important;
  }

  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .sum-hero-copy,
  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .sum-hero-copy--lead {
    padding: 4px 6px 12px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.sum-home-mobile-match .sum-hero-v8 .banner-slide:not(.sum-hero-slide--lead-light) .banner-sec-info h1,
  body.sum-home-mobile-match .sum-hero-v8 .banner-slide:not(.sum-hero-slide--lead-light) .banner-sec-info h2 {
    color: #15274e !important;
    text-shadow: none !important;
  }

  body.sum-home-mobile-match .sum-hero-v8 .banner-slide:not(.sum-hero-slide--lead-light) .banner-sec-info p {
    color: #4a5568 !important;
    text-shadow: none !important;
  }

  body.sum-home-mobile-match .sum-hero-slide--lead-light .sum-hero-lead-panel {
    background: #fff;
    box-shadow: none;
    border: 1px solid rgba(21, 39, 78, 0.08);
  }

  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean:has(.sum-hero-slide--lead-light)::after {
    display: none !important;
  }

  body.sum-home-mobile-match .sum-hero-clean .sum-hero-controls {
    position: relative;
    bottom: auto;
    margin-top: 0;
    padding: 4px 0 12px;
    background: #f6f8fc;
    z-index: 4;
  }

  body.sum-home-mobile-match .sum-hero-side-arrows {
    top: calc((100vw - 12px) * 10 / 16 / 2);
    transform: translateY(-50%);
  }
}

/* Home tablet (768–991): overlay hero, equal slide height */
@media (min-width: 768px) and (max-width: 991.98px) {
  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean {
    overflow: hidden;
    --sum-hero-banner-h: clamp(
      360px,
      calc(100svh - var(--sum-header-stack, 130px) - 16px),
      500px
    );
  }

  @supports (height: 100dvh) {
    body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean {
      --sum-hero-banner-h: clamp(
        360px,
        calc(100dvh - var(--sum-header-stack, 130px) - 16px),
        500px
      );
    }
  }

  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-slide-eight,
  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-slide-eight .slick-list,
  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-slide-eight .slick-track,
  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-slide-eight .slick-slide,
  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-slide {
    min-height: var(--sum-hero-banner-h) !important;
    height: var(--sum-hero-banner-h) !important;
    max-height: var(--sum-hero-banner-h) !important;
  }

  body.sum-home-mobile-match .sum-hero-v8.sum-hero-clean .banner-slide-eight .slick-slide > div {
    min-height: 100% !important;
    height: 100% !important;
  }

  body.sum-home-mobile-match .sum-hero-clean .sum-hero-controls {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    background: transparent;
    z-index: 5;
  }
}