/* css/listing.css - the public listings /tutors and /students (Part 9).
   Loads without bootstrap / main.css, so it carries the base the shared header
   and footer need, like css/tutor-profile.css. Values come from tokens.css. */

/* ---------------------------------------------------------------- base */
html{ -webkit-text-size-adjust:100%; }
.tt-ls-page{ margin:0; background:var(--surface); color:var(--ink-900);
  font:400 16px/1.65 var(--font-body); -webkit-font-smoothing:antialiased; }
.tt-ls-page *,.tt-ls-page *::before,.tt-ls-page *::after{ box-sizing:border-box; }
.tt-ls-page img{ max-width:100%; }
.tt-ls-page .tt-icon{ flex:none; }
.tt-ls-skip{ position:absolute; left:-9999px; top:var(--sp-2); z-index:100; padding:var(--sp-2) var(--sp-4);
  background:var(--white); color:var(--blue-700); border-radius:var(--r-sm); font-weight:600; }
.tt-ls-skip:focus{ left:var(--sp-4); }
.tt-ls-page a:focus-visible,.tt-ls-page button:focus-visible,.tt-ls-page summary:focus-visible,
.tt-ls-pill input:focus-visible + span,.tt-ls-check input:focus-visible + span{
  outline:2px solid var(--blue-600) !important; outline-offset:2px !important; }

/* ---------------------------------------------------------------- hero */
.tt-ls-hero{ background:linear-gradient(180deg, var(--blue-50) 0%, var(--surface) 100%); }
.tt-ls-hero__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-5); padding-top:var(--sp-6); padding-bottom:var(--sp-6); }
.tt-ls-hero__copy{ flex:1 1 520px; min-width:0; }
.tt-ls-hero__title{ margin:var(--sp-3) 0; font:800 36px/1.2 var(--font-display); letter-spacing:-.02em;
  color:var(--navy-900); }
.tt-ls-hero__lede{ margin:0; max-width:60ch; color:var(--ink-700); }
.tt-ls-trust{ display:flex; flex:0 1 auto; margin:0; padding:var(--sp-4) var(--sp-5); list-style:none;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card); }
.tt-ls-trust__item{ display:flex; align-items:center; gap:var(--sp-3); max-width:190px; padding:0 var(--sp-4);
  font-size:14px; font-weight:600; line-height:1.4; color:var(--navy-900); }
.tt-ls-trust__item + .tt-ls-trust__item{ border-left:1px solid var(--line); }
.tt-ls-trust__icon{ display:flex; color:var(--blue-600); }
.tt-ls-trust__item:first-child .tt-ls-trust__icon{ color:var(--green-700); }
@media (max-width:767px){
  .tt-ls-hero__in{ padding-top:var(--sp-5); padding-bottom:var(--sp-5); gap:var(--sp-4); }
  .tt-ls-hero__title{ font-size:26px; }
  .tt-ls-trust{ width:100%; padding:var(--sp-3); }
  .tt-ls-trust__item{ flex:1 1 0; flex-direction:column; text-align:center; gap:var(--sp-2); padding:0 var(--sp-2); }
}

/* ---------------------------------------------------------------- layout */
.tt-ls{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-5);
  padding-top:var(--sp-5); padding-bottom:var(--sp-8); }
@media (min-width:992px){
  .tt-ls{ grid-template-columns:320px minmax(0,1fr); align-items:start; }
  .tt-ls-filter{ position:sticky; top:96px; }   /* 76px nav + 20 */
}
.tt-ls-main{ min-width:0; }

/* ---------------------------------------------------------------- filter card */
.tt-ls-filter{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); overflow:visible; }
.tt-ls-filter__form{ display:flex; flex-direction:column; gap:var(--sp-4); padding:0 var(--sp-5) var(--sp-5); }
.tt-ls-filter__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  margin:0 calc(-1 * var(--sp-5)); padding:var(--sp-4) var(--sp-5);
  background:var(--blue-50); border-radius:var(--r-lg) var(--r-lg) 0 0; }
