/* ============================================================
   JP ROBOTIC — PORTFOLIO PAGE (v2 / streamlined)

   Changed from the original:
   - Removed the html[data-theme] variable block. It was the
     third separate definition of --bg/--bg2/--text/--heading/
     --muted/--border/--surface2, with values that drifted
     slightly from the canonical ones in 00-tokens.css (e.g.
     --muted was #8a94a8 here vs #6b7a92 everywhere else), so the
     portfolio page could render with visibly different card/
     border colors than the rest of the site. All variables now
     come from 00-tokens.css.
   - Hardcoded #0099e6 swapped for var(--blue).
   - The active-tab color/background is now handled purely by the
     ".active" class below — Portfolio.js (v2) no longer sets
     matching inline styles in JS, since CSS already !important's
     that color and the JS version was doing nothing but adding
     dead weight.
   ============================================================ */

body, html { overflow-x: hidden; width: 100%; margin: 0; }
body, .jpr-section { background-color: var(--bg) !important; transition: background-color 0.3s ease; }

/* Status badges */
body .pf-media .status-badge {
  position: absolute !important;
  top: 25px !important;
  right: 15px !important;
  z-index: 100 !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}
body .status-live     { background-color: #2ecc71 !important; }
body .status-draft    { background-color: #e67e22 !important; }
body .status-concept  { background-color: #3498db !important; }
body .status-updates  { background-color: #9b59b6 !important; }
body .status-headline { background-color: #1abc9c !important; }

/* Grid & tabs */
.jpr-portfolio-tabs { border: 1px solid var(--border); width: fit-content; background: var(--surface2); margin-bottom: 2rem; padding: 0; display: flex; flex-wrap: wrap; }
.jpr-portfolio-tabs .nav-link { background: transparent; color: var(--muted); border: none; border-radius: 0; border-left: 1px solid var(--border); padding: 12px 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: background .2s ease, color .2s ease; }
.jpr-portfolio-tabs .nav-link.active { background: var(--blue) !important; color: #ffffff !important; }

.pf-card-wrapper { background: var(--surface2); border: 1px solid var(--border); padding: 10px; border-radius: 8px; height: 100%; display: flex; flex-direction: column; }
.pf-media { position: relative !important; display: block !important; margin-bottom: 15px; border-radius: 4px; overflow: hidden; height: 180px; }
.pf-img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.pf-title a { color: var(--heading) !important; font-weight: 700; text-decoration: none; font-size: 16px; margin-top: 5px; }
.pf-meta a { color: var(--text) !important; font-size: 12px; text-decoration: none; opacity: 0.8; }

.tab-pane .row { display: flex !important; flex-wrap: wrap !important; width: 100% !important; }