/* ─────────────────────────────────────────
   PORTFOLIO.CSS — Grid + tarjetas
   MNSM · Playground Agency
───────────────────────────────────────── */

#portfolio {
  background: var(--black);
  padding: var(--section-pad-v) var(--section-pad-h);
}

/* ─── CABECERA ─── */
.portfolio-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
}
.portfolio-header .section-title { color: var(--white); margin-bottom: 0; }

.portfolio-subtitle {
  font-size: 13px;
  color: var(--grey);
  letter-spacing: 0.08em;
  padding-bottom: 8px;
}

/* ─── GRID ASIMÉTRICO ─── */
/* Fila 1: Can Rubio (ancho) + Alexis (retrato) */
.portfolio-row1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}

/* Fila 2: tres tarjetas iguales */
.portfolio-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

/* Fila 3: Depaseo ancho */
.portfolio-row3 {
  margin-top: 12px;
}

/* ─── TARJETA ─── */
.card {
  position: relative;
  overflow: hidden;
  cursor: none;
  background: #111;
}

/* ratio portrait por defecto */
.card-inner {
  width: 100%;
  padding-top: 130%;
  position: relative;
  overflow: hidden;
}
/* Can Rubio — ratio panorámico */
.card--wide .card-inner  { padding-top: 65%; }
/* Depaseo — ratio apaisado */
.card--banner .card-inner { padding-top: 45%; }

/* ─── FOTO / VÍDEO ─── */
.card-slides {
  position: absolute;
  inset: 0;
}

.card-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.card-slide:first-child { opacity: 1; }
.card-slide.is-active   { opacity: 1; }
.card-slide.is-leaving  { opacity: 0; }

/* Escala en hover */
.card:hover .card-slides { transform: scale(1.04); transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }

.c1 { background: linear-gradient(160deg, #3d2b1f 0%, #1a1210 100%); }
.c2 { background: linear-gradient(160deg, #1a2118 0%, #0d1509 100%); }
.c3 { background: linear-gradient(160deg, #2a1a1a 0%, #140a0a 100%); }
.c4 { background: linear-gradient(160deg, #2a2218 0%, #1a1510 100%); }
.c5 { background: linear-gradient(160deg, #1a1a2a 0%, #0d0d18 100%); }
.c6 { background: linear-gradient(160deg, #1a2218 0%, #0e160b 100%); }

/* ─── OVERLAY + INFO ─── */
.card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  transition: background 0.3s ease;
  z-index: 2;
}
.card:hover .card-overlay { background: rgba(0,0,0,0.55); }

.card-num {
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.35);
}

.card-info {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.card:hover .card-info {
  opacity: 1;
  transform: translateY(0);
}

.card-name {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
}
.card-sector {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coral);
  margin-top: 4px;
}

.card-ig {
  display: inline-block;
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.card-ig:hover {
  color: var(--white);
  border-color: var(--white);
}

/* ─── PIE ─── */
.portfolio-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 56px;
}
.portfolio-footer-text {
  font-size: 13px;
  font-weight: 300;
  color: var(--grey);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .portfolio-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* En mobile: todo en una columna */
  .portfolio-row1 { grid-template-columns: 1fr; }
  .card--wide .card-inner { padding-top: 75%; }

  /* Segunda fila: 2 columnas */
  .portfolio-row2 { grid-template-columns: 1fr 1fr; }

  /* Info siempre visible en mobile */
  .card-overlay { background: rgba(0,0,0,0.35); }
  .card-info    { opacity: 1; transform: translateY(0); }

  .portfolio-footer {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .portfolio-row2 { grid-template-columns: 1fr; }
}