/* ============================================================
   TATA PORTFOLIO — sub pages (LP detail / photo gallery)
   uses tokens from style.css
   ============================================================ */

/* ---- sub header (always solid) ---- */
.subhdr{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad);
  background:rgba(245,242,236,.85); backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 var(--line);
}
.subhdr .brand{ color:var(--ink); }
.subhdr .back{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--latin); font-size:11.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.subhdr .back .arr{ transition:transform .4s var(--ease); }
.subhdr .back:hover{ color:var(--gold-deep); }
.subhdr .back:hover .arr{ transform:translateX(-5px); }

/* ---- LP hero ---- */
.lp-hero{ padding-block:clamp(120px,16vw,180px) clamp(50px,7vw,90px); }
.lp-hero .crumb{ font-family:var(--latin); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:26px; display:flex; gap:12px; align-items:center; }
.lp-hero .crumb span{ color:var(--ink-faint); }
.lp-hero h1{ font-family:var(--latin); font-weight:300; font-size:clamp(56px,11vw,128px); line-height:.95; letter-spacing:.01em; }
.lp-hero .sub{ margin-top:20px; font-size:clamp(15px,2vw,18px); color:var(--ink-soft); max-width:42ch; }
.lp-hero-meta{ display:flex; gap:48px; margin-top:42px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:28px; }
.lp-hero-meta div span{ font-family:var(--latin); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:7px; }
.lp-hero-meta div b{ font-weight:500; font-size:15px; }

/* ---- big mockup frame ---- */
.mock{
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow-md);
  border:1px solid var(--line); position:relative; aspect-ratio:16/10;
}
.mock .bar{ position:absolute; top:0; left:0; right:0; height:38px; background:rgba(255,255,255,.7); backdrop-filter:blur(6px); display:flex; align-items:center; gap:7px; padding:0 16px; z-index:3; border-bottom:1px solid rgba(0,0,0,.05); }
.mock .bar i{ width:11px; height:11px; border-radius:50%; background:rgba(0,0,0,.13); display:block; }
.mock .bar .u{ margin-left:14px; font-family:var(--latin); font-size:11px; letter-spacing:.08em; color:rgba(0,0,0,.4); }
.mock .scr{ position:absolute; inset:0; background-size:cover; background-position:center top; }
.mock .scr .label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.mock .scr .label b{ font-family:var(--latin); font-weight:300; font-size:clamp(40px,7vw,86px); color:rgba(255,255,255,.95); letter-spacing:.04em; }
.mock .scr .label span{ font-family:var(--latin); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.8); }

/* ---- LP body sections ---- */
.lp-sec{ padding-block:clamp(50px,7vw,84px); }
.lp-two{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(30px,5vw,70px); }
.lp-two h2{ font-weight:700; font-size:clamp(22px,3vw,30px); letter-spacing:.02em; }
.lp-two .eyebrow{ margin-bottom:18px; }
.lp-two p{ font-size:15px; color:var(--ink-soft); margin-bottom:18px; max-width:54ch; }
.lp-list{ display:flex; flex-direction:column; gap:0; margin-top:8px; }
.lp-list div{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:18px 0; border-top:1px solid var(--line); align-items:baseline; }
.lp-list div:last-child{ border-bottom:1px solid var(--line); }
.lp-list div .k{ font-family:var(--latin); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); }
.lp-list div b{ font-weight:500; font-size:15px; }
.lp-list div b small{ display:block; font-weight:400; font-size:13px; color:var(--ink-soft); margin-top:4px; letter-spacing:0; }

/* stacked screen previews */
.screens{ display:flex; flex-direction:column; gap:22px; }
.screen-row{ display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; }
.screen-row .no{ font-family:var(--latin); font-weight:300; font-size:34px; color:var(--gold); width:54px; }
.screen-row .pane{ aspect-ratio:21/9; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-sm); position:relative; }
.screen-row .pane .g{ position:absolute; inset:0; background-size:cover; background-position:center; }
.screen-row .pane .t{ position:absolute; left:24px; bottom:18px; font-family:var(--latin); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.85); }

