/* =========================================================
   ODYSSEY — LOCATIONS EXPLORER

   PHP owns content + structure.
   JavaScript owns behavior.
   CSS owns presentation.

   IMPORTANT:
   - Colors reuse existing Odyssey design tokens.
   - CTA appearance reuses 03-components.css.
   - Google map visuals remain owned by 06-location-map.css.
   ========================================================= */


/* =========================================================
   1. VISUAL DESIGN CONTROL PANEL
   ========================================================= */

.obh-locations-explorer {

  /* -------------------------
     Desktop layout
     ------------------------- */

  --obh-le-results-width: 58%;
  --obh-le-map-width: 42%;
  --obh-le-column-gap: 36px;


  /* -------------------------
     Card grid
     ------------------------- */

  --obh-le-card-gap: 20px;
  --obh-le-card-radius: 3px;


  /* -------------------------
     Editorial cards
     ------------------------- */

  --obh-le-featured-aspect: 4 / 5;

  --obh-le-featured-panel-width: 92%;
  --obh-le-featured-panel-padding: 22px;
  --obh-le-featured-panel-offset: 14px;


  /* -------------------------
     Compact metadata
     ------------------------- */

  --obh-le-meta-size: 0.92rem;
  --obh-le-condition-size: 0.92rem;
  --obh-le-age-size: 0.92rem;


  /* -------------------------
     Filter rail
     ------------------------- */

  --obh-le-filter-gap: 10px;
  --obh-le-filter-min-height: 54px;
  --obh-le-filter-padding-x: 16px;


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

  --obh-le-map-height: 60vh;
  --obh-le-map-min-height: 420px;
  --obh-le-map-sticky-top: 80px;


  /* -------------------------
     Motion
     ------------------------- */

  --obh-le-transition: 220ms ease;
  --obh-le-image-hover-scale: 1.025;


  width: 100%;
}


/* =========================================================
   2. FILTER RAIL
   ========================================================= */

.obh-locations-explorer__filters {
  position: relative;
  z-index: 20;

  display: grid;

  grid-template-columns:
    minmax(220px, 1.35fr)
    minmax(145px, 0.8fr)
    repeat(4, minmax(145px, 0.85fr))
    auto;

  gap:
    var(--obh-le-filter-gap);

  width: 100%;

  padding: 14px;

  background:
    var(--obh-white);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--obh-navy) 10%,
      transparent
    );

  border-radius:
    var(--obh-le-card-radius);

  box-shadow:
    0 10px 32px
    color-mix(
      in srgb,
      var(--obh-navy) 8%,
      transparent
    );
}

/* ---------------------------------------------------------
   Search / select / disclosure controls
   --------------------------------------------------------- */

.obh-locations-search input,
.obh-locations-state-filter select,
.obh-locations-filter__summary {
  width: 100%;

  min-height:
    var(--obh-le-filter-min-height);

  margin: 0;

  padding:
    0
    var(--obh-le-filter-padding-x);

  color:
    var(--obh-navy);

  background:
    var(--obh-off-white);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--obh-navy) 12%,
      transparent
    );

  border-radius:
    var(--obh-le-card-radius);

  font-family:
    var(--obh-font-body);

  font-size: 0.92rem;
  line-height: 1.2;

  box-sizing: border-box;
}


.obh-locations-search input:focus-visible,
.obh-locations-state-filter select:focus-visible,
.obh-locations-filter[open]
.obh-locations-filter__summary {
  outline:
    2px solid
    var(--obh-accent);

  outline-offset: 2px;
}

/* ---------------------------------------------------------
   State select — visually match custom dropdown controls
   --------------------------------------------------------- */

.obh-locations-state-filter {
  position: relative;
}

.obh-locations-state-filter select {
  appearance: none;
  -webkit-appearance: none;

  padding-right: 42px;

  cursor: pointer;
}

.obh-locations-state-filter::after {
  content: "";

  position: absolute;
  top: 50%;
  right: 17px;

  width: 8px;
  height: 8px;

  border-right: 1.5px solid var(--obh-navy);
  border-bottom: 1.5px solid var(--obh-navy);

  transform:
    translateY(-65%)
    rotate(45deg);

  pointer-events: none;
}

/* ---------------------------------------------------------
   State select normalization
   Forces native select to visually match disclosure filters.
   --------------------------------------------------------- */