.tt-ls-filter__title{ display:flex; align-items:center; gap:var(--sp-2); margin:0;
  font:700 18px/1.35 var(--font-display); color:var(--navy-900); }
.tt-ls-filter__title .tt-icon{ color:var(--blue-600); }
.tt-ls-filter__reset{ font-size:14px; font-weight:600; color:var(--blue-700); text-decoration:none; }
.tt-ls-filter__reset:hover{ text-decoration:underline; }
.tt-ls-label{ display:block; margin:0 0 var(--sp-2); padding:0; font-size:14px; font-weight:700;
  line-height:1.4; color:var(--navy-900); }
.tt-ls-group{ margin:0; padding:0; border:0; min-width:0; }
.tt-ls-field{ min-width:0; }
.tt-ls-filter .tt-input{ padding-right:var(--sp-3); }

/* pills: the native radio stays focusable; the span is what shows */
.tt-ls-pills{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.tt-ls-pill{ position:relative; display:inline-flex; cursor:pointer; }
.tt-ls-pill input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.tt-ls-pill span{ display:inline-flex; align-items:center; min-height:40px; padding:0 var(--sp-4);
  border:1.5px solid transparent; border-radius:var(--r-pill); background:#EEF2F7;
  font-size:14px; font-weight:600; line-height:1.2; color:var(--ink-700); white-space:nowrap;
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.tt-ls-pill:hover span{ background:var(--blue-50); color:var(--blue-700); }
.tt-ls-pill input:checked + span{ background:var(--blue-600); border-color:var(--blue-600); color:var(--white); }
/* mode pills carry their colour at rest, as in the design; chosen = a ring in that colour */
.tt-ls-pill--online span{ background:var(--green-50); color:var(--green-700); }
.tt-ls-pill--offline span,.tt-ls-pill--home span{ background:var(--blue-50); color:var(--blue-700); }
.tt-ls-pill--both span{ background:#F4EFFD; color:#6B3FA0; }                     /* 6.54:1 */
.tt-ls-pill--online input:checked + span{ background:var(--green-50); border-color:var(--green-700); color:var(--green-700); }
.tt-ls-pill--offline input:checked + span,
.tt-ls-pill--home input:checked + span{ background:var(--blue-50); border-color:var(--blue-600); color:var(--blue-700); }
.tt-ls-pill--both input:checked + span{ background:#F4EFFD; border-color:#6B3FA0; color:#6B3FA0; }
@media (max-width:991px){
  .tt-ls-pills--scroll{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:var(--sp-1); scrollbar-width:thin; }
}

.tt-ls-check{ display:flex; align-items:center; gap:var(--sp-3); cursor:pointer; font-size:16px; color:var(--ink-900); }
.tt-ls-check input{ width:20px; height:20px; margin:0; accent-color:var(--blue-600); cursor:pointer; }
.tt-ls-check span{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.tt-ls-check .tt-icon{ color:var(--green-700); }

.tt-ls-more > * + *{ margin-top:var(--sp-4); }
.tt-ls-more__toggle{ display:flex; align-items:center; justify-content:space-between; min-height:44px;
  padding:0 var(--sp-4); border:1px solid var(--line-control); border-radius:var(--r); cursor:pointer;
  font-size:16px; font-weight:600; color:var(--blue-700); list-style:none; }
.tt-ls-more__toggle::-webkit-details-marker{ display:none; }
.tt-ls-more__toggle::after{ content:"+"; font-size:20px; line-height:1; }
.tt-ls-more[open] .tt-ls-more__toggle::after{ content:"\2212"; }
@media (min-width:992px){
  .tt-ls-more__toggle{ display:none; }
  .tt-ls-more > summary + *{ margin-top:0; }
}
@media (min-width:600px) and (max-width:991px){
  .tt-ls-filter__form{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--sp-4); }
  .tt-ls-filter__head,.tt-ls-field--full,.tt-ls-group,.tt-ls-more,.tt-ls-filter__form > .tt-btn{ grid-column:1 / -1; }
}

/* ---------------------------------------------------------------- results bar, alerts */
.tt-ls-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin:0 0 var(--sp-4); }
.tt-ls-bar__count{ margin:0; }
.tt-ls-sort{ display:flex; gap:var(--sp-2); width:240px; max-width:100%; }
.tt-ls-sort .tt-sel,.tt-ls-sort__select{ flex:1 1 auto; }
.tt-ls-sort__select{ -webkit-appearance:none; appearance:none; padding:0 34px 0 var(--sp-3);
  background:var(--white) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%235B6B84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center/18px 18px; }
.tt-ls-sort .tt-sel__btn{ padding-left:var(--sp-3); }
@media (max-width:599px){ .tt-ls-sort{ width:100%; } }

.tt-ls-alert{ display:flex; gap:var(--sp-3); align-items:flex-start; margin:0 0 var(--sp-4);
  padding:var(--sp-3) var(--sp-4); border:1px solid #F2B8B5; border-radius:var(--r);
  background:#FDF0F0; color:#9B1C1C; font-weight:600; }                          /* 7.33:1 */
.tt-ls-flash:empty{ display:none; }
.tt-ls-flash .tt-sa-flash{ margin:0 0 var(--sp-4); padding:var(--sp-3) var(--sp-4);
  background:var(--green-50); border:1px solid #A7DDBF; border-radius:var(--r);
  color:var(--green-700); font-weight:600; }                                     /* 4.83:1 */

/* ---------------------------------------------------------------- card */
.tt-ls-list{ display:grid; gap:var(--sp-4); }
.tt-ls-card{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--sp-4);
  padding:20px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); }
.tt-ls-card:hover{ box-shadow:var(--shadow-lift); border-color:var(--blue-100); }
.tt-ls-card__meta,.tt-ls-card__aside{ grid-column:1 / -1; }
@media (min-width:768px){
  .tt-ls-card{ grid-template-columns:132px minmax(0,1fr) minmax(0,1fr); gap:var(--sp-5); padding:var(--sp-5); }
  .tt-ls-card__meta{ grid-column:auto; padding-left:var(--sp-5); border-left:1px solid var(--line); }
  .tt-ls-card__aside{ grid-column:2 / -1; }
}
@media (min-width:1200px){
  .tt-ls-card{ grid-template-columns:132px minmax(0,1fr) minmax(0,.9fr) minmax(0,1.15fr); }
  .tt-ls-card__aside{ grid-column:auto; padding-left:var(--sp-5); border-left:1px solid var(--line); }
  .tt-ls-card__acts{ margin-top:auto; }
}

.tt-ls-card__media{ position:relative; align-self:start; }
.tt-ls-card__media > a:not(.tt-ls-heart){ display:block; }   /* the photo link; the signed-out heart is an <a> too and must stay flex (centred) */
.tt-ls-card__photo{ display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r);
  background:var(--blue-50); border:1px solid var(--line); }
.tt-ls-card__badge{ position:absolute; left:6px; top:6px; display:inline-flex; align-items:center; gap:4px;
  padding:2px var(--sp-2); border:1px solid #A7DDBF; border-radius:var(--r-pill); background:var(--green-50);
  font-size:12px; font-weight:700; line-height:1.5; color:var(--green-700); }
.tt-ls-card__save{ margin:0; }
.tt-ls-heart{ position:absolute; right:6px; bottom:6px; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border:0; border-radius:50%; background:var(--white);
  box-shadow:var(--shadow-sm); color:var(--blue-600); cursor:pointer; }
.tt-ls-heart:hover{ color:var(--blue-700); background:var(--blue-50); }
.tt-ls-heart.is-on{ color:#C0284A; }                                             /* 5.76:1 on white */
.tt-ls-heart.is-on svg{ fill:currentColor; }
@media (max-width:767px){ .tt-ls-card__badge{ left:4px; top:4px; font-size:12px; } .tt-ls-heart{ right:4px; bottom:4px; width:32px; height:32px; } }

.tt-ls-card__name{ margin:0; font:700 18px/1.35 var(--font-display); letter-spacing:-.01em; }
.tt-ls-card__name a{ color:var(--blue-700); text-decoration:none; overflow-wrap:anywhere; }
.tt-ls-card__name a:hover{ text-decoration:underline; }
.tt-ls-rating{ display:flex; align-items:center; gap:var(--sp-1); margin:var(--sp-1) 0 0; font-size:14px; color:var(--ink-700); }
.tt-ls-rating .tt-icon{ color:var(--amber-600); fill:currentColor; }
.tt-ls-rating strong{ color:var(--ink-900); }

.tt-ls-facts{ margin:var(--sp-3) 0 0; }
.tt-ls-card__meta{ margin:0; }
.tt-ls-fact{ position:relative; padding-left:28px; }
.tt-ls-fact + .tt-ls-fact{ margin-top:var(--sp-3); }
.tt-ls-fact dt{ font-size:14px; font-weight:500; line-height:1.4; color:var(--ink-500); }
.tt-ls-fact dd{ margin:2px 0 0; font-size:14px; font-weight:600; line-height:1.45; color:var(--ink-900); overflow-wrap:anywhere; }
.tt-ls-fact__icon{ position:absolute; left:0; top:1px; display:flex; color:var(--blue-600); }

.tt-ls-modes{ display:flex; flex-wrap:wrap; gap:6px; margin:var(--sp-1) 0 0; padding:0; list-style:none; }
.tt-ls-mode{ display:inline-flex; align-items:center; gap:4px; min-height:28px; padding:0 10px;
  border-radius:var(--r-pill); font-size:14px; font-weight:600; line-height:1; }
.tt-ls-mode--online{ background:var(--green-50); color:var(--green-700); }
.tt-ls-mode--offline{ background:var(--blue-50); color:var(--blue-700); }
.tt-ls-mode--home{ background:#F4EFFD; color:#6B3FA0; }

.tt-ls-card__about{ margin:0; font-size:16px; line-height:1.6; color:var(--ink-700);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.tt-ls-card__acts{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.tt-ls-card__acts > *{ flex:1 1 140px; }
.tt-ls-card__acts form{ display:flex; margin:0; }
.tt-ls-card__acts .tt-btn{ width:100%; padding:0 var(--sp-3); white-space:nowrap; }
/* about, phone line, then the buttons, which sit at the foot of the card on wide screens */
.tt-ls-card__aside{ display:flex; flex-direction:column; gap:var(--sp-3); }
.tt-ls-card__aside > .tt-ls-card__acts{ padding-top:var(--sp-1); }

/* ---------------------------------------------------------------- empty state (the pager is .tt-pager, tt-ui.css) */
.tt-ls-empty{ padding:var(--sp-7) var(--sp-5); text-align:center; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card); }
.tt-ls-empty__icon{ display:inline-flex; padding:var(--sp-4); border-radius:50%; background:var(--blue-50); color:var(--blue-600); }
.tt-ls-empty__title{ margin:var(--sp-4) 0 var(--sp-2); font:700 22px/1.3 var(--font-display); color:var(--navy-900); }
.tt-ls-empty p{ margin:0 auto; max-width:52ch; color:var(--ink-700); }
.tt-ls-empty__acts{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-3); margin-top:var(--sp-5); }


/* ---------------------------------------------------------------- /students extras */
.tt-ls-avatar{ display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1;
  border-radius:var(--r); background:var(--blue-50); border:1px solid var(--blue-100);
  font:800 32px/1 var(--font-display); color:var(--blue-700); }
@media (min-width:768px){ .tt-ls-avatar{ font-size:40px; } }
.tt-ls-card__posted,.tt-ls-card__phone{ display:flex; align-items:center; gap:var(--sp-2); margin:var(--sp-1) 0 0;
  font-size:14px; color:var(--ink-700); }
.tt-ls-card__posted .tt-icon,.tt-ls-card__phone .tt-icon{ color:var(--ink-500); }
.tt-ls-card__phone{ margin:0; }
.tt-ls-note{ display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-4); padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--blue-100); border-radius:var(--r); background:var(--blue-50); color:var(--navy-900); font-size:16px; }
.tt-ls-note .tt-icon{ color:var(--blue-600); }
.tt-ls-note a{ color:var(--blue-700); font-weight:600; }