/* ═══════════════════════════════════════════
   SlingSoft — Portfolio Page Styles
   ═══════════════════════════════════════════ */

/* ── Page Hero ── */
.page-hero {
  position:relative; padding:160px 0 100px;
  background:linear-gradient(135deg, var(--blue-deeper) 0%, var(--blue-dark) 40%, var(--blue) 100%);
  overflow:hidden; text-align:center;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:url('assets/images/tech-pattern.png') center/cover;
  opacity:.08;
}
.page-hero .container { position:relative; z-index:2; }
.page-hero h1 { font-size:3.2rem; color:#fff; font-weight:800; margin-bottom:16px; }
.page-hero h1 .highlight { color:var(--gold); }
.page-hero p { font-size:1.1rem; color:rgba(255,255,255,.65); max-width:600px; margin:0 auto 28px; }
.breadcrumb {
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:.85rem; color:rgba(255,255,255,.5); margin-bottom:24px;
}
.breadcrumb a { color:var(--gold); transition:var(--transition); }
.breadcrumb a:hover { color:var(--gold-light); }

/* ── Search Bar ── */
.portfolio-search {
  max-width:480px; margin:0 auto 28px; position:relative;
}
.portfolio-search input {
  width:100%; padding:14px 20px 14px 48px;
  border-radius:50px; border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08); backdrop-filter:blur(10px);
  color:#fff; font-family:'Inter',sans-serif; font-size:.9rem;
  outline:none; transition:var(--transition);
}
.portfolio-search input::placeholder { color:rgba(255,255,255,.4); }
.portfolio-search input:focus {
  border-color:var(--gold); background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(255,189,89,.15);
}
.portfolio-search .search-icon {
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  color:rgba(255,255,255,.4); font-size:.9rem; pointer-events:none;
}
.portfolio-search .search-clear {
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:rgba(255,255,255,.4); font-size:.8rem; cursor:pointer;
  background:none; border:none; display:none; transition:var(--transition);
}
.portfolio-search .search-clear:hover { color:var(--gold); }
.portfolio-search .search-clear.visible { display:block; }

/* ── Filter Tabs ── */
.portfolio-filters {
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
}
.filter-btn {
  padding:10px 24px; border-radius:50px; border:none;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.7);
  font-family:'Inter',sans-serif; font-size:.85rem; font-weight:600;
  cursor:pointer; transition:var(--transition);
  border:1px solid rgba(255,255,255,.1);
}
.filter-btn:hover { background:rgba(255,189,89,.15); color:var(--gold); border-color:rgba(255,189,89,.3); }
.filter-btn.active {
  background:var(--gold); color:var(--blue-dark);
  border-color:var(--gold); box-shadow:0 4px 20px rgba(255,189,89,.3);
}

/* ── Results count ── */
.results-info {
  text-align:center; padding:16px 0 0;
  font-size:.82rem; color:rgba(255,255,255,.45);
}
.results-info span { color:var(--gold); font-weight:700; }

/* ── Stats Bar ── */
.portfolio-stats-bar {
  background:#fff; border-bottom:1px solid var(--gray-100);
  padding:32px 0;
}
.stats-bar-inner {
  display:flex; justify-content:center; gap:64px;
}
.stats-bar-item { text-align:center; }
.stats-bar-item h3 {
  font-size:2.2rem; font-weight:800;
  background:linear-gradient(135deg, var(--blue), var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.stats-bar-item p { font-size:.78rem; color:var(--gray-600); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; }

/* ── Portfolio Grid (Full page) ── */
.portfolio-page-section { padding:80px 0 60px; background:var(--gray-50); }

.portfolio-masonry {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}

/* ── No Results ── */
.no-results {
  grid-column:1 / -1; text-align:center; padding:80px 20px;
  display:none;
}
.no-results i { font-size:3rem; color:var(--gray-200); margin-bottom:16px; }
.no-results h3 { font-size:1.3rem; color:var(--gray-600); margin-bottom:8px; }
.no-results p { font-size:.9rem; color:var(--gray-600); }

/* ── Enhanced Portfolio Card ── */
.pf-card {
  background:#fff; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--gray-100);
  transition:var(--transition); position:relative;
}
.pf-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-lg); border-color:transparent; }

.pf-card.featured {
  grid-column: span 2;
}
.pf-card.featured .pf-thumb { height:360px; }

.pf-thumb {
  height:260px; overflow:hidden; position:relative;
}
.pf-thumb img { width:100%; height:100%; object-fit:cover; transition:var(--transition); }
.pf-card:hover .pf-thumb img { transform:scale(1.06); }

.pf-thumb-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,29,66,.85) 0%, rgba(12,29,66,.2) 40%, transparent 60%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px; opacity:0; transition:var(--transition);
}
.pf-card:hover .pf-thumb-overlay { opacity:1; }