.obh-locations-state-filter select {
  display: block;

  width: 100%;
  min-height: var(--obh-le-filter-min-height);

  margin: 0;

  padding:
    0
    42px
    0
    var(--obh-le-filter-padding-x);

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  color: var(--obh-navy) !important;

  background-color: var(--obh-off-white) !important;
  background-image: none !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--obh-navy) 12%,
      transparent
    ) !important;

  border-radius:
    var(--obh-le-card-radius) !important;

  box-shadow: none !important;

  font-family:
    var(--obh-font-body) !important;

  font-size: 0.93rem !important;
  font-weight: 400;
  line-height: 1.2;

  cursor: pointer;

  box-sizing: border-box;
}

/* ---------------------------------------------------------
   Multi-select filter disclosures
   --------------------------------------------------------- */

.obh-locations-filter {
  position: relative;
}


.obh-locations-filter__summary {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  cursor: pointer;

  list-style: none;
}


.obh-locations-filter__summary::-webkit-details-marker {
  display: none;
}


.obh-locations-filter__summary-value {
  color:
    var(--obh-primary);

  font-size: 0.9rem;
  font-weight: 600;
}


.obh-locations-filter__menu {
  position: absolute;

  top: calc(100% + 7px);
  left: 0;

  z-index: 30;

  width:
    max(100%, 240px);

  max-height: 320px;

  overflow-y: auto;

  padding: 10px;

  background:
    var(--obh-white);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--obh-navy) 12%,
      transparent
    );

  border-radius:
    var(--obh-le-card-radius);

  box-shadow:
    0 14px 36px
    color-mix(
      in srgb,
      var(--obh-navy) 14%,
      transparent
    );
}


.obh-locations-filter__option {
  display: flex;

  align-items: flex-start;

  gap: 9px;

  padding:
    9px
    8px;

  color:
    var(--obh-navy);

  font-family:
    var(--obh-font-body);

  font-size: 0.88rem;

  cursor: pointer;
}


.obh-locations-filter__option input {
  margin-top: 2px;

  accent-color:
    var(--obh-purple);
}


/* ---------------------------------------------------------
   Clear Filters button wrapper

   Actual button appearance remains owned by
   03-components.css.
   --------------------------------------------------------- */

.obh-locations-explorer__reset {
  display: flex;

  align-items: stretch;
}


.obh-locations-explorer__reset
.elementor-button {
  min-height:
    var(--obh-le-filter-min-height);

  white-space: nowrap;

  font-family:
    var(--obh-font-body) !important;

  font-size:
    0.95rem !important;

  font-weight:
    500 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    0 !important;
	
  color:
    var(--obh-primary) !important;
}


/* =========================================================
   3. RESULTS META
   ========================================================= */

.obh-locations-explorer__meta {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding:
    24px
    0
    18px;
}

.obh-locations-explorer
.obh-locations-explorer__count {
  margin: 0;

  color:
    var(--obh-navy);

  font-family:
    var(--obh-font-heading) !important;

  font-size:
    clamp(
      1.17rem,
      2vw,
      1.25rem
    ) !important;

  font-weight: 700 !important;

  line-height: 1.2 !important;

  letter-spacing: -0.8px !important;
}


.obh-locations-explorer__active-filters {
  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 7px;
}


/* =========================================================
   4. RESULTS + MAP LAYOUT
   ========================================================= */

.obh-locations-explorer__body {
  display: grid;

  grid-template-columns:
    minmax(0, 58fr)
    minmax(0, 42fr);

  column-gap: 24px;

  align-items: start;
}


.obh-locations-explorer__results {
  min-width: 0;
}


/* =========================================================
   5. LOCATION CARD GRID
   ========================================================= */

.obh-locations-explorer__grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  column-gap: 12px;
  row-gap: var(--obh-le-card-gap);
}


/* =========================================================
   6. SHARED LOCATION CARD
   ========================================================= */

.obh-location-card {
  position: relative;

  min-width: 0;

  overflow: hidden;

  background:
    var(--obh-white);

  /* No visible outer card border. */
  border: 0;

  border-radius:
    var(--obh-le-card-radius);

  box-shadow:
    0 7px 24px
    color-mix(
      in srgb,
      var(--obh-navy) 8%,
      transparent
    );

  transition:
    box-shadow
      var(--obh-le-transition),
    transform
      var(--obh-le-transition);
}


