/* ============================================================
   M'arte Studio — PORTFOLIO.CSS
   ============================================================ */

.port-hero { min-height: 45vh; padding: 120px 40px 70px; }
.port-hero .ph-orb--1 { width: 400px; height: 400px; background: var(--c4); right: -80px; top: -80px; opacity: 0.1; }
.port-hero .ph-orb--2 { width: 300px; height: 300px; background: var(--c5); left: -60px; bottom: -60px; opacity: 0.08; }

/* FILTERS */
.port-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.port-filt {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 30px;
  border: 1px solid var(--border);
  background: transparent;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: var(--transition);
}
.port-filt:hover, .port-filt.active {
  background: rgba(255,32,121,0.1);
  border-color: var(--c5);
  color: var(--c5);
}

/* GRID */
.port-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 280px;
  gap: 16px;
  margin-bottom: 80px;
}

.port-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
}
.port-item--tall { grid-row: span 2; }
.port-item--wide { grid-column: span 2; }

.port-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.port-item:hover img { transform: scale(1.06); }

.port-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,10,41,0.97) 0%, rgba(7,10,41,0.3) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  opacity: 0;
  transition: opacity var(--transition);
}
.port-item:hover .port-overlay { opacity: 1; }

.port-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.port-tags span {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255,32,121,0.2);
  border: 1px solid rgba(255,32,121,0.4);
  color: var(--c5);
}

.port-overlay h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.port-overlay p { font-size: 0.85rem; color: rgba(255,255,255,0.6); line-height: 1.6; }

/* CTA */
.port-cta { text-align: center; padding: 60px 0; border-top: 1px solid var(--border); }

/* RESPONSIVE */
@media (max-width: 900px) {
  .port-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
  .port-item--wide { grid-column: span 2; }
  .port-hero { padding: 120px 24px 60px; }
}
@media (max-width: 600px) {
  .port-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .port-item--tall, .port-item--wide { grid-column: auto; grid-row: auto; }
  .port-overlay { opacity: 1; background: linear-gradient(to top, rgba(7,10,41,0.92) 0%, transparent 60%); }
}