.pf-thumb-overlay .pf-tags { display:flex; gap:6px; margin-bottom:12px; }
.pf-tag {
  padding:4px 14px; border-radius:50px; font-size:.7rem;
  font-weight:600; background:var(--gold); color:var(--blue-dark);
}
.pf-tag.outline {
  background:rgba(255,255,255,.15); color:#fff;
  border:1px solid rgba(255,255,255,.3);
}
.pf-thumb-overlay .pf-links { display:flex; gap:10px; }
.pf-link {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.15); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.85rem; cursor:pointer;
  transition:var(--transition);
}
.pf-link:hover { background:var(--gold); color:var(--blue-dark); border-color:var(--gold); }

.pf-body { padding:28px; }
.pf-category {
  font-size:.7rem; text-transform:uppercase; letter-spacing:1.5px;
  font-weight:700; color:var(--gold-dark); margin-bottom:8px;
}
.pf-body h3 {
  font-size:1.15rem; color:var(--blue-dark); margin-bottom:8px; font-weight:700;
}
.pf-body h3 a { transition:var(--transition); }
.pf-body h3 a:hover { color:var(--blue-light); }
.pf-body p { font-size:.88rem; color:var(--gray-600); margin-bottom:16px; line-height:1.6; }

.pf-meta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.pf-meta-item {
  display:flex; align-items:center; gap:6px;
  font-size:.78rem; color:var(--gray-600);
}
.pf-meta-item i { color:var(--blue); font-size:.7rem; }

.pf-tech-stack { display:flex; gap:6px; flex-wrap:wrap; margin-top:16px; padding-top:16px; border-top:1px solid var(--gray-100); }
.pf-tech {
  padding:4px 12px; border-radius:6px; font-size:.72rem;
  background:rgba(30,72,153,.06); color:var(--blue);
  font-weight:600; border:1px solid rgba(30,72,153,.1);
}

/* ── Pagination ── */
.pagination {
  display:flex; justify-content:center; align-items:center;
  gap:8px; padding:48px 0 0;
}
.page-btn {
  width:42px; height:42px; border-radius:10px;
  border:1px solid var(--gray-200); background:#fff;
  color:var(--gray-600); font-family:'Inter',sans-serif;
  font-size:.88rem; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition);
}
.page-btn:hover { border-color:var(--blue); color:var(--blue); background:rgba(30,72,153,.04); }
.page-btn.active {
  background:var(--blue); color:#fff; border-color:var(--blue);
  box-shadow:0 4px 16px rgba(30,72,153,.25);
}
.page-btn.disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }
.page-btn.arrow { font-size:.75rem; }
.page-info {
  font-size:.8rem; color:var(--gray-600); margin:0 8px;
}