.obh-location-card:hover {
  box-shadow:
    0 13px 34px
    color-mix(
      in srgb,
      var(--obh-navy) 13%,
      transparent
    );
}

/* ---------------------------------------------------------
   Selected map/card state
   --------------------------------------------------------- */

.obh-location-card.is-selected {
  outline: none;

  border-color:
    color-mix(
      in srgb,
      var(--obh-map-color-substance) 55%,
      var(--obh-white)
    );

  box-shadow:
    inset 0 0 0 2px
    color-mix(
      in srgb,
      var(--obh-map-color-substance) 58%,
      var(--obh-white)
    ),
    0 10px 28px
    color-mix(
      in srgb,
      var(--obh-map-color-substance) 16%,
      transparent
    );
}

/* ---------------------------------------------------------
   Facility image
   --------------------------------------------------------- */

.obh-location-card__media {
  overflow: hidden;
}


.obh-location-card__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform
      var(--obh-le-transition);
}


.obh-location-card:hover
.obh-location-card__image {
  transform:
    scale(
      var(--obh-le-image-hover-scale)
    );
}


/* =========================================================
   7. EDITORIAL IMAGE CARD
   All Explorer cards use this variant.
   ========================================================= */

.obh-location-card--featured {
  width: 100%;
  min-height: 500px;

  aspect-ratio:
    var(--obh-le-featured-aspect);

  border: 0;
}


.obh-location-card--featured
.obh-location-card__media {
  position: absolute;

  inset: 0;
}


/* ---------------------------------------------------------
   Floating white editorial panel
   --------------------------------------------------------- */

.obh-location-card--featured
.obh-location-card__panel {
  position: absolute;

  left:
    var(--obh-le-featured-panel-offset);

  bottom:
    var(--obh-le-featured-panel-offset);

  z-index: 2;

  width:
    min(
      var(--obh-le-featured-panel-width),
      calc(
        100% -
        (
          var(--obh-le-featured-panel-offset) *
          2
        )
      )
    );

  padding:
    var(--obh-le-featured-panel-padding);

  background:
    color-mix(
      in srgb,
      var(--obh-off-white) 96%,
      transparent
    );

  /* Intentionally no panel border. */
  border: 0;

  border-radius:
    var(--obh-le-card-radius);

  box-shadow:
    0 12px 36px
    color-mix(
      in srgb,
      var(--obh-navy) 14%,
      transparent
    );

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  box-sizing: border-box;
}


/* =========================================================
   8. FLUSH TOP META TAGS
   City/state and level of care sit directly against
   the top left/right edges of the white panel.
   ========================================================= */

.obh-location-card--featured
.obh-location-card__topline {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;

  /*
   * Pull through the white panel's internal padding so
   * both tags sit flush against its upper corners.
   *
   * Bottom margin supplies the requested 24px before
   * the Location Title.
   */
  margin:
    calc(
      var(--obh-le-featured-panel-padding) *
      -1
    )
    calc(
      var(--obh-le-featured-panel-padding) *
      -1
    )
    24px;

  padding: 0;
}


/* ---------------------------------------------------------
   City + State
   Example: Richmond, VA
   --------------------------------------------------------- */

.obh-location-card__city-state {
  display: inline-block;

  flex: 0 1 auto;

  margin: 0;

  padding: 8px 12px 8px 12px;

  color:
    var(--obh-white) !important;

  background:
    var(--obh-navy);

  border: 0;
  border-radius: 0;

  font-family:
    var(--obh-font-body);

  font-size:
    var(--obh-le-meta-size);

  font-weight: 500;
  line-height: 1.15;

  letter-spacing: 0.1;

  white-space: nowrap;
}


/* ---------------------------------------------------------
   Level of Care
   Examples:
   IOP | PHP
   Residential
   Medical Detox | Residential

   Uses Odyssey design tokens only.
   --------------------------------------------------------- */

.obh-location-card__levels {
  display: inline-block;

  flex: 0 0 auto;

  margin: 0;

  padding: 8px 12px 8px 12px;

  color:
    var(--obh-white) !important;

  background:
    linear-gradient(
      90deg,
      var(--obh-primary),
      var(--obh-purple-fill)
    );

  border: 0;
  border-radius: 0;

  font-family:
    var(--obh-font-body);

  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 1.15;

  white-space: nowrap;
}


/* =========================================================
   9. CARD TYPOGRAPHY
   ========================================================= */

