/**
 * Patient Save to Contacts page — Interconnect Landing Page Figma (node 2257:44)
 * Scoped to body.pat_en_contacts
 */

.pat_en_contacts.sect-pat {
  --contacts-orchid: #872a93;
  --contacts-amethyst: #3b2d7a;
  --contacts-eucalyptus: #60c3ad;
  --contacts-body: #838383;
  --contacts-band: rgba(217, 202, 233, 0.3);
}

/* Interstitial-style header: lavender bar + midnight triangle (Figma 2257:47) */
.pat_en_contacts.sect-pat header {
  position: relative !important;
  height: 37px !important;
  overflow: visible !important;
  background-color: var(--figma-lavender) !important;
  background-image: none !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  z-index: 20 !important;
}

.pat_en_contacts.sect-pat header .header-wrapper {
  position: relative !important;
  height: 37px !important;
  overflow: visible !important;
  background: transparent !important;
  /* skin-pat sets isolation:isolate which can paint a 1px fringe around the bar */
  isolation: auto !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.pat_en_contacts.sect-pat header .header-wrapper::before,
.pat_en_contacts.sect-pat header .header-wrapper::after {
  display: none !important;
}

.pat_en_contacts.sect-pat header::after {
  display: none !important;
  content: none !important;
}

.pat_en_contacts.sect-pat header .header-wrapper .logo {
  position: absolute !important;
  left: calc(50% - 526px) !important;
  top: 0 !important;
  width: 183px !important;
  height: auto !important;
  padding-left: 15px !important;
  z-index: 31 !important;
  overflow: visible !important;
}

.pat_en_contacts.sect-pat header .header-wrapper .logo:before {
  /* Figma triangle: Tertiary01_MIDNIGHT #332c47 */
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 24px !important;
  top: 0 !important;
  width: 270px !important;
  height: 270px !important;
  background-color: var(--figma-midnight) !important;
  opacity: 1 !important;
  box-shadow: 6px 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform-origin: top right !important;
  transform: scaleY(0.525) rotate(45deg) !important;
  /* Avoid light anti-alias fringe that reads as a border on the purple bar */
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.pat_en_contacts.sect-pat header .header-wrapper .logo a {
  position: relative !important;
  left: 0 !important;
  top: 12px !important;
  display: block !important;
  width: 183px !important;
  height: 32px !important;
  background-size: 183px 32px !important;
  z-index: 1 !important;
}

.pat_en_contacts.sect-pat header .header-wrapper .utility,
.pat_en_contacts.sect-pat header .header-wrapper .nav {
  display: none !important;
}

@media only screen and (max-width: 979px) {
  .pat_en_contacts.sect-pat header .header-wrapper .logo {
    left: 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
  }

  .pat_en_contacts.sect-pat header .header-wrapper .logo:before {
    left: calc(50% - 80px) !important;
    top: -22px !important;
  }

  .pat_en_contacts.sect-pat header .header-wrapper .logo a {
    left: calc(50% - 62px) !important;
    top: 8px !important;
    width: 124px !important;
    height: 21px !important;
    background-size: 124px 21px !important;
  }
}

@media only screen and (min-width: 980px) {
  .pat_en_contacts.sect-pat header {
    height: 37px !important;
    background-color: var(--figma-lavender) !important;
  }
}

/* Hero: green graphic on top + solid grey band on bottom (Figma 2257:46 / 2257:45).
   The grey band is opaque (#f4eff8 ≈ rgba(217,202,233,0.3) over white) so it does
   NOT wash a white bar across the green graphic. */
.pat_en_contacts.sect-pat main {
  padding-top: 0 !important;
  min-height: 0 !important;
}

.pat_en_contacts.sect-pat main section.contacts-hero {
  position: relative !important;
  /* Figma cards top ≈ 166px page / 129px below 37px header */
  padding: 130px 0 80px !important;
  margin: 0 !important;
  background-color: #f4eff8 !important;
  background-image: none !important;
  overflow: visible !important;
}

.pat_en_contacts.sect-pat main section.contacts-hero .contacts-hero-green {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  /* Figma 2257:46 — 371px green band; exact crop, no overlay on top of it. */
  height: 371px !important;
  background-color: #1aa292 !important;
  background-image: url("/assets/img/figma/contacts/hero-green.png") !important;
  background-position: center top !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.pat_en_contacts.sect-pat main section.contacts-hero .contacts-hero-band {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 371px !important;
  bottom: 0 !important;
  /* Opaque grey/lavender band — sits below the green, not over it */
  background-color: #f4eff8 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.pat_en_contacts.sect-pat main section.contacts-hero .section-wrapper {
  position: relative !important;
  z-index: 1 !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
}

/* Theme JS adds a large footer margin-top for fixed headers; this interstitial
   page uses a short relative header, so reset it. */
.pat_en_contacts.sect-pat footer {
  margin-top: 0 !important;
}

.pat_en_contacts.sect-pat .contact-cards {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 35px !important;
  align-items: stretch !important;
}

.pat_en_contacts.sect-pat .contact-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 26px !important;
  width: 100% !important;
  max-width: 399px !important;
  min-height: 392px !important;
  padding: 28px 20px 24px !important;
  background: #fff !important;
  border-radius: 20px !important;
  border: 1px solid var(--contacts-orchid) !important;
  box-sizing: border-box !important;
}

.pat_en_contacts.sect-pat .contact-card--pantherx {
  border-color: var(--contacts-amethyst) !important;
}

.pat_en_contacts.sect-pat .contact-card h2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  font-size: 0 !important;
}

.pat_en_contacts.sect-pat .contact-card .contact-card-logo {
  display: block !important;
  margin: 0 auto !important;
  width: 185px !important;
  height: 32px !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}

.pat_en_contacts.sect-pat .contact-card--pantherx .contact-card-logo--pantherx {
  width: 213px !important;
  height: 32px !important;
}

.pat_en_contacts.sect-pat .contact-details {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 358px !important;
}

.pat_en_contacts.sect-pat .contact-row {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(131, 131, 131, 0.35) !important;
  min-height: 45px !important;
  box-sizing: border-box !important;
}

.pat_en_contacts.sect-pat .contact-row:first-child {
  padding-top: 0 !important;
}

.pat_en_contacts.sect-pat .contact-row:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.pat_en_contacts.sect-pat .contact-icon {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  flex: none !important;
  width: 37px !important;
  height: 37px !important;
  display: block !important;
}

.pat_en_contacts.sect-pat .contact-row:last-child .contact-icon {
  width: 36px !important;
  height: 36px !important;
}

.pat_en_contacts.sect-pat .contact-text {
  /* Figma: text block is centered in the row; icon sits on the left edge.
     Short phone/fax copy ends farther from the icon; long website URLs sit ~11px away. */
  flex: 0 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  min-width: 139px !important;
  max-width: 274px !important;
  width: max-content !important;
}

.pat_en_contacts.sect-pat .contact-row:nth-child(2) .contact-text {
  min-width: 122px !important;
}

.pat_en_contacts.sect-pat .contact-label,
.pat_en_contacts.sect-pat .contact-value,
.pat_en_contacts.sect-pat a.contact-value,
.pat_en_contacts.sect-pat a.contact-value:link,
.pat_en_contacts.sect-pat a.contact-value:visited {
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--contacts-body) !important;
  word-break: break-word !important;
  text-decoration: none !important;
}

