/*
  tutor_public.css — public tutor directory/profile pages
  (tutors/public/directory.html, tutors/public/profile.html).
  Loaded after marketing_node.css and scoped under the same .mkt class, so
  it inherits --mkt-* tokens and the mkt-card/mkt-btn/mkt-link-card etc.
  primitives instead of redefining a parallel palette. Only adds the pieces
  those shared component classes don't already cover: profile hero layout,
  stat pills, capability tags, availability grid, review cards, star
  ratings, and directory search-form controls.
*/

/* ── Profile hero ─────────────────────────────────────────────────────── */
.mkt-profile-hero{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap; padding:32px 28px;
}
@media (min-width:900px){ .mkt-profile-hero{padding:40px 40px;} }

.mkt-profile-avatar{
  width:120px; height:120px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--mkt-primary), var(--mkt-secondary));
  color:var(--mkt-on-primary); display:flex; align-items:center; justify-content:center;
  font-family:var(--mkt-font-display); font-size:40px; font-weight:700;
  box-shadow:var(--mkt-shadow-soft); overflow:hidden;
}
.mkt-profile-avatar img{width:100%; height:100%; object-fit:cover; display:block;}

.mkt-profile-copy h1{font-size:26px; margin-bottom:8px;}
@media (min-width:900px){ .mkt-profile-copy h1{font-size:34px;} }
.mkt-profile-tagline{font-size:15.5px; color:var(--mkt-on-surface-variant); margin-bottom:8px;}
.mkt-profile-location{
  display:flex; align-items:center; gap:6px; font-size:14px; color:var(--mkt-on-surface-variant);
}
.mkt-profile-location .mkt-icon{font-size:16px;}

.mkt-profile-stats{display:flex; gap:28px; margin-top:18px; flex-wrap:wrap;}
.mkt-profile-stat .val{
  font-family:var(--mkt-font-display); font-size:22px; font-weight:700; color:var(--mkt-primary);
  display:flex; align-items:center; gap:4px;
}
.mkt-profile-stat .val .material-symbols-outlined{font-size:18px; color:var(--color-star-rating);}
.mkt-profile-stat .lbl{
  font-family:var(--mkt-font-label); font-size:12px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--mkt-on-surface-variant);
}

/* ── Two-column layout ───────────────────────────────────────────────── */
.mkt-profile-layout{display:grid; grid-template-columns:1fr; gap:24px; align-items:start;}
@media (min-width:960px){ .mkt-profile-layout{grid-template-columns:2fr 1fr; gap:28px;} }
.mkt-profile-main{display:flex; flex-direction:column; gap:24px;}
.mkt-profile-side{position:static;}
@media (min-width:960px){ .mkt-profile-side{position:sticky; top:24px;} }

.mkt-profile-panel{padding:28px 26px;}
.mkt-profile-panel h2{
  font-size:19px; display:flex; align-items:center; gap:10px; margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid var(--mkt-outline-variant);
}
.mkt-profile-panel h2 .material-symbols-outlined{color:var(--mkt-primary); font-size:20px;}
.mkt-profile-panel .mkt-richtext{white-space:pre-line;}

/* ── Capability / language tags ──────────────────────────────────────── */
.mkt-tag{
  display:inline-flex; align-items:center; gap:6px; background:var(--mkt-surface-low);
  border:1px solid var(--mkt-outline-variant); border-radius:999px; padding:8px 14px;
  margin:4px 6px 4px 0; font-size:13.5px; color:var(--mkt-on-surface);
}
.mkt-tag .material-symbols-outlined{font-size:16px; color:var(--mkt-secondary);}
.mkt-tag .rate{color:var(--color-rate-highlight); font-weight:600; margin-left:2px;}
a.mkt-tag{text-decoration:none; transition:border-color .15s ease, color .15s ease;}
a.mkt-tag:hover{border-color:var(--mkt-primary); color:var(--mkt-primary);}

/* ── Teaching experience / qualification items ───────────────────────── */
.mkt-timeline-item{
  border-left:3px solid var(--mkt-secondary); background:var(--mkt-surface-low);
  border-radius:0 0.75rem 0.75rem 0; padding:16px 18px; margin-bottom:14px;
}
.mkt-timeline-item.is-past{border-left-color:var(--mkt-outline-variant);}
.mkt-timeline-item .row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.mkt-timeline-item .title{font-weight:700; color:var(--mkt-primary);}
.mkt-timeline-item .meta{font-size:13px; color:var(--mkt-on-surface-variant); margin-top:2px;}
.mkt-timeline-item .badge-current{
  background:var(--mkt-secondary); color:#fff; font-size:11.5px; font-weight:700;
  border-radius:999px; padding:2px 10px; font-family:var(--mkt-font-label);
}

