/* css/tutor-profile.css - the public tutor profile (tutor-profile.php).
   The page loads no bootstrap / main.css, so this sheet carries the base the
   shared header and footer would otherwise inherit. Values come from tokens.css. */

/* ---------------------------------------------------------------- base */
html{ -webkit-text-size-adjust:100%; }
.tt-tp-page{ margin:0; background:var(--surface); color:var(--ink-900);
  font:400 16px/1.65 var(--font-body); -webkit-font-smoothing:antialiased; }
.tt-tp-page *,.tt-tp-page *::before,.tt-tp-page *::after{ box-sizing:border-box; }
.tt-tp-page img{ max-width:100%; }
.tt-tp .tt-icon{ flex:none; }
.tt-tp a:not(.tt-btn){ color:var(--blue-700); }

.tt-tp-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-tp-skip:focus{ left:var(--sp-4); }

.tt-tp{ padding:var(--sp-5) 0 var(--sp-8); }
@media (min-width:992px){ .tt-tp{ padding:var(--sp-6) 0 var(--sp-9); } }

/* ---------------------------------------------------------------- card */
.tt-tp-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-5); box-shadow:var(--shadow-card); min-width:0; }
@media (max-width:767px){ .tt-tp-card{ padding:20px; } }

/* ---------------------------------------------------------------- breadcrumb */
.tt-tp-crumbs ol{ display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2); list-style:none;
  margin:0 0 var(--sp-4); padding:0; font-size:14px; line-height:1.5; color:var(--ink-700); }
.tt-tp-crumbs li{ display:flex; align-items:center; gap:var(--sp-2); min-width:0; }
.tt-tp-crumbs li + li::before{ content:"/"; color:var(--ink-500); }
.tt-tp-crumbs a{ text-decoration:none; }
.tt-tp-crumbs a:hover{ text-decoration:underline; }
.tt-tp-crumbs [aria-current]{ color:var(--ink-700); overflow-wrap:anywhere; }

/* ---------------------------------------------------------------- alerts */
.tt-tp-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; border-radius:var(--r); font-weight:600; }
.tt-tp-alert--err{ background:#FDF0F0; border-color:#F2B8B5; color:#9B1C1C; }   /* 7.33:1 */
.tt-tp-alert .tt-icon{ margin-top:3px; }
.tt-tp-flash:empty{ display:none; }
.tt-tp-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 */

/* ---------------------------------------------------------------- layout */
.tt-tp__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); }
.tt-tp__body{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); min-width:0; }
@media (min-width:768px){ .tt-tp__grid,.tt-tp__body{ gap:var(--sp-5); } }
@media (min-width:992px){
  .tt-tp__grid{ grid-template-columns:minmax(0,1fr) 360px;
    grid-template-areas:"hero side" "body side"; align-items:start; }
  .tt-tp-hero{ grid-area:hero; }
  .tt-tp-side{ grid-area:side; position:sticky; top:100px; }   /* 76px nav + 24 */
  .tt-tp__body{ grid-area:body; }
}

/* ---------------------------------------------------------------- hero */
.tt-tp-hero__top{ display:flex; gap:var(--sp-4); align-items:flex-start; }
.tt-tp-hero__photo{ flex:none; display:block; width:88px; height:88px; object-fit:cover;
  border-radius:var(--r); background:var(--blue-50); border:1px solid var(--line); }
.tt-tp-hero__id{ min-width:0; flex:1 1 auto; }
.tt-tp__name{ margin:0 0 var(--sp-2); font:800 26px/1.15 var(--font-display); letter-spacing:-.02em;
  color:var(--navy-900); overflow-wrap:anywhere; }
.tt-tp-hero__badges{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3);
  margin:0 0 var(--sp-2); }
.tt-tp-hero__badges .tt-chip{ padding:4px var(--sp-3); }
.tt-tp-rating{ display:inline-flex; align-items:center; gap:6px; font-size:14px; line-height:1.4; color:var(--ink-900); }
.tt-tp-rating .tt-icon{ color:var(--amber-600); fill:currentColor; }
.tt-tp-rating strong{ font-weight:700; }
.tt-tp-rating__n{ color:var(--ink-700); }
.tt-tp-hero__place{ display:flex; gap:6px; align-items:flex-start; margin:0; color:var(--ink-700); line-height:1.5; }
.tt-tp-hero__place .tt-icon{ margin-top:2px; color:var(--ink-500); }
@media (min-width:768px){
  .tt-tp-hero__top{ gap:var(--sp-5); }
  .tt-tp-hero__photo{ width:136px; height:136px; }
  .tt-tp__name{ font-size:34px; margin-top:var(--sp-1); }
  .tt-tp-hero__badges{ margin-bottom:var(--sp-3); }
}

