/* ── Founders Helper — Tutor Profile Shortcodes ──────────────────────────────
   Styles for [fh_tutor_pengalaman] [fh_tutor_sertifikasi] [fh_tutor_skills]
   [fh_tutor_stats] [fh_tutor_kontak] — follows Ngobrol Yuk design system.
   Fonts inherit from theme (Noto Sans HK headings / Open Sans body).
──────────────────────────────────────────────────────────────────────────── */

/* Pengalaman — timeline list */
.fh-tp-exp-list { display: flex; flex-direction: column; gap: 12px; }
.fh-tp-exp-item {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid #e2e5ea;
    border-radius: 12px;
    transition: border-color .2s;
}
.fh-tp-exp-item:hover { border-color: #00a651; }
.fh-tp-exp-dot {
    width: 10px; height: 10px;
    background: #00a651;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.fh-tp-exp-role  { font-weight: 600; color: #0d1b2a; font-size: .95rem; }
.fh-tp-exp-place { font-size: .85rem; color: #5a6470; }
.fh-tp-exp-year  { font-size: .8rem; color: #9aa3af; margin-top: 2px; }

/* Sertifikasi — list with badge icon */
.fh-tp-cert-list { display: flex; flex-direction: column; gap: 8px; }
.fh-tp-cert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 10px 14px;
}
.fh-tp-cert-icon {
    width: 34px; height: 34px;
    background: #e6f7ef;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00a651;
    flex-shrink: 0;
}
.fh-tp-cert-icon svg { width: 18px; height: 18px; }
.fh-tp-cert-nama   { font-weight: 600; font-size: .9rem; color: #0d1b2a; }
.fh-tp-cert-issuer { font-size: .78rem; color: #9aa3af; }

/* Skills — tag pills */
.fh-tp-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.fh-tp-skill-tag {
    padding: 6px 14px;
    background: #f0f2f4;
    border-radius: 50px;
    font-size: .82rem;
    font-weight: 600;
    color: #5a6470;
}

/* Stats — 3-stat row */
.fh-tp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.fh-tp-stat {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
}
.fh-tp-stat-val {
    display: block;
    font-family: var(--e-global-typography-primary-font-family, inherit);
    font-size: 1.4rem;
    font-weight: 700;
    color: #0d1b2a;
    line-height: 1.2;
}
.fh-tp-stat-lbl {
    font-size: .7rem;
    color: #9aa3af;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Kontak — WA + IG buttons */
.fh-tp-kontak { display: flex; flex-direction: column; gap: 10px; }
.fh-tp-btn-wa,
.fh-tp-btn-ig {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 50px;
    padding: 13px 22px;
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all .2s;
    line-height: 1;
}
.fh-tp-btn-wa { background: #00a651; color: #fff !important; }
.fh-tp-btn-wa:hover { background: #007a3c; transform: translateY(-1px); }
.fh-tp-btn-wa svg { width: 19px; height: 19px; }
.fh-tp-btn-ig {
    background: #fff;
    color: #2c333d !important;
    border: 1.5px solid #e2e5ea;
}
.fh-tp-btn-ig:hover { border-color: #7b1fa2; color: #7b1fa2 !important; }
.fh-tp-btn-ig svg { width: 17px; height: 17px; }

/* Empty state */
.fh-tp-empty {
    padding: 12px 16px;
    background: #f0f2f4;
    border-radius: 8px;
    color: #5a6470;
    font-size: .875rem;
}

@media (max-width: 600px) {
    .fh-tp-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .fh-tp-stat-val { font-size: 1.15rem; }
}

/* ── [fh_tutor_bahasa] — language badges ────────────────────────────────── */
.fh-tp-bahasa {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.fh-tp-bahasa-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
}
.fh-tp-bahasa-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
    opacity: .85;
}
/* Colour per language — soft bg + strong text, matches schedule badges */
.fh-tp-bahasa-badge.fh-lang-english   { background: #e3f2fd; color: #1565c0; }
.fh-tp-bahasa-badge.fh-lang-spanish   { background: #fdecea; color: #c62828; }
.fh-tp-bahasa-badge.fh-lang-mandarin  { background: #fff8e1; color: #b8860b; }
.fh-tp-bahasa-badge.fh-lang-german    { background: #f3e5f5; color: #6a1b9a; }
.fh-tp-bahasa-badge.fh-lang-indonesia { background: #e6f7ef; color: #1b5e20; }
.fh-tp-bahasa-badge.fh-lang-other     { background: #f0f2f4; color: #5a6470; }

/* ── [fh_tutor_gallery] — grid + lightbox (hardcoded, theme-proof) ───────────
   Elemen .fh-tp-gal-item dan tombol lightbox adalah <button>, yang paling
   sering kena style global tema (Hello Elementor: background, border, padding,
   box-shadow, font). Semua direset eksplisit + !important agar konsisten.
──────────────────────────────────────────────────────────────────────────── */
.fh-tp-gallery {
    display: grid !important;
    grid-template-columns: repeat(var(--fh-gal-cols, 3), 1fr) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Reset penuh button → kartu galeri */
.fh-tp-gal-item {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid #e2e5ea !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    background: #f0f2f4 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    font: inherit !important;
    color: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    min-height: 0 !important;
    min-width: 0 !important;
    line-height: normal !important;
    transition: border-color .2s, transform .2s, box-shadow .2s !important;
}
.fh-tp-gal-item:hover,
.fh-tp-gal-item:focus {
    border-color: #00a651 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
    background: #f0f2f4 !important;
    outline: none !important;
}
.fh-tp-gal-item:active {
    transform: translateY(-1px) !important;
}
.fh-tp-gal-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    box-shadow: none !important;
}

/* Play overlay untuk item video */
.fh-tp-gal-play {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(13,27,42,.30) !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: background .2s !important;
}
.fh-tp-gal-play svg {
    width: 46px !important;
    height: 46px !important;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
    transition: transform .2s !important;
}
.fh-tp-gal-item:hover .fh-tp-gal-play { background: rgba(13,27,42,.45) !important; }
.fh-tp-gal-item:hover .fh-tp-gal-play svg { transform: scale(1.12) !important; }

/* ── Lightbox ───────────────────────────────────────────────────────────── */
.fh-tp-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    background: rgba(13,27,42,.92) !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    margin: 0 !important;
}
.fh-tp-lb-content {
    max-width: min(920px, 92vw) !important;
    max-height: 86vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
.fh-tp-lb-content img {
    max-width: 100% !important;
    max-height: 86vh !important;
    width: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.4) !important;
    margin: 0 !important;
}
/* Frame video 9:16 (shorts) yang tetap muat untuk 16:9 */
.fh-tp-lb-video-wrap {
    width: min(420px, 90vw) !important;
    aspect-ratio: 9 / 16 !important;
    max-height: 86vh !important;
    background: #000 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.4) !important;
    margin: 0 !important;
    padding: 0 !important;
}
.fh-tp-lb-video-wrap iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Tombol kontrol lightbox — reset penuh dari tema */
.fh-tp-lb-close,
.fh-tp-lb-prev,
.fh-tp-lb-next {
    position: absolute !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    transition: background .2s !important;
    z-index: 2 !important;
}
.fh-tp-lb-close:hover,
.fh-tp-lb-prev:hover,
.fh-tp-lb-next:hover { background: rgba(255,255,255,.25) !important; }
.fh-tp-lb-close { top: 18px !important; right: 18px !important; font-size: 30px !important; left: auto !important; }
.fh-tp-lb-prev  { left: 18px !important;  top: 50% !important; transform: translateY(-50%) !important; right: auto !important; }
.fh-tp-lb-next  { right: 18px !important; top: 50% !important; transform: translateY(-50%) !important; left: auto !important; }

@media (max-width: 600px) {
    .fh-tp-gallery { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .fh-tp-lb-prev { left: 8px !important; }
    .fh-tp-lb-next { right: 8px !important; }
}