/*
 * Phyzioline listing pieces (UI Standard §28): a doctor's photo or a clinic's logo, the
 * "New on Phyzioline" chip, the time-of-day slot chips, and the directory card.
 *
 * These pieces render on the public site and inside the patient dashboard (the same
 * directory opens at /patient/home-visits), so they live here instead of in
 * phyzioline-public.css: web.layouts.app loads this file before phyzioline-public.css,
 * and a directory page pushes it when it renders inside dashboard_master. Both layouts
 * include web.layouts.partials.phy-ui-tokens, so every value is a var(--pz-*) from
 * docs/design/tokens.json.
 */

/* ── Listing avatar (web.partials.listing-avatar): a doctor's photo / a clinic's logo,
      or the name's first letter on the brand tint. ── */
.phy-listing-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: var(--pz-radius-lg, 12px);
  background: var(--pz-color-brand-primary-soft, #E6F4F4);
  border: 1px solid var(--pz-color-border-default, #EAECF0);
  color: var(--pz-color-brand-primary, #07787C);
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  line-height: 1;
}
.phy-listing-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--pz-color-surface-card, #fff);
}
.phy-listing-avatar__initial { font-size: var(--pz-text-h2, 24px); }
.phy-listing-avatar[data-has-photo] .phy-listing-avatar__initial { visibility: hidden; }
.phy-listing-avatar--lg { width: 112px; height: 112px; }
.phy-listing-avatar--lg .phy-listing-avatar__initial { font-size: var(--pz-text-display, 32px); }
.phy-listing-avatar--md { width: 56px; height: 56px; }
.phy-listing-avatar--md .phy-listing-avatar__initial { font-size: var(--pz-text-h3, 20px); }
.phy-listing-avatar--sm { width: 24px; height: 24px; border-radius: 999px; }
.phy-listing-avatar--sm .phy-listing-avatar__initial { font-size: var(--pz-text-caption, 12px); }

/* "New" in place of an empty 0.0 rating: a listing with no reviews yet is new, not bad. */
.phy-listing-new {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-1, 4px);
  height: 24px;
  padding-inline: var(--pz-space-2, 8px);
  border-radius: 999px;
  background: var(--pz-color-brand-primary-soft, #E6F4F4);
  color: var(--pz-color-brand-primary, #07787C);
  font-size: var(--pz-text-caption, 12px);
  font-weight: 600;
}

/* ── Slot chips — the site's slot colours by time of day: morning orange, afternoon blue,
      evening purple. ── */
.phy-slot {
  --phy-slot-fg: var(--pz-color-brand-primary, #07787C);
  --phy-slot-bg: var(--pz-color-brand-primary-soft, #E6F4F4);
  min-height: 32px;
  padding-inline: var(--pz-space-3, 12px);
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--pz-radius-md, 8px);
  background: var(--phy-slot-bg);
  color: var(--phy-slot-fg);
  font-size: var(--pz-text-caption, 12px);
  font-weight: 800;
  text-decoration: none;
}
.phy-slot:hover { border-color: var(--phy-slot-fg); color: var(--phy-slot-fg); text-decoration: none; }
.phy-slot--morning { --phy-slot-fg: var(--pz-service-shop-fg, #C4320A); --phy-slot-bg: var(--pz-service-shop-bg, #FFF4ED); }
.phy-slot--afternoon { --phy-slot-fg: var(--pz-service-clinics-fg, #175CD3); --phy-slot-bg: var(--pz-service-clinics-bg, #EFF8FF); }
.phy-slot--evening { --phy-slot-fg: var(--pz-service-learning-fg, #5925DC); --phy-slot-bg: var(--pz-service-learning-bg, #F4F3FF); }
@media (pointer: coarse) {
  .phy-slot { min-height: 44px; }
}

/* ── Directory card (.phy-dir-card, home_visits/partials/_therapist_cards) — approved
      canvas "Doctors list", 2026-10-17. One markup for every width:
        phone (<600)      photo 80 beside the name and chips; the days, the hours and
                          "Book now · price" full width under them;
        600–1199          photo 112 beside the name, chips, days and hours; price,
                          "Book now" and "View profile" in a row under them;
        1200 and up       photo 184 | name, chips, days and hours | price, "Book now"
                          and "View profile" in a 200px column.
      The hour buttons are .phy-slot chips, so the colours by time of day stay the
      site's one set. ── */
.phy-dir-card {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  grid-template-areas:
    "photo head"
    "photo chips"
    "picker picker"
    "aside aside";
  align-items: start;
  column-gap: var(--pz-space-3, 12px);
  row-gap: var(--pz-space-1, 4px);
  margin-bottom: var(--pz-space-4, 16px);
  padding: var(--pz-space-4, 16px);
  background: var(--pz-color-surface-card, #FFFFFF);
  border: 1px solid var(--pz-color-border-default, #EAECF0);
  border-radius: var(--pz-radius-lg, 12px);
  color: var(--pz-color-text-primary, #101828);
  font-family: var(--pz-font, 'Cairo', sans-serif);
}
.phy-dir-card__photo { grid-area: photo; display: block; line-height: 0; text-decoration: none; }
.phy-dir-card .phy-dir-card__avatar { width: 80px; height: 80px; }
.phy-dir-card .phy-dir-card__avatar .phy-listing-avatar__initial { font-size: var(--pz-text-h2, 24px); }

.phy-dir-card__head {
  grid-area: head;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2, 8px);
  min-width: 0;
}
.phy-dir-card__name {
  margin: 0;
  font-family: inherit;
  font-size: var(--pz-text-title-card, 16px);
  line-height: var(--pz-lh-title-card, 24px);
  font-weight: 800;
}
.phy-dir-card__name a { color: var(--pz-color-brand-primary, #07787C); text-decoration: none; }
.phy-dir-card__name a:hover { color: var(--pz-color-brand-primary-hover, #065F63); text-decoration: none; }

.phy-dir-card__open,
.phy-dir-card__spec,
.phy-dir-card__title {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: var(--pz-space-2, 8px);
  border-radius: var(--pz-radius-pill, 999px);
  font-size: var(--pz-text-caption, 12px);
  font-weight: 700;
  white-space: nowrap;
}
.phy-dir-card__open { background: var(--pz-status-success-bg, #ECFDF3); color: var(--pz-status-success-fg, #067647); }
.phy-dir-card__spec { background: var(--pz-color-brand-primary-soft, #E6F4F4); color: var(--pz-color-brand-primary-hover, #065F63); }
.phy-dir-card__title { background: var(--pz-status-neutral-bg, #F2F4F7); color: var(--pz-status-neutral-fg, #344054); }

.phy-dir-card__chips {
  grid-area: chips;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-1, 4px) var(--pz-space-2, 8px);
  min-width: 0;
}
.phy-dir-card__rating,
.phy-dir-card__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-1, 4px);
  color: var(--pz-color-text-secondary, #475467);
  font-size: var(--pz-text-caption, 12px);
  line-height: var(--pz-lh-caption, 16px);
}
.phy-dir-card__rating strong { color: var(--pz-color-text-primary, #101828); font-weight: 700; }
.phy-dir-card__rating i { color: var(--pz-status-pending-dot, #F79009); }
.phy-dir-card__meta i { color: var(--pz-color-brand-primary, #07787C); }

.phy-dir-card__picker {
  grid-area: picker;
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2, 8px);
  min-width: 0;
  margin-top: var(--pz-space-2, 8px);
}
/* Phones: the buttons say what they are; the labels stay for screen readers. */
.phy-dir-card__label {
  color: var(--pz-color-text-secondary, #475467);
  font-size: var(--pz-text-body, 14px);
  line-height: var(--pz-lh-body, 20px);
  font-weight: 700;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.phy-dir-card__days {
  display: flex;
  gap: var(--pz-space-2, 8px);
  overflow-x: auto;
  scrollbar-width: none;
}
.phy-dir-card__days::-webkit-scrollbar { display: none; }
.phy-dir-card__day {
  flex-shrink: 0;
  min-height: var(--pz-control-height-sm, 32px);
  padding-inline: var(--pz-space-3, 12px);
  border: 1px solid var(--pz-color-border-strong, #D0D5DD);
  border-radius: var(--pz-radius-pill, 999px);
  background: var(--pz-color-surface-card, #FFFFFF);
  color: var(--pz-status-neutral-fg, #344054);
  font-family: inherit;
  font-size: var(--pz-text-body, 14px);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.phy-dir-card__day:hover { border-color: var(--pz-color-brand-primary, #07787C); color: var(--pz-color-brand-primary, #07787C); }
.phy-dir-card__day[aria-pressed="true"] {
  border-color: var(--pz-color-brand-primary, #07787C);
  background: var(--pz-color-brand-primary, #07787C);
  color: var(--pz-color-text-inverse, #FFFFFF);
}
.phy-dir-card__hours {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--pz-space-2, 8px);
}
.phy-dir-card .phy-dir-card__hour {
  min-height: 56px;
  padding: 0 var(--pz-space-1, 4px);
  flex-direction: column;
  justify-content: center;
  border-color: var(--phy-slot-fg);
  font-family: inherit;
  line-height: var(--pz-lh-caption, 16px);
  cursor: pointer;
}
.phy-dir-card__hour strong {
  color: var(--pz-color-text-primary, #101828);
  font-size: var(--pz-text-title-card, 16px);
  line-height: var(--pz-lh-title-card, 24px);
  font-weight: 800;
}
.phy-dir-card .phy-dir-card__hour[aria-pressed="true"] {
  background: var(--phy-slot-fg);
  color: var(--pz-color-text-inverse, #FFFFFF);
}
.phy-dir-card__hour[aria-pressed="true"] strong { color: var(--pz-color-text-inverse, #FFFFFF); }
.phy-dir-card__empty {
  margin: 0;
  padding: var(--pz-space-2, 8px) var(--pz-space-3, 12px);
  border: 1px dashed var(--pz-color-border-strong, #D0D5DD);
  border-radius: var(--pz-radius-md, 8px);
  background: var(--pz-color-surface-muted, #F9FAFB);
  color: var(--pz-color-text-secondary, #475467);
  font-size: var(--pz-text-body, 14px);
  line-height: var(--pz-lh-body, 20px);
}

.phy-dir-card__aside {
  grid-area: aside;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2, 8px);
  margin-top: var(--pz-space-3, 12px);
}
.phy-dir-card__price {
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: var(--pz-space-2, 8px) var(--pz-space-4, 16px);
  border-radius: var(--pz-radius-lg, 12px);
  background: var(--pz-color-brand-primary-soft, #E6F4F4);
  color: var(--pz-color-text-secondary, #475467);
  font-size: var(--pz-text-caption, 12px);
  line-height: var(--pz-lh-caption, 16px);
}
.phy-dir-card__price strong {
  color: var(--pz-color-brand-primary-hover, #065F63);
  font-size: var(--pz-text-h3, 20px);
  line-height: var(--pz-lh-h3, 28px);
  font-weight: 800;
}
.phy-dir-card__price small { font-size: var(--pz-text-body, 14px); font-weight: 700; }
.phy-dir-card__book,
.phy-dir-card__profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pz-space-2, 8px);
  min-height: var(--pz-touch-target-min, 44px);
  padding-inline: var(--pz-space-4, 16px);
  border-radius: var(--pz-radius-md, 8px);
  font-family: inherit;
  text-decoration: none;
}
.phy-dir-card__book {
  flex: 1 1 auto;
  background: var(--pz-color-brand-primary, #07787C);
  color: var(--pz-color-text-inverse, #FFFFFF);
  font-size: var(--pz-text-title-card, 16px);
  font-weight: 800;
}
.phy-dir-card__book:hover { background: var(--pz-color-brand-primary-hover, #065F63); color: var(--pz-color-text-inverse, #FFFFFF); text-decoration: none; }
.phy-dir-card__profile {
  display: none;
  border: 1px solid var(--pz-color-border-strong, #D0D5DD);
  background: var(--pz-color-surface-card, #FFFFFF);
  color: var(--pz-color-text-primary, #101828);
  font-size: var(--pz-text-body, 14px);
  font-weight: 700;
}
.phy-dir-card__profile:hover { border-color: var(--pz-color-brand-primary, #07787C); color: var(--pz-color-brand-primary, #07787C); text-decoration: none; }
.phy-dir-card a:focus-visible,
.phy-dir-card button:focus-visible {
  outline: 2px solid var(--pz-color-border-focus, #07787C);
  outline-offset: 2px;
}
@media (pointer: coarse) {
  .phy-dir-card__day { min-height: var(--pz-touch-target-min, 44px); padding-inline: var(--pz-space-4, 16px); }
}

@media (min-width: 600px) {
  .phy-dir-card {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas:
      "photo head"
      "photo chips"
      "photo picker"
      "aside aside";
    column-gap: var(--pz-space-4, 16px);
    padding: var(--pz-card-padding, 20px);
  }
  .phy-dir-card .phy-dir-card__avatar { width: 112px; height: 112px; }
  .phy-dir-card .phy-dir-card__avatar .phy-listing-avatar__initial { font-size: var(--pz-text-display, 32px); }
  .phy-dir-card__name { font-size: var(--pz-text-h4, 18px); line-height: var(--pz-lh-h4, 24px); }
  .phy-dir-card__rating,
  .phy-dir-card__meta { font-size: var(--pz-text-body, 14px); line-height: var(--pz-lh-body, 20px); }
  .phy-dir-card__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .phy-dir-card__days { flex-wrap: wrap; overflow: visible; }
  .phy-dir-card__hours { display: flex; flex-wrap: wrap; }
  .phy-dir-card .phy-dir-card__hour { width: 88px; }
  .phy-dir-card__price { display: flex; }
  .phy-dir-card__profile { display: inline-flex; }
  .phy-dir-card__book-price { display: none; }
}

@media (min-width: 1200px) {
  .phy-dir-card {
    grid-template-columns: 184px minmax(0, 1fr) 200px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "photo head aside"
      "photo chips aside"
      "photo picker aside";
    column-gap: var(--pz-space-5, 20px);
  }
  .phy-dir-card .phy-dir-card__avatar { width: 184px; height: 184px; }
  .phy-dir-card__aside {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    margin-top: 0;
  }
  .phy-dir-card__book { flex: none; }
  .phy-dir-card__price { padding: var(--pz-space-3, 12px); text-align: center; }
  .phy-dir-card__price strong { font-size: var(--pz-text-metric, 28px); line-height: var(--pz-lh-metric, 36px); }
}