.tt-tp-facts{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-3);
  margin:var(--sp-5) 0 0; padding:var(--sp-5) 0 0; border-top:1px solid var(--line); }
@media (min-width:600px){ .tt-tp-facts{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--sp-4); } }
.tt-tp-facts__item{ position:relative; display:flex; flex-direction:column; justify-content:center;
  min-height:40px; padding-left:52px; }
.tt-tp-facts dt{ font-size:14px; font-weight:500; line-height:1.4; color:var(--ink-700); }
.tt-tp-facts__icon{ position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--r); background:var(--blue-50); color:var(--blue-700); }
.tt-tp-facts dd{ margin:0; font-weight:600; line-height:1.4; color:var(--navy-900); overflow-wrap:anywhere; }

/* ---------------------------------------------------------------- side card */
.tt-tp-side__title{ margin:0 0 var(--sp-2); font:700 20px/1.3 var(--font-display); letter-spacing:-.01em;
  color:var(--navy-900); overflow-wrap:anywhere; }
.tt-tp-side__text{ margin:0 0 var(--sp-5); color:var(--ink-700); }
.tt-tp-side__acts{ display:flex; flex-direction:column; gap:var(--sp-3); }
.tt-tp-side__form{ margin:0; }
.tt-tp-side__acts .tt-btn{ min-height:48px; }
.tt-tp-side__notes{ list-style:none; margin:var(--sp-5) 0 0; padding:var(--sp-4) 0 0; border-top:1px solid var(--line);
  display:grid; gap:var(--sp-3); font-size:14px; line-height:1.5; color:var(--ink-700); }
.tt-tp-side__notes li{ display:flex; gap:var(--sp-2); align-items:flex-start; }
.tt-tp-side__notes .tt-icon{ margin-top:1px; color:var(--ink-500); }
.tt-tp-side__notes li:first-child .tt-icon{ color:var(--green-700); }

/* Save: tokens.css styles .tt-sa-save for the Bootstrap pages (float, white
   pill, solid blue when saved). Here it is the ghost button of the trio. */
.tt-tp .tt-sa-save{ float:none; margin:0; background:transparent; border-color:transparent; color:var(--ink-700); }
.tt-tp .tt-sa-save:hover,.tt-tp .tt-sa-save:focus{ background:var(--blue-50); border-color:transparent; color:var(--blue-700); }
.tt-tp .tt-sa-save.is-on{ background:var(--blue-50); border-color:var(--blue-100); color:var(--blue-700); }  /* 6.53:1 */
.tt-tp .tt-sa-save.is-on .tt-icon{ fill:currentColor; }

/* ---------------------------------------------------------------- sections */
.tt-tp-sec__title{ display:flex; align-items:center; gap:var(--sp-3); margin:0 0 var(--sp-4);
  font:700 20px/1.3 var(--font-display); letter-spacing:-.01em; color:var(--navy-900); }
.tt-tp-sec__icon{ flex:none; display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:var(--r); background:var(--blue-50); color:var(--blue-700); }
.tt-tp-about,.tt-tp-plain{ margin:0; max-width:68ch; color:var(--ink-900); overflow-wrap:anywhere; }
.tt-tp-sec--empty .tt-tp-plain{ color:var(--ink-700); }

.tt-tp-group + .tt-tp-group,.tt-tp-rows + .tt-tp-group,.tt-tp-group + .tt-tp-rows{ margin-top:var(--sp-5); }
.tt-tp-group__title{ display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-2);
  font:600 14px/1.4 var(--font-body); color:var(--ink-700); }
.tt-tp-group__title .tt-icon{ color:var(--ink-500); }
.tt-tp-tags{ display:flex; flex-wrap:wrap; gap:var(--sp-2); list-style:none; margin:0; padding:0; }
.tt-tp-tags li{ padding:6px var(--sp-3); border-radius:var(--r-pill); background:var(--blue-50);
  color:var(--navy-800); font-size:14px; font-weight:500; line-height:1.3; }            /* 11.64:1 */