.pat_en_contacts.sect-pat a.contact-value:hover,
.pat_en_contacts.sect-pat a.contact-value:focus {
  text-decoration: underline !important;
  color: var(--contacts-body) !important;
}

.pat_en_contacts.sect-pat .button.save-contact {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 351px !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  border-radius: 4px !important;
  border: 1px solid #fff !important;
  background-color: var(--contacts-eucalyptus) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

.pat_en_contacts.sect-pat .contact-card--pantherx .button.save-contact {
  background-color: var(--contacts-orchid) !important;
}

.pat_en_contacts.sect-pat .button.save-contact img {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
}

.pat_en_contacts.sect-pat .button.save-contact:hover,
.pat_en_contacts.sect-pat .button.save-contact:focus {
  opacity: 0.92 !important;
}

@media only screen and (max-width: 979px) {
  .pat_en_contacts.sect-pat main section.contacts-hero {
    padding: 48px 0 64px !important;
  }

  .pat_en_contacts.sect-pat main section.contacts-hero .contacts-hero-green {
    height: 280px !important;
  }

  .pat_en_contacts.sect-pat main section.contacts-hero .contacts-hero-band {
    top: 280px !important;
  }

  .pat_en_contacts.sect-pat .contact-cards {
    gap: 24px !important;
  }

  .pat_en_contacts.sect-pat .contact-card {
    min-height: 0 !important;
  }
}