/* ---------------------------------------------------------
   Facility title
   Location Explorer-specific typography.
   Overrides shared .obh-type-shippori-subhead metrics.
   --------------------------------------------------------- */

.obh-locations-explorer
.obh-location-card
.obh-location-card__title {
  margin:
    0
    0
    20px !important;

  color:
    var(--obh-navy);

  font-size:
    1.17rem !important;

  font-weight:
    700 !important;

  line-height:
    1.25 !important;

  letter-spacing:
    -0.8px !important;
}


.obh-location-card--featured
.obh-location-card__title {
  margin-top:
    0;

  font-size:
    var(--obh-le-featured-title-size) !important;
}

/* ---------------------------------------------------------
   Conditions Treated
   Plain text; PHP separates terms using " | ".
   Example:
   Eating Disorders | Co-occurring Disorders
   --------------------------------------------------------- */

.obh-location-card__conditions {
  display: block;

  margin:
    0
    0
    12px !important;

  padding: 0;

  color:
    var(--obh-navy);

  background: none;

  font-family:
    var(--obh-font-body);

  font-size:
    0.96rem;

  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.1px;
}


/* ---------------------------------------------------------
   Optional card summary
   --------------------------------------------------------- */

.obh-location-card__summary {
  margin:
    8px
    0
    0;

  color:
    var(--obh-navy);

  font-family:
    var(--obh-font-body);

  font-size: 0.86rem;

  font-weight: 300;
  line-height: 1.4;
}


/* ---------------------------------------------------------
   Ages Treated
   Plain text; PHP separates terms using " | ".
   --------------------------------------------------------- */

.obh-location-card__ages {
  display: block;

  margin:
    0 !important;

  padding: 0;

  color:
    var(--obh-purple-deep);

  background: none;

  font-family:
    var(--obh-font-body);

  font-size:
    0.96rem;

  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.1px;
}


/* ---------------------------------------------------------
   Defensive cleanup:
   old card pills should never display if stale markup
   appears from cached HTML.
   --------------------------------------------------------- */

.obh-location-card__pill {
  display: none !important;
}


/* ---------------------------------------------------------
   Old Google Maps address line is no longer visible
   inside Explorer cards.
   --------------------------------------------------------- */

.obh-location-card__address {
  display: none !important;
}


/* =========================================================
   10. CARD FOOTER
   ========================================================= */

.obh-location-card__footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  align-items: center;
  justify-content: flex-start;

  column-gap: 24px;
  row-gap: 16px;

  margin-top: 20px;
}


/* ---------------------------------------------------------
   Click-to-call phone
   --------------------------------------------------------- */

.obh-locations-explorer
.obh-location-card__phone {
  color:
    var(--obh-navy) !important;

  font-family:
    var(--obh-font-body);

  font-size:
    0.98rem;

  font-weight:
    600;
	
  letter-spacing:
    0.2px;
	
  line-height:
    1.25;

  text-decoration:
    none !important;
}


.obh-locations-explorer
.obh-location-card__phone:hover,
.obh-locations-explorer
.obh-location-card__phone:focus-visible {
  color:
    var(--obh-purple) !important;

  text-decoration:
    none !important;
}


/* ---------------------------------------------------------
   View Location CTA

   Base appearance and color behavior are owned globally by:
   .obh-textarrow-btn
   .obh-textarrow-btn--navy

   Location Explorer owns only local sizing/layout.
   --------------------------------------------------------- */

.obh-location-card__cta {
  flex:
    0
    0
    auto;
}


.obh-locations-explorer
.obh-location-card__cta
.elementor-button {
  font-size:
    0.88rem !important;
}


/* =========================================================
   11. INTEGRATED MAP PANEL
   ========================================================= */

.obh-locations-explorer__map-panel {
  position: sticky;

  top:
    var(--obh-le-map-sticky-top);

  min-width: 0;
}


.obh-locations-explorer__map-shell {
  min-height:
    var(--obh-le-map-min-height);

  overflow: hidden;

  border-radius:
    var(--obh-le-card-radius);
}


/*
 * The Locations Explorer owns filtering when the map
 * appears inside this component.
 *
 * Hide the standalone map treatment tabs and its separate
 * result count.
 *
 * KEEP THE EXISTING MAP LEGEND VISIBLE.
 *
 * 06-location-map.css remains the source of truth for:
 * - marker colors
 * - cluster colors
 * - map marker labels
 * - legend swatches
 * - InfoWindow styling
 */

