@charset "UTF-8";
/*
 lvi/centers
 Center tiles (CenterTile): an optional photo, the center name (the whole card links to the
 center page through a stretched link), the Google rating pill, a distance
 line when the block knows an origin, the address, and View center / Book
 now. Modes: tiles (CSS grid, --centers-cols; a scrolling row with a hairline
 scrollbar under 860px) and the directory (search field, groups by state,
 results heading, empty state). Tiles are always a light surface; the block
 owns no outer margin.
========================================================================== */
:root .lvi-centers {
  --centers-cols: 3;
  --centers-gap-x: 20px;
  --centers-gap-y: 20px;
  --centers-radius: var(--wp--custom--border--radius);
  box-sizing: border-box;
  width: 100%;
  font-family: var(--wp--preset--font-family--primary);
}
:root .lvi-centers__note {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(5, 127, 133, 0.1);
  color: var(--lvi-text);
  font-size: 14px;
}
:root .lvi-centers__track {
  display: grid;
  grid-template-columns: repeat(var(--centers-cols), minmax(0, 1fr));
  gap: var(--centers-gap-y) var(--centers-gap-x);
}
:root .lvi-centers {
  /* Tile */
}
:root .lvi-centers__tile {
  --lvi-heading: var(--wp--preset--color--deep-teal);
  --lvi-text: var(--wp--preset--color--slate);
  --lvi-text-strong: var(--wp--preset--color--ink);
  --lvi-intro: var(--wp--preset--color--slate);
  --lvi-eyebrow: var(--wp--preset--color--teal);
  --lvi-accent: var(--wp--preset--color--teal);
  --lvi-link: var(--wp--preset--color--teal);
  --lvi-link-hover: var(--wp--preset--color--teal-hover);
  --lvi-fine: var(--wp--preset--color--muted);
  --lvi-label: var(--wp--preset--color--muted);
  --lvi-rule: rgba(0, 51, 54, 0.12);
  --lvi-rule-soft: rgba(0, 51, 54, 0.08);
  --lvi-surface: var(--wp--preset--color--white);
  --lvi-surface-alt: var(--wp--preset--color--cream-2);
  --lvi-rule-hover: var(--wp--preset--color--teal);
  --lvi-scroll-thumb: var(--wp--preset--color--deep-teal);
  --lvi-scroll-track: rgba(0, 51, 54, 0.12);
  --lvi-chip-bg: var(--wp--preset--color--mint);
  --lvi-chip-fg: var(--wp--preset--color--teal);
  --lvi-badge-bg: var(--wp--preset--color--lime);
  --lvi-badge-fg: var(--wp--preset--color--deep-teal);
  --lvi-btn-bg: var(--wp--preset--color--deep-teal);
  --lvi-btn-fg: var(--wp--preset--color--cream);
  --lvi-btn-hover: var(--wp--preset--color--lime);
  --lvi-btn-hover-fg: var(--wp--preset--color--deep-teal);
  --lvi-outline-fg: var(--wp--preset--color--deep-teal);
  --lvi-outline-border: rgba(0, 51, 54, 0.25);
  --lvi-outline-hover-bg: var(--wp--preset--color--deep-teal);
  --lvi-outline-hover-fg: var(--wp--preset--color--cream);
  --lvi-outline-border-hover: var(--wp--preset--color--deep-teal);
  color: var(--lvi-text);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 26px 26px 22px;
  background: var(--lvi-surface);
  border: 1px solid var(--lvi-rule-soft);
  border-radius: var(--centers-radius);
  transition: border-color 0.15s ease;
}
:root .lvi-centers__tile:hover, :root .lvi-centers__tile:focus-within {
  border-color: var(--lvi-rule-hover);
}
:root .lvi-centers__tile:hover .lvi-centers__name, :root .lvi-centers__tile:focus-within .lvi-centers__name {
  color: var(--lvi-link);
}
:root .lvi-centers__tile[hidden] {
  display: none;
}
:root .lvi-centers__photo {
  margin: -26px -26px 22px;
  border-radius: calc(var(--centers-radius) - 1px) calc(var(--centers-radius) - 1px) 0 0;
  overflow: hidden;
  background: var(--wp--preset--color--cream-3);
}
:root .lvi-centers__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
}
:root .lvi-centers__photo:empty {
  aspect-ratio: 16/10;
}
:root .lvi-centers__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
:root .lvi-centers__name {
  margin: 0;
  font-family: var(--wp--preset--font-family--primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--lvi-heading);
  transition: color 0.15s ease;
}
:root .lvi-centers__name a {
  color: inherit;
  text-decoration: none;
}
:root .lvi-centers__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--centers-radius);
}
:root .lvi-centers__name a:focus-visible {
  outline: none;
}
:root .lvi-centers__name a:focus-visible::after {
  outline: 3px solid var(--wp--custom--color--focus);
  outline-offset: 3px;
}
:root .lvi-centers__rating {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #E4F6D4;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--lvi-heading);
}
:root .lvi-centers__rating svg {
  width: 13px;
  height: 13px;
  fill: var(--wp--preset--color--gold);
  stroke: none;
}
:root .lvi-centers__distance {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lvi-accent);
}
:root .lvi-centers__distance svg {
  flex: none;
  width: 14px;
  height: 14px;
}
:root .lvi-centers__distance[hidden] {
  display: none;
}
:root .lvi-centers__address {
  flex: 1;
  margin: 0 0 20px;
  font-family: var(--wp--preset--font-family--secondary);
  font-style: normal;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--lvi-text);
}
:root .lvi-centers__actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
:root .lvi-centers__actions .btn {
  flex: 1;
  min-height: 0;
  padding: 9px 12px;
  font-size: 13.5px;
}
:root .lvi-centers__bar {
  display: none;
  position: relative;
  height: 18px;
  margin-top: 20px;
  cursor: pointer;
  touch-action: none;
}
:root .lvi-centers__bar[hidden] {
  display: none;
}
:root .lvi-centers__bar-track {
  position: absolute;
  inset: 8px 0 auto;
  height: 1px;
  background: var(--lvi-scroll-track);
}
:root .lvi-centers__bar-thumb {
  position: absolute;
  top: -1px;
  left: 0;
  height: 3px;
  min-width: 24px;
  background: var(--lvi-scroll-thumb);
  transition: left 0.12s ease-out;
}
:root .lvi-centers__bar.is-dragging .lvi-centers__bar-thumb {
  transition: none;
}
:root .lvi-centers {
  /* Directory: search pill (any [data-centers-search] input on the page drives the same filter) */
}
:root .lvi-centers__search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 480px;
  margin: 0;
  padding: 8px 8px 8px 22px;
  background: var(--lvi-surface);
  border: 1px solid var(--lvi-rule);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 51, 54, 0.08);
}
:root .lvi-centers__search:focus-within {
  border-color: var(--lvi-accent);
}
:root .lvi-centers__search[hidden] {
  display: none;
}
:root .lvi-centers__search[hidden] + .lvi-centers__results {
  margin-top: 0;
}
:root .lvi-centers__search[hidden] + .lvi-centers__results[hidden] ~ .lvi-centers__groups, :root .lvi-centers__search[hidden] + .lvi-centers__results[hidden] ~ .lvi-centers__empty {
  margin-top: 0;
}
:root .lvi-centers__field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
}
:root .lvi-centers__field > svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--lvi-fine);
}
:root .lvi-centers__field input {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--lvi-text-strong);
}
:root .lvi-centers__field input::placeholder {
  color: var(--lvi-fine);
  opacity: 1;
}
:root .lvi-centers__field input:focus {
  outline: none;
}
:root .lvi-centers__field input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
:root .lvi-centers__clear {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--lvi-fine);
  cursor: pointer;
}
:root .lvi-centers__clear svg {
  width: 16px;
  height: 16px;
}
:root .lvi-centers__clear:hover, :root .lvi-centers__clear:focus-visible {
  background: var(--wp--preset--color--mint);
  color: var(--lvi-heading);
}
:root .lvi-centers__clear[hidden] {
  display: none;
}
:root .lvi-centers {
  /* Directory: results heading */
}
:root .lvi-centers__results {
  margin-top: 36px;
}
:root .lvi-centers__results[hidden] {
  display: none;
}
:root .lvi-centers__results-title {
  margin: 0 0 6px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lvi-heading);
}
:root .lvi-centers__results-sub {
  margin: 0;
}
:root .lvi-centers__results-sub[hidden] {
  display: none;
}
:root .lvi-centers__results-sub {
  font-family: var(--wp--preset--font-family--secondary);
  font-style: italic;
  font-size: 15px;
  color: var(--lvi-fine);
}
:root .lvi-centers {
  /* Directory: groups by state */
}
:root .lvi-centers__groups {
  display: flex;
  flex-direction: column;
  gap: 44px;
  margin-top: 44px;
}
:root .lvi-centers__group {
  scroll-margin-top: 140px;
}
:root .lvi-centers__group[hidden] {
  display: none;
}
:root .lvi-centers__state-heading {
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--lvi-rule);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lvi-heading);
}
:root .lvi-centers__state-heading a {
  color: inherit;
  text-decoration: none;
}
:root .lvi-centers__state-heading a:hover, :root .lvi-centers__state-heading a:focus-visible {
  color: var(--lvi-link);
}
:root .lvi-centers--directory .lvi-centers__track {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
:root .lvi-centers__groups[hidden] {
  display: none;
}
:root .lvi-centers {
  /* Nearby mode: the nearest centers in one flat list under the results heading */
}
:root .lvi-centers__nearby {
  margin-top: 36px;
}
:root .lvi-centers__nearby[hidden] {
  display: none;
}
:root .lvi-centers {
  /* Show all centers, centered under the results */
}
:root .lvi-centers__more {
  margin: 44px 0 0;
  text-align: center;
}
:root .lvi-centers__more[hidden] {
  display: none;
}
:root .lvi-centers {
  /* Directory: empty state */
}
:root .lvi-centers__empty {
  margin-top: 44px;
  padding: 56px;
  text-align: center;
  background: var(--lvi-surface);
  border: 1px solid var(--lvi-rule-soft);
  border-radius: var(--centers-radius);
}
:root .lvi-centers__empty[hidden] {
  display: none;
}
:root .lvi-centers__empty-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--lvi-heading);
}
:root .lvi-centers__empty-text {
  margin: 0 0 22px;
  font-family: var(--wp--preset--font-family--secondary);
  font-size: 16px;
  color: var(--lvi-text);
}
:root .lvi-centers {
  /* Tablet (600–859px): tiles and directory groups in two columns (the inline --centers-cols is overridden) */
}
@media (600px <= width <= 859px) {
  :root .lvi-centers .lvi-centers__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
:root .lvi-centers {
  /* Under 860px: the directory's chrome tightens */
}
@media screen and (max-width: 859px) {
  :root .lvi-centers__search {
    max-width: none;
  }
  :root .lvi-centers__results {
    margin-top: 28px;
  }
  :root .lvi-centers__results-title {
    font-size: 26px;
  }
  :root .lvi-centers__groups {
    gap: 32px;
    margin-top: 32px;
  }
  :root .lvi-centers__more {
    margin-top: 32px;
  }
  :root .lvi-centers__empty {
    margin-top: 32px;
    padding: 36px 24px;
  }
}
:root .lvi-centers {
  /* Phones: tile grids become a scrolling row; the directory stacks */
}
@media screen and (max-width: 599px) {
  :root .lvi-centers--tiles {
    --centers-tile: 78%;
    --centers-gap-x: 16px;
  }
  :root .lvi-centers--tiles .lvi-centers__track {
    display: flex;
    gap: var(--centers-gap-x);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block: 4px;
  }
  :root .lvi-centers--tiles .lvi-centers__track::-webkit-scrollbar {
    display: none;
  }
  :root .lvi-centers--tiles .lvi-centers__track:focus-visible {
    outline: 2px solid var(--wp--custom--color--focus);
    outline-offset: 4px;
  }
  :root .lvi-centers--tiles .lvi-centers__tile {
    flex: 0 0 var(--centers-tile);
  }
  :root .lvi-centers--tiles .lvi-centers__bar {
    display: block;
  }
  :root .lvi-centers--tiles .lvi-centers__track {
    align-items: flex-start;
  }
  :root .lvi-centers--directory .lvi-centers__track {
    grid-template-columns: 1fr;
  }
}