.mkt-qual-item{
  border-left:3px solid var(--mkt-primary); background:var(--mkt-surface-low);
  border-radius:0 0.75rem 0.75rem 0; padding:14px 18px; margin-bottom:12px;
}
.mkt-qual-badge{
  display:inline-block; background:var(--mkt-primary); color:#fff; font-size:12px;
  font-weight:700; border-radius:999px; padding:3px 12px; margin-right:8px;
  font-family:var(--mkt-font-label);
}
.mkt-qual-meta{font-size:13.5px; color:var(--mkt-on-surface-variant); margin-top:4px;}

/* ── Availability grid ───────────────────────────────────────────────── */
.mkt-avail-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media (min-width:640px){ .mkt-avail-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));} }
.mkt-avail-day{
  background:var(--mkt-surface-low); border-left:3px solid var(--mkt-primary);
  border-radius:0 0.75rem 0.75rem 0; padding:14px 16px;
}
.mkt-avail-day .day{
  font-weight:700; color:var(--mkt-primary); display:flex; align-items:center; gap:6px;
  margin-bottom:6px; font-size:14px;
}
.mkt-avail-day .slot{font-size:13px; color:var(--mkt-on-surface-variant);}

/* ── Ratings ──────────────────────────────────────────────────────────── */
.mkt-rating-summary{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:var(--mkt-surface-low); border-radius:1rem; padding:20px 24px; margin-bottom:20px;
}
.mkt-rating-big{font-family:var(--mkt-font-display); font-size:44px; font-weight:700; color:var(--mkt-primary);}
.mkt-stars{color:var(--color-star-rating); font-size:16px; display:flex; gap:2px;}
.mkt-stars .material-symbols-outlined{font-size:18px;}
.mkt-rating-count{font-size:13px; color:var(--mkt-on-surface-variant);}
.mkt-rating-breakdown{margin-left:auto; display:grid; gap:4px; font-size:13.5px; color:var(--mkt-on-surface-variant);}
.mkt-rating-breakdown strong{color:var(--mkt-on-surface);}