.obh-locations-explorer
.obh-location-map__filters,

.obh-locations-explorer
.obh-location-map__result-count {
  display: none;
}


/* ---------------------------------------------------------
   Existing map legend
   --------------------------------------------------------- */

.obh-locations-explorer
.obh-location-map__legend {
  width: 100%;

  margin:
    0
    0
    14px;

  justify-content: center;
}


.obh-locations-explorer
.obh-location-map {
  margin: 0;
}


/* =========================================================
   12. LOAD MORE
   ========================================================= */

.obh-locations-explorer__load-more {
  display: flex;

  justify-content: center;

  margin-top: 32px;
}


/*
 * Button visual appearance remains owned by
 * 03-components.css.
 */


/* =========================================================
   13. EMPTY RESULTS
   ========================================================= */

.obh-locations-explorer__empty {
  padding:
    48px
    32px;

  text-align: center;

  background:
    var(--obh-off-white);

  border-radius:
    var(--obh-le-card-radius);
}


.obh-locations-explorer__empty h3 {
  margin:
    0
    0
    12px;

  color:
    var(--obh-navy);

  font-family:
    var(--obh-font-heading);
}


.obh-locations-explorer__empty p {
  margin: 0;

  color:
    var(--obh-navy);

  font-family:
    var(--obh-font-body);
}


/* =========================================================
   14. FILTER STATE UTILITIES
   ========================================================= */

.obh-locations-explorer [hidden] {
  display: none !important;
}

/* ---------------------------------------------------------
   Active-filter removal chips
   --------------------------------------------------------- */

.obh-locations-explorer
button.obh-locations-explorer__active-filter {
  appearance: none;

  display: inline-flex;
  align-items: center;

  gap: 4px;

  margin: 0;
  padding: 0 !important;

  color:
    var(--obh-primary);

  background: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  min-width: 0;
  min-height: 0;

  font-family:
    var(--obh-font-body);

  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.2;

  cursor: pointer;

  text-decoration: none;
}


.obh-locations-explorer
button.obh-locations-explorer__active-filter:hover,

.obh-locations-explorer
button.obh-locations-explorer__active-filter:focus-visible {
  color:
    var(--obh-purple);

  background: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  text-decoration: underline;
}


.obh-locations-explorer
button.obh-locations-explorer__active-filter:focus-visible {
  outline:
    2px solid
    var(--obh-accent);

  outline-offset: 2px;
}


/* =========================================================
   15. TABLET
   ========================================================= */

@media (max-width: 1199px) {

  .obh-locations-explorer__filters {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }


  .obh-locations-explorer__body {
    --obh-le-results-width: 56%;
    --obh-le-map-width: 44%;

    --obh-le-column-gap: 24px;
  }


  /*
   * At tablet widths, use one card per result row so the
   * image and editorial panel retain enough usable width.
   */

  .obh-locations-explorer__grid {
    grid-template-columns:
      1fr;
  }


  .obh-location-card--featured {
    aspect-ratio: auto;

    min-height: 520px;
  }


  .obh-location-card--featured
  .obh-location-card__panel {
    width:
      calc(
        100% -
        (
          var(--obh-le-featured-panel-offset) *
          2
        )
      );
  }

}


/* =========================================================
   16. MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .obh-locations-explorer {
    --obh-le-card-gap: 16px;
  }


  /* Filter controls stack vertically. */

  .obh-locations-explorer__filters {
    grid-template-columns:
      1fr;

    padding: 12px;
  }


  .obh-locations-explorer__meta {
    display: block;

    padding:
      20px
      0
      16px;
  }


  .obh-locations-explorer__active-filters {
    justify-content: flex-start;

    margin-top: 12px;
  }


  /*
   * Mobile currently stacks Results and Map.
   * A dedicated Results / Map toggle can be layered onto
   * this structure later without changing card markup.
   */

  .obh-locations-explorer__body {
    display: block;
  }


  .obh-locations-explorer__grid {
    grid-template-columns:
      1fr;
  }


  .obh-location-card--featured {
    min-height: 560px;
  }


  .obh-location-card--featured
  .obh-location-card__panel {
    left: 14px;
    right: 14px;
    bottom: 14px;

    width: auto;

    padding: 22px;
  }


  /*
   * The tag row still pulls through the panel padding,
   * keeping both tags flush with the white panel edges.
   */

  .obh-location-card--featured
  .obh-location-card__topline {
    margin:
      -22px
      -22px
      24px;
  }


  .obh-location-card__city-state,
  .obh-location-card__levels {
    font-size: 0.83rem;
	letter-spacing: 0.1px;
	line-height: 1.3;
  }



  .obh-locations-explorer__map-panel {
    position: relative;

    top: auto;

    margin-top: 32px;
  }


  .obh-locations-explorer__map-shell {
    min-height: 560px;
  }

}