/* next project */
.next-proj{ border-top:1px solid var(--line); padding-block:clamp(50px,7vw,80px); display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.next-proj .lab{ font-family:var(--latin); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.next-proj a.np{ font-family:var(--latin); font-weight:300; font-size:clamp(34px,6vw,64px); letter-spacing:.02em; display:inline-flex; align-items:center; gap:24px; color:var(--ink); transition:color .4s var(--ease); }
.next-proj a.np .arr{ transition:transform .4s var(--ease); color:var(--gold-deep); }
.next-proj a.np:hover{ color:var(--gold-deep); }
.next-proj a.np:hover .arr{ transform:translateX(10px); }

/* ---- photos page ---- */
.ph-hero{ padding-block:clamp(120px,16vw,170px) clamp(30px,5vw,54px); }
.ph-hero h1{ font-family:var(--latin); font-weight:300; font-size:clamp(48px,9vw,104px); line-height:.95; }
.ph-hero p{ margin-top:18px; color:var(--ink-soft); max-width:44ch; }
.ph-filter{ display:flex; gap:10px; flex-wrap:wrap; margin-top:34px; }
.ph-filter button{
  font-family:var(--latin); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:10px 20px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
  transition:all .35s var(--ease);
}
.ph-filter button.on, .ph-filter button:hover{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.ph-masonry{ columns:3; column-gap:16px; padding-bottom:clamp(60px,9vw,120px); }
.ph-masonry .item{ break-inside:avoid; margin-bottom:16px; border-radius:10px; overflow:hidden; position:relative; box-shadow:var(--shadow-sm); cursor:zoom-in; background:var(--bg-3); }
.ph-masonry .item .g{ display:block; width:100%; height:auto; transition:transform .9s var(--ease); }
.ph-masonry .item:hover .g{ transform:scale(1.05); }
.ph-masonry .item.hide{ display:none; }
.ph-masonry .item .cap{ position:absolute; left:16px; bottom:14px; font-family:var(--latin); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.9); opacity:0; transform:translateY(6px); transition:.4s var(--ease); }
.ph-masonry .item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(20,18,15,.4)); opacity:0; transition:opacity .4s; }
.ph-masonry .item:hover::after{ opacity:1; }
.ph-masonry .item:hover .cap{ opacity:1; transform:none; }

/* ---- filter counts ---- */
.ph-filter button .ct{ margin-left:7px; font-size:9.5px; opacity:.5; }
.ph-count{ font-family:var(--latin); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:6px 0 26px; }

/* ---- lightbox ---- */
.lightbox{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,54px); background:rgba(16,14,11,.92); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; }
.lightbox.on{ opacity:1; visibility:visible; }
.lb-stage{ max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:16px; }
.lb-stage img{ max-width:100%; max-height:82vh; object-fit:contain; border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.5); transform:scale(.96); transition:transform .45s var(--ease); }
.lightbox.on .lb-stage img{ transform:scale(1); }
.lb-cap{ font-family:var(--latin); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(243,237,226,.7); }
.lb-close,.lb-nav{ position:absolute; background:rgba(243,237,226,.08); border:1px solid rgba(243,237,226,.18); color:#f3ede2; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .3s var(--ease); }
.lb-close:hover,.lb-nav:hover{ background:rgba(243,237,226,.2); }
.lb-close{ top:clamp(14px,3vw,30px); right:clamp(14px,3vw,30px); width:48px; height:48px; border-radius:50%; font-size:26px; line-height:1; }
.lb-nav{ top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; font-size:30px; line-height:1; }
.lb-prev{ left:clamp(10px,2.5vw,30px); }
.lb-next{ right:clamp(10px,2.5vw,30px); }
@media (max-width:560px){ .lb-nav{ width:44px; height:44px; font-size:24px; } }

@media (max-width:900px){
  .lp-two{ grid-template-columns:1fr; }
  .ph-masonry{ columns:2; }
  .screen-row{ grid-template-columns:1fr; gap:12px; }
  .screen-row .no{ font-size:26px; }
}
@media (max-width:560px){
  .ph-masonry{ columns:1; }
  .lp-hero-meta{ gap:28px; }
}