/* =========================
   Campaign: Hero + Layout fixes
   ========================= */

/* =========================
   Campaign: Hero + Layout fixes
   ========================= */

/* ---- Variables (optional but keeps things consistent) ---- */
:root{
  --hero-bg: #1E304C ;
}


/* ---- HERO base ---- */
.hero::before{
  background: none; /* removes background arrows */
}

/* Default: hide the inline hero image on desktop so wide background shows */
.hero__bg-image img{
  display: none;
}

/* Desktop hero background */
.hero{
  background: var(--hero-bg);
  background-image: var(--hero-desktop-bg);
  background-repeat: no-repeat;
  background-position: right 70%;
  margin-bottom: 0;
}

/* Fix for hero background positioning on certain templates / screens */
.hero.hero--w-img{
  background-position: right;
}

/* Large but not ultra-wide: center looks better than “flush right” */
@media screen and (max-width: 120em){
  .hero.hero--w-img{
    background-position: center;
  }
}

/* Desktop tweak: allow hero inner wrapper to behave when only one CTA */
@media screen and (min-width: 64em){
  .hero .hero_inner_wrapper{
    display: block;
  }
}

@media screen and (min-width: 64em) {
    .hero .hero__bg-image+.hero_inner_wrapper {
        width: 83%;
    }
}

/* ---- Hero title SVG replacement ---- */
.hero__title-container{
  z-index: 9;
  background-image: var(--hero-title-svg); /* FIXED URL */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  height: 290px;
}

/* Hide the H1 + description visually, but keep accessible to screen readers */
.hero__title,
.hero__description{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hero__title-container::after{
  display: none;
}

/* =========================
   Rich Text w/ Background
   ========================= */

/* Remove italic/default bold from the component */
.rich-text-with-background{
  font-style: normal;
  font-weight: 400;
  margin: 0 auto 3.75rem;
}

/* Replace vertical cyan line with stacked logo */
.rich-text-line{
  background: var(--stacked-logo) no-repeat center;
  border: none;
  margin: 1rem 2.5rem 1rem 0;
  padding: 0 15.6875rem 5.75rem 0;
}

/* Make the container wider */
.rich-text-with-background .rich-container{
  max-width: 69.375rem;
}

/* Mobile spacing: center logo + better margins */
@media screen and (max-width: 47.99875em){
  .rich-text-line{
    width: auto;
    margin: 1rem 1rem 2rem;
  }
}

/* =========================
   Cards / Lists / Typography tweaks
   ========================= */

/* Multi Column Cards with Title: keep text aligned consistently */
.image-with-ctas__container .cta__text{
  justify-content: flex-start;
}

/* Reduce default list padding for tighter layout */
.link-list-with-image .links-container ul.link-list li.link{
  padding-bottom: 0.625rem;
}

/* Heading scale on desktop */
@media screen and (min-width: 64em){
  .h2,
  .rtf h2{
    font-size: 3.1rem;
    line-height: 3.5rem;
  }
}

/* Related doctors title when copy is too long */
.related-doctors .title{
  font-size: 1.7rem;
}

/* =========================
   Tablet / Mobile behavior
   ========================= */

/* <= 63.9988em: show the hero image <img>, hide wide background */
@media screen and (max-width: 63.9988em){
  .hero__bg-image img{
    display: block;
    width: 100%;
  }

  .hero{
    background: var(--hero-bg); /* hides wide background hero image */
  }

  .rich-text-with-background{
    margin-bottom: auto;
  }

  .hero__title-container{
    max-height: 230px;
    background-position: center;
  }

  .hero__ctas{
    margin: 2.5rem auto;
  }
}



/* <= 48em: tighten title container + make CTAs span */
@media screen and (max-width: 48em){
  .hero__title-container{
    max-height: 100px;
  }

  .hero__ctas{
    margin: 1.875rem 0;
  }
	
	.hero .hero__inner {
    padding-bottom: 1rem;
    padding-top: 1.875rem;
    position: relative
	}
}

/* location cards 3 cards centered */
@media screen and (min-width: 80em) {
  .location-feature__locations {
    grid-template-columns: repeat(3, 1fr);
  }
}


/*removes paddings for locations component only on mobil */
@media screen and (max-width: 48em) {
.u-content {
    padding-left: unset;
    padding-right: unset;
}
}