/* DR UK V8.4 — VISUAL STABILITY / RENDER QA PATCH
   Purpose: remove V8.3 cross-family hero conflicts, standardise all course heroes,
   and make homepage slideshow content non-overlapping at desktop/tablet/mobile widths. */

/* --------------------------------------------------------------------------
   A. SIMPLE INNER-PAGE TITLE FAMILY
   Information pages use a clean compact light title. Do not inherit the generic
   V8.3 dark first-section rule into a light .compact-page-title container.
   -------------------------------------------------------------------------- */
body.v83-standard .page-title-section{
  background:#f3f8fa!important;
  color:#14263b!important;
  border-bottom:1px solid #dce6ed!important;
  padding:44px 0 42px!important;
  min-height:auto!important;
}
body.v83-standard .page-title-section>.container,
body.v83-standard .page-title-section .compact-page-title{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding-left:0!important;
  padding-right:0!important;
}
body.v83-standard .page-title-section h1{
  color:#082f57!important;
  font-size:clamp(2.15rem,3.6vw,3.25rem)!important;
  line-height:1.08!important;
  margin:12px 0 10px!important;
  max-width:900px!important;
}
body.v83-standard .page-title-section p{
  color:#607489!important;
  max-width:820px!important;
}
body.v83-standard .page-title-section .breadcrumb,
body.v83-standard .page-title-section .breadcrumb span,
body.v83-standard .page-title-section .breadcrumbs{
  color:#6c8094!important;
}
body.v83-standard .page-title-section .breadcrumb a{color:#087b75!important}

/* BSS page keeps its dedicated affiliation title composition but with safe text. */
body.approvals-v26.v83-standard .page-title-section .affiliation-title-row h1{color:#082f57!important}
body.approvals-v26.v83-standard .page-title-section .affiliation-title-row p{color:#607489!important}

/* --------------------------------------------------------------------------
   B. COURSE DIRECTORY HERO FAMILY — Courses / Diploma / Certificate
   Keep image-right reference layout; restore dark readable copy inside the shell.
   -------------------------------------------------------------------------- */
body.courses-directory-v26.v83-standard .page-hero{
  background:linear-gradient(120deg,#062b4f 0%,#0a5270 60%,#087b75 100%)!important;
  padding:58px 0!important;
  color:#14263b!important;
}
body.courses-directory-v26.v83-standard .page-hero .page-hero-grid{
  background:#fff!important;
  border:1px solid rgba(255,255,255,.35)!important;
  border-radius:22px!important;
  overflow:hidden!important;
  box-shadow:0 18px 46px rgba(4,35,61,.15)!important;
}
body.courses-directory-v26.v83-standard .page-hero h1{
  color:#082f57!important;
  font-size:clamp(2.15rem,3.6vw,3.2rem)!important;
  line-height:1.08!important;
}
body.courses-directory-v26.v83-standard .page-hero p{color:#607489!important}
body.courses-directory-v26.v83-standard .page-hero .breadcrumb,
body.courses-directory-v26.v83-standard .page-hero .breadcrumb span{color:#6c8094!important}
body.courses-directory-v26.v83-standard .page-hero .breadcrumb a{color:#087b75!important}

/* --------------------------------------------------------------------------
   C. ALL 16 COURSE PAGES — ONE STABLE DMLT-STYLE HERO FAMILY
   Remove per-page left/right/wide/overlay/compact visual conflicts at the hero.
   Course-specific content/images remain; geometry is shared.
   -------------------------------------------------------------------------- */
body.v83-course .course-detail-hero{
  background:#f3f7f9!important;
  color:#14263b!important;
  border-bottom:1px solid #dce6ed!important;
  padding:46px 0!important;
  min-height:auto!important;
}
body.v83-course .course-detail-hero .page-hero-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr)!important;
  gap:0!important;
  border:1px solid #d7e3ed!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:#fff!important;
  box-shadow:0 16px 42px rgba(8,47,87,.08)!important;
  padding:18px!important;
}
body.v83-course .course-detail-hero .course-hero-copy,
body.v83-course .course-detail-hero.hero-variant-left .course-hero-copy,
body.v83-course .course-detail-hero.hero-variant-wide .course-hero-copy,
body.v83-course .course-detail-hero.hero-variant-overlay .course-hero-copy,
body.v83-course .course-detail-hero.hero-variant-compact .course-hero-copy,
body.v83-course .course-detail-hero.hero-variant-right .course-hero-copy{
  order:1!important;
  max-width:none!important;
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding:clamp(34px,4vw,56px)!important;
  background:#edf7f7!important;
  color:#14263b!important;
  border-left:5px solid #087b75!important;
  border-right:0!important;
  border-top:0!important;
}
body.v83-course .course-detail-hero .course-hero-media,
body.v83-course .course-detail-hero.hero-variant-left .course-hero-media,
body.v83-course .course-detail-hero.hero-variant-wide .course-hero-media,
body.v83-course .course-detail-hero.hero-variant-overlay .course-hero-media,
body.v83-course .course-detail-hero.hero-variant-compact .course-hero-media,
body.v83-course .course-detail-hero.hero-variant-right .course-hero-media{
  order:2!important;
  margin:0!important;
  min-width:0!important;
  overflow:hidden!important;
  position:relative!important;
}
body.v83-course .course-detail-hero .course-hero-media::after{display:none!important}
body.v83-course .course-detail-hero .course-hero-media img{
  width:100%!important;
  height:100%!important;
  min-height:420px!important;
  max-height:520px!important;
  object-fit:cover!important;
  border-radius:0!important;
  filter:none!important;
}
body.v83-course .course-detail-hero h1{
  color:#082f57!important;
  font-size:clamp(2.35rem,4vw,3.45rem)!important;
  line-height:1.08!important;
  margin:12px 0 18px!important;
  max-width:760px!important;
}
body.v83-course .course-detail-hero .keyword-intro,
body.v83-course .course-detail-hero p{color:#5b7187!important;max-width:760px!important}
body.v83-course .course-detail-hero .breadcrumb,
body.v83-course .course-detail-hero .breadcrumb span{color:#6c8094!important}
body.v83-course .course-detail-hero .breadcrumb a{color:#087b75!important}
body.v83-course .course-detail-hero .hero-course-meta{display:flex!important;flex-wrap:wrap!important;gap:10px!important}
body.v83-course .course-detail-hero .hero-course-meta span{
  background:#fff!important;
  border:1px solid #cfdee7!important;
  color:#082f57!important;
  border-radius:5px!important;
  max-width:100%!important;
}

/* --------------------------------------------------------------------------
   D. ADMISSION HERO — links must remain visible on dark background.
   -------------------------------------------------------------------------- */
body.admission-v26.v83-standard .admission-editorial-hero .admission-category-links a,
body.admission-v26.v83-standard .admission-editorial-hero .application-download-link{
  color:#e9fbff!important;
  text-decoration-color:rgba(233,251,255,.55)!important;
}
body.admission-v26.v83-standard .admission-editorial-hero .admission-category-links a:hover,
body.admission-v26.v83-standard .admission-editorial-hero .application-download-link:hover{color:#fff!important}

/* --------------------------------------------------------------------------
   E. HOMEPAGE HERO — no clipped chips / no overlapping stat-card text.
   -------------------------------------------------------------------------- */
body.v83-home .vh-hero-card{
  width:min(100%,560px)!important;
  max-width:560px!important;
  min-width:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
body.v83-home .vh-hero-card h1,
body.v83-home .vh-hero-card h2{
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance;
}
body.v83-home .vh-hero-short-course-list{
  display:flex!important;
  flex-wrap:wrap!important;
  overflow:visible!important;
  max-width:100%!important;
  gap:8px!important;
  padding-right:0!important;
  scroll-snap-type:none!important;
}
body.v83-home .vh-hero-short-course-list li{
  flex:0 1 auto!important;
  min-width:0!important;
  white-space:normal!important;
  font-size:.82rem!important;
  line-height:1.15!important;
  padding:8px 12px!important;
}
body.v83-home .vh-hero-stat-cards{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
}
body.v83-home .vh-hero-stat-cards span{
  min-width:0!important;
  padding:13px 8px!important;
  overflow:hidden!important;
}
body.v83-home .vh-hero-stat-cards strong{
  min-width:0!important;
  max-width:100%!important;
  font-size:clamp(.88rem,1.15vw,1.08rem)!important;
  line-height:1.08!important;
  letter-spacing:0!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
body.v83-home .vh-hero-stat-cards small{
  font-size:.7rem!important;
  line-height:1.2!important;
  overflow-wrap:anywhere!important;
}

/* --------------------------------------------------------------------------
   F. RESPONSIVE STABILITY
   -------------------------------------------------------------------------- */
@media(max-width:1000px){
  body.v83-course .course-detail-hero .page-hero-grid{grid-template-columns:1fr!important;padding:14px!important}
  body.v83-course .course-detail-hero .course-hero-media{order:1!important}
  body.v83-course .course-detail-hero .course-hero-copy{order:2!important;border-left:0!important;border-top:5px solid #087b75!important}
  body.v83-course .course-detail-hero .course-hero-media img{height:330px!important;min-height:330px!important;max-height:none!important}
  body.v83-home .vh-hero-stat-cards strong{font-size:.94rem!important}
}
@media(max-width:760px){
  body.v83-standard .page-title-section{padding:32px 0 30px!important}
  body.v83-standard .page-title-section>.container{padding-left:18px!important;padding-right:18px!important}
  body.v83-course .course-detail-hero{padding:24px 0!important}
  body.v83-course .course-detail-hero .page-hero-grid{border-radius:16px!important;padding:10px!important}
  body.v83-course .course-detail-hero .course-hero-copy{padding:27px 22px!important}
  body.v83-course .course-detail-hero h1{font-size:clamp(2rem,10vw,2.65rem)!important}
  body.v83-course .course-detail-hero .course-hero-media img{height:260px!important;min-height:260px!important}
  body.v83-home .vh-hero-card{width:auto!important;max-width:none!important;margin:16px!important;padding:24px!important}
  body.v83-home .vh-hero-stat-cards{grid-template-columns:1fr!important;gap:7px!important}
  body.v83-home .vh-hero-stat-cards span{min-height:auto!important;padding:9px 11px!important;text-align:left!important;align-items:flex-start!important}
  body.v83-home .vh-hero-stat-cards strong{font-size:.92rem!important}
  body.v83-home .vh-hero-stat-cards small{font-size:.68rem!important}
}
@media(max-width:390px){
  body.v83-home .vh-hero-card{margin:12px!important;padding:20px!important}
  body.v83-home .vh-hero-short-course-list li{font-size:.75rem!important;padding:7px 9px!important}
  body.v83-course .course-detail-hero .course-hero-copy{padding:23px 18px!important}
}

/* High-specificity render safety: V8.3 first-child hero rule carries multiple :not()
   selectors with !important, so course copy text must explicitly win here. */
body.v83-page.v83-inner.v83-course main#main>section.course-detail-hero.page-hero:first-child h1{
  color:#082f57!important;
  font-size:clamp(2.35rem,4vw,3.45rem)!important;
  line-height:1.08!important;
}
body.v83-page.v83-inner.v83-course main#main>section.course-detail-hero.page-hero:first-child p,
body.v83-page.v83-inner.v83-course main#main>section.course-detail-hero.page-hero:first-child .keyword-intro{
  color:#5b7187!important;
}
body.v83-page.v83-inner.v83-course main#main>section.course-detail-hero.page-hero:first-child .breadcrumb,
body.v83-page.v83-inner.v83-course main#main>section.course-detail-hero.page-hero:first-child .breadcrumb span{
  color:#6c8094!important;
}
body.v83-page.v83-inner.v83-course main#main>section.course-detail-hero.page-hero:first-child .breadcrumb a{
  color:#087b75!important;
}

/* Courses directory mobile controls: replace the legacy horizontal-scroll toolbar,
   which widened the document at 390/320px, with a contained responsive grid. */
@media(max-width:640px){
  body.v83-standard .v67-course-controls{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    overflow:visible!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  body.v83-standard .v67-course-controls button{
    min-width:0!important;
    width:100%!important;
    white-space:normal!important;
    padding:0 10px!important;
  }
  body.v83-standard .v67-course-controls button:nth-of-type(3){grid-column:1/-1!important}
  body.v83-standard .v67-course-controls label{
    grid-column:1/-1!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    flex:none!important;
  }
  body.v83-standard .v67-course-controls input{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
}