/* =========================================================
   17. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .obh-location-card,
  .obh-location-card__image,
  .obh-locations-explorer__active-filter {
    transition: none;
  }

}

/* =========================================================
   18. MOBILE FILTER + RESULTS HIERARCHY
   Improves the visual relationship between filtering and
   the returned location results without changing behavior.
   ========================================================= */

/* Mobile-only control-group heading. */
.obh-locations-explorer__filter-heading {
  display: none;
}


@media (max-width: 767px) {

  /* -------------------------------------------------------
     Filter panel
     ------------------------------------------------------- */

  .obh-locations-explorer__filters {
    grid-template-columns: 1fr;

    gap: 24px;

    padding: 24px;

    margin-bottom: 0;

    background:
      var(--obh-white);

    border:
      1px solid
      color-mix(
        in srgb,
        var(--obh-navy) 12%,
        transparent
      );

    border-radius:
      var(--obh-le-card-radius);

    box-shadow:
      0 12px 32px
      color-mix(
        in srgb,
        var(--obh-navy) 8%,
        transparent
      );
  }


  /* -------------------------------------------------------
     Filter panel heading
     ------------------------------------------------------- */

  .obh-locations-explorer__filter-heading {
    display: block;

    grid-column: 1 / -1;

    margin:
      0
      0
      6px;

    padding: 0;

    color:
      var(--obh-navy);

    font-family:
      var(--obh-font-body);

    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
  }


  /* -------------------------------------------------------
     Ensure each control fills the panel width
     ------------------------------------------------------- */

  .obh-locations-search,
  .obh-locations-state-filter,
  .obh-locations-filter {
    width: 100%;
  }


  /* -------------------------------------------------------
     Clear Filters
     Secondary action beneath the filter controls.
     ------------------------------------------------------- */

  .obh-locations-explorer__reset {
    display: flex;

    justify-content: flex-end;

    width: 100%;

    margin-top: 4px;
  }


  .obh-locations-explorer__reset .elementor-button {
    width: auto;
  }


  /* -------------------------------------------------------
     Results header
     Creates a clear boundary between controls and results.
     ------------------------------------------------------- */

  .obh-locations-explorer__meta {
    display: block;

    margin:
      24px
      0
      24px;

    padding:
      0
      0
      18px;

    border-bottom:
      1px solid
      color-mix(
        in srgb,
        var(--obh-navy) 12%,
        transparent
      );
  }


  .obh-locations-explorer__count {
    margin: 0;

    color:
      var(--obh-navy);
  }


  .obh-locations-explorer__active-filters {
    justify-content: flex-start;

    margin-top: 12px;
  }


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

  .obh-locations-explorer__results {
    min-width: 0;
  }


  .obh-locations-explorer__grid {
    row-gap: 24px;
  }

}

@media (max-width: 767px) {

  .obh-locations-explorer__filters
  > .obh-locations-explorer__filter-heading {
    margin: 0 !important;
  }

}

/* ================================================================
   LOCATION EXPLORER — UNIFORM CARD LAYOUT
   Equal image overlap + equal information panel height
   ================================================================ */

/*
 * Desktop card sizing controls.
 *
 * Adjust these two values if desired:
 * --obh-le-card-panel-overlap = how far the white panel overlaps image
 * --obh-le-card-panel-height  = height of white information area
 */
.obh-locations-explorer {
  --obh-le-card-panel-overlap: 28px;
  --obh-le-card-panel-height: 290px;
}


/* ---------------------------------------------------------------
   CARD STRUCTURE
   --------------------------------------------------------------- */

.obh-location-card--featured {
  display: flex;
  flex-direction: column;

  min-height: 0;
  aspect-ratio: auto;

  overflow: visible;
}


/* ---------------------------------------------------------------
   IMAGE
   Keep every facility image the same dimensions.
   --------------------------------------------------------------- */

