/* UMEED final large-screen hero and typography alignment fix
   - Desktop/laptop hero: full edge-to-edge frame, no black blanks, foreground media not cropped.
   - Sections/cards: consistent text wrapping, no heading overlap, no card text collision. */

:root{
  --umeed-section-max: 1180px;
  --umeed-card-radius: 24px;
}

/* Safer typography everywhere */
html body,
html body *{
  box-sizing: border-box;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body .sectionTitle,
html body .sectionTitle h2,
html body .card h3,
html body .albumTitle,
html body .faculty-name,
html body .brandName{
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-wrap: balance;
  max-width: 100% !important;
}

html body p,
html body .card p,
html body .albumDesc,
html body .tiny,
html body .statLbl{
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

html body .container,
html body .section .container,
html body .statsStrip .container{
  width: min(var(--umeed-section-max), calc(100% - 32px)) !important;
  max-width: var(--umeed-section-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body .section,
html body section.section{
  padding-top: clamp(34px, 4.2vw, 64px) !important;
  padding-bottom: clamp(34px, 4.2vw, 64px) !important;
}

html body .sectionTitle{
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: clamp(18px, 2vw, 28px) !important;
}

html body .sectionTitle h2{
  line-height: 1.08 !important;
  margin: 0 !important;
  font-size: clamp(25px, 3vw, 44px) !important;
}

html body .sectionTitle p{
  line-height: 1.55 !important;
  margin-top: 8px !important;
  max-width: 68ch !important;
}

html body .card,
html body .panel,
html body .visualBand,
html body .homeCeoBox,
html body .album-card,
html body .albumCard,
html body .statItem{
  min-width: 0 !important;
  overflow: hidden !important;
}

html body .grid,
html body .cardsGrid,
html body .faculty-grid{
  align-items: stretch !important;
}

html body .card h3,
html body .card h4{
  line-height: 1.18 !important;
  margin-bottom: 8px !important;
}

html body .card p{
  line-height: 1.55 !important;
}

html body .album-card .album-title,
html body .album-card h3,
html body .albumCard h3,
html body .premiumAlbumCard h3{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-height: 2.35em !important;
}

html body .album-card p,
html body .albumCard p,
html body .premiumAlbumCard p{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

@media (max-width: 767.98px){
  html body .container,
  html body .section .container,
  html body .statsStrip .container{
    width: min(100% - 24px, 100%) !important;
  }
  html body .sectionTitle{
    display: block !important;
  }
  html body .sectionTitle h2{
    font-size: clamp(23px, 7vw, 32px) !important;
  }
}

/* Desktop/laptop hero correction only. Mobile remains controlled by existing mobile rules. */
@media (min-width: 1024px){
  html body.home-page main{
    overflow-x: clip !important;
  }

  html body.home-page main > section.hero.hero-full#home,
  html body.home-page section.hero.hero-full#home,
  html body.home-page #home.hero.hero-full{
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    padding: 0 !important;
    height: clamp(520px, 56.25vw, calc(100svh - var(--umeed-nav-height, 92px) - 6px)) !important;
    min-height: 520px !important;
    max-height: calc(100svh - var(--umeed-nav-height, 92px) - 6px) !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    overflow: hidden !important;
    background: #050609 !important;
    box-shadow: none !important;
  }

  html body.home-page #home.hero.hero-full .hero-slider,
  html body.home-page #home.hero.hero-full .hero-slide{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    background: #050609 !important;
  }

  html body.home-page #home.hero.hero-full .hero-slide{
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body.home-page #home.hero.hero-full .hero-slide.active{
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1 !important;
  }

  /* Fill the outer frame with a blurred copy so no black side blanks appear. */
  html body.home-page #home.hero.hero-full .hero-slide::before{
    content: "" !important;
    position: absolute !important;
    inset: -34px !important;
    z-index: 0 !important;
    background-image: var(--umeed-hero-bg) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    filter: blur(22px) saturate(1.08) brightness(.62) !important;
    transform: scale(1.08) !important;
    opacity: .9 !important;
  }

  html body.home-page #home.hero.hero-full .hero-slide::after{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.18)), linear-gradient(90deg, rgba(0,0,0,.18), transparent 20%, transparent 80%, rgba(0,0,0,.18)) !important;
    pointer-events: none !important;
  }

  /* Foreground original media is never cropped. */
  html body.home-page #home.hero.hero-full .heroImg,
  html body.home-page #home.hero.hero-full .heroVideo,
  html body.home-page #home.hero.hero-full .hero-slide > img,
  html body.home-page #home.hero.hero-full .hero-slide > video{
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 auto !important;
    background: transparent !important;
    transform: none !important;
    filter: saturate(.98) contrast(1.02) brightness(.92) !important;
  }

  html body.home-page #home.hero.hero-full .hero-content{
    z-index: 5 !important;
  }

  html body.home-page #home.hero.hero-full .hero-nav{
    z-index: 6 !important;
  }
}

@media (min-width: 1440px){
  html body.home-page main > section.hero.hero-full#home,
  html body.home-page section.hero.hero-full#home,
  html body.home-page #home.hero.hero-full{
    height: clamp(560px, 50vw, calc(100svh - var(--umeed-nav-height, 92px) - 6px)) !important;
  }
}