/*
 * Trainer directory + profile — pl-trainer-*
 * Pakai token dari shared/style.css (:root --pl-*).
 */

.pl-wrap {
  max-width: var(--pl-container-max, 1200px);
  margin: 0 auto;
  padding: var(--pl-s-8, 2rem) var(--pl-container-pad, 1.25rem) var(--pl-s-16, 4rem);
}

/* Astra transparent header (ast-theme-transparent-header) melayang DI ATAS konten.
   DIREKTORI sekarang punya hero gelap full-bleed -> header melayang di atas hero (aman).
   PROFIL belum punya hero band, jadi butuh clearance top supaya tidak nabrak logo. */
.pl-trainer-profile > .pl-wrap {
  padding-top: clamp(6rem, 10vw, 8.5rem);
}

/* Guard: cegah scroll horizontal & pergeseran dari elemen full-bleed di dalam direktori. */
.pl-trainer-dir { overflow-x: clip; }

/* ===================================================================
   DIRECTORY HERO (full-bleed gelap + search)
   =================================================================== */
.pl-tdir-hero {
  /* Container Astra (.ast-container/#content) sudah di-reset full-width via .pl-active,
     jadi 100% sudah edge-to-edge. Hindari 100vw (overshoot selebar scrollbar -> geser). */
  width: 100%;
  background-color: var(--pl-navy-dark, #010d3f);
  background-image:
    radial-gradient(circle at 15% 40%, rgba(234, 88, 12, .18), transparent 30%),
    radial-gradient(circle at 85% 25%, rgba(37, 99, 235, .20), transparent 32%);
  padding: clamp(6.5rem, 11vw, 9.5rem) var(--pl-container-pad, 1.25rem) clamp(3rem, 6vw, 4.5rem);
  text-align: center;
  overflow: hidden;
}
.pl-tdir-hero__inner { max-width: 760px; margin: 0 auto; }

.pl-tdir-crumb {
  font-size: var(--pl-fs-sm, .875rem); color: rgba(255,255,255,.55);
  margin-bottom: var(--pl-s-6, 1.5rem); display: flex; gap: .45rem; justify-content: center; align-items: center;
}
.pl-tdir-crumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.pl-tdir-crumb a:hover { color: #fff; text-decoration: underline; }
.pl-tdir-crumb span[aria-current] { color: #fff; font-weight: 600; }

.pl-tdir-eyebrow {
  display: inline-block; margin-bottom: var(--pl-s-5, 1.25rem);
  padding: .35rem .9rem; border-radius: var(--pl-r-pill, 999px);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: #fbbf77; font-size: var(--pl-fs-xs, .75rem); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
}
.pl-tdir-title {
  font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.12; font-weight: 800;
  color: #fff; margin: 0 0 var(--pl-s-4, 1rem); letter-spacing: -.01em;
}
.pl-tdir-title span {
  background: linear-gradient(90deg, #fb923c, #ea580c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pl-tdir-sub {
  color: rgba(255,255,255,.78); font-size: var(--pl-fs-lg, 1.125rem);
  line-height: var(--pl-lh-base, 1.65); max-width: 580px; margin: 0 auto var(--pl-s-8, 2rem);
}

/* Search box */
.pl-tdir-search { position: relative; max-width: 620px; margin: 0 auto; }
.pl-tdir-search__icon {
  position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%);
  color: var(--pl-slate-500, #64748b); pointer-events: none;
}
.pl-tdir-search input {
  width: 100%; box-sizing: border-box;
  padding: 1.1rem 1.4rem 1.1rem 3.4rem;
  border: 1px solid var(--pl-slate-200, #e2e8f0); border-radius: var(--pl-r-lg, 16px);
  font-size: var(--pl-fs-base, 1rem); color: var(--pl-slate-900, #1e293b);
  background: #fff; box-shadow: var(--pl-shadow-lg);
  transition: box-shadow .2s var(--pl-ease, ease), border-color .2s var(--pl-ease, ease);
}
.pl-tdir-search input::placeholder { color: var(--pl-slate-400, #94a3b8); }
.pl-tdir-search input:focus {
  outline: none; border-color: var(--pl-warning, #ea580c);
  box-shadow: 0 0 0 4px rgba(234,88,12,.18), var(--pl-shadow-lg);
}
.pl-tdir-search input:focus + .pl-tdir-search__icon { color: var(--pl-warning, #ea580c); }

.pl-tdir-herocta { display: flex; flex-wrap: wrap; gap: var(--pl-s-3, .75rem); justify-content: center; margin-top: var(--pl-s-6, 1.5rem); }

/* ===================================================================
   BUTTONS
   =================================================================== */
.pl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .7rem 1.4rem; border-radius: var(--pl-r-pill, 999px);
  font-weight: 700; font-size: var(--pl-fs-sm, .875rem); text-decoration: none;
  transition: all .2s var(--pl-ease, ease); cursor: pointer; border: 2px solid transparent;
}
.pl-btn-primary { background: var(--pl-wa, #25D366); color: #fff; }
.pl-btn-primary:hover { background: var(--pl-wa-dark, #1ebe5d); transform: translateY(-1px); }
.pl-btn-ghost { background: transparent; color: var(--pl-navy, #011457); border-color: var(--pl-slate-300, #cbd5e1); }
.pl-btn-ghost:hover { border-color: var(--pl-navy, #011457); background: var(--pl-slate-100, #f1f5f9); }
/* Ghost di atas hero gelap */
.pl-btn-ghost-light { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.35); }
.pl-btn-ghost-light:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* ===================================================================
   RESULT BAR
   =================================================================== */
.pl-tdir-resultbar {
  display: flex; flex-wrap: wrap; gap: .5rem var(--pl-s-4, 1rem);
  justify-content: space-between; align-items: center;
  margin: var(--pl-s-8, 2rem) 0 var(--pl-s-6, 1.5rem);
}
.pl-tdir-count { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--pl-slate-700, #334155); font-size: var(--pl-fs-sm, .875rem); }
.pl-tdir-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pl-success, #16a34a); flex: 0 0 auto; }
.pl-tdir-dot.is-active { background: var(--pl-warning, #ea580c); }
.pl-tdir-sort { color: var(--pl-slate-400, #94a3b8); font-size: var(--pl-fs-sm, .875rem); font-weight: 500; }

/* ===================================================================
   DIRECTORY GRID + CARD (kaya: foto besar, badge, pill kota, CTA)
   =================================================================== */
.pl-trainer-grid {
  display: grid; gap: var(--pl-s-6, 1.5rem);
  /* auto-fit (bukan auto-fill): kolom kosong diciutkan, kartu mengisi penuh -> tidak mepet kiri. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pl-trainer-card {
  background: var(--pl-bg-white, #fff); border: 1px solid var(--pl-slate-200, #e2e8f0);
  border-radius: var(--pl-r-lg, 16px); overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: var(--pl-shadow-sm); transition: transform .25s var(--pl-ease, ease), box-shadow .25s var(--pl-ease, ease), border-color .25s var(--pl-ease, ease);
  display: flex; flex-direction: column;
}
.pl-trainer-card:hover { box-shadow: var(--pl-shadow-lg); transform: translateY(-5px); border-color: var(--pl-navy-soft, #2536a3); }

.pl-trainer-photo {
  position: relative; aspect-ratio: 4/5; background: var(--pl-slate-100, #f1f5f9);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pl-trainer-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--pl-ease, ease); }
.pl-trainer-card:hover .pl-trainer-photo img { transform: scale(1.05); }
.pl-trainer-initial {
  font-size: 3.5rem; font-weight: 800; color: #fff;
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--pl-navy-soft, #2536a3), var(--pl-navy, #011457));
}

/* Badge level (kiri-atas foto) */
.pl-trainer-badge {
  position: absolute; top: .7rem; left: .7rem; color: #fff;
  font-size: var(--pl-fs-xs, .75rem); font-weight: 700; padding: .25rem .65rem;
  border-radius: var(--pl-r-pill, 999px); box-shadow: var(--pl-shadow-sm); z-index: 2;
  display: inline-flex; align-items: center; gap: .3rem;
}
.pl-badge--certified { background: linear-gradient(90deg, #f59e0b, #ea580c); }
.pl-badge--verified  { background: linear-gradient(90deg, #3b82f6, #2563eb); }
.pl-badge--registered{ background: var(--pl-slate-500, #64748b); }

/* Pill kota (kanan-atas foto) */
.pl-trainer-citypill {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .25rem;
  background: rgba(255,255,255,.95); color: var(--pl-slate-700, #334155);
  font-size: var(--pl-fs-xs, .75rem); font-weight: 700; padding: .25rem .6rem;
  border-radius: var(--pl-r-pill, 999px); box-shadow: var(--pl-shadow-sm); max-width: 60%;
}
.pl-trainer-citypill svg { color: var(--pl-warning, #ea580c); flex: 0 0 auto; }
.pl-trainer-citypill { overflow: hidden; }

.pl-trainer-meta { padding: var(--pl-s-5, 1.25rem); display: flex; flex-direction: column; flex: 1 1 auto; }
.pl-trainer-spec {
  color: var(--pl-warning, #ea580c); font-size: var(--pl-fs-xs, .75rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .4rem; line-height: 1.4;
}
.pl-trainer-name { font-size: var(--pl-fs-lg, 1.125rem); color: var(--pl-navy, #011457); margin: 0 0 var(--pl-s-4, 1rem); line-height: 1.3; font-weight: 800; }
.pl-trainer-link {
  margin-top: auto; padding-top: var(--pl-s-4, 1rem); border-top: 1px solid var(--pl-slate-100, #f1f5f9);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--pl-slate-600, #475569); font-weight: 700; font-size: var(--pl-fs-sm, .875rem);
  transition: color .2s var(--pl-ease, ease);
}
.pl-trainer-card:hover .pl-trainer-link { color: var(--pl-warning, #ea580c); }
.pl-trainer-link svg { transition: transform .2s var(--pl-ease, ease); }
.pl-trainer-card:hover .pl-trainer-link svg { transform: translateX(4px); }

/* Empty states */
.pl-trainer-empty { text-align: center; color: var(--pl-slate-500, #64748b); padding: var(--pl-s-12, 3rem) 0; }
.pl-tdir-empty { text-align: center; padding: clamp(3rem, 8vw, 6rem) 1rem; }
.pl-tdir-empty__icon {
  width: 88px; height: 88px; margin: 0 auto var(--pl-s-5, 1.25rem); border-radius: 50%;
  background: var(--pl-slate-100, #f1f5f9); display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.pl-tdir-empty h3 { font-size: var(--pl-fs-2xl, 1.5rem); color: var(--pl-navy, #011457); margin: 0 0 .5rem; }
.pl-tdir-empty p { color: var(--pl-slate-500, #64748b); margin: 0; }

/* ===================================================================
   PROFILE (tak diubah)
   =================================================================== */
.pl-breadcrumb {
  font-size: var(--pl-fs-sm, .875rem); color: var(--pl-slate-500, #64748b);
  margin-bottom: var(--pl-s-6, 1.5rem); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}
.pl-breadcrumb a { color: var(--pl-navy-soft, #2536a3); text-decoration: none; }
.pl-breadcrumb a:hover { text-decoration: underline; }
.pl-breadcrumb span[aria-current] { color: var(--pl-slate-700, #334155); font-weight: 600; }

.pl-trainer-head {
  display: flex; gap: var(--pl-s-8, 2rem); align-items: flex-start;
  background: var(--pl-bg-white, #fff); border: 1px solid var(--pl-slate-200, #e2e8f0);
  border-radius: var(--pl-r-lg, 16px); padding: var(--pl-s-8, 2rem); box-shadow: var(--pl-shadow-sm);
  margin-bottom: var(--pl-s-8, 2rem);
}
.pl-trainer-avatar { flex: 0 0 200px; width: 200px; aspect-ratio: 1/1; border-radius: var(--pl-r-md, 12px); overflow: hidden; background: var(--pl-slate-100, #f1f5f9); }
.pl-trainer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pl-trainer-avatar .pl-trainer-initial { font-size: 5rem; }
.pl-trainer-headinfo { flex: 1 1 auto; min-width: 0; }
.pl-trainer-headinfo h1 { font-size: var(--pl-fs-3xl, 1.875rem); color: var(--pl-navy, #011457); margin: 0 0 .5rem; line-height: 1.2; }
.pl-trainer-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: var(--pl-s-4, 1rem) 0; }
.pl-trainer-tags li { background: var(--pl-slate-100, #f1f5f9); color: var(--pl-slate-700, #334155); font-size: var(--pl-fs-xs, .75rem); font-weight: 600; padding: .3rem .8rem; border-radius: var(--pl-r-pill, 999px); }
.pl-trainer-headinfo .pl-trainer-cta { justify-content: flex-start; margin-top: var(--pl-s-4, 1rem); }
.pl-trainer-cta { display: flex; flex-wrap: wrap; gap: var(--pl-s-3, .75rem); }

.pl-trainer-section { margin: var(--pl-s-8, 2rem) 0; }
.pl-trainer-section h2 {
  font-size: var(--pl-fs-2xl, 1.5rem); color: var(--pl-navy, #011457);
  border-left: 4px solid var(--pl-wa, #25D366); padding-left: .75rem; margin: 0 0 var(--pl-s-4, 1rem);
}
.pl-rte { color: var(--pl-slate-700, #334155); line-height: var(--pl-lh-base, 1.65); }
.pl-rte p { margin: 0 0 1rem; }
.pl-rte ul, .pl-rte ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.pl-rte li { margin-bottom: .35rem; }
.pl-rte strong { color: var(--pl-slate-900, #1e293b); }
.pl-rte .ql-align-center { text-align: center; }
.pl-rte .ql-align-justify { text-align: justify; }
.pl-rte .ql-align-right { text-align: right; }

.pl-cert-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--pl-s-4, 1rem); }
.pl-cert-gallery img { width: 100%; border-radius: var(--pl-r-sm, 6px); border: 1px solid var(--pl-slate-200, #e2e8f0); }
.pl-trainer-back { margin-top: var(--pl-s-8, 2rem); }
.pl-trainer-back a { color: var(--pl-navy-soft, #2536a3); text-decoration: none; font-weight: 600; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 640px) {
  .pl-trainer-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--pl-s-4, 1rem); }
  .pl-trainer-head { flex-direction: column; align-items: center; text-align: center; padding: var(--pl-s-5, 1.25rem); }
  .pl-trainer-avatar { flex-basis: 160px; width: 160px; }
  .pl-trainer-headinfo .pl-trainer-cta { justify-content: center; }
  .pl-trainer-tags { justify-content: center; }
  .pl-tdir-resultbar { justify-content: center; text-align: center; }
}