/* =========================================================
   FIND A TUTOR (findtutor) - the Available Tuitions page's hero and filter bar (css/pages/advertisement.css),
   each tutor the home page's "Tutors worth meeting" card (homepage/landing/landing.css .ld-tt) with Apply under it
   ========================================================= */
body[data-page="findtutor"] { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body[data-page="findtutor"] > main.page:not(.hidden) { flex: 1 0 auto; }
body[data-page="findtutor"] #loadingPage { min-height: 100vh; }

/* the landing's colours and card, without its page frame */
.landing.ft-landing { min-width: 0; padding: 0; background: transparent; overflow: visible; }
.ft-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ft-card { display: flex; flex-direction: column; }
.ft-card .ld-loc { margin-bottom: 16px; }
/* a computer: the home page's card as it is - the parts only a phone shows are hidden */
.ft-top, .ft-who { display: contents; }
.ft-place, .ft-details { display: none; }
.ft-card:not(:has(.ld-loc)) .ld-exp { margin-bottom: 16px; }

/* Apply: the site's green button, the card's full width, at its foot */
.ft-apply { margin-top: auto; width: 100%; min-height: 40px; border: 0; border-radius: 999px; background: #16a34a; color: #ffffff;
  font: 700 14px/1 Inter, -apple-system, "Segoe UI", sans-serif; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.ft-card .ft-details:empty + .ft-apply { margin-top: auto; }
.ft-apply:hover { background: #15803d; }
.ft-apply:active { transform: scale(.98); }
.ft-apply:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }

/* Previous / Page n of N / Next */
.ft-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.ft-pager.hidden { display: none; }
.ft-page-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--ld-line); background: var(--ld-surface); color: var(--ld-text);
  font: 600 14px/1 Inter, -apple-system, "Segoe UI", sans-serif; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.ft-page-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ft-page-btn:hover:not(:disabled) { border-color: #16a34a; color: #16a34a; }
.ft-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.ft-page-info { min-width: 110px; text-align: center; font-size: 14px; font-weight: 600; color: var(--ld-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) { .ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  /* the filters: all six in view (three a row), Clear under them - no sideways scrolling */
  body[data-page="findtutor"] .tuitions-filterbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    margin: 0 0 14px; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  body[data-page="findtutor"] .tuitions-filterbar .filter-field { min-width: 0; }
  body[data-page="findtutor"] .tuitions-filterbar .filter-field select { width: 100%; field-sizing: fixed; min-width: 0; max-width: none;
    padding: 10px 26px 10px 12px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-position: right 9px center; background-size: 12px; }
  body[data-page="findtutor"] .tuitions-filterbar .clear-filters-button { grid-column: 1 / -1; justify-self: stretch; width: 100%; margin: 2px 0 0; padding: 11px 22px; font-size: 14px; }
  .ft-pager { gap: 8px; margin-top: 20px; }
  .ft-page-btn { min-height: 40px; padding: 0 14px; font-size: 13.5px; }
  .ft-page-info { min-width: 0; font-size: 13px; }
  /* one tutor a line: the photo beside the name, experience, city / PIN; what they teach under it; Apply */
  .ft-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ft-card { padding: 16px; text-align: left; border-radius: 22px; }
  .ft-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
  .ft-top .ld-avw { width: 62px; margin: 0; }
  .ft-top .ld-av { width: 62px; height: 62px; font-size: 19px; }
  .ft-top .ld-badge-av { width: 22px; height: 22px; right: -4px; bottom: -3px; }
  .ft-who { display: grid; gap: 3px; min-width: 0; }
  .ft-card .ft-who .ld-name { margin: 0; text-align: left; }
  .ft-card .ft-who .ld-name b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ft-card .ft-who .ld-exp { margin: 0; font-size: 13px; }
  .ft-place { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12.5px; color: var(--ld-muted); white-space: nowrap; overflow: hidden; }
  .ft-place svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ft-pl-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ft-place em { flex: none; font-style: normal; margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    background: color-mix(in srgb, var(--ld-text) 7%, transparent); color: var(--ld-text); }
  .ft-card > .ld-loc { display: none; }
  .ft-details { display: grid; gap: 8px; margin: 14px 0 14px; padding-top: 12px; border-top: 1px solid var(--ld-line); }
  .ft-details:empty { display: none; }
  .ft-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 10px; }
  .ft-row svg { width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border-radius: 10px; fill: none; stroke: #16a34a; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round; background: rgba(22, 163, 74, 0.12); }
  .ft-row span { min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ld-text);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ft-row small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ld-muted); }
  .ft-card .ft-details:empty + .ft-apply { margin-top: 14px; }
  .ft-apply { min-height: 36px; font-size: 13px; }
}

/* the PIN box: typed (the other filters' look), its suggestions under it */
.filter-field.ft-pin { cursor: text; }
.ft-pin input { width: 100%; min-width: 0; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 14px; outline: none; font-variant-numeric: tabular-nums; }
.ft-pin input::placeholder { color: var(--text); opacity: 1; }
.ft-pin input:focus { border-color: var(--lime-line); }
.ft-pin input:focus::placeholder { color: var(--muted); }
/* the suggestions wrapped round the box (the box itself stays above them, being typed in) */
.filter-field.ft-pin.is-open { position: relative; z-index: 10001; }
.ft-pin.is-open input { border-color: var(--lime-line); }
.ft-pin-pick { min-width: 0; padding: 7px 0 6px; }
.ft-pin-gap { margin: 0 0 7px; }
.ft-pin-pick .flt-pick-item { gap: 12px; padding: 12px 20px; font-variant-numeric: tabular-nums; }
.ft-pin-pick .flt-pick-item.is-active { background: rgba(255, 255, 255, 0.06); }
html[data-theme="light"] .ft-pin-pick .flt-pick-item.is-active { background: rgba(0, 0, 0, 0.05); }
@media (max-width: 760px) {
  /* as the other boxes (13px); the page's viewport keeps an iPhone from zooming in on it (findtutor.html) */
  body[data-page="findtutor"] .ft-pin input { height: 100%; padding: 10px 12px; font-size: 13px; line-height: 1.2; }
}

/* the number of tutors is not shown */
.ft-count { height: 0; margin: 0 0 14px; overflow: hidden; }