/* =========================================================
   URBANTUTORSITE
   TUITIONS AVAILABLE
   Reuses the design tokens, .page/.container, .spinner and
   the exact card component from tutor-profile.css (.class-card,
   .class-spine, .class-body, .class-row-top, .status-badge,
   .class-detail-grid, .class-row-bottom, .filter-empty) so a
   tuition card looks identical to a "My Classes" card on the
   Tutor Profile page. Only what's new to this page (hero copy,
   horizontal filter bar, grid, small content tweaks, apply
   toast) lives here.
========================================================= */

/* Page heading - same two-colour treatment as the homepage
   "Meet our tutors." / "Meet our students." headings. */
.tuitions-hero {
  text-align: center;
  padding: 24px 0 32px;
}

.tuitions-hero h1 {
  margin: 0;
  color: #f5f5f5;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -2px;
}

.tuitions-hero h1 span {
  color: #16a34a;
}

/* ================= WIDER PAGE CONTAINER ================= */
/* tutor-profile.css caps .container at 960px, which squeezed
   three cards per row. This page alone gets a wider container
   so three cards sit comfortably side by side. */

.tuitions-page .container {
  max-width: 1240px;
}

/* ================= HORIZONTAL FILTER BAR ================= */
/* No labels above the selects (each select carries an
   aria-label instead). All filters + "Clear all" always stay
   on ONE line - on narrow screens the bar scrolls sideways
   rather than wrapping. */

.tuitions-filterbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  /* rounded right round, like every other bar and box on the site */
  border-radius: 999px;
  padding: 8px;
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tuitions-filterbar::-webkit-scrollbar { display: none; }

.filter-field {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 120px;
  cursor: pointer;
}

.filter-field select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 14px center / 14px;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 11px 34px 11px 16px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  text-overflow: ellipsis;
  /* the list is ours (js/pages/advertisement.js), never the browser's */
  pointer-events: none;
}

.filter-field.is-open select,
.filter-field select:focus {
  outline: none;
  border-color: var(--lime-line);
}

.filter-field select:disabled {
  opacity: 0.4;
}
.filter-field:has(select:disabled) { cursor: not-allowed; }

.clear-filters-button {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--muted);
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.clear-filters-button:hover {
  border-color: var(--lime-line);
  color: var(--text);
}

/* ---- a filter's list: the same look as the search suggestions everywhere - one rounded panel wrapped round
   its box (the box repeated on top), the choices underneath, the chosen one ticked in green ---- */
.flt-pick {
  position: fixed;
  z-index: 10000;   /* above the floating WhatsApp / call buttons (9999) */
  min-width: 220px;
  max-height: min(420px, 70vh);
  overflow-y: auto;
  padding: 7px 0 6px;
  border-radius: 28px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
  animation: fltIn 0.14s ease-out;
  scrollbar-width: thin;
}
@keyframes fltIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.flt-pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 7px 7px;
  padding: 11px 14px 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--lime-line);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.flt-pick-head svg { flex: 0 0 14px; width: 14px; height: 14px; transform: rotate(180deg); fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.flt-pick-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 22px;
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.flt-pick-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flt-pick-item:hover, .flt-pick-item:focus-visible { outline: none; background: rgba(255, 255, 255, 0.05); }
.flt-pick-item svg { width: 17px; height: 17px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flt-pick-item[data-on] { color: var(--lime-hover); }
.flt-pick-item[data-on] svg { stroke: var(--lime-hover); stroke-width: 2.6; }

.tuitions-count {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 16px;
}

/* ================= TUITIONS GRID ================= */
/* 1 column on phones, 2 on tablets, 3 on desktop (max). */

.tuitions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}

.tuitions-grid .class-card {
  height: 100%;
}

/* Body has NO outer padding here so the Subject bar (top) and
   the Apply bar (bottom) can sit flush against the card's
   edges and the Tuition ID spine. Only the middle layer is padded. */
.tuitions-grid .class-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
}