/* ── Case Study CTA ── */
.case-study-cta {
  padding:80px 0;
  background:linear-gradient(135deg, var(--blue), var(--blue-dark));
  text-align:center; position:relative; overflow:hidden;
}
.case-study-cta::before {
  content:''; position:absolute; width:600px; height:600px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,189,89,.08), transparent 70%);
  top:-250px; right:-150px;
}
.case-study-cta h2 { font-size:2.4rem; color:#fff; font-weight:800; margin-bottom:12px; }
.case-study-cta p { color:rgba(255,255,255,.65); font-size:1.05rem; max-width:550px; margin:0 auto 32px; }

/* ── Portfolio page nav highlight ── */
.site-header .nav-links a.active { color:#fff; }
.site-header .nav-links a.active::after { width:100%; }

/* ═══════════════════════════════════════════
   Individual Project Page Styles
   ═══════════════════════════════════════════ */

/* ── Project Hero ── */
.project-hero {
  position:relative; padding:140px 0 60px;
  background:linear-gradient(135deg, var(--blue-deeper) 0%, var(--blue-dark) 50%, var(--blue) 100%);
  overflow:hidden;
}
.project-hero::before {
  content:''; position:absolute; inset:0;
  background:url('assets/images/tech-pattern.png') center/cover;
  opacity:.06;
}
.project-hero .container { position:relative; z-index:2; }
.project-hero-inner {
  display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:center;
}
.project-hero-text .breadcrumb { justify-content:flex-start; margin-bottom:16px; }
.project-hero-text .pf-category { color:var(--gold); margin-bottom:12px; }
.project-hero-text h1 { font-size:2.8rem; color:#fff; font-weight:800; margin-bottom:16px; line-height:1.15; }
.project-hero-text > p { color:rgba(255,255,255,.65); font-size:1.05rem; line-height:1.7; margin-bottom:28px; }
.project-hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.project-hero-image img {
  width:100%; border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}

/* ── Project Info Bar ── */
.project-info-bar {
  background:#fff; border-bottom:1px solid var(--gray-100);
  padding:28px 0;
}
.info-bar-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:24px;
}
.info-bar-item { text-align:center; }
.info-bar-item .label {
  font-size:.68rem; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--gray-600); font-weight:600; margin-bottom:4px;
}
.info-bar-item .value {
  font-size:1rem; font-weight:700; color:var(--blue-dark);
  font-family:'Space Grotesk',sans-serif;
}

/* ── Project Content ── */
.project-content { padding:80px 0; }
.project-content-grid {
  display:grid; grid-template-columns:2fr 1fr; gap:64px;
}
.project-main h2 {
  font-size:1.8rem; color:var(--blue-dark); font-weight:800;
  margin-bottom:20px; padding-bottom:12px;
  border-bottom:2px solid var(--gold);
}
.project-main h3 { font-size:1.2rem; color:var(--blue-dark); margin:28px 0 12px; }
.project-main p { color:var(--gray-600); margin-bottom:16px; line-height:1.8; }
.project-main ul {
  list-style:none; margin:16px 0 24px;
}
.project-main ul li {
  padding:8px 0 8px 28px; position:relative;
  color:var(--gray-600); font-size:.92rem;
}
.project-main ul li::before {
  content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900;
  position:absolute; left:0; color:var(--gold); font-size:.75rem;
}

/* ── Project Sidebar ── */
.project-sidebar { position:sticky; top:100px; }
.sidebar-card {
  background:var(--gray-50); border-radius:var(--radius);
  padding:28px; margin-bottom:24px;
  border:1px solid var(--gray-100);
}
.sidebar-card h4 {
  font-size:.9rem; color:var(--blue-dark); margin-bottom:16px;
  padding-bottom:10px; border-bottom:1px solid var(--gray-100);
}
.sidebar-tech-list { display:flex; flex-wrap:wrap; gap:8px; }
.sidebar-tech {
  padding:6px 14px; border-radius:8px; font-size:.78rem;
  background:#fff; color:var(--blue); font-weight:600;
  border:1px solid rgba(30,72,153,.12);
}
.sidebar-links { display:flex; flex-direction:column; gap:8px; }
.sidebar-link {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:var(--radius-sm);
  background:#fff; border:1px solid var(--gray-100);
  color:var(--blue-dark); font-size:.85rem; font-weight:600;
  transition:var(--transition);
}
.sidebar-link i { color:var(--blue); width:20px; text-align:center; }
.sidebar-link:hover { border-color:var(--blue); background:rgba(30,72,153,.03); transform:translateX(4px); }

/* ── Project Gallery ── */
.project-gallery {
  padding:0 0 80px; background:#fff;
}
.gallery-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.gallery-item {
  border-radius:var(--radius-sm); overflow:hidden;
  position:relative; cursor:pointer;
}
.gallery-item img { width:100%; height:200px; object-fit:cover; transition:var(--transition); }
.gallery-item:hover img { transform:scale(1.05); }
.gallery-item::after {
  content:'\f00e'; font-family:'Font Awesome 6 Free'; font-weight:900;
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(12,29,66,.5); color:#fff; font-size:1.5rem;
  opacity:0; transition:var(--transition);
}
.gallery-item:hover::after { opacity:1; }

/* ── Related Projects ── */
.related-projects { padding:80px 0; background:var(--gray-50); }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

/* ── Responsive ── */
@media(max-width:1024px) {
  .portfolio-masonry { grid-template-columns:repeat(2, 1fr); }
  .pf-card.featured { grid-column:span 2; }
  .stats-bar-inner { gap:40px; }
  .page-hero h1 { font-size:2.6rem; }
  .project-hero-inner { grid-template-columns:1fr; }
  .project-content-grid { grid-template-columns:1fr; }
  .project-sidebar { position:static; }
  .info-bar-grid { grid-template-columns:repeat(3,1fr); }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .related-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
  .portfolio-masonry { grid-template-columns:1fr; }
  .pf-card.featured { grid-column:span 1; }
  .pf-card.featured .pf-thumb { height:240px; }
  .stats-bar-inner { gap:24px; flex-wrap:wrap; }
  .portfolio-filters { gap:6px; }
  .filter-btn { padding:8px 16px; font-size:.8rem; }
  .page-hero { padding:130px 0 60px; }
  .page-hero h1 { font-size:2rem; }
  .case-study-cta h2 { font-size:1.8rem; }
  .project-hero-text h1 { font-size:2rem; }
  .info-bar-grid { grid-template-columns:repeat(2,1fr); }
  .gallery-grid { grid-template-columns:1fr; }
  .related-grid { grid-template-columns:1fr; }
  .pagination { gap:4px; }
  .page-btn { width:36px; height:36px; font-size:.8rem; }
}