/**
 * HPA provisional notice, styled as a CUF info box.
 * Colours map to CUF design tokens (cuf_theme scss/vars/_color-variables):
 *   background  $neu_02        #ECEEF0
 *   accent/icon $m_01          #0080A4
 *   text        $neu_04        #5D676E (AA on the tinted background)
 *   link        $m_01_dark_01  #0475A5 (AA on the tinted background)
 *   link hover  $m_01_dark_04  #275777
 */
/* Constrain the node-injected notice to the page content width, matching the
   info-icons blocks below it (max-width 1290px, 58px side padding; 20px on
   small mobile). Only the node injection uses this wrapper; the view-header
   and accordion injections are already inside their own containers. */
.cuf-hpa-notice-container {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 58px;
}

@media (max-width: 800px) {
  .cuf-hpa-notice-container {
    padding: 0 20px;
  }
}

.cuf-hpa-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 24px 0;
  padding: 16px 20px;
  background-color: #eceef0;
  border-left: 4px solid #0080a4;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #5d676e;
  /* Some hosts (the Atos/Especialidades view header) centre their text; keep
     the notice left-aligned so it does not centre when it wraps (Carina QA
     L29 mobile / L45 EN). */
  text-align: left;
}

.cuf-hpa-notice__icon {
  flex: 0 0 auto;
  margin-top: 1px;
  fill: #0080a4;
}

.cuf-hpa-notice__text {
  margin: 0;
}

.cuf-hpa-notice__link {
  color: #0475a5;
  font-weight: 700;
  text-decoration: underline;
}

.cuf-hpa-notice__link:hover,
.cuf-hpa-notice__link:focus {
  color: #275777;
}

/* Acordos (header placement): the agreements view uses 40px filter/header
   padding, which leaves a large whitespace band above the notice. Trim it so
   the notice's own margin provides the spacing. Scoped to this view and only
   loaded when the notice is present (library attached with the notice). */
.list-content-area.view-cuf-agreements-list .view-filters {
  padding-bottom: 0;
}

.list-content-area.view-cuf-agreements-list .view-header {
  padding-top: 0;
}

/* Because that header has no top padding, the shared header pull (negative top
   margin) would drag the notice up into the filters, gluing it to the droplists
   and overlapping the "Limpar filtros" button when a filter is set. Override the
   pull with a positive top margin so it sits below the filters with the same
   ~16px gap as the other listings (Carina QA L23). */
.view-cuf-agreements-list .view-header > .cuf-hpa-notice-container .cuf-hpa-notice {
  margin-top: 16px;
}

/* Serviços Clínicos (Carina QA): same as the Acordos listing, this view stacks
   the shared 40px filter bottom padding on top of the view-header's own 40px top
   padding, leaving a large gap above the notice. The notice already pulls up into
   the header (-24px) for the standard ~16px gap, so only the filter's bottom
   padding needs dropping here to remove the extra band. */
.list-content-area.view-cuf-clinical-services-v2 .view-filters {
  padding-bottom: 0;
}

/* FAQs (QA feedback): the FAQ page places a decorative "separator" paragraph
   (a dotted line) immediately above the faqs_list. With the notice injected at
   the top of faqs_list, that dotted line ended up between the intro and the
   notice. Hide it, but ONLY when our notice is present in the following
   faqs_list, so the editor's separator stays untouched everywhere else. */
.field--item:has(.separator-a):has(+ .field--item .faqs-list .cuf-hpa-notice) {
  display: none;
}

/* Oncologia (QA feedback): this listing renders on an inverted (grey) section,
   where the notice's grey info-box background has too little contrast. Use a
   white background here so the box stands out. Scoped to the oncologia display. */
.view-display-id-oncologia .cuf-hpa-notice {
  background-color: #fff;
}

/* Atos > Médicos (QA feedback): this listing renders its header inside the grey
   `.background-view` band (#eceef0 — see cuf-doctors-list.css), so the notice's
   matching grey background has no contrast. Give it a white background here so
   the box stands out, same as the Oncologia display. Scoped to the doctors
   listing (the other Atos listings render on white and keep the grey box). */
.view-cuf-doctors-list-solr .background-view .cuf-hpa-notice {
  background-color: #fff;
}

/* Store Locator (QA feedback): drop the shared container's side padding and
   pull the notice out by the same -15px Bootstrap row gutter the result cards
   use, so the notice's left/right edges line up exactly with the card grid
   below it (instead of the narrower default inset). */
.view-cuf-hospital-list-v2 .cuf-hpa-notice-container {
  padding: 0;
  margin-left: -15px;
  margin-right: -15px;
}

/* Store Locator MAP toggle (Carina QA L9): when the map view is active the
   content-area switches to `padding: 0` so the map fills edge to edge. The
   -15px card-grid pull above then makes the notice stick out past the map, and
   a flush notice would have no horizontal breathing room. Drop the pull and
   give the notice the same side inset the content-area carries in list mode
   (60px desktop, 35px below lg) so it sits inset above the full-bleed map. */
.view-cuf-hospital-list-v2 .content-area.map-show .cuf-hpa-notice-container {
  margin-left: 0;
  margin-right: 0;
  padding-left: 60px;
  padding-right: 60px;
}

@media (max-width: 1023.98px) {
  /* Match the list-mode notice width on mobile: in list mode the grey box sits
     ~20px from the edge (content-area 35px padding minus the -15px container
     pull); the map-show content-area has 0 padding, so use a 20px inset here
     instead of the desktop 60px, otherwise the box is too narrow (Carina QA
     L9: map notice must look like the list one). */
  .view-cuf-hospital-list-v2 .content-area.map-show .cuf-hpa-notice-container {
    padding-left: 20px;
    padding-right: 20px;
    /* The map-show content-area has 0 top padding, so the notice's own top
       margin collapses and it sits glued to the filter chip. Give the gap with
       container padding (does not collapse) and zero the notice margin below
       (Carina QA L9 mobile: missing top margin in map view). */
    padding-top: 20px;
  }

  .view-cuf-hospital-list-v2 .content-area.map-show .cuf-hpa-notice {
    margin-top: 0;
  }

  /* List mode on mobile: the content-area's top padding plus the notice's own
     margin left a large gap above the notice; pull it up to tighten it (Carina
     QA L9 mobile). Map mode keeps its spacing (padding 0 there). */
  .view-cuf-hospital-list-v2 .content-area:not(.map-show) .cuf-hpa-notice-container {
    margin-top: -16px;
  }
}

/* Atos / Especialidades listings (header placement): the notice enters the
   view header, which carries ~40px top padding (set by different per-view
   rules, e.g. cuf-doctors-list.css / cuf-consultas). Pull it up and trim its
   bottom margin so the gap from the filters and the gap to the result count are
   both ~16px: tighter than the default and balanced (Carina QA L33/L36; was
   ~24px each, which Carina found too large). */
.view-header > .cuf-hpa-notice-container .cuf-hpa-notice {
  margin-top: -24px;
  margin-bottom: 16px;
}

/* Especialidades listing (header placement): unlike the Atos views above, this
   listing injects the notice inside `.view-header-content`, which already fills
   the content-area's content box. The shared container's 58px side padding then
   insets the notice well inside the result count and card grid (both flush to
   that content box), leaving a wide empty band on each side. Drop the side
   padding so the notice's left/right edges line up with the results count and
   the cards instead of floating in from the edges (Carina QA: reduce the
   notice's horizontal margins). */
.view-cuf-speciality-list .view-header-content > .cuf-hpa-notice-container {
  padding-left: 0;
  padding-right: 0;
}