@media (min-width: 700px) {
  .tuitions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .tuitions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   CARD CONTENT TWEAKS (still the same .class-card component
   tutor-profile.css defines - only small overrides scoped to
   this page's grid)
========================================================= */

/* Open tuitions have no running/completed/etc. status, so the
   spine gets one consistent "open" accent instead of a status
   colour. */
.tuitions-grid .class-spine {
  background: var(--lime-dim);
  color: var(--lime);
}

/* ================= TOP LAYER: SUBJECT BAR =================
   Full-width bar, flush with:
     left   -> right after the Tuition ID spine
     top    -> the card's top edge
     right  -> the card's right edge
     bottom -> the divider line of the middle layer
   Only the top-right corner is curved (matches the card's own
   corner); the other three are square. */

.tuitions-grid .class-row-top {
  display: flex;
  padding: 0;
  margin: 0;
}

.tuitions-grid .class-row-top .subject-badge {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: #000;
  color: var(--text);
  border: none;
  border-radius: 0 15px 0 0;
  padding: 11px 16px 11px 14px;
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* No dot before the subject name. */
.tuitions-grid .class-row-top .subject-badge::before {
  display: none;
}

/* ================= MIDDLE LAYER ================= */
/* Divider line on top (touching the subject bar) - the line is
   the grid's own border-top from tutor-profile.css. */

.tuitions-grid .class-detail-grid {
  margin: 0;
  padding: 14px 18px 16px 14px;
}

/* Third row: Location icon + address (small, regular) followed
   by the PIN Code (bold), across the full width of the card. */
.tuitions-grid .class-detail-location {
  grid-column: 1 / -1;
}

.tuitions-grid .class-detail-location .class-detail-value {
  font-weight: 400;
  line-height: 1.45;
}

.tuitions-grid .location-address,
.tuitions-grid .location-sep {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
}

.tuitions-grid .location-pin {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

/* "Near you" right after the PIN Code: a small green pill */
.tuitions-grid .near-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: 1px;
  color: #22c55e;
  background: rgba(22, 163, 74, 0.16);
}

/* ================= BOTTOM LAYER: APPLY BAR =================
   Pushed to the bottom of the card so the buttons line up
   across a row. Its border-top is the divider line; the button
   touches that line, the card's bottom edge, the card's right
   edge and the Tuition ID spine on the left. */

.tuitions-grid .class-row-bottom {
  display: flex;
  margin-top: auto;
  padding: 0;
  gap: 0;
  border-top: 1px solid var(--border);
}

/* ================= APPLY BUTTON ================= */
/* Mirror of the subject bar: only the bottom-right corner is
   curved (matches the card's own corner); the other three are
   square. */

.apply-button {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--lime);
  color: #0a0a0a;
  border: none;
  border-radius: 0 0 15px 0;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}

.apply-button:hover {
  background: var(--lime-hover);
}

.apply-button:disabled {
  cursor: not-allowed;
}

/* Already applied by THIS tutor: greyed-out, disabled. */
/* Already applied by THIS tutor: same lime colour as Apply,
   just muted/darker, so it clearly reads as "done". */
.apply-button.applied,
.apply-button.applied:hover {
  background: rgba(22, 163, 74, 0.45);
  color: rgba(10, 10, 10, 0.75);
}

/* Not for this tutor (the tuition asks for the other gender): a pale,
   flat button so it reads as "you cannot apply" and not as a call to act. */
.apply-button.not-applicable,
.apply-button.not-applicable:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}

/* Not for this viewer (not a logged-in tutor, or the tuition asks for the
   other gender): the whole card is shown greyed out. */
.class-card.is-disabled {
  opacity: 0.5;
  filter: grayscale(1);
}

/* ================= TOAST ================= */

.apply-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-3);
  border: 1px solid var(--border-light);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
  max-width: min(90vw, 380px);
  text-align: center;
}

.apply-toast.error {
  border-color: var(--danger);
  color: var(--danger);
}

.apply-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ================= MOBILE ================= */
/* tutor-profile.css re-pads .class-body and shrinks the status
   badge under 560px - undo that here so the Subject and Apply
   bars stay flush with the card edges on phones too. Filters
   stay on one line (the bar scrolls sideways). */

@media (max-width: 560px) {

  .tuitions-grid .class-body {
    padding: 0;
    gap: 0;
  }

  .tuitions-grid .class-row-top .subject-badge {
    font-size: 14px;
    padding: 10px 14px 10px 12px;
  }

  .tuitions-grid .class-detail-grid {
    padding: 12px 14px 14px 12px;
  }

  .tuitions-grid .class-row-bottom {
    gap: 0;
  }

}



/* =========================================================
   VERIFICATION NOTICE
========================================================= */

.verify-notice {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 209, 102, 0.35);
  background: rgba(255, 209, 102, 0.12);
  color: #ffd166;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}

.verify-notice.hidden {
  display: none;
}


/* =========================================================
   EMBEDDED ON THE HOMEPAGE  (html.embed)
   No header / footer / floating buttons, no full-screen
   heights (the frame grows to fit the content instead).
========================================================= */

html.embed,
html.embed body {
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}

html.embed #site-header,
html.embed #site-footer,
html.embed .site-header,
html.embed .site-footer,
html.embed .floating-contact,
html.embed .floating-whatsapp,
html.embed .floating-call {
  display: none !important;
}

html.embed .page,
html.embed .loading-page .container,
html.embed .error-page .container {
  min-height: 0 !important;
}

html.embed .loading-page .container,
html.embed .error-page .container {
  padding-top: 40px;
  padding-bottom: 40px;
}


/* card opened from the tutor homepage ("Apply" in Matching you) */
.class-card.is-linked {
  outline: 2px solid #16a34a;
  outline-offset: 3px;
  box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.12);
  transition: outline-color 0.4s ease, box-shadow 0.4s ease;
}


/* Tuition card: subject centred in the top bar */
.tuitions-grid .class-row-top .subject-badge {
  justify-content: center;
  text-align: center;
  padding-left: 16px;
  padding-right: 16px;
}

