/*
Theme Name: TrimBoss Portfolio
Theme URI: https://trimstudiohq.com
Author: TrimBoss
Author URI: https://trimstudiohq.com
Description: Post-production studio portfolio theme for TrimStudio — video editing, motion design, and VFX. Manage everything from wp-admin.
Version: 2.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: trimboss-portfolio
*/

:root{
  --bg: #0B0E13;
  --bg-panel: #10141B;
  --surface: #161B23;
  --line: #232933;
  --text: #FFFFFF;
  --text-muted: #8B95A1;
  --accent: #C6FF4A;
  --accent-dim: #6E7D2E;
  --diamond-red: #E5473A;
  --diamond-yellow: #F5C518;
  --diamond-blue: #33B4E8;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1200px; margin:0 auto; padding:0 clamp(20px, 5vw, 32px);}
.eyebrow{
  color:var(--accent); font-size:0.78rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; margin-bottom:12px; display:block;
}
.page-top{ padding-top:clamp(130px, 22vw, 170px); }
h1,h2,h3{font-family:'Montserrat', sans-serif; font-weight:800; letter-spacing:-0.01em; text-transform:uppercase;}

/* ---------- Header ---------- */
header.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(11,14,19,0.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo-img{height:34px; width:auto;}
.logo-text{font-family:'Montserrat', sans-serif; font-weight:800; font-size:1.1rem; letter-spacing:0.02em;}
.logo-text span{font-weight:400;}
.navlinks{display:flex; gap:34px; font-size:0.9rem; font-weight:500; list-style:none;}
.navlinks a{color:var(--text);}
.navlinks a:hover{color:var(--accent);}
.btn-pill{
  background:var(--accent); color:#0B0E13; padding:12px 24px; font-weight:700;
  border-radius:999px; font-size:0.88rem; display:inline-flex; align-items:center; gap:8px;
}
.btn-pill:hover{background:#D7FF7A;}
.btn-outline{
  border:1px solid var(--line); color:var(--text); padding:12px 24px;
  border-radius:999px; font-size:0.88rem; display:inline-flex; align-items:center; gap:8px;
}
.btn-outline:hover{border-color:var(--accent); color:var(--accent);}
.mini-play{
  width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent;
  border-left:8px solid currentColor;
}

/* ---------- Hero ---------- */
.hero{ padding:clamp(130px, 22vw, 170px) 0 clamp(56px, 10vw, 100px); display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(32px, 6vw, 56px); align-items:center; }
.hero h1{ font-size:3.1rem; line-height:1.08; margin-bottom:22px; }
.hero h1 .accent-line{color:var(--accent);}
.hero p.lede{ color:var(--text-muted); font-size:1.02rem; max-width:44ch; margin-bottom:22px; }
.tag-line{ color:var(--text-muted); font-size:0.8rem; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; margin-bottom:32px; }
.tag-line span:not(:last-child)::after{content:' | '; color:var(--line);}
.diamonds{display:flex; gap:6px; margin-bottom:18px;}
.diamonds i{width:12px; height:12px; transform:rotate(45deg); display:inline-block;}
.diamonds i:nth-child(1){background:var(--diamond-red);}
.diamonds i:nth-child(2){background:var(--diamond-yellow);}
.diamonds i:nth-child(3){background:var(--diamond-blue);}

.hero-media{
  position:relative; aspect-ratio:4/5; background:var(--surface) center/cover no-repeat;
  border-radius:16px; overflow:hidden; border:1px solid var(--line);
}
.hero-media .caption{
  position:absolute; top:20px; right:24px; font-family:'Montserrat',sans-serif; font-style:italic;
  color:var(--text); font-size:0.95rem; text-align:right; max-width:10ch;
}
.hero-media .placeholder-note{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:0.85rem; text-align:center; padding:24px;
}

/* ---------- Section shell ---------- */
section{padding:clamp(48px, 10vw, 96px) 0;}
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:clamp(28px, 6vw, 48px); gap:24px; flex-wrap:wrap; }
.section-head h2{font-size:2rem;}
.section-head .head-link{color:var(--text-muted); font-size:0.9rem; font-weight:500;}
.section-head .head-link:hover{color:var(--accent);}
.panel{background:var(--bg-panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* ---------- Services ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; }
.service-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.service-card .thumb{ aspect-ratio:4/3; background:linear-gradient(135deg,#1c222c,#0f131a); }
.service-card .body{padding:22px;}
.service-card h3{ font-size:1rem; margin-bottom:8px; }
.service-card p{ color:var(--text-muted); font-size:0.88rem; margin-bottom:14px; }
.service-card .learn{ color:var(--accent); font-size:0.85rem; font-weight:600; }

/* ---------- Filter pills ---------- */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.filter-pill{
  border:1px solid var(--line); color:var(--text-muted); padding:8px 18px;
  border-radius:999px; font-size:0.82rem; font-weight:600; cursor:pointer; background:transparent;
}
.filter-pill.active, .filter-pill:hover{ background:var(--accent); color:#0B0E13; border-color:var(--accent); }

/* ---------- Project grid ---------- */
.project-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.project-card{ cursor:pointer; }
.project-thumb{
  aspect-ratio:4/3; background:var(--surface) center/cover no-repeat; border:1px solid var(--line);
  border-radius:12px; margin-bottom:12px; position:relative; overflow:hidden;
}
.project-thumb .overlay{ position:absolute; inset:0; background:rgba(11,14,19,0.4); opacity:0;
  display:flex; align-items:center; justify-content:center; transition:opacity 0.2s; }
.project-card:hover .overlay{opacity:1;}
.project-thumb .play-circle{
  width:42px; height:42px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center; color:#0B0E13;
}
.project-card .title{font-weight:700; font-size:0.95rem;}
.project-card .cat{color:var(--text-muted); font-size:0.8rem;}
.project-empty{ color:var(--text-muted); font-style:italic; font-size:0.9rem; grid-column:1/-1; }
.view-all-wrap{text-align:center; margin-top:44px;}

/* ---------- Showreel ---------- */
.showreel{ position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line);
  background:var(--surface) center/cover no-repeat; min-height:420px; display:flex; align-items:flex-end; }
.showreel iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.showreel-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.3fr 0.7fr;
  gap:clamp(20px, 5vw, 40px); padding:clamp(24px, 6vw, 48px); width:100%; background:linear-gradient(0deg, rgba(11,14,19,0.9), rgba(11,14,19,0.2)); }
.showreel h2{font-size:2rem; margin-bottom:14px;}
.showreel p{color:var(--text-muted); max-width:44ch; margin-bottom:24px;}
.showreel-play{ display:inline-flex; align-items:center; gap:14px; font-weight:700; cursor:pointer; background:none; border:0; color:var(--text); }
.showreel-play .circle{ width:52px; height:52px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center; color:#0B0E13; flex-shrink:0; }
.showreel-list{ list-style:none; display:flex; flex-direction:column; gap:14px; justify-content:center; }
.showreel-list li{ color:var(--text-muted); font-size:0.9rem; font-weight:600; }
.showreel-list li span{color:var(--accent); margin-right:10px;}

/* ---------- Why work with me ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; }
.why-item .icon{
  width:44px; height:44px; border-radius:10px; background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--accent); font-size:1.2rem;
}
.why-item h3{ font-size:0.95rem; margin-bottom:8px; }
.why-item p{ color:var(--text-muted); font-size:0.85rem; }

/* ---------- CTA ---------- */
.cta-banner{
  border-radius:20px; overflow:hidden; position:relative; text-align:center;
  padding:clamp(48px, 10vw, 90px) clamp(20px, 6vw, 32px); background:var(--surface) center/cover no-repeat;
}
.cta-banner::before{ content:''; position:absolute; inset:0; background:rgba(11,14,19,0.65); }
.cta-banner .inner{position:relative; z-index:1;}
.cta-banner h2{font-size:2.2rem; margin-bottom:12px;}
.cta-banner p{color:var(--text-muted); margin-bottom:28px;}

/* ---------- Footer ---------- */
footer.site-footer{ padding:clamp(32px, 8vw, 56px) 0 clamp(20px, 4vw, 32px); border-top:1px solid var(--line); }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:clamp(24px, 5vw, 40px); flex-wrap:wrap; gap:24px;}
.footer-nav{ display:flex; gap:26px; list-style:none; font-size:0.88rem; color:var(--text-muted); }
.footer-nav a:hover{color:var(--accent);}
.footer-social{display:flex; gap:16px; font-size:0.85rem; color:var(--text-muted);}
.footer-social a:hover{color:var(--accent);}
.footer-bottom{ display:flex; justify-content:space-between; color:var(--text-muted); font-size:0.8rem;
  border-top:1px solid var(--line); padding-top:24px; flex-wrap:wrap; gap:8px;}

/* ---------- Process strip ---------- */
.process-grid{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:16px; align-items:center; margin-bottom:64px; }
.process-img{ aspect-ratio:4/3; background-size:cover; background-position:center; border-radius:12px; border:1px solid var(--line); margin-bottom:10px; background-color:var(--surface); }
.process-label{ text-align:center; color:var(--text-muted); font-size:0.8rem; font-weight:600; text-transform:uppercase; }
.process-arrow{ color:var(--accent); font-size:1.4rem; text-align:center; }

/* ---------- About page ---------- */
.about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(28px, 6vw, 56px); align-items:center; margin-bottom:clamp(40px, 8vw, 80px); }

/* ---------- Project detail page ---------- */
.project-detail-grid{ display:grid; grid-template-columns:1.4fr 0.6fr; gap:clamp(28px, 6vw, 56px); margin-bottom:clamp(36px, 8vw, 64px); }

/* ---------- Pagination ---------- */
.nav-links{ display:flex; gap:12px; justify-content:center; }
.nav-links .page-numbers{
  border:1px solid var(--line); color:var(--text-muted); padding:8px 16px;
  border-radius:8px; font-size:0.85rem;
}
.nav-links .page-numbers.current{ background:var(--accent); color:#0B0E13; border-color:var(--accent); }
.nav-links a.page-numbers:hover{ border-color:var(--accent); color:var(--accent); }

@media (max-width: 900px){
  .hero{grid-template-columns:1fr;}
  .hero h1{font-size:2.3rem;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .project-grid{grid-template-columns:1fr 1fr;}
  .why-grid{grid-template-columns:1fr 1fr;}
  .showreel-inner{grid-template-columns:1fr;}
  .navlinks{display:none;}
  .about-grid{grid-template-columns:1fr;}
  .project-detail-grid{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr; gap:16px;}
  .process-arrow{transform:rotate(90deg);}
  .footer-top{gap:20px;}
}
@media (max-width:560px){
  .services-grid{grid-template-columns:1fr;}
  .project-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .service-card .body{padding:18px;}
  .footer-nav, .footer-social{gap:14px; flex-wrap:wrap;}
  .footer-bottom{gap:6px;}
  .contact-link{padding:12px 0;}
  section{padding-top:clamp(40px, 12vw, 56px); padding-bottom:clamp(40px, 12vw, 56px);}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }