/* ======================================================
   portfolio-page.css — Page-specific styles for portfolio.html
   ====================================================== */

@keyframes spin { to { transform: rotate(360deg); } }

.port-hero {
  padding: 140px 6% 70px; background: var(--cream);
  text-align: center; position: relative; overflow: hidden;
}
.port-hero::before {
  content: "WORK"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: 'Playfair Display', serif;
  font-size: clamp(6rem,18vw,14rem); font-weight: 900;
  color: #E8EEFF; pointer-events: none; user-select: none;
}
.port-hero > * { position: relative; z-index: 1; }
.port-hero h1 { margin-bottom: 14px; }
.port-hero p { color: var(--mid); max-width: 500px; margin: 0 auto 40px; }

.filter-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 0; }
.filter-btn {
  background: var(--white); border: 1.5px solid var(--border);
  color: var(--mid); padding: 10px 22px; border-radius: 50px;
  font-size: 0.88rem; font-weight: 500; cursor: pointer;
  transition: all 0.2s; font-family: 'DM Sans', sans-serif;
}
.filter-btn.active, .filter-btn:hover {
  background: var(--accent); border-color: var(--accent); color: var(--white);
}

.port-section { padding: 60px 6% 100px; background: var(--white); }
.port-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 28px; max-width: 1200px; margin: 0 auto;
}
.p-card {
  border: 1px solid var(--border); border-radius: 20px;
  overflow: hidden; background: var(--white); transition: all 0.3s;
}
.p-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.p-img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--cream); }
.p-img img { width:100%;height:100%;object-fit:cover;transition:transform 0.4s; display:block; }
.p-card:hover .p-img img { transform: scale(1.06); }
.p-no-img { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--border); }
.p-overlay { position:absolute;inset:0;background:rgba(12,15,26,0.72);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s; }
.p-card:hover .p-overlay { opacity:1; }
.p-view-btn { background:var(--white);color:var(--ink);padding:12px 24px;border-radius:50px;font-weight:600;font-size:0.88rem;transition:all 0.2s; }
.p-view-btn:hover { background:var(--accent);color:var(--white); }
.p-info { padding: 20px 22px 24px; }
.p-cat { font-size:0.7rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px; }
.p-info h3 { margin-bottom: 8px; font-size: 1.05rem; }
.p-info p { font-size: 0.86rem; color: var(--mid); line-height: 1.55; }

.empty-state { grid-column:1/-1;text-align:center;padding:80px 40px;background:var(--cream);border-radius:20px;border:2px dashed var(--border); }
.empty-state h3 { margin-bottom: 10px; }
.empty-state p { color: var(--mid); }

.loader-wrap { grid-column:1/-1;text-align:center;padding:60px; }
.spinner { width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 16px; }

.conn-error {
  grid-column: 1/-1; text-align: center; padding: 70px 40px;
  background: var(--cream); border-radius: 20px; border: 2px dashed #e0c4c4;
}
.conn-error-icon { font-size: 2.6rem; margin-bottom: 16px; }
.conn-error h3 { margin-bottom: 10px; color: var(--ink); }
.conn-error p { color: var(--mid); max-width: 400px; margin: 0 auto 24px; line-height: 1.6; font-size: 0.93rem; }
.conn-reload-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--white);
  padding: 12px 28px; border-radius: 50px; font-weight: 600;
  font-size: 0.9rem; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; transition: opacity 0.2s;
}
.conn-reload-btn:hover { opacity: 0.85; }
.retry-note { font-size: 0.78rem; color: var(--mid); margin-top: 12px; }

/* CTA band is shared — defined in index-page.css but portfolio also uses it */
.cta-band {
  padding: 100px 6%; text-align: center;
  background:
    linear-gradient(135deg, rgba(12,15,26,0.88) 0%, rgba(29,78,216,0.78) 100%),
    url('https://images.unsplash.com/photo-1542744094-3a31f272c490?w=1600&q=80&auto=format&fit=crop') center/cover no-repeat;
  position: relative;
}
.cta-band-inner { max-width:640px; margin:0 auto; position:relative; z-index:1; }
.cta-band h2 { color:var(--white); margin-bottom:16px; font-size:clamp(1.6rem,3vw,2.4rem); }
.cta-band em { color:#93C5FD; }
.cta-band p { color:rgba(255,255,255,0.65); margin-bottom:32px; font-size:1.02rem; }

@media (max-width:900px) { .port-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px) { .port-grid { grid-template-columns: 1fr; } }