.mkt-review-card{
  background:var(--mkt-surface-low); border-left:3px solid var(--mkt-secondary);
  border-radius:0 0.75rem 0.75rem 0; padding:16px 18px; margin-bottom:12px;
}
.mkt-review-card .row{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.mkt-review-card .reviewer{font-weight:700;}
.mkt-review-card .date{font-size:12px; color:var(--mkt-on-surface-variant);}
.mkt-review-card p{margin-top:10px; font-size:14px; color:var(--mkt-on-surface-variant);}

/* ── Contact card (sidebar) ──────────────────────────────────────────── */
.mkt-contact-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:13px 20px; border-radius:999px; text-decoration:none; font-weight:600;
  font-family:var(--mkt-font-label); font-size:14.5px; margin-bottom:12px; border:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.mkt a.mkt-contact-btn{color:#fff;}
.mkt-contact-btn:hover{transform:translateY(-1px);}
.mkt-contact-btn.primary{background:var(--mkt-primary); box-shadow:0 10px 24px -10px rgba(1,36,78,0.4);}
.mkt-contact-btn.whatsapp{background:var(--color-whatsapp); box-shadow:0 10px 24px -10px color-mix(in srgb, var(--color-whatsapp), transparent 60%);}
.mkt-privacy-note{
  text-align:center; font-size:12.5px; color:var(--mkt-on-surface-variant);
  margin-top:8px; padding-top:14px; border-top:1px solid var(--mkt-outline-variant);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.mkt-privacy-note .material-symbols-outlined{font-size:15px;}
.mkt-pref-row{display:flex; justify-content:space-between; gap:8px; font-size:13.5px; padding:6px 0;}
.mkt-pref-row .lbl{color:var(--mkt-on-surface-variant);}
.mkt-pref-row .val{font-weight:600;}

/* ── Preview banner ───────────────────────────────────────────────────── */
.mkt-preview-bar{background:var(--color-warning-bg); border-bottom:3px solid var(--color-warning); padding:14px 0;}
.mkt-preview-bar .inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.mkt-preview-bar .left{display:flex; align-items:center; gap:12px;}
.mkt-preview-bar .left .material-symbols-outlined{font-size:22px; color:#a15c00;}
.mkt-preview-bar .left small{display:block; font-size:.82rem; color:#6b5300;}
.mkt-preview-badge{
  background:rgba(0,0,0,0.08); border-radius:999px; padding:6px 14px; font-size:13px; font-weight:600;
  font-family:var(--mkt-font-label);
}
.mkt-preview-bar .right{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.mkt-preview-bar .mkt-btn{margin-top:0; padding:10px 20px; font-size:13.5px;}

/* ── Directory: search / filters ─────────────────────────────────────── */
.mkt-search-panel{padding:24px 26px;}
.mkt-search-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media (min-width:640px){ .mkt-search-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .mkt-search-grid{grid-template-columns:repeat(4,1fr);} }
.mkt-field{display:flex; flex-direction:column; gap:6px;}
.mkt-field label{
  font-family:var(--mkt-font-label); font-size:12.5px; font-weight:600; color:var(--mkt-on-surface-variant);
}
.mkt-field input[type="text"],
.mkt-field input[type="number"],
.mkt-field select{
  border:1px solid var(--mkt-outline-variant); border-radius:0.6rem; padding:11px 14px;
  font-family:var(--mkt-font-body); font-size:14.5px; background:var(--mkt-surface-lowest);
  color:var(--mkt-on-surface); width:100%;
}
.mkt-field input:focus, .mkt-field select:focus{outline:2px solid var(--mkt-primary); outline-offset:1px;}
.mkt-field-check{display:flex; align-items:center; gap:8px; font-size:13.5px;}
.mkt-search-actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; flex-wrap:wrap;}
.mkt-search-count{font-size:13.5px; color:var(--mkt-on-surface-variant);}

/* ── Directory: tutor grid (extends marketing_node.css's .mkt-tutor-*) ── */
.mkt-tutor-card{
  background:var(--mkt-surface-lowest); border:1px solid var(--mkt-outline-variant); border-radius:1rem;
  padding:24px; box-shadow:var(--mkt-shadow-soft); text-decoration:none; color:inherit; display:block;
  transition:border-color .15s ease, transform .15s ease;
}
.mkt-tutor-card:hover{border-color:var(--mkt-primary); transform:translateY(-2px);}
.mkt-tutor-card .mkt-tutor-rate{
  font-family:var(--mkt-font-display); font-weight:700; color:var(--mkt-primary); font-size:15px; margin-top:8px;
}
.mkt-tutor-card .mkt-tutor-rating{display:flex; align-items:center; justify-content:center; gap:4px; font-size:13px; color:var(--mkt-on-surface-variant); margin-top:6px;}
.mkt-tutor-card .mkt-tutor-rating .material-symbols-outlined{font-size:15px; color:var(--color-star-rating);}
.mkt-tutor-card .mkt-tutor-location{font-size:12.5px; color:var(--mkt-on-surface-variant); margin-top:4px;}
.mkt-featured-badge{
  display:inline-flex; align-items:center; gap:4px; background:var(--mkt-secondary); color:#fff;
  font-size:11px; font-weight:700; border-radius:999px; padding:3px 10px; margin-bottom:10px;
  font-family:var(--mkt-font-label);
}
.mkt-featured-badge .material-symbols-outlined{font-size:13px;}

.mkt-empty-state{text-align:center; padding:60px 24px; color:var(--mkt-on-surface-variant);}
.mkt-empty-state .material-symbols-outlined{font-size:48px; opacity:.4; margin-bottom:12px;}

/* ── Pagination ───────────────────────────────────────────────────────── */
.mkt-pagination{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:36px; flex-wrap:wrap;}
.mkt-pagination a, .mkt-pagination span{
  display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px;
  border-radius:0.6rem; border:1px solid var(--mkt-outline-variant); text-decoration:none;
  font-family:var(--mkt-font-label); font-size:13.5px; font-weight:600; color:var(--mkt-on-surface); padding:0 10px;
}
.mkt-pagination a:hover{border-color:var(--mkt-primary); color:var(--mkt-primary);}
.mkt-pagination .current{background:var(--mkt-primary); border-color:var(--mkt-primary); color:#fff;}