/* ===========================================================
   App - Community Search - Basic - Results Module
   Search bar, card grid and card styles. All selectors are
   scoped under .tsl-community-search.
   =========================================================== */

/* ---------- Root variables ---------- */

.tsl-community-search {
  --tsl-olive: #A7AD37;
  --tsl-teal:  #003C4D;
  --tsl-ink:   #003C4D;
  --tsl-gray:  #54565A;
  --tsl-radius: 14px;
  --tsl-col-gap: 40px;
  --tsl-row-gap: 56px;

  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}
.tsl-community-search *,
.tsl-community-search *::before,
.tsl-community-search *::after { box-sizing: border-box; }

/* ---------- Search bar ---------- */

.tsl-cs__bar {
  background: var(--tsl-olive);
  border-radius: 30px;
  padding: 22px 26px;
  margin: 0 0 48px;
}
.tsl-cs__form {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 999px;
  overflow: hidden;
}
.tsl-cs__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 20px;
  color: var(--tsl-ink);
  padding: 16px 26px;
}
.tsl-cs__input::placeholder { color: #8a8a8a; }
.tsl-cs__submit {
  flex: 0 0 auto;
  width: 66px;
  border: 0;
  cursor: pointer;
  background: var(--tsl-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter .15s ease;
}
.tsl-cs__submit:hover { filter: brightness(1.1); }
.tsl-cs__input:focus-visible,
.tsl-cs__submit:focus-visible { outline: 3px solid var(--tsl-teal); outline-offset: 2px; }

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

.tsl-cs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  column-gap: var(--tsl-col-gap);
  row-gap: var(--tsl-row-gap);
}
@media (max-width: 900px) { .tsl-cs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tsl-cs__grid { grid-template-columns: 1fr; } }

/* ---------- Card: subgrid bands (head, media, tail) with flex fallback ---------- */

.tsl-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0;
}
.tsl-card__head,
.tsl-card__tail {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@supports not (grid-template-rows: subgrid) {
  .tsl-card { display: flex; flex-direction: column; }
  .tsl-card__tail { flex: 1 1 auto; }
}

/* ---------- Card head: name, address and phone ---------- */

.tsl-card__name {
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--tsl-ink);
}
.tsl-card__name a {
  color: inherit;
  text-decoration: none;
  text-transform: none;
  font-weight: 500;
}
.tsl-card__name a:hover { text-decoration: underline; }
.tsl-card__address,
.tsl-card__phone {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.5;
  color: #54565a;
  white-space: pre-line;
}
.tsl-card__phone a { color: inherit; text-decoration: none; }
.tsl-card__phone a:hover { text-decoration: underline; }

.tsl-card__head > :last-child { margin-bottom: 0; }

/* ---------- Media ---------- */

.tsl-card__media { display: block; margin: 10px 0 20px; }
.tsl-card__img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--tsl-radius);
  aspect-ratio: 16 / 9;
}

/* ---------- Starting rates ---------- */

.tsl-card__rates {
  margin: 0 0 16px;
  font-size: 22px;
  line-height: 1.3;
  color: var(--tsl-gray);
}
.tsl-card__rates-label {
  text-transform: uppercase;
  letter-spacing: .02em;
}
.tsl-card__rates-value {
  font-weight: 700;
  color: var(--tsl-teal);
}

.tsl-community-search .tsl-card__rates-call {
  color: var(--tsl-gray);
  text-transform: uppercase;
}
.tsl-community-search .tsl-card__rates-call:hover { text-decoration: none; }
.tsl-community-search .tsl-card__rates-call:focus-visible {
  outline: 3px solid var(--tsl-teal);
  outline-offset: 2px;
}

/* ---------- Level-of-care badges ---------- */

.tsl-community-search .tsl-card__levels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.tsl-community-search .tsl-card__levels[hidden] { display: none; }
.tsl-community-search .tsl-card__level {
  --badge: var(--tsl-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  padding: 15px;
  border-radius: 999px;
  background: var(--badge);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  text-decoration: none;
  position: relative;
  z-index: 1;

  transition: all 500ms ease-in-out;
}
.tsl-community-search .tsl-card__level:not(:first-child) {
  margin-left: -14px;
}

.tsl-community-search .tsl-card__level:hover ~ .tsl-card__level,
.tsl-community-search .tsl-card__level:focus-visible ~ .tsl-card__level {
  transform: translateX(14px);
}

.tsl-community-search .tsl-card__level:hover { filter: brightness(1.08); text-decoration: none; color: #fff !important; }
.tsl-community-search .tsl-card__level:focus-visible { outline: 3px solid var(--badge); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .tsl-community-search .tsl-card__level { transition: none; }
  .tsl-community-search .tsl-card__level:hover ~ .tsl-card__level,
  .tsl-community-search .tsl-card__level:focus-visible ~ .tsl-card__level { transform: none; }
}

/* ---------- Badge colors per level ---------- */

.tsl-community-search .tsl-card__level--il  { --badge: #003C4D; }
.tsl-community-search .tsl-card__level--al  { --badge: #bf7041; }
.tsl-community-search .tsl-card__level--ltc { --badge: #A7AD37; }
.tsl-community-search .tsl-card__level--rc  { --badge: #76AE99; }
.tsl-community-search .tsl-card__level--mc  { --badge: #006D70; }
.tsl-community-search .tsl-card__level--stc { --badge: #757A4D; }
.tsl-community-search .tsl-card__level--sc  { --badge: #5299B2; }

/* ---------- Actions row: Details and Get directions ---------- */

.tsl-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}
.tsl-card__details-link {
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  background-color: #003C4D;
  color: #ffffff;
  border: 2px solid #003C4D;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: all 500ms ease-in-out;
}
.tsl-card__details-link:hover {
  background-color: transparent !important;
  color: #003C4D !important;
  text-decoration: none !important;
  border: 2px solid #003C4D !important;
}
.tsl-card__directions {
    color: var(--tsl-gray);
    display: inline-block;
    font-size: 20px;
    font-weight: 400;
    text-decoration: underline;
    text-transform: uppercase;
    white-space: nowrap;
}

.tsl-csa .tsl-card__directions:hover {color: var(--tsl-olive); text-decoration:underline;}

/* ---------- Hidden helpers ---------- */

.tsl-card__address[hidden],
.tsl-card__phone[hidden],
.tsl-card__directions[hidden],
.tsl-card__details-link[hidden],
.tsl-card__media[hidden] { display: none; }

/* ---------- No-match notice ---------- */

.tsl-cs__notice {
  margin: -24px 0 32px;
  padding: 0 0 0 16px;
  border-left: 3px solid var(--tsl-olive);
  font-size: 18px;
  line-height: 1.5;
  color: var(--tsl-gray);
}
.tsl-cs__notice[hidden] { display: none; }