/*
Theme Name: Nora Portfolio
Theme URI: https://noraibanez.com
Author: Nora Ibáñez
Description: Tema de portfolio minimalista, pantalla dividida con retícula de trabajos.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: nora-portfolio
*/

/* ============================================
   TIPOGRAFÍA — sube tus .woff2 a /fonts y ajusta
   los nombres de archivo si no coinciden
   ============================================ */

@font-face{ font-family:'Neue Haas Grotesk Display Pro'; src:url('fonts/NeueHaasDisplayPro-Roman.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Neue Haas Grotesk Display Pro'; src:url('fonts/NeueHaasDisplayPro-Medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:'Neue Haas Grotesk Display Pro'; src:url('fonts/NeueHaasDisplayPro-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }

/* ============================================
   TOKENS
   ============================================ */

:root{
  --bg:#ffffff;
  --ink:#0d0d0d;
  --ink-soft:#5b5b58;
  --line:#e7e5df;
  --outer:#d9d7d0;
}

*{ box-sizing:border-box; }

body{
  font-family:'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Arial, sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--outer);
  margin:0;
}

/* Contenedor general de la página (aplícalo al bloque Grupo raíz si quieres el marco) */
.page-frame{
  padding:14px;
  min-height:100vh;
}

/* ============================================
   BLOQUE COLUMNAS PRINCIPAL — clase "frame"
   ============================================ */

.wp-block-columns.frame{
  background:var(--bg);
  border:1px solid var(--ink);
  min-height:calc(100vh - 28px);
  margin:0 !important;
  gap:0 !important;
}

/* Columna izquierda — clase "info" */
.wp-block-columns.frame > .wp-block-column.info{
  padding:56px 48px;
  border-right:1px solid var(--ink);
  display:flex;
  flex-direction:column;
}

/* Columna derecha — clase "gallery-col" */
.wp-block-columns.frame > .wp-block-column.gallery-col{
  padding:0;
}

/* ============================================
   COLUMNA IZQUIERDA — elementos
   ============================================ */

h1.wordmark{
  font-family:'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Arial, sans-serif;
  font-weight:700;
  font-size:clamp(46px, 6vw, 76px);
  line-height:0.85;
  letter-spacing:-0.02em;
  margin:0;
}

p.lang{
  margin-top:22px;
  font-size:13px;
  color:var(--ink-soft);
  letter-spacing:0.02em;
}

p.bio{
  max-width:42ch;
  font-size:15px;
  line-height:1.55;
  margin-top:20px;
}

p.contact{
  font-size:14px;
  line-height:1.7;
  margin-top:auto;
  padding-top:40px;
}

figure.headshot{
  margin:40px 0 0;
  width:96px;
  height:96px;
}
figure.headshot img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ============================================
   COLUMNA DERECHA — retícula de trabajos
   Aplica la clase "tiles" al bloque Galería
   ============================================ */

.wp-block-gallery.tiles{
  gap:0 !important;
  margin:0 !important;
}

.wp-block-gallery.tiles .wp-block-image{
  margin:0 !important;
  aspect-ratio:1/1;
  border-bottom:1px solid var(--ink);
  border-left:1px solid var(--ink);
  overflow:hidden;
}

.wp-block-gallery.tiles.columns-3 .wp-block-image:nth-child(3n+1){
  border-left:none;
}

.wp-block-gallery.tiles .wp-block-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0;
}

.wp-block-gallery.tiles .wp-block-image figcaption{
  position:static;
  background:var(--bg);
  color:var(--ink);
  font-size:12px;
  padding:8px 4px 0;
  text-align:left;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width:900px){
  .wp-block-columns.frame > .wp-block-column.info{
    border-right:none;
    border-bottom:1px solid var(--ink);
  }
  .wp-block-gallery.tiles.columns-3{
    grid-template-columns:repeat(2, 1fr) !important;
  }
  .wp-block-gallery.tiles.columns-3 .wp-block-image:nth-child(3n+1){
    border-left:1px solid var(--ink);
  }
  .wp-block-gallery.tiles.columns-3 .wp-block-image:nth-child(2n+1){
    border-left:none;
  }
}