.tt-tp-tags--quiet li{ background:var(--surface); border:1px solid var(--line); color:var(--ink-900); }

.tt-tp-rows{ margin:0; }
.tt-tp-rows > div{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px; padding:var(--sp-3) 0;
  border-top:1px solid var(--line); }
.tt-tp-rows > div:first-child{ border-top:0; padding-top:0; }
.tt-tp-rows > div:last-child{ padding-bottom:0; }
.tt-tp-rows dt{ font-size:14px; font-weight:500; line-height:1.5; color:var(--ink-700); }
.tt-tp-rows dd{ margin:0; color:var(--ink-900); overflow-wrap:anywhere; }
.tt-tp-rows__sub{ display:block; font-size:14px; color:var(--ink-700); }
@media (min-width:600px){
  .tt-tp-rows > div{ grid-template-columns:160px minmax(0,1fr); gap:var(--sp-4); align-items:baseline; }
}
.tt-tp-modes{ display:grid; gap:var(--sp-2); list-style:none; margin:0; padding:0; }
.tt-tp-modes li{ display:flex; align-items:center; gap:var(--sp-2); }
.tt-tp-modes .tt-icon{ color:var(--blue-700); }

/* ---------------------------------------------------------------- rating form */
.tt-tp-rate__form{ max-width:560px; }
.tt-tp-rate__stars{ border:0; margin:0 0 var(--sp-4); padding:0; min-width:0; }
.tt-tp-rate__legend,.tt-tp-rate__label{ display:block; margin:0 0 var(--sp-2); padding:0;
  font-size:14px; font-weight:600; color:var(--ink-700); }
.tt-tp-rate__opt{ font-weight:400; color:var(--ink-500); }
.tt-tp-rate__row{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.tt-tp-star{ position:relative; margin:0; cursor:pointer; }
/* Clipped, not display:none - the radio keeps its tab stop and its name. */
.tt-tp-star input{ position:absolute; width:1px; height:1px; margin:0; opacity:0; }
.tt-tp-star > span{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 var(--sp-4);
  border:1.5px solid var(--line-control); border-radius:var(--r-pill); background:var(--white);
  font-weight:600; color:var(--ink-900);
  transition:background-color var(--t) var(--ease), border-color var(--t) var(--ease); }
.tt-tp-star > span .tt-icon{ color:var(--amber-600); }
.tt-tp-star:hover > span{ border-color:var(--blue-600); }
.tt-tp-star input:checked + span{ background:var(--blue-50); border-color:var(--blue-600); color:var(--blue-700); }
.tt-tp-star input:checked + span .tt-icon{ fill:currentColor; color:var(--amber-600); }
.tt-tp-star input:focus-visible + span{ outline:2px solid var(--blue-600); outline-offset:2px; }
.tt-tp-rate__input{ display:block; width:100%; min-height:96px; margin:0 0 var(--sp-4); padding:var(--sp-3);
  border:1px solid var(--line-control); border-radius:var(--r); background:var(--white);
  font:400 16px/1.5 var(--font-body); color:var(--ink-900); resize:vertical; }
.tt-tp-rate__input:focus{ border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(21,101,216,.15); outline:none; }

/* ---------------------------------------------------------------- not found */
.tt-tp-missing{ max-width:560px; margin:var(--sp-6) auto; text-align:center; padding:var(--sp-7) var(--sp-5); }
.tt-tp-missing__icon{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px;
  margin:0 0 var(--sp-4); border-radius:50%; background:var(--blue-50); color:var(--blue-700); }
.tt-tp-missing__title{ margin:0 0 var(--sp-3); font:800 28px/1.2 var(--font-display); letter-spacing:-.02em; color:var(--navy-900); }
.tt-tp-missing__text{ margin:0 auto var(--sp-5); max-width:44ch; color:var(--ink-700); }
.tt-tp-missing__acts{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-3); }
@media (max-width:767px){
  .tt-tp-missing{ margin:var(--sp-4) auto; padding:var(--sp-6) 20px; }
  .tt-tp-missing__title{ font-size:24px; }
  .tt-tp-missing__acts .tt-btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .tt-tp *{ animation:none !important; transition:none !important; }
}