/* ═══════════════════════════════════════════════════════════════════════════
   Teacher Profile Grid – Frontend CSS v5.0
   10 Card Styles: slide_up, zoom, flip_3d, drawer, bloom, accordion,
                   scale_pop, bounce, fade, bottom_sheet
   CHANGES v5:
   - Zoom Enlarge: full portrait image (no circle)
   - Bottom Sheet: larger card height, better image proportions
   - Zoom modal: large header image (not tiny circle)
   - Increased font sizes for better readability
   - Removed hint text CSS
═══════════════════════════════════════════════════════════════════════════ */

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes tpg-fade-in    { from{opacity:0} to{opacity:1} }
@keyframes tpg-zoom-in    { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes tpg-slide-right{ from{transform:translateX(100%)} to{transform:translateX(0)} }
@keyframes tpg-slide-up   { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes tpg-scale-pop  {
  0%{transform:scale(0.3);opacity:0}
  55%{transform:scale(1.06)}
  100%{transform:scale(1);opacity:1}
}
@keyframes tpg-bounce-in  {
  0%{transform:scale(0.3) translateY(80px);opacity:0}
  50%{transform:scale(1.06) translateY(-8px)}
  75%{transform:scale(0.96) translateY(4px)}
  100%{transform:scale(1) translateY(0);opacity:1}
}
@keyframes tpg-bloom-in   {
  from{transform:scale(0);border-radius:50%;opacity:0}
  to{transform:scale(1);border-radius:0;opacity:1}
}
@keyframes tpg-spin        { to{transform:rotate(360deg)} }
@keyframes tpg-pulse-ring  {
  0%{box-shadow:0 0 0 0 rgba(255,255,255,0.4)}
  70%{box-shadow:0 0 0 16px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

/* ── Grid ────────────────────────────────────────────────────────────────── */
.tpg-widget-wrapper { --tpg-accent: #e11d48; }
.spg-grid{ display:grid; gap:28px; margin:32px 0; }
.spg-cols-1{ grid-template-columns:repeat(1,1fr); }
.spg-cols-2{ grid-template-columns:repeat(2,1fr); }
.spg-cols-3{ grid-template-columns:repeat(3,1fr); }
.spg-cols-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .spg-grid{ grid-template-columns:repeat(2,1fr) !important; gap:18px !important; } }
@media(max-width:520px){ .spg-grid{ grid-template-columns:1fr !important; gap:14px !important; } }

/* ── Base Card ───────────────────────────────────────────────────────────── */
.spg-card{
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.spg-card:hover{ transform:translateY(-4px); }

/* ── Shared Typography ───────────────────────────────────────────────────── */
.tpg-name  { margin:0 0 5px; font-size:16px; font-weight:700; line-height:1.3; }
.tpg-desig { margin:0 0 5px; font-size:13px; opacity:.85; line-height:1.4; }
.tpg-empid { font-size:13px; opacity:.65; margin:0; }

/* ── Shared: detail rows ─────────────────────────────────────────────────── */
.tpg-detail-rows { margin:10px 0; display:flex; flex-direction:column; gap:7px; }
.tpg-detail-row  { display:flex; align-items:flex-start; gap:8px; font-size:13.5px; line-height:1.45; }
.tpg-detail-icon { flex-shrink:0; width:18px; text-align:center; }
.tpg-detail-row a{ color:inherit; text-decoration:underline; word-break:break-all; }

/* ── Shared: CV panel button ─────────────────────────────────────────────── */
.tpg-panel-cv{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:12px; padding:9px 18px;
  background:#e11d48; color:#fff;
  border-radius:50px; font-size:13px; font-weight:600;
  text-decoration:none; transition:opacity .2s;
}
.tpg-panel-cv:hover{ opacity:.85; }
.tpg-panel-cv svg{ fill:currentColor; }

/* ── Shared: CV icon on card ─────────────────────────────────────────────── */
.tpg-cv-icon{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:8px; text-decoration:none;
  transition:transform .2s;
}
.tpg-cv-icon:hover{ transform:scale(1.15); }

/* ══════════════════════════════════════════════════════════════════════════
   1. SLIDE UP – Panel slides up over image (DEFAULT)
══════════════════════════════════════════════════════════════════════════ */
.spg-card--slide_up { border-radius:18px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.12); }
.tpg-su-card{
  position:relative; min-height:380px; height:100%;
  overflow:hidden; border-radius:18px;
}
.tpg-su-bg-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transition:transform .5s ease;
}
.spg-card--slide_up:hover .tpg-su-bg-img{ transform:scale(1.04); }
.tpg-su-gradient{
  position:absolute; inset:0;
  background:linear-gradient(to top, #e11d48ee 0%, transparent 100%);
  pointer-events:none;
}
.tpg-su-base{
  position:absolute; bottom:0; left:0; right:0;
  padding:22px 18px 18px;
  transition:transform .4s ease, opacity .4s ease;
  color:#fff; z-index:2;
}
.tpg-su-base .tpg-name   { color:#fff; font-size:17px; }
.tpg-su-base .tpg-desig  { color:rgba(255,255,255,.85); }
.tpg-su-panel{
  position:absolute; inset:0;
  padding:22px 20px;
  overflow-y:auto;
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(0.34,1.12,0.64,1);
  background:linear-gradient(160deg, #e11d48, #c4163d);
  color:#fff; z-index:3; border-radius:18px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.tpg-su-panel.is-open{ transform:translateY(0); }
.tpg-su-base.is-hidden{ transform:translateY(20px); opacity:0; }
.tpg-su-close{
  position:absolute; top:12px; right:14px;
  background:rgba(255,255,255,.2); border:none; color:#fff;
  width:30px; height:30px; border-radius:50%;
  cursor:pointer; font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.tpg-su-close:hover{ background:rgba(255,255,255,.35); }
.tpg-su-panel-photo{
  width:80px; height:80px; border-radius:50%;
  overflow:hidden; margin-bottom:12px;
  border:3px solid rgba(255,255,255,.5);
}
.tpg-su-panel-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.tpg-su-panel .tpg-name  { color:#fff; font-size:17px; }
.tpg-su-panel .tpg-desig { color:rgba(255,255,255,.85); font-size:13px; }
.tpg-su-panel .tpg-detail-rows{ text-align:left; width:100%; color:rgba(255,255,255,.92); }
.tpg-su-panel .tpg-detail-row a{ color:rgba(255,255,255,.9); }

/* ══════════════════════════════════════════════════════════════════════════
   2. ZOOM ENLARGE – Full portrait card, modal zooms in
   (v5: full-width portrait image instead of circle)
══════════════════════════════════════════════════════════════════════════ */
.spg-card--zoom{ border-radius:18px; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.12); }
.tpg-zoom-card{
  background:#fff;
  display:flex; flex-direction:column; align-items:stretch;
  text-align:center;
}
.tpg-zoom-photo-wrap{
  width:100%;
  height:260px; /* default, overridable via Elementor control */
  overflow:hidden;
  flex-shrink:0;
  position:relative;
}
.tpg-zoom-photo-wrap img{
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  display:block;
  transition:transform .35s ease;
}
.spg-card--zoom:hover .tpg-zoom-photo-wrap img{ transform:scale(1.05); }
.tpg-zoom-info{
  padding:16px 18px 20px;
  display:flex; flex-direction:column; align-items:center;
}
.tpg-zoom-card .tpg-name  { color:#1e293b; font-size:16px; }
.tpg-zoom-card .tpg-desig { color:#64748b; font-size:13px; }
.tpg-zoom-card .tpg-empid { color:#94a3b8; font-size:13px; }

/* ══════════════════════════════════════════════════════════════════════════
   3. 3D FLIP – Card flips on click
══════════════════════════════════════════════════════════════════════════ */
.spg-card--flip_3d{
  background:transparent; box-shadow:none; overflow:visible;
  perspective:1000px;
}
.spg-card--flip_3d:hover{ transform:none; }
.tpg-flip-card{ position:relative; min-height:360px; height:100%; }
.tpg-flip-inner{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.4,.2,.2,1);
  border-radius:16px;
}
.tpg-flip-inner.is-flipped{ transform:rotateY(180deg); }
.tpg-flip-front, .tpg-flip-back{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:16px; overflow:hidden;
}
.tpg-flip-front{
  background:#1e293b;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
}
.tpg-flip-front img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.tpg-flip-front-info{
  position:absolute; bottom:0; left:0; right:0;
  padding:22px 18px 18px;
  background:linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
  color:#fff;
}
.tpg-flip-front-info .tpg-name  { color:#fff; font-size:17px; }
.tpg-flip-front-info .tpg-desig { color:rgba(255,255,255,.8); font-size:13px; }
.tpg-flip-back{
  background:linear-gradient(135deg, #6366f1, #4f46e5);
  transform:rotateY(180deg);
  color:#fff; padding:22px 20px;
  display:flex; flex-direction:column;
  box-shadow:0 8px 32px rgba(99,102,241,.3);
  overflow-y:auto;
}
.tpg-flip-close-btn{
  position:absolute; top:12px; right:12px;
  background:rgba(255,255,255,.2); border:none; color:#fff;
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  font-size:13px; display:flex; align-items:center; justify-content:center;
}
.tpg-flip-close-btn:hover{ background:rgba(255,255,255,.35); }
.tpg-flip-back .tpg-name  { color:#fff; font-size:17px; margin-top:8px; }
.tpg-flip-back .tpg-desig { color:rgba(255,255,255,.8); font-size:13px; }
.tpg-flip-back .tpg-detail-rows{ color:rgba(255,255,255,.9); margin-top:12px; }
.tpg-flip-back .tpg-detail-row a{ color:rgba(255,255,255,.85); }

/* ══════════════════════════════════════════════════════════════════════════
   4. SIDE DRAWER – Landscape card, drawer slides from right
══════════════════════════════════════════════════════════════════════════ */
.spg-card--drawer{ border-radius:12px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.08); }
.tpg-drawer-card{
  display:flex; align-items:stretch; gap:0;
  background:#fffbeb; border-left:5px solid #f59e0b;
  min-height:120px; transition:background .2s;
}
.spg-card--drawer:hover .tpg-drawer-card{ background:#fef3c7; }
.tpg-drawer-photo{
  flex-shrink:0; width:100px; overflow:hidden;
}
.tpg-drawer-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.tpg-drawer-info{ flex:1; padding:16px 18px; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.tpg-drawer-info .tpg-name  { color:#78350f; font-size:16px; }
.tpg-drawer-info .tpg-desig { color:#92400e; }
.tpg-drawer-info .tpg-empid { color:#b45309; }

/* ══════════════════════════════════════════════════════════════════════════
   5. BLOOM – Gradient card, fullscreen bloom
══════════════════════════════════════════════════════════════════════════ */
.spg-card--bloom{ border-radius:20px; overflow:hidden; box-shadow:0 8px 28px rgba(14,165,233,.2); }
.tpg-bloom-card{
  background:linear-gradient(135deg, #0ea5e9, #2563eb);
  padding:28px 20px 22px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  min-height:280px; position:relative;
}
.tpg-bloom-photo-wrap{
  width:88px; height:88px; border-radius:50%; overflow:hidden;
  border:3px solid rgba(255,255,255,.35);
  margin-bottom:14px;
  transition:transform .3s ease;
  animation:tpg-pulse-ring 2.5s ease-in-out infinite;
}
.spg-card--bloom:hover .tpg-bloom-photo-wrap{ transform:scale(1.08); }
.tpg-bloom-photo-wrap img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.tpg-bloom-card .tpg-name  { color:#fff; font-size:17px; }
.tpg-bloom-card .tpg-desig { color:rgba(255,255,255,.8); }
.tpg-bloom-card .tpg-empid { color:rgba(255,255,255,.6); }

/* ══════════════════════════════════════════════════════════════════════════
   6. ACCORDION – Expands in place
══════════════════════════════════════════════════════════════════════════ */
.spg-card--accordion{
  border-radius:16px; overflow:visible;
  box-shadow:8px 8px 20px rgba(0,0,0,.08), -4px -4px 14px #fff !important;
  background:transparent;
  cursor:default;
}
.spg-card--accordion:hover{ transform:none; }
.tpg-accord-card{
  background:#e8eaed; border-radius:16px;
  box-shadow:8px 8px 20px #bfc0c3, -6px -6px 16px #fff;
  overflow:hidden;
  transition:box-shadow .3s;
}
.tpg-accord-card.is-expanded{
  box-shadow:4px 4px 12px #bfc0c3, -3px -3px 10px #fff;
}
.tpg-accord-head{
  display:flex; align-items:center; gap:14px;
  padding:16px; cursor:pointer; user-select:none;
}
.tpg-accord-photo{
  flex-shrink:0; width:62px; height:62px; border-radius:50%; overflow:hidden;
  box-shadow:inset 3px 3px 7px #bfc0c3, inset -3px -3px 7px #fff;
}
.tpg-accord-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.tpg-accord-title{ flex:1; min-width:0; }
.tpg-accord-title .tpg-name { color:#475569; font-size:16px; }
.tpg-accord-title .tpg-desig{ color:#64748b; font-size:13px; }
.tpg-accord-chevron{
  flex-shrink:0; font-size:22px; color:#94a3b8;
  transition:transform .35s ease; line-height:1;
}
.tpg-accord-card.is-expanded .tpg-accord-chevron{ transform:rotate(90deg); }
.tpg-accord-body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .4s ease, opacity .3s ease;
  opacity:0;
}
.tpg-accord-card.is-expanded .tpg-accord-body{ grid-template-rows:1fr; opacity:1; }
.tpg-accord-inner{ overflow:hidden; padding:0 16px; }
.tpg-accord-card.is-expanded .tpg-accord-inner{ padding-bottom:16px; }
.tpg-accord-divider{ height:1px; background:#cbd5e1; margin-bottom:12px; }
.tpg-accord-rows .tpg-detail-row{ color:#475569; font-size:13.5px; }
.tpg-accord-rows .tpg-detail-row a{ color:#3b82f6; }

/* ══════════════════════════════════════════════════════════════════════════
   7. SCALE POP – Portrait photo, bouncy pop modal
══════════════════════════════════════════════════════════════════════════ */
.spg-card--scale_pop{ border-radius:18px; overflow:hidden; box-shadow:0 8px 28px rgba(0,0,0,.12); }
.tpg-scale-card{ position:relative; min-height:340px; height:100%; overflow:hidden; }
.tpg-scale-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transition:transform .5s ease; display:block;
}
.spg-card--scale_pop:hover .tpg-scale-bg{ transform:scale(1.06); }
.tpg-scale-gradient{
  position:absolute; inset:0;
  background:linear-gradient(to top, #065f46ee 0%, transparent 55%);
  pointer-events:none;
}
.tpg-scale-info{
  position:absolute; bottom:0; left:0; right:0;
  padding:20px 18px 16px; color:#fff; z-index:2;
}
.tpg-scale-info .tpg-name  { color:#fff; font-size:17px; }
.tpg-scale-info .tpg-desig { color:rgba(255,255,255,.8); }

/* ══════════════════════════════════════════════════════════════════════════
   8. BOUNCE – Minimal/brutalist card, bouncy modal
══════════════════════════════════════════════════════════════════════════ */
.spg-card--bounce{ border-radius:0 !important; border:2px solid #1e293b; box-shadow:none !important; }
.tpg-bounce-card{
  display:flex; flex-direction:column; align-items:center;
  padding:24px 16px 20px; min-height:240px;
  background:#fff; transition:background .2s;
}
.spg-card--bounce:hover .tpg-bounce-card{ background:#1e293b; }
.tpg-bounce-photo{
  width:90px; height:90px; border:2px solid #1e293b; overflow:hidden;
  transition:border-color .2s; margin-bottom:14px;
}
.spg-card--bounce:hover .tpg-bounce-photo{ border-color:#fff; }
.tpg-bounce-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.tpg-bounce-info{ text-align:center; }
.tpg-bounce-card .tpg-name  { color:#1e293b; font-size:15px; font-weight:900; text-transform:uppercase; letter-spacing:-.02em; transition:color .2s; }
.tpg-bounce-card .tpg-desig { color:#64748b; transition:color .2s; }
.tpg-bounce-card .tpg-empid { color:#94a3b8; transition:color .2s; }
.spg-card--bounce:hover .tpg-name,
.spg-card--bounce:hover .tpg-desig,
.spg-card--bounce:hover .tpg-empid{ color:#fff; }

/* ══════════════════════════════════════════════════════════════════════════
   9. FADE MODAL – Soft pink/rose card, slide+fade modal
══════════════════════════════════════════════════════════════════════════ */
.spg-card--fade{ border-radius:24px; overflow:hidden; box-shadow:0 6px 24px rgba(244,63,94,.1); }
.tpg-fade-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:24px 16px 20px;
  background:linear-gradient(to bottom, #fff0f3, #ffe4e6);
  border:1px solid #fecdd3; min-height:290px;
  transition:box-shadow .25s;
}
.spg-card--fade:hover .tpg-fade-card{ box-shadow:0 8px 28px rgba(244,63,94,.15); }
.tpg-fade-photo{
  width:90px; height:120px; border-radius:16px; overflow:hidden;
  box-shadow:0 4px 16px rgba(244,63,94,.2);
  border:3px solid #fda4af;
  margin-bottom:14px;
}
.tpg-fade-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.tpg-fade-card .tpg-name  { color:#9f1239; font-size:16px; }
.tpg-fade-card .tpg-desig { color:#e11d48; }
.tpg-fade-card .tpg-empid { color:#fb7185; }

/* ══════════════════════════════════════════════════════════════════════════
   10. BOTTOM SHEET – Landscape card, mobile-style bottom sheet
   (v5: proper height and image proportions)
══════════════════════════════════════════════════════════════════════════ */
.spg-card--bottom_sheet{ border-radius:14px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.09); }
.tpg-bsheet-card{
  display:flex; background:#fff;
  min-height:140px; /* v5: was 100px – fixed image height */
  transition:box-shadow .25s;
}
.spg-card--bottom_sheet:hover .tpg-bsheet-card{ box-shadow:0 8px 28px rgba(0,0,0,.14); }
.tpg-bsheet-photo{
  flex-shrink:0; width:38%; overflow:hidden;
  min-height:140px; /* match card height */
}
.tpg-bsheet-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.tpg-bsheet-info{
  flex:1; padding:16px 18px;
  display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(90deg, #f8fafc, #fff);
  min-width:0;
}
.tpg-bsheet-info .tpg-name  { color:#1e293b; font-size:16px; }
.tpg-bsheet-info .tpg-desig { color:#64748b; font-size:13px; }
.tpg-bsheet-info .tpg-empid { color:#94a3b8; font-size:13px; }


/* ══════════════════════════════════════════════════════════════════════════
   MODAL SYSTEM – External Popups (used by: zoom, drawer, bloom,
                  scale_pop, bounce, fade, bottom_sheet)
══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay Wrap ─────────────────────────────────────────────────────── */
.tpg-overlay-wrap{
  position:fixed; inset:0; z-index:999999;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.tpg-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.7);
  animation:tpg-fade-in .2s ease forwards;
}

/* ── Spinner ─────────────────────────────────────────────────────────── */
.tpg-loading-wrap{
  position:fixed; inset:0; z-index:999998;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.5);
}
.tpg-spinner{
  width:40px; height:40px; border-radius:50%;
  border:4px solid #f1f5f9; border-top-color:#e11d48;
  animation:tpg-spin 1s linear infinite;
}

/* ── Scroll lock ─────────────────────────────────────────────────────── */
body.tpg-modal-open{ overflow:hidden; }

/* ──────────────────────────────────────────────────────────────────────
   Standard Modal Box (zoom, scale_pop, bounce, fade)
────────────────────────────────────────────────────────────────────── */
.tpg-modal-box{
  position:relative; z-index:1;
  background:#fff; border-radius:20px; overflow:hidden;
  width:100%; max-width:560px;
  max-height:92vh; overflow-y:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.25);
}
/* animation classes injected by JS */
.tpg-modal-box.anim-zoom     { animation:tpg-zoom-in  .4s cubic-bezier(0.34,1.2,0.64,1) forwards; }
.tpg-modal-box.anim-scale    { animation:tpg-scale-pop .4s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.tpg-modal-box.anim-bounce   { animation:tpg-bounce-in .5s cubic-bezier(0.68,-0.55,0.265,1.55) forwards; }
.tpg-modal-box.anim-fade     { animation:tpg-slide-up .4s ease forwards; }

/* ── Default modal header (Bloom, Scale, Bounce, Fade use this) ──────── */
.tpg-modal-header{
  background:linear-gradient(135deg, #14b8a6, #0d9488);
  padding:28px 20px 20px; text-align:center;
  position:relative;
}
.tpg-modal-header img{
  width:110px; height:110px; border-radius:50%;
  object-fit:cover; object-position:top center;
  border:4px solid rgba(255,255,255,.4);
  display:block; margin:0 auto 14px;
}
.tpg-modal-name{ color:#fff; font-size:21px; font-weight:700; margin:0 0 4px; }
.tpg-modal-desig{ color:rgba(255,255,255,.85); font-size:14px; margin:0; }
.tpg-modal-empid-badge{
  display:inline-block; margin-top:8px; padding:3px 12px;
  background:rgba(255,255,255,.2); border-radius:50px;
  color:#fff; font-size:13px;
}
.tpg-modal-close{
  position:absolute; top:14px; right:14px;
  background:rgba(255,255,255,.2); border:none; color:#fff;
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.tpg-modal-close:hover{ background:rgba(255,255,255,.35); }
.tpg-modal-body{ padding:20px; }
.tpg-modal-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
.tpg-modal-grid-cell{
  background:#f8fafc; border-radius:12px; padding:12px 14px;
  display:flex; align-items:center; gap:10px;
}
.tpg-modal-grid-cell.tpg-modal-full{ grid-column:1/-1; }
.tpg-modal-icon-bg{
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  background:rgba(20,184,166,.12); color:#14b8a6;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.tpg-modal-cell-label{ font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
.tpg-modal-cell-value{ font-size:13.5px; color:#334155; font-weight:500; word-break:break-word; }
.tpg-modal-cell-value a{ color:#334155; text-decoration:underline; }
.tpg-modal-cv-btn{
  display:flex; align-items:center; gap:8px; justify-content:center;
  margin:16px 0 0; padding:12px 20px;
  background:#e11d48; color:#fff; border-radius:50px;
  text-decoration:none; font-size:14px; font-weight:600;
  transition:opacity .2s;
}
.tpg-modal-cv-btn:hover{ opacity:.85; }

/* ── Zoom modal: full-width portrait header image ──────────────────────── */
.tpg-modal-box.style-zoom .tpg-modal-header{
  padding:0 0 20px 0;
  text-align:center;
}
.tpg-modal-box.style-zoom .tpg-modal-header img{
  width:100%; height:280px; max-height:55vw;
  border-radius:0; margin:0 0 16px 0;
  border:none;
  object-fit:cover; object-position:top center;
}
.tpg-modal-box.style-zoom .tpg-modal-close{
  position:absolute; top:12px; right:12px;
}

/* Bounce modal: dark header variant */
.tpg-modal-box.style-bounce .tpg-modal-header{
  background:#1e293b;
  display:flex; align-items:center; gap:16px;
  padding:20px; text-align:left;
}
.tpg-modal-box.style-bounce .tpg-modal-header img{
  width:76px; height:76px; margin:0; flex-shrink:0; border:2px solid #fff;
}
.tpg-modal-box.style-bounce .tpg-modal-header-text{ flex:1; }
.tpg-modal-box.style-bounce .tpg-modal-body{ padding:20px; }

/* Fade modal: soft pink variant */
.tpg-modal-box.style-fade .tpg-modal-header{
  background:linear-gradient(to bottom, #fdf2f4, #fce7f3); color:#1e293b;
  padding-top:36px;
}
.tpg-modal-box.style-fade .tpg-modal-header img{
  border-radius:16px; border-color:#fda4af; width:120px; height:150px;
}
.tpg-modal-box.style-fade .tpg-modal-name { color:#9f1239; }
.tpg-modal-box.style-fade .tpg-modal-desig{ color:#e11d48; }
.tpg-modal-box.style-fade .tpg-modal-empid-badge{ background:#fda4af55; color:#9f1239; }
.tpg-modal-box.style-fade .tpg-modal-close{ background:#fda4af55; color:#9f1239; }

/* ──────────────────────────────────────────────────────────────────────
   Side Drawer Popup
────────────────────────────────────────────────────────────────────── */
.tpg-drawer-overlay{
  position:fixed; inset:0; z-index:999999;
}
.tpg-drawer-overlay .tpg-modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.5);
  animation:tpg-fade-in .25s ease forwards;
}
.tpg-drawer-wrap{
  position:absolute; top:0; right:0; bottom:0;
  width:100%; max-width:360px;
  display:flex; flex-direction:column;
  box-shadow:-8px 0 40px rgba(0,0,0,.2);
  animation:tpg-slide-right .3s ease forwards;
  overflow:hidden;
}
.tpg-drawer-header{
  background:linear-gradient(135deg, #f59e0b, #d97706);
  padding:28px 20px 22px; text-align:center; position:relative;
}
.tpg-drawer-header img{
  width:100px; height:130px; border-radius:12px; object-fit:cover; object-position:top center;
  border:3px solid rgba(255,255,255,.4); display:block; margin:0 auto 14px;
}
.tpg-drawer-name  { color:#fff; font-size:19px; font-weight:700; margin:0 0 4px; }
.tpg-drawer-desig { color:rgba(255,255,255,.85); font-size:13px; margin:0; }
.tpg-drawer-close{
  position:absolute; top:14px; right:14px;
  background:rgba(255,255,255,.2); border:none; color:#fff;
  width:30px; height:30px; border-radius:50%; cursor:pointer;
  font-size:14px; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.tpg-drawer-close:hover{ background:rgba(255,255,255,.35); }
.tpg-drawer-body{
  flex:1; background:#fff; padding:20px; overflow-y:auto;
}
.tpg-drawer-body .tpg-detail-rows{ color:#475569; }
.tpg-drawer-body .tpg-detail-row { padding:10px 0; border-bottom:1px solid #f1f5f9; font-size:13.5px; }
.tpg-drawer-body .tpg-detail-row:last-child{ border:none; }
.tpg-drawer-body .tpg-detail-row a{ color:#3b82f6; }

/* ──────────────────────────────────────────────────────────────────────
   Bloom Fullscreen Popup
────────────────────────────────────────────────────────────────────── */
.tpg-bloom-overlay{
  position:fixed; inset:0; z-index:999999;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:tpg-fade-in .3s ease forwards;
}
.tpg-bloom-modal-bg{
  position:absolute; inset:0;
  background:linear-gradient(135deg, #0ea5e9, #1d4ed8);
  animation:tpg-bloom-in .5s ease-out forwards;
}
.tpg-bloom-modal-content{
  position:relative; z-index:1; text-align:center;
  max-width:520px; width:100%; max-height:92vh; overflow-y:auto;
}
.tpg-bloom-close{
  position:absolute; top:-8px; right:0;
  background:rgba(255,255,255,.2); border:none; color:#fff;
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  font-size:16px; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.tpg-bloom-close:hover{ background:rgba(255,255,255,.35); }
.tpg-bloom-photo{
  width:130px; height:130px; border-radius:50%; overflow:hidden;
  border:4px solid rgba(255,255,255,.35); display:block; margin:32px auto 16px;
  animation:tpg-pulse-ring 2.5s ease-in-out infinite;
}
.tpg-bloom-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.tpg-bloom-name  { color:#fff; font-size:24px; font-weight:700; margin:0 0 4px; }
.tpg-bloom-desig { color:rgba(255,255,255,.8); font-size:16px; margin:0 0 20px; }
.tpg-bloom-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
  text-align:left; max-width:420px; margin:0 auto;
}
.tpg-bloom-grid-cell{
  background:rgba(255,255,255,.12); backdrop-filter:blur(8px);
  border-radius:14px; padding:14px;
}
.tpg-bloom-grid-cell.tpg-bloom-full{ grid-column:1/-1; }
.tpg-bloom-cell-label{ font-size:11px; color:rgba(255,255,255,.7); display:block; margin-bottom:4px; }
.tpg-bloom-cell-value{ color:#fff; font-size:13.5px; font-weight:500; word-break:break-word; }
.tpg-bloom-cell-value a{ color:rgba(255,255,255,.9); text-decoration:underline; }

/* ──────────────────────────────────────────────────────────────────────
   Bottom Sheet Popup
────────────────────────────────────────────────────────────────────── */
.tpg-bsheet-overlay{
  position:fixed; inset:0; z-index:999999;
}
.tpg-bsheet-overlay .tpg-modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.5);
  animation:tpg-fade-in .2s ease forwards;
}
.tpg-bsheet-content{
  position:absolute; bottom:0; left:0; right:0;
  background:#fff; border-radius:24px 24px 0 0;
  max-height:85vh; overflow-y:auto;
  animation:tpg-slide-up .35s ease forwards;
  box-shadow:0 -8px 40px rgba(0,0,0,.15);
}
.tpg-bsheet-handle{
  display:flex; justify-content:center; padding:14px 0 8px;
  position:sticky; top:0; background:#fff; z-index:1;
}
.tpg-bsheet-handle-bar{
  width:48px; height:5px; border-radius:10px; background:#e2e8f0;
}
.tpg-bsheet-inner{ padding:0 20px 32px; }
.tpg-bsheet-top{
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
}
.tpg-bsheet-top img{
  width:80px; height:100px; border-radius:12px; object-fit:cover; object-position:top center;
  flex-shrink:0; box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.tpg-bsheet-top-info{ flex:1; min-width:0; }
.tpg-bsheet-name  { color:#1e293b; font-size:19px; font-weight:700; margin:0 0 4px; }
.tpg-bsheet-desig { color:#64748b; font-size:14px; margin:0; }
.tpg-bsheet-close-btn{
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  background:#f1f5f9; border:none; cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center; color:#475569;
  transition:background .2s;
}
.tpg-bsheet-close-btn:hover{ background:#e2e8f0; }
.tpg-bsheet-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px;
}
.tpg-bsheet-cell{
  background:#f8fafc; border-radius:12px; padding:12px 14px;
}
.tpg-bsheet-cell.tpg-bsheet-full{ grid-column:1/-1; }
.tpg-bsheet-cell-label{ font-size:11px; color:#94a3b8; margin-bottom:3px; display:block; }
.tpg-bsheet-cell-value{ font-size:13.5px; color:#334155; font-weight:500; word-break:break-word; }
.tpg-bsheet-cell-value a{ color:#334155; text-decoration:underline; }
.tpg-bsheet-contact-btn{
  display:block; width:100%; padding:14px;
  background:#1e293b; color:#fff; border-radius:14px;
  text-align:center; font-size:14px; font-weight:600;
  text-decoration:none; border:none; cursor:pointer;
  transition:opacity .2s;
}
.tpg-bsheet-contact-btn:hover{ opacity:.85; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE – Popups
══════════════════════════════════════════════════════════════════════════ */
@media(max-width:600px){
  .tpg-modal-box{ max-width:100%; border-radius:20px 20px 0 0; position:absolute; bottom:0; }
  .tpg-overlay-wrap{ align-items:flex-end; padding:0; }
  .tpg-modal-box.anim-zoom, .tpg-modal-box.anim-scale,
  .tpg-modal-box.anim-bounce, .tpg-modal-box.anim-fade{
    animation:tpg-slide-up .35s ease forwards;
  }
  .tpg-modal-box.style-zoom .tpg-modal-header img{
    height:220px; max-height:50vw;
  }
  .tpg-modal-grid{ grid-template-columns:1fr; }
  .tpg-modal-grid-cell.tpg-modal-full{ grid-column:1; }

  .tpg-drawer-wrap{ max-width:100%; }

  .tpg-bloom-modal-content{ padding:0 12px; }
  .tpg-bloom-grid{ grid-template-columns:1fr; }
  .tpg-bloom-grid-cell.tpg-bloom-full{ grid-column:1; }

  .tpg-bsheet-grid{ grid-template-columns:1fr; }
  .tpg-bsheet-cell.tpg-bsheet-full{ grid-column:1; }

  /* Card responsive tweaks */
  .tpg-su-card    { min-height:300px; }
  .tpg-flip-card  { min-height:300px; }
  .tpg-scale-card { min-height:280px; }
  .tpg-drawer-card{ flex-wrap:wrap; }
  .tpg-drawer-photo{ width:100%; height:180px; }
  .tpg-bsheet-card { flex-direction:column; min-height:auto; }
  .tpg-bsheet-photo{ width:100%; height:200px; min-height:200px; }
  .tpg-bloom-card { min-height:220px; }
  .tpg-fade-card  { min-height:250px; }
  .tpg-zoom-photo-wrap{ height:220px; }
}