/* =====================================================
   Best Green Cleaners — Portfolio Page CSS
   SICGBOR · bestgreencleaners.com
   ===================================================== */

/* HERO */
.port-hero {
  background:
    linear-gradient(135deg, rgba(27,54,93,0.90) 0%, rgba(15,45,71,0.82) 55%, rgba(27,54,93,0.92) 100%),
    url('../img/hero-bg.jpg') center 40% / cover no-repeat;
  padding: 80px 5% 70px; text-align: center;
}
.port-hero-inner { max-width: 720px; margin: 0 auto; }
.port-hero h1 {
  font-family:'Nunito',sans-serif; font-weight:900;
  font-size:clamp(2.2rem,4vw,3.2rem); color:#fff;
  line-height:1.15; margin-bottom:1rem;
}
.port-hero h1 em { font-style:normal; color:var(--teal); }
.port-hero-sub { color:rgba(255,255,255,.75); font-size:1.05rem; line-height:1.7; }

/* FILTER BAR */
.port-filter-bar {
  background:#fff; border-bottom:1px solid var(--silver);
  padding:.8rem 5%; position:sticky; top:70px; z-index:100;
  box-shadow:0 2px 12px rgba(27,54,93,.06);
}
.port-filter-inner {
  max-width:1100px; margin:0 auto;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.filter-btn {
  padding:7px 16px; border-radius:30px; border:1.5px solid var(--silver);
  background:#fff; color:var(--muted); font-size:.85rem; font-weight:600;
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.filter-btn:hover { border-color:var(--teal); color:var(--navy); }
.filter-btn.active {
  background:var(--navy); border-color:var(--navy); color:#fff;
}

/* SECTION */
.port-section { padding:60px 5%; background:var(--offwhite); }
.port-inner { max-width:1200px; margin:0 auto; }

/* STATS BAR */
.port-stats-bar {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  margin-bottom:2.5rem;
}
.port-stat {
  background:#fff; border:1px solid var(--silver); border-radius:12px;
  padding:1rem; text-align:center;
}
.port-stat strong {
  display:block; font-family:'Nunito',sans-serif; font-weight:900;
  font-size:1.5rem; color:var(--teal);
}
.port-stat span { font-size:.78rem; color:var(--muted); }

/* GRID */
.port-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;
}
.port-card {
  background:#fff; border-radius:18px; overflow:hidden;
  border:1px solid var(--silver);
  transition:transform .25s, box-shadow .25s;
  display:flex; flex-direction:column;
}
.port-card:hover { transform:translateY(-5px); box-shadow:0 10px 36px rgba(27,54,93,.11); }
.port-card.hidden { display:none; }

/* BEFORE/AFTER */
.port-images { position:relative; height:220px; overflow:hidden; background:#f0f4f8; }
.ba-wrap { position:relative; width:100%; height:100%; user-select:none; }
.ba-before, .ba-after {
  position:absolute; top:0; left:0; width:100%; height:100%;
  overflow:hidden;
}
.ba-before img, .ba-after img {
  width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;
}
.ba-after { clip-path:inset(0 50% 0 0); }
.ba-slider-line {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:2px; height:100%; background:#fff; z-index:2; pointer-events:none;
}
.ba-handle {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%;
  background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.2);
  display:flex; align-items:center; justify-content:center;
  z-index:3; cursor:ew-resize; font-size:.85rem; color:var(--navy);
  font-weight:700; pointer-events:none;
}
.ba-range {
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; cursor:ew-resize; z-index:4; margin:0;
}
.ba-label {
  position:absolute; bottom:10px; z-index:3;
  background:rgba(0,0,0,.6); color:#fff;
  font-size:.72rem; font-weight:700; padding:3px 10px;
  border-radius:30px; letter-spacing:.04em; text-transform:uppercase;
  pointer-events:none;
}
.ba-label-before { left:10px; }
.ba-label-after  { right:10px; }

/* PLACEHOLDER */
.port-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
}
.port-placeholder-icon { font-size:2.5rem; }
.port-placeholder p { font-size:.85rem; color:var(--muted); font-weight:500; margin:0; }
.port-placeholder-tag {
  background:#fff; border:1px solid var(--silver);
  font-size:.72rem; font-weight:600; color:var(--navy);
  padding:3px 10px; border-radius:30px;
}

