/**
 * TeachDemy — Instructor pages polish (Round 14, Task 14-d).
 *
 * Loaded (from functions.php, behind a file_exists guard) on:
 *   - archive-instructor.php  (/instructors/)      → .tda-* classes
 *   - single-instructor.php   (/instructor/{slug}/)→ .tdi-* classes
 *
 * All rules are scoped under ".td-page" and use ONLY the site design
 * tokens: navy hero surfaces with mint/green accents; gold appears
 * exclusively on rating stars/badges. No blue/indigo accents.
 * Dark-mode overrides follow the html[data-theme="dark"] patterns
 * used in teachdemy-dark-mode.css.
 */

/* ==========================================================================
 * ARCHIVE — hero (page-hero look, self-contained so it renders even when
 * teachdemy-static-pages.css is not loaded on this view)
 * ========================================================================== */
.td-page .tda-hero{
        position:relative;
        overflow:hidden;
        color:#fff;
        background:linear-gradient(120deg,#062b2b 0%,#07504b 55%,#0c6d93 100%);
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        border-radius:0 !important;
}
.td-page .tda-hero .container{padding:56px 0 62px}
.td-page .tda-hero .crumb{font-size:11px;color:#bfe1dc;margin-bottom:16px}
.td-page .tda-hero .crumb a{color:#bfe1dc}
.td-page .tda-hero .crumb a:hover{color:#fff}
.td-page .tda-hero .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.td-page .tda-hero h1{
        font-size:44px;
        line-height:1.08;
        letter-spacing:-1.5px;
        margin:14px 0;
        max-width:820px;
        color:#fff;
}
.td-page .tda-hero .lead{font-size:15px;line-height:1.8;color:#dbe8ec;max-width:740px;margin:0}
.td-page .tda-hero .stat b{color:#fff;font-size:22px}
.td-page .tda-hero .stat span{color:#cfe3de}
.td-page .tda-stats{margin-top:26px;gap:34px}

/* ==========================================================================
 * ARCHIVE — instructor card grid (3 per row → 2 → 1)
 * ========================================================================== */
.td-page .tda-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.td-page .tda-row{margin-bottom:6px}
.td-page .tda-card{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.td-page .tda-card:hover{
        transform:translateY(-6px);
        border-color:rgba(22,166,115,.45);
        box-shadow:0 18px 44px rgba(7,31,61,.12);
}

/* Portrait: circular, 3px mint ring + soft halo shadow. */
.td-page .tda-portrait{
        width:64px;
        height:64px;
        flex:none;
        border-radius:50%;
        background:linear-gradient(135deg,#07504b,#16a673);
        background-size:cover;
        background-position:center;
        border:3px solid #27c58b;
        box-shadow:0 0 0 4px rgba(39,197,139,.16), 0 10px 22px rgba(7,31,61,.16);
}
.td-page .tda-portrait--initials{
        display:grid;
        place-items:center;
        color:#fff;
        font-weight:900;
        font-size:20px;
        letter-spacing:.5px;
}
.td-page .tda-card-top{display:flex;gap:14px;align-items:center}
.td-page .tda-id{min-width:0}
.td-page .tda-id h3{margin:0;font-size:14px;line-height:1.35}
.td-page .tda-id h3 a{color:var(--navy)}
.td-page .tda-id h3 a:hover{color:var(--green)}
.td-page .tda-id p{margin:3px 0 0;font-size:10px;color:var(--muted)}

/* Stat chips: rating (gold star), learners, courses. */
.td-page .tda-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.td-page .tda-chip{
        display:inline-flex;
        align-items:center;
        gap:5px;
        padding:5px 10px;
        border-radius:999px;
        background:var(--mint);
        border:1px solid #d5efe5;
        color:var(--navy);
        font-size:10px;
        font-weight:800;
        line-height:1;
}
.td-page .tda-chip--rating{background:#fdf6e3;border-color:#f3e3b3;color:#8a6a12}
.td-page .tda-chip--rating .stars{color:#f7bd31;font-size:11px;letter-spacing:0}
.td-page .tda-excerpt{margin-top:12px;font-size:10px;color:var(--muted);line-height:1.7}
.td-page .tda-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.td-page .tda-card-btn{margin-top:16px}

/* Search no-match note (kept from Phase 2). */
.td-page .tda-nomatch{display:none;text-align:center;color:var(--muted);padding:40px 0;font-size:12px}

/* ==========================================================================
 * ARCHIVE — empty state (zero instructor posts)
 * ========================================================================== */
.td-page .tda-empty{
        max-width:640px;
        margin:26px auto 0;
        padding:44px 36px;
        text-align:center;
        border:1.5px dashed #bfe3d6;
        border-radius:22px;
        background:linear-gradient(180deg,#f2fbf7,#ffffff);
}
.td-page .tda-empty-icon{
        width:72px;
        height:72px;
        margin:0 auto 18px;
        border-radius:50%;
        display:grid;
        place-items:center;
        color:#16a673;
        background:var(--mint);
        border:1px solid #d5efe5;
}
.td-page .tda-empty h3{margin:0 0 10px;font-size:17px;color:var(--navy)}
.td-page .tda-empty p{font-size:11px;color:var(--muted);line-height:1.8;max-width:480px;margin:0 auto}
.td-page .tda-empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.td-page .tda-empty-note{margin-top:20px}
.td-page .tda-empty-note a{color:var(--green);font-weight:800;text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
 * CTA BAND (archive + single) — navy gradient
 * ========================================================================== */
.td-page .tda-cta,
.td-page .tdi-cta{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:26px;
        flex-wrap:wrap;
        border-radius:22px;
        padding:34px 38px;
        background:linear-gradient(125deg,#062b2b,#08766a);
        color:#fff;
        box-shadow:0 18px 50px rgba(6,43,43,.22);
}
.td-page .tda-cta .eyebrow,
.td-page .tdi-cta .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.td-page .tda-cta h2,
.td-page .tdi-cta h2{margin:12px 0 8px;font-size:26px;letter-spacing:-.6px;color:#fff}
.td-page .tda-cta p,
.td-page .tdi-cta p{font-size:11px;color:#cce5df;line-height:1.8;max-width:620px;margin:0}
.td-page .tda-cta-text,
.td-page .tdi-cta-text{min-width:240px;flex:1}
.td-page .tda-cta-actions,
.td-page .tdi-cta-actions{display:flex;gap:10px;flex-wrap:wrap}
.td-page .tda-cta .secondary,
.td-page .tdi-cta .secondary{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.td-page .tda-cta .secondary:hover,
.td-page .tdi-cta .secondary:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}

/* ==========================================================================
 * SINGLE — profile hero
 * ========================================================================== */
.td-page .tdi-hero{
        position:relative;
        overflow:hidden;
        color:#fff;
        background:linear-gradient(120deg,#062b2b 0%,#07504b 55%,#0c6d93 100%);
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        border-radius:0 !important;
}
.td-page .tdi-hero-inner{padding:0 0 60px}
.td-page .tdi-hero .crumb{font-size:11px;color:#bfe1dc;margin-bottom:16px}
.td-page .tdi-hero .crumb a{color:#bfe1dc}
.td-page .tdi-hero .crumb a:hover{color:#fff}
.td-page .tdi-hero-grid{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:18px}
.td-page .tdi-portrait{
        width:116px;
        height:116px;
        flex:none;
        border-radius:50%;
        background:linear-gradient(135deg,#07504b,#16a673);
        background-size:cover;
        background-position:center;
        border:3px solid #27c58b;
        box-shadow:0 0 0 5px rgba(39,197,139,.18), 0 16px 34px rgba(0,0,0,.28);
}
.td-page .tdi-portrait--initials{
        display:grid;
        place-items:center;
        color:#fff;
        font-size:32px;
        font-weight:900;
        letter-spacing:1px;
}
.td-page .tdi-hero-info .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.td-page .tdi-hero-info h1{font-size:42px;line-height:1.06;letter-spacing:-1.4px;margin:14px 0 6px;color:#fff}
.td-page .tdi-specialty{margin:0;font-size:13px;color:#cfe3de;font-weight:600}
.td-page .tdi-stats{gap:34px;margin-top:18px}
.td-page .tdi-stats .stat b{color:#fff;font-size:20px}
.td-page .tdi-stats .stat b .stars{color:#f7bd31;letter-spacing:0}
.td-page .tdi-stats .stat span{color:#cfe3de}

/* ==========================================================================
 * SINGLE — About + expertise card
 * ========================================================================== */
.td-page .tdi-about-grid{align-items:start}
.td-page .tdi-bio{font-size:12px;line-height:1.9;color:var(--ink)}
.td-page .tdi-bio p{margin:0 0 14px}
.td-page .tdi-socials{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.td-page .tdi-socials-label{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.td-page .tdi-social{
        display:inline-flex;
        align-items:center;
        gap:7px;
        padding:9px 14px;
        border-radius:10px;
        border:1.5px solid var(--line);
        background:#fff;
        color:var(--navy);
        font-size:11px;
        font-weight:800;
        transition:transform .18s ease, border-color .18s ease, color .18s ease;
}
.td-page .tdi-social svg{color:var(--green)}
.td-page .tdi-social:hover{transform:translateY(-2px);border-color:var(--green);color:var(--green);box-shadow:0 8px 20px rgba(7,31,61,.08)}

/* Expertise table + level badges (mint scale — gold stays rating-only). */
.td-page .tdi-side-card h3{margin:0 0 6px;font-size:14px}
.td-page .tdi-table td{font-size:11px}
.td-page .tdi-table td:first-child{font-weight:700;color:var(--navy)}
.td-page .tdi-table-empty{color:var(--muted)}
.td-page .tdi-level{
        display:inline-block;
        padding:4px 10px;
        border-radius:999px;
        background:var(--mint);
        border:1px solid #cdeede;
        color:var(--green);
        font-size:9px;
        font-weight:900;
        letter-spacing:.04em;
        text-transform:uppercase;
}
.td-page .tdi-level--intermediate{background:#eef7f0;border-color:#d7e9dd;color:#3f7d5f}
.td-page .tdi-level--advanced{background:#def3e8;border-color:#aee3cc;color:#0f7a55}
.td-page .tdi-level--expert{background:linear-gradient(135deg,#16a673,#27c58b);border-color:#27c58b;color:#fff}

/* Rating breakdown (light-mode styles for the td-rating-* markup). */
.td-page .tdi-breakdown{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.td-page .tdi-breakdown h3{margin:0 0 14px;font-size:14px}
.td-page .td-rating-row{display:flex;align-items:center;gap:10px;margin:8px 0}
.td-page .td-star-label{width:34px;font-size:10px;font-weight:800;color:#8a6a12;white-space:nowrap}
.td-page .td-rating-bar{flex:1;height:8px;border-radius:99px;background:#eef5f2;overflow:hidden}
.td-page .td-rating-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#f7bd31,#f9cf6a)}
.td-page .td-rating-count{width:44px;text-align:right;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ==========================================================================
 * SINGLE — courses by this instructor (16:9 media)
 * ========================================================================== */
.td-page .tdi-course{
        display:flex;
        flex-direction:column;
        transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.td-page .tdi-course:hover{
        transform:translateY(-6px);
        border-color:rgba(22,166,115,.45);
        box-shadow:0 18px 44px rgba(7,31,61,.12);
}
.td-page .tdi-course-media{
        aspect-ratio:16/9;
        width:100%;
        border-radius:13px;
        background:linear-gradient(135deg,#062b2b,#0a786b,#0c6d93);
        display:flex;
        align-items:center;
        justify-content:center;
        color:#fff;
        font-weight:900;
        font-size:26px;
        text-decoration:none;
}
.td-page .tdi-course-media span{opacity:.85}
.td-page .tdi-course-media.has-img{color:transparent}
.td-page .tdi-course-body{padding-top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1}
.td-page .tdi-course-body h3{margin:0;font-size:14px;line-height:1.4}
.td-page .tdi-course-body h3 a{color:var(--navy)}
.td-page .tdi-course-body h3 a:hover{color:var(--green)}
.td-page .tdi-course-excerpt{
        margin:0;
        font-size:10px;
        color:var(--muted);
        line-height:1.7;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
}
.td-page .tdi-course-body .price{margin-top:auto}
.td-page .tdi-course-empty{align-items:flex-start;text-align:left}
.td-page .tdi-course-empty .tdi-course-media{width:100%;margin-bottom:14px;font-size:22px;color:#f7bd31}
.td-page .tdi-course-empty h3{margin:0 0 6px}
.td-page .tdi-course-empty p{margin:0 0 14px}

/* Subscription plan cards (placeholder prices kept as-is). */
.td-page .tdi-plan{display:flex;flex-direction:column;align-items:flex-start;transition:transform .22s ease, box-shadow .22s ease}
.td-page .tdi-plan p{margin:8px 0}
.td-page .tdi-plan .price{margin:4px 0 14px}
.td-page .tdi-plan:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(7,31,61,.12)}
.td-page .tdi-plan--popular{border:2px solid var(--green);box-shadow:0 14px 36px rgba(22,166,115,.16)}
.td-page .tdi-plan-note{margin-top:18px}
.td-page .tdi-plan-note a{color:var(--green);font-weight:800;text-decoration:underline;text-underline-offset:2px}
.td-page .tdi-share-grid{align-items:center}

/* ==========================================================================
 * DARK MODE (html[data-theme="dark"] — matches teachdemy-dark-mode.css)
 * ========================================================================== */
html[data-theme="dark"] .td-page .tda-hero{background:linear-gradient(120deg,#0a1f1f 0%,#0d2e2a 55%,#0a3a5e 100%) !important}
html[data-theme="dark"] .td-page .tdi-hero{background:linear-gradient(120deg,#0a1f1f 0%,#0d2e2a 55%,#0a3a5e 100%) !important}
html[data-theme="dark"] .td-page .tda-card,
html[data-theme="dark"] .td-page .tdi-course,
html[data-theme="dark"] .td-page .tdi-plan,
html[data-theme="dark"] .td-page .tdi-course-empty{background:#0d2222 !important;border-color:#1a3030 !important;box-shadow:0 8px 28px rgba(0,0,0,.25) !important}
html[data-theme="dark"] .td-page .tda-card:hover,
html[data-theme="dark"] .td-page .tdi-course:hover,
html[data-theme="dark"] .td-page .tdi-plan:hover{box-shadow:0 16px 40px rgba(0,0,0,.4) !important;border-color:rgba(39,197,139,.4) !important}
html[data-theme="dark"] .td-page .tda-id h3,
html[data-theme="dark"] .td-page .tda-id h3 a,
html[data-theme="dark"] .td-page .tdi-course-body h3,
html[data-theme="dark"] .td-page .tdi-course-body h3 a,
html[data-theme="dark"] .td-page .tdi-course-empty h3,
html[data-theme="dark"] .td-page .tda-empty h3{color:#e8f0ee !important}
html[data-theme="dark"] .td-page .tda-id h3 a:hover,
html[data-theme="dark"] .td-page .tdi-course-body h3 a:hover{color:#27c58b !important}
html[data-theme="dark"] .td-page .tda-chip{background:rgba(39,197,139,.12) !important;border-color:#1d4038 !important;color:#cfe5e2 !important}
html[data-theme="dark"] .td-page .tda-chip--rating{background:rgba(247,189,49,.12) !important;border-color:rgba(247,189,49,.3) !important;color:#f7bd31 !important}
html[data-theme="dark"] .td-page .tda-empty{background:linear-gradient(180deg,#0b2121,#0d2222) !important;border-color:#245c46 !important}
html[data-theme="dark"] .td-page .tda-empty-icon{background:rgba(39,197,139,.12) !important;border-color:#245c46 !important;color:#27c58b !important}
html[data-theme="dark"] .td-page .tdi-social{background:#0d2222 !important;border-color:#1a3030 !important;color:#e8f0ee !important}
html[data-theme="dark"] .td-page .tdi-level{background:rgba(39,197,139,.15) !important;border-color:#245c46 !important;color:#27c58b !important}
html[data-theme="dark"] .td-page .tdi-level--intermediate{background:rgba(39,197,139,.08) !important;border-color:#1d4038 !important;color:#9ab4b0 !important}
html[data-theme="dark"] .td-page .tdi-level--advanced{background:rgba(39,197,139,.18) !important;border-color:#2f6b52 !important;color:#3ad89c !important}
html[data-theme="dark"] .td-page .tdi-level--expert{background:linear-gradient(135deg,#16a673,#27c58b) !important;border-color:#27c58b !important;color:#fff !important}
html[data-theme="dark"] .td-page .tdi-table td{color:#e8f0ee !important}
html[data-theme="dark"] .td-page .td-rating-bar{background:#0a1f1f !important}
html[data-theme="dark"] .td-page .tda-cta,
html[data-theme="dark"] .td-page .tdi-cta{background:linear-gradient(125deg,#0a1f1f,#0d3a30) !important}
html[data-theme="dark"] .td-page .tda-hero .lead{color:#cfe3de !important}
html[data-theme="dark"] .td-page .tdi-plan--popular{border-color:#27c58b !important;box-shadow:0 14px 36px rgba(0,0,0,.35) !important}
html[data-theme="dark"] .td-page .tdi-plan-note a,
html[data-theme="dark"] .td-page .tda-empty-note a{color:#27c58b !important}

/* ==========================================================================
 * RESPONSIVE — 1100 / 900 / 640 (grid 3 → 2 → 1)
 * ========================================================================== */
@media (max-width:1100px){
        .td-page .tda-grid{grid-template-columns:repeat(2,1fr)}
        .td-page .tda-hero h1{font-size:38px}
        .td-page .tdi-hero-info h1{font-size:36px}
}
@media (max-width:900px){
        .td-page .tdi-about-grid{grid-template-columns:1fr}
        .td-page .tda-cta,
        .td-page .tdi-cta{flex-direction:column;align-items:flex-start;padding:28px}
        .td-page .tdi-hero-grid{align-items:flex-start}
        .td-page .tdi-portrait{width:96px;height:96px;font-size:26px}
        .td-page .tda-stats,
        .td-page .tdi-stats{gap:26px}
}
@media (max-width:640px){
        .td-page .tda-grid{grid-template-columns:1fr}
        .td-page .tda-hero .container{padding:42px 0 48px}
        .td-page .tda-hero h1{font-size:31px}
        .td-page .tdi-hero-info h1{font-size:29px}
        .td-page .tda-empty{padding:34px 22px}
        .td-page .tda-empty-actions .btn{width:100%}
        .td-page .tda-cta-actions,
        .td-page .tdi-cta-actions{width:100%}
        .td-page .tda-cta-actions .btn,
        .td-page .tdi-cta-actions .btn{flex:1}
}

/* ==========================================================================
 * ROUND 16 — verified portrait badges, card quick-actions, dynamic
 * filter bar (search + specialty + sort + live count), hero CTAs.
 * ========================================================================== */

/* Verified badge (archive + single): green check chip pinned to the
   bottom-right of the portrait ring. */
.td-page .tda-portrait-wrap,
.td-page .tdi-portrait-wrap{position:relative;flex:none}
.td-page .tda-verified,
.td-page .tdi-verified{
        position:absolute;
        right:-4px;
        bottom:-4px;
        width:22px;
        height:22px;
        border-radius:50%;
        display:grid;
        place-items:center;
        background:linear-gradient(135deg,#16a673,#27c58b);
        color:#fff;
        border:2.5px solid #fff;
        box-shadow:0 4px 10px rgba(22,166,115,.35);
}
.td-page .tdi-verified{
        width:28px;
        height:28px;
        right:-5px;
        bottom:-5px;
        border-width:3px;
}

/* Card quick-actions: View Profile (primary) + 1:1 Support (secondary). */
.td-page .tda-card-actions{
        display:flex;
        gap:8px;
        flex-wrap:wrap;
        margin-top:16px;
        width:100%;
}
.td-page .tda-card-actions .btn{
        flex:1 1 120px;
        text-align:center;
        white-space:nowrap;
}
.td-page .tda-card-actions .tda-card-support{
        background:var(--mint);
        border-color:#cdeede;
        color:#0a6b58;
}
.td-page .tda-card-actions .tda-card-support:hover{
        border-color:var(--green);
        background:#dffbef;
}

/* Dynamic filter bar — search + specialty select + sort select + count. */
.td-page .tda-filterbar{
        display:flex;
        align-items:center;
        gap:10px;
        flex-wrap:wrap;
        margin-bottom:24px;
}
.td-page .tda-filterbar input[type="search"]{
        flex:1 1 220px;
        min-width:200px;
}
.td-page .tda-filterbar select{
        flex:0 1 auto;
        min-width:150px;
}
.td-page .tda-count{
        margin-left:auto;
        font-size:10.5px;
        font-weight:800;
        letter-spacing:.4px;
        text-transform:uppercase;
        color:var(--muted);
        background:var(--mint);
        border:1px solid #d5efe5;
        border-radius:999px;
        padding:7px 13px;
        white-space:nowrap;
}

/* Profile hero action row (Book 1:1 Support + jump to courses). */
.td-page .tdi-hero-actions{
        display:flex;
        gap:10px;
        flex-wrap:wrap;
        margin-top:22px;
}
.td-page .tdi-hero-actions .btn{min-width:170px;justify-content:center}
.td-page .tdi-hero-actions .tdi-hero-courses{
        background:transparent;
        border-color:rgba(255,255,255,.4);
        color:#fff;
}
.td-page .tdi-hero-actions .tdi-hero-courses:hover{
        background:rgba(255,255,255,.12);
        border-color:#fff;
        color:#fff;
}

/* Courses section header row: title/lead + Browse-all button. */
.td-page .tdi-all-courses{white-space:nowrap}

/* Dark mode for the Round-16 additions. */
html[data-theme="dark"] .td-page .tda-verified,
html[data-theme="dark"] .td-page .tdi-verified{border-color:#0d2222;box-shadow:0 4px 10px rgba(0,0,0,.4)}
html[data-theme="dark"] .td-page .tda-card-actions .tda-card-support{
        background:rgba(39,197,139,.12);
        border-color:#1d4038;
        color:#cfe5e2;
}
html[data-theme="dark"] .td-page .tda-count{
        background:rgba(39,197,139,.12);
        border-color:#1d4038;
        color:#cfe5e2;
}

/* Mobile: stack the quick-actions full width, tighten the filter bar. */
@media (max-width:640px){
        .td-page .tda-card-actions{flex-direction:column}
        .td-page .tda-card-actions .btn{width:100%;flex:1 1 auto}
        .td-page .tda-filterbar input[type="search"],
        .td-page .tda-filterbar select{flex:1 1 100%;min-width:0}
        .td-page .tda-count{margin-left:0}
        .td-page .tdi-hero-actions{width:100%}
        .td-page .tdi-hero-actions .btn{width:100%;flex:1 1 auto;min-width:0}
}