/* ==========================================================================
   Find a pharmacy (/findpharmacies.php)
   Scoped styles, loaded only by ControllerFindpharmacies.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero (matches the services page hero)
   -------------------------------------------------------------------------- */

.fp-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 6% 0%, rgba(128, 171, 89, .16), rgba(128, 171, 89, 0) 62%),
    #F6F6EF !important;
}

.fp-hero::after {
  content: "";
  position: absolute;
  top: -4rem;
  right: -4rem;
  width: 17rem;
  height: 17rem;
  background:
    linear-gradient(#25545D, #25545D) center / 100% 28% no-repeat,
    linear-gradient(#25545D, #25545D) center / 28% 100% no-repeat;
  opacity: .05;
  transform: rotate(12deg);
  pointer-events: none;
}

.fp-hero__content {
  position: relative;
  z-index: 1;
  padding: 2.25rem 0 .5rem;
}

.fp-hero__eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: rgba(37, 84, 93, .08);
  color: #25545D;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.fp-hero .fp-hero__title {
  max-width: 20ch;
  margin-bottom: .75rem;
  font-size: clamp(1.85rem, 6.4vw, 2.675rem) !important;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.fp-hero .fp-hero__accent {
  color: #80AB59;
}

.fp-hero__lead {
  max-width: 36rem;
  margin-bottom: 1.5rem;
  color: rgba(37, 84, 93, .78);
  font-size: clamp(.95rem, 3.6vw, 1.0625rem);
  line-height: 1.6;
}

.fp-hero__media {
  position: relative;
  z-index: 1;
}

/* style.css caps .image_banner_section_image_section > div at max-width:100%
   !important, which stops the full-bleed break-out below 992px. */
.fp-hero__media > .fp-map-frame {
  max-width: none !important;
}

/* --------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */

.fp-map-frame {
  height: 13rem;
  margin: 1.25rem -1rem 0;
  overflow: hidden;
}

@media (min-width: 992px) {
  .fp-map-frame {
    margin: 0;
  }
}

.fp-map-frame .map {
  width: 100%;
  height: 100%;
}

.leaflet-container {
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   Nominate row
   -------------------------------------------------------------------------- */

.fp-nominate {
  padding: .5rem 0 3rem;
}

@media (min-width: 576px) {
  .fp-map-frame { height: 16rem; }
}

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */

.fp-results {
  display: grid;
  gap: .75rem;
  align-items: stretch;
}

.fp-card {
  display: flex;
  flex-direction: column;
  /* mixitup.css sizes .mix at calc(50% - 0.5rem); the grid owns widths here. */
  width: auto;
  padding: 16px;
  border: 1px solid rgba(37, 84, 93, .14);
  /* mixitup.css forces border-radius:.25rem!important on .mix. */
  border-radius: 16px !important;
  /* Clip the media at the card edge so its corners match exactly. */
  overflow: hidden;
  background: #fff;
  box-shadow: 0 3px 12px rgba(37, 84, 93, .05);
  text-align: left;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.fp-card:hover {
  border-color: rgba(37, 84, 93, .35);
  box-shadow: 0 12px 26px rgba(37, 84, 93, .1);
}

.fp-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.fp-tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.fp-tag--open {
  background: rgba(128, 171, 89, .16);
  color: #4f7a2f;
}

.fp-tag--soon {
  background: rgba(206, 174, 92, .22);
  color: #8a6b16;
}

.fp-tag--closed,
.fp-tag--indefinite,
.fp-tag--unknown {
  background: rgba(37, 84, 93, .1);
  color: rgba(37, 84, 93, .75);
}

.fp-card__distance {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: #F6F6EF;
  border: 1px solid rgba(37, 84, 93, .14);
  color: rgba(37, 84, 93, .8);
  font-size: .6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.fp-card__name {
  margin: 0 0 4px;
  min-height: 2.6em;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.3;
}

.fp-card .fp-card__name a {
  color: #25545D;
  text-decoration: none;
}

.fp-card .fp-card__name a:hover,
.fp-card .fp-card__name a:focus {
  color: #25545D;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Two lines reserved: names and addresses vary, buttons stay aligned. */
.fp-card__address {
  margin: 0;
  min-height: 2.6em;
  color: rgba(37, 84, 93, .7);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.45;
}

.fp-card__hours {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  color: rgba(37, 84, 93, .85);
  font-size: .8125rem;
  font-weight: 600;
}

.fp-card__hours::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #80AB59;
  flex-shrink: 0;
}

.fp-card__hours--soon::before {
  background: #CEAE5C;
}

.fp-card__hours--closed::before,
.fp-card__hours--indefinite::before,
.fp-card__hours--unknown::before {
  background: rgba(37, 84, 93, .35);
}

.fp-card__actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}

.fp-card .fp-card__btn {
  flex: 1 1 0;
  padding: .65rem .5rem;
  border-radius: 10px;
  background: #fff;
  color: #25545D;
  box-shadow: inset 0 0 0 1px rgba(37, 84, 93, .28);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.fp-card .fp-card__btn:hover,
.fp-card .fp-card__btn:focus {
  background: #25545D;
  color: #fff;
  text-decoration: none;
}

.fp-card .fp-card__btn--primary {
  background: #25545D;
  color: #fff;
  box-shadow: none;
}

.fp-card .fp-card__btn--primary:hover,
.fp-card .fp-card__btn--primary:focus {
  background: #1c4148;
  color: #fff;
}

.fp-card__media {
  display: none;
}

@media (min-width: 768px) {
  .fp-hero__content { padding: 3rem 0; }
  .fp-map-frame { height: 22rem; }
  .fp-results { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  .fp-card__media {
    display: block;
    /* 16px padding + the card's 1px border, so the image sits flush. */
    margin: -17px -17px 14px;
    height: 150px;
  }

  .fp-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 992px) {
  .fp-hero { --fp-hero-pad: 3.5rem; }
  .fp-hero__content { padding: 3.5rem 0; }
  .fp-hero::after { width: 22rem; height: 22rem; }

  .fp-map-frame {
    height: 26rem;
    margin: 0;
  }

}

@media (min-width: 1200px) {
  .fp-results { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .fp-card,
  .fp-card__btn { transition: none; }
}

/* style.css sets .image_banner_section_image_section > div > div to a 1.25rem
   radius, which the Leaflet container inherits. The map is full-bleed, so
   every corner stays square at every width. */
.fp-map-frame,
.fp-map-frame .map,
.fp-map-frame .leaflet-container,
.fp-hero__media > div > div,
.pharmacy_banner_section .map,
.pharmacy_banner_section .leaflet-container,
.pharmacy_banner_section .image_banner_section_image {
  border-radius: 0 !important;
}

/* Desktop: the map bleeds to the top, bottom and right edges of the hero. */
@media (min-width: 992px) {
  .fp-hero > .container {
    padding-right: 0 !important;
  }

  .fp-hero .d-flex {
    align-items: stretch !important;
  }

  .fp-hero__content {
    align-self: center;
  }

  .fp-hero__media {
    display: flex;
    align-self: stretch;
    padding: 0 !important;
    /* Reach the viewport edge, past the centred container. */
    margin-right: calc(50% - 50vw);
  }

  .fp-hero__media > .fp-map-frame {
    flex: 1;
    /* Fills the column, which stretches to the copy column's height. */
    height: 100% !important;
    align-self: stretch;
    min-height: 26rem;
  }
}