/* CARD BODY */
.port-card-body { padding:1.4rem; flex:1; display:flex; flex-direction:column; }
.port-card-header { margin-bottom:.6rem; }
.port-cat-badge {
  background:var(--offwhite); border:1px solid var(--silver);
  font-size:.75rem; font-weight:600; color:var(--muted);
  padding:3px 10px; border-radius:30px; display:inline-block;
}
.port-card-body h3 {
  font-family:'Nunito',sans-serif; font-weight:800;
  color:var(--navy); font-size:1.05rem; margin-bottom:.5rem;
}
.port-card-desc { color:var(--muted); font-size:.88rem; line-height:1.6; margin-bottom:1rem; flex:1; }
.port-card-link {
  color:var(--teal); font-weight:700; font-size:.88rem;
  transition:gap .2s; display:inline-block;
}
.port-card-link:hover { color:var(--navy); }

/* EMPTY STATE */
.port-empty {
  text-align:center; padding:4rem 2rem; color:var(--muted);
}
.port-empty span { font-size:2.5rem; display:block; margin-bottom:1rem; }
.port-empty a { color:var(--teal); font-weight:600; }

/* UPLOAD NOTICE */
.port-upload-notice {
  background:var(--offwhite); border-top:1px solid var(--silver);
  padding:1.2rem 5%;
}
.port-upload-inner {
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
}
.port-upload-inner span { font-size:1.8rem; flex-shrink:0; }
.port-upload-inner strong { display:block; color:var(--navy); font-size:.95rem; margin-bottom:.2rem; }
.port-upload-inner p { color:var(--muted); font-size:.85rem; margin:0; }
.port-upload-inner .btn-primary { margin-left:auto; white-space:nowrap; }

/* TESTIMONIALS */
.port-testimonials { background:var(--navy); padding:70px 5%; }
.port-test-inner { max-width:1100px; margin:0 auto; }
.port-test-inner .section-eyebrow { color:var(--teal); }
.port-test-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
  margin-top:2.5rem;
}
.port-review {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:1.6rem;
}
.port-review-text {
  color:rgba(255,255,255,.8); font-size:.95rem; line-height:1.7;
  font-style:italic; margin-bottom:1.2rem;
}
.port-review-author { display:flex; align-items:center; gap:10px; }
.port-review-avatar {
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; font-size:.95rem; flex-shrink:0;
}
.port-review-author strong { display:block; color:#fff; font-size:.9rem; }
.port-review-author span { color:rgba(255,255,255,.5); font-size:.78rem; }

/* CTA */
.port-cta { background:linear-gradient(135deg,var(--teal) 0%,#3ab89e 100%); padding:70px 5%; text-align:center; }
.port-cta-inner { max-width:600px; margin:0 auto; }
.port-cta h2 { font-family:'Nunito',sans-serif; font-weight:900; font-size:clamp(1.8rem,3vw,2.4rem); color:var(--navy); margin-bottom:.8rem; }
.port-cta p { color:rgba(27,54,93,.75); font-size:1rem; margin-bottom:2rem; }

/* RESPONSIVE */
@media (max-width:1024px) {
  .port-grid { grid-template-columns:repeat(2,1fr); }
  .port-stats-bar { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .port-grid { grid-template-columns:1fr; }
  .port-test-grid { grid-template-columns:1fr; }
  .port-stats-bar { grid-template-columns:repeat(2,1fr); }
  .port-filter-inner { gap:6px; }
  .filter-btn { font-size:.78rem; padding:6px 12px; }
}
@media (max-width:480px) {
  .port-stats-bar { grid-template-columns:1fr 1fr; }
  .port-upload-inner .btn-primary { margin-left:0; }
}