/* the subject on one line: a smaller font first (advertisement.js fitSubjects), then "..." */
.tuitions-grid .class-row-top .subject-badge { min-width: 0; }
.tuitions-grid .subject-text {
  display: block;
  line-height: 22px;   /* the bar keeps its height when the font gets smaller */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* still too long at 12px: the subject slides left and back (a pause at each end) to show all of it */
.tuitions-grid .subject-run { display: inline-block; }
.tuitions-grid .subject-text.is-sliding { text-overflow: clip; text-align: left; }
.tuitions-grid .subject-text.is-sliding .subject-run { animation: subject-slide var(--slide-time, 8s) ease-in-out infinite; }
@keyframes subject-slide {
  0%, 18% { transform: translateX(0); }
  50%, 68% { transform: translateX(var(--slide)); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tuitions-grid .subject-text.is-sliding { text-overflow: ellipsis; }
  .tuitions-grid .subject-text.is-sliding .subject-run { animation: none; }
}

/* The spine: just the Tuition ID (no "Tuition ID" label) with a round copy button after it - the two turned
   together, so the button sits at the ID's end; never wider than the card is tall */
.tuitions-grid .class-spine { overflow: hidden; padding: 10px 0; }
.tuitions-grid .class-spine-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  max-height: 100%;
}
.tuitions-grid .class-spine-line .class-spine-id { writing-mode: inherit; transform: none; }
.tuitions-grid .class-spine-copy {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(22, 163, 74, 0.22);
  color: inherit;
  cursor: pointer;
  transform: rotate(180deg);   /* undoes the line's own turn, so the icon stands upright */
}
.tuitions-grid .class-spine-copy svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tuitions-grid .class-spine-copy.is-copied { background: var(--lime); color: #fff; }
.tuitions-grid .class-spine-copy.is-failed { background: var(--danger); color: #fff; }

/* ================= LIGHT MODE (html[data-theme="light"], js/theme.js) ================= */
html[data-theme="light"] {
  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f3f4f6; --surface-3: #ffffff;
  --border: #e3e5e9; --border-light: #d4d7dd;
  --text: #111418; --muted: #5b6472; --muted-2: #8a8f98;
  --lime-hover: #16a34a; --danger: #dc2626; --success: #15803d; --info: #4f46e5; --warn: #b45309; --violet: #7c3aed;
  color-scheme: light;
}
html[data-theme="light"] .tuitions-hero h1 { color: #111418; }
html[data-theme="light"] .flt-pick-item:hover, html[data-theme="light"] .flt-pick-item:focus-visible { background: rgba(0, 0, 0, 0.04); }
html[data-theme="light"] .tuitions-grid .class-card { box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.3); }
html[data-theme="light"] .apply-button.not-applicable,
html[data-theme="light"] .apply-button.not-applicable:hover { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.4); }
html[data-theme="light"] .tuitions-grid .class-row-top .subject-badge { background: #111418; color: #ffffff; }

/* the footer stays at the foot of the screen however few tuitions there are (no black gap under it, no jump while
   the list loads) */
body[data-page="tutoradvertisement"] { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body[data-page="tutoradvertisement"] > main.page:not(.hidden) { flex: 1 0 auto; }
html.embed body[data-page="tutoradvertisement"] { min-height: 0; }

/* Find Your Next Tuition closer to the header */
.tuitions-page .container { padding-top: 14px; }
.tuitions-hero { padding: 8px 0 26px; }
/* while the tuitions load, the footer stays below the screen (no jump when they arrive) */
body[data-page="tutoradvertisement"] #loadingPage { min-height: 100vh; }

/* =========================================================
   PHONES (the page opens at the phone's width - advertisement.html): bit by bit
   - the heading smaller
   - the filters one sliding row of round pills, fading at the edge, Clear at its end
   - the number of open tuitions in the middle; the cards as they are on the computer
   The header, the bottom menu and the footer are css/header.css / footer.css.
   ========================================================= */
@media (max-width: 760px) {
  .tuitions-page .container { padding: 18px 16px 28px; }
  .tuitions-hero { padding: 4px 0 14px; }
  .tuitions-hero h1 { font-size: 30px; letter-spacing: -1px; line-height: 1.1; }

  /* the filters */
  .tuitions-filterbar { gap: 8px; margin: 0 -16px 12px; padding: 2px 16px 6px; border: 0; border-radius: 0; background: none;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); scroll-padding: 0 16px; }
  .tuitions-filterbar .filter-field { flex: 0 0 auto; min-width: 0; }
  .tuitions-filterbar .filter-field select { width: auto; field-sizing: content; min-width: 96px; max-width: 170px; padding: 9px 30px 9px 14px; font-size: 13.5px; background-position: right 11px center; }
  .tuitions-filterbar .clear-filters-button { flex: 0 0 auto; margin-right: 24px; padding: 9px 16px; border-radius: 999px; font-size: 13.5px; white-space: nowrap; }

  .tuitions-count { margin: 0 0 12px; text-align: center; font-size: 13px; }

  /* the cards keep their own design (the Tuition ID down the side, the subject bar, the details, the Apply bar) */
  .tuitions-grid { gap: 12px; }
}