/*
 Theme Name: Ben Portfolio
 Theme URI: https://example.com
 Author: Ben Leung
 Author URI: https://example.com
 Description: Minimal portfolio theme with a thumbnail grid (max 3 per row) and an Information view with email underline-on-hover only. Includes lightbox and a video tile.
 Version: 1.0
 Text Domain: ben-portfolio
*/

/* ===================== FONTS (expects files in /assets/fonts/) ===================== */
@font-face{ font-family:'Joane'; src:url('assets/fonts/Joane-ExtraLight.ttf') format('truetype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:'Joane Light'; src:url('assets/fonts/Joane-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }

@font-face{ font-family:'Neue Haas Grotesk Text'; src:url('assets/fonts/NeueHaasDisplayLight.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
/* Some repos name this 'Mediu.ttf' */
@font-face{ font-family:'Neue Haas Grotesk Text'; src:url('assets/fonts/NeueHaasDisplayMediu.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Neue Haas Grotesk Text'; src:url('assets/fonts/NeueHaasDisplayBold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Neue Haas Grotesk XThin'; src:url('assets/fonts/NeueHaasDisplayXThin.ttf') format('truetype'); font-weight:100; font-style:normal; font-display:swap; }

/* ===================== TOKENS ===================== */
:root{
  --bg:#f3f1ed; --text:#111; --sub:#666; --link:#111; --border:#e6e6e6;
  --max:1600px; --g:18px; --thumb-min:220px;

  --tile-radius:14px;
  --tile-shadow:0 1px 0 rgba(0,0,0,.03);
  --tile-shadow-hover:0 10px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.04);

  /* info alignment */
  --info-top: 56px;
  --inquiries-inset: 28px;
}

/* ===================== BASE ===================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 'Neue Haas Grotesk Text', -apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:300;
}
a{color:var(--link); text-decoration:none}
/* keep links non-underlined on hover/click globally */
a:hover, a:focus, a:active{ text-decoration:none; font-weight:inherit; }
.wrap{max-width:var(--max); margin:0 auto; padding:20px}

/* ===================== HEADER / NAV ===================== */
header{ margin-bottom:16px; position:sticky; top:0; z-index:3; background:transparent; }
.nav{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
  font-family:'Neue Haas Grotesk Text', sans-serif; font-weight:500;
}
.nav-left{justify-self:start}
.nav-right{justify-self:end}
.nav-center{display:flex; justify-content:center}
.nav-left a,.nav-right a{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.nav a.active{ opacity:.5; }

.name{
  margin:0; font-weight:200; font-family:'Joane','Prata',serif;
  text-transform:uppercase; letter-spacing:.10em; line-height:1;
  font-size:clamp(16.56px,5.4vw,59.76px); text-align:center;
}
.nav-center .name a{font-size:inherit}
.name a{color:inherit; text-decoration:none}

/* ===================== VIEWS ===================== */
[data-view]{display:none}
[data-view].show{display:block}

/* ===================== THUMBNAILS GRID (MAX 3 COLS) ===================== */
.grid{
  display:grid; gap:var(--g);
  grid-template-columns: repeat(3, 1fr);
  align-items:start;
}
@media (max-width: 1100px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .grid{ grid-template-columns: 1fr; } }

/* Tile */
.tile{
  display:block; border:1px solid var(--border);
  border-radius:var(--tile-radius); overflow:hidden; background:#fff;
  box-shadow:var(--tile-shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change:transform;
}
.tile:hover{ transform:translateY(-2px); box-shadow:var(--tile-shadow-hover); border-color:#ddd; }

.media-wrap{ position:relative; }
.media-wrap img, .media-wrap video{
  display:block; width:100%;
  aspect-ratio:3/2; height:auto; object-fit:cover; object-position:center;
  background:#f4f4f4;
}

/* Video affordances */
.tile.video .badge{
  position:absolute; left:10px; top:10px; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(255,255,255,.9); padding:6px 8px; border-radius:9999px; border:1px solid var(--border);
  line-height:1;
}
.tile.video .play{
  position:absolute; inset:auto; left:50%; top:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:9999px;
  background:rgba(255,255,255,.92); display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.06);
  transition:transform .18s ease, background .18s ease;
}
.tile.video:hover .play{ transform:translate(-50%,-50%) scale(1.05); background:#fff; }
.play svg{ width:22px; height:22px; display:block; }

/* ===================== LIGHTBOX ===================== */
dialog{border:none; padding:0; background:transparent}
.lb{position:relative}
.lb img, .lb video{max-width:95vw; max-height:86vh; display:block; margin:auto; background:#000}
.lb .ctrl{position:absolute; top:8px; right:8px; display:flex; gap:8px}
.btn{background:#fff; border:1px solid var(--border); padding:8px 10px; font-size:14px; cursor:pointer; font-family:'Neue Haas Grotesk Text'}
.navbtn{position:absolute; top:50%; transform:translateY(-50%); padding:10px 12px}
.prev{left:10px} .next{right:10px}

/* ===================== INFO PAGE ===================== */
.info{max-width:100%; font-family:'Neue Haas Grotesk Text', sans-serif; font-weight:300}
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start}

.info-right{
  justify-self:start; text-align:left;
  font-family:'Joane Light','Joane','Prata',serif; line-height:1.3;
  align-self:start; margin-top:0; padding-top:var(--info-top); display:flex; flex-direction:column;
}
.info-right .line-hero{ font-size:23px; }
.info-right .break{ height:2.6em; }
.info-right .line-small{ font-size:16px; }

.info-left{
  justify-self:end; text-align:right;
  font-family:'Neue Haas Grotesk Text', sans-serif; font-weight:300;
  font-size:14px; line-height:1.25;
  align-self:start; margin-top:0; padding-top:var(--info-top); display:flex; flex-direction:column;
  margin-right:var(--inquiries-inset);
}
.info-left .label{ text-transform:uppercase; letter-spacing:.12em; font-size:10px; }
.info-left .break{ height:1.25em; }

.info-left div:not(.label):not(.break){
  font-family:'Joane Light','Joane','Prata',serif; font-weight:300;
}

/* Email: not underlined by default; underline only on hover/focus/active */
.info-left a.email{ text-decoration:none; }
.info-left a.email:hover,
.info-left a.email:focus,
.info-left a.email:active{
  text-decoration:underline !important; font-weight:inherit !important;
}

/* ===================== FOOTER ===================== */
footer{
  border-top:none; margin-top:28px; padding-top:12px; color:var(--sub);
  font-family:'Neue Haas Grotesk XThin','Neue Haas Grotesk Text',sans-serif;
  font-weight:100; font-size:7px; line-height:1.2; letter-spacing:.06em;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:700px){
  .info-grid{ grid-template-columns:1fr; gap:18px; }
  .info-left,.info-right{ justify-self:start; text-align:left; margin-right:0; }
}