.obh-location-card--featured
.obh-location-card__media {
  position: relative;
  inset: auto;

  flex: 0 0 auto;

  width: 100%;

  aspect-ratio:
    var(--obh-le-standard-image-aspect);

  overflow: hidden;
}


/* ---------------------------------------------------------------
   INFORMATION PANEL

   The panel now sits in normal document flow instead of being
   positioned from the bottom of the card.

   Result:
   - identical image overlap on every card
   - identical white panel height
   - content always starts at the same vertical position
   - unused space stays at the bottom
   --------------------------------------------------------------- */

.obh-location-card--featured
.obh-location-card__panel {
  position: relative;

  left: auto;
  right: auto;
  bottom: auto;

  z-index: 2;

  display: flex;
  flex-direction: column;

  width:
    calc(
      100% -
      (
        var(--obh-le-featured-panel-offset) *
        2
      )
    );

  height:
    auto;

  margin:
    calc(var(--obh-le-card-panel-overlap) * -1)
    auto
    0;

  padding:
    var(--obh-le-featured-panel-padding);

  box-sizing: border-box;

  background:
    color-mix(
      in srgb,
      var(--obh-off-white) 96%,
      transparent
    );

  border-radius:
    var(--obh-le-card-radius);

  box-shadow:
    0 12px 36px
    color-mix(
      in srgb,
      var(--obh-navy) 14%,
      transparent
    );

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* ---------------------------------------------------------------
   CONTENT ALIGNMENT
   Keep all content anchored to the top.
   --------------------------------------------------------------- */

.obh-location-card--featured
.obh-location-card__panel > * {
  flex-shrink: 0;
}


/*
 * Push only the footer to the bottom.
 *
 * Any unused white space therefore appears between the main
 * content and the footer, never above the content.
 */
.obh-location-card--featured
.obh-location-card__footer {
  margin-top: 20px;
  padding-top: 0;
}


/* ================================================================
   MOBILE
   Let the information section grow naturally when space is tighter.
   ================================================================ */

@media (max-width: 767px) {

  .obh-locations-explorer {
    --obh-le-card-panel-overlap: 24px;
  }

  .obh-location-card--featured {
    min-height: 0;
  }

  .obh-location-card--featured
  .obh-location-card__panel {
    left: auto;
    right: auto;
    bottom: auto;

    width:
      calc(
        100% -
        (
          var(--obh-le-featured-panel-offset) *
          2
        )
      );

    height: auto;
    min-height:
      0;

    margin:
      calc(var(--obh-le-card-panel-overlap) * -1)
      auto
      0;
  }

}
/* ================================================================
   MOBILE FILTER APPLY ACTION
   Desktop keeps live filtering.
   Mobile waits for explicit submission, then scrolls to results.
   ================================================================ */

.obh-locations-explorer__apply {
  display: none;
}


@media (max-width: 767px) {

  .obh-locations-explorer__apply {
    display: block;
    width: 100%;
  }


  .obh-locations-explorer__apply
  .elementor-button {
    width: 100%;
    justify-content: center;
  }


  .obh-locations-explorer__meta {
    scroll-margin-top: 80px;
  }

}

/* ================================================================
   LOCATIONS EXPLORER - CLEAR FILTERS TEXT ACTION
   Keep View Matching Locations as the primary mobile CTA.
   Clear Filters is intentionally a low-emphasis text action.
   ================================================================ */

.obh-locations-explorer
.obh-locations-explorer__reset {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}


.obh-locations-explorer
.obh-locations-explorer__reset
.elementor-button {
  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 0 !important;

  color: var(--obh-navy) !important;
  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  text-decoration: none !important;
}


.obh-locations-explorer
.obh-locations-explorer__reset
.elementor-button:hover,
.obh-locations-explorer
.obh-locations-explorer__reset
.elementor-button:focus-visible {
  color: var(--obh-purple) !important;
  background: transparent !important;

  border: 0 !important;
  box-shadow: none !important;

  text-decoration: none !important;
}

@media (max-width: 767px) {

  .obh-locations-explorer
  .obh-locations-explorer__reset {
    margin-top: 16px;
  }

}

/* Keep Clear Filters vertically centered in the desktop filter row. */
.obh-locations-explorer
.obh-locations-explorer__reset {
  align-self: center;
  display: flex;
  align-items: center;
}