/* ============================================================
   PORTFOLIO PAGE
============================================================ */
.portfolio-filters {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 44px;
}
.pf-btn {
  padding: 9px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 0.8rem; font-weight: 700;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer; transition: var(--transition);
  letter-spacing: 0.04em;
}
.pf-btn:hover, .pf-btn.active {
  background: var(--cyan-dim); border-color: rgba(34,211,238,0.4); color: var(--cyan);
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}
/* ── CARD BASE ── */
.port-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94),
              opacity  0.32s ease;
  /* subtle lift on hover, not aggressive */
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.port-item:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
}
.port-item.hidden { opacity: 0; pointer-events: none; position: absolute; }

/* ── IMAGE LAYER ── */
.port-visual {
  aspect-ratio: 4/3;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* image zooms very slightly on hover, snaps back on leave */
  transform: scale(1.04);
  transition: transform 0.65s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: transform;
}
/* on hover: image settles to natural size — the illusion of "revealing" */
.port-item:hover .port-visual { transform: scale(1.0); }

/* pv-* fallback colours */
.pv-1 { background-color: #1e3a8a; }
.pv-2 { background-color: #064e3b; }
.pv-3 { background-color: #3b0764; }
.pv-4 { background-color: #7c2d12; }
.pv-5 { background-color: #0e2048; }
.pv-6 { background-color: #134e4a; }
.pv-7 { background-color: #1e1b4b; }
.pv-8 { background-color: #312e81; }
.pv-9 { background-color: #0c4a26; }

/* ── OVERLAY (gradient + text) — visible by default, fades out on hover ── */
.port-overlay {
  position: absolute;
  inset: 0;
  /* rich bottom gradient so text is always legible on any image */
  background: linear-gradient(
    to top,
    rgba(6, 8, 20, 0.92) 0%,
    rgba(6, 8, 20, 0.55) 40%,
    rgba(6, 8, 20, 0.15) 70%,
    transparent 100%
  );
  opacity: 1;                        /* ← visible by default */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  transition: opacity 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: opacity;
}
/* hover → fade overlay away to reveal clean image */
.port-item:hover .port-overlay { opacity: 0; }

/* ── CATEGORY LABEL ── */
.port-cat {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 6px;
  /* text fades out slightly ahead of the gradient */
  transition: opacity 0.35s ease, transform 0.45s ease;
  transform: translateY(0);
}
.port-item:hover .port-cat {
  opacity: 0;
  transform: translateY(6px);
}

/* ── TITLE ── */
.port-overlay h4 {
  font-size: 1.05rem;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.35;
  transition: opacity 0.35s ease 0.03s, transform 0.45s ease 0.03s;
  transform: translateY(0);
}
.port-item:hover .port-overlay h4 {
  opacity: 0;
  transform: translateY(8px);
}

/* ── VIEW PROJECT BUTTON ── */
.port-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cyan);
  background: var(--cyan-dim);
  border: 1px solid var(--cyan-border);
  padding: 7px 14px;
  border-radius: 6px;
  width: fit-content;
  transition: opacity 0.3s ease, background 0.25s ease, transform 0.4s ease;
  transform: translateY(0);
}
.port-item:hover .port-view-btn {
  opacity: 0;
  transform: translateY(8px);
}
.port-view-btn:hover { background: rgba(34,211,238,0.22); }

/* ---- PORTFOLIO MODAL ---- */
.port-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(9,11,23,0.93);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.port-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.port-modal {
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 760px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  position: relative;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
}
.port-modal-backdrop.open .port-modal { transform: none; }
.modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-faint);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-secondary); font-size: 1rem;
  transition: var(--transition); z-index: 1;
}
.modal-close:hover { background: rgba(34,211,238,0.12); color: var(--cyan); }
.modal-hero-visual {
  width: 100%; height: 280px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; color: rgba(255,255,255,0.25);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}
.modal-body { padding: 32px 36px 40px; }
.modal-cat { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.modal-body h3 { font-size: 1.6rem; margin-bottom: 14px; }
.modal-body p { margin-bottom: 20px; font-size: 0.95rem; }
.modal-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.modal-tag {
  font-size: 0.73rem; font-weight: 700; letter-spacing: 0.05em;
  color: var(--text-secondary); background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-faint); padding: 5px 13px; border-radius: var(--radius-pill);
}
.modal-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 28px; border-top: 1px solid var(--border-faint); padding-top: 24px; }
.modal-meta-item strong { display:block; font-size:0.78rem; color:var(--white); font-weight:700; margin-bottom:3px; }
.modal-meta-item span { font-size:0.8rem; color:var(--text-muted); }

.portfolio-section-bg { background: var(--bg-primary); }
.portfolio-section-bg.alt { background: var(--bg-secondary); }

@media (max-width: 1024px) {
  .portfolio-grid { grid-template-columns: repeat(2,1fr); gap: 16px; }
}

@media (max-width: 768px) {
  .portfolio-filters {
    gap: 6px;
    margin-bottom: 30px;
  }
  .pf-btn {
    padding: 8px 16px;
    font-size: 0.75rem;
  }
  .portfolio-grid {
    grid-template-columns: repeat(2,1fr);
    gap: 14px;
  }
}

@media (max-width: 540px) {
  .portfolio-grid { grid-template-columns: 1fr; gap: 16px; }
  /* Always show overlay on touch/small screens */
  .port-overlay { opacity: 1 !important; }
  .port-cat, .port-overlay h4 {
    opacity: 1 !important;
    transform: none !important;
  }
  .port-view-btn {
    opacity: 1 !important;
    transform: none !important;
  }
  .modal-body { padding: 22px 18px 28px; }
  .modal-meta { grid-template-columns: 1fr 1fr; }
  .modal-hero-visual { height: 200px; }
  .modal-body h3 { font-size: 1.3rem; }
}