/* /projeler — each project as an editorial spread. Loaded only by resources/views/projects.blade.php.
   Selectors are scoped under .premium-home because typography.css loads after page styles. */
.pj-page{
 --pj-paper:#eae7e0;--pj-ink:#30342f;--pj-ink-deep:#20211f;--pj-muted:#62695d;--pj-line:#c8c2b6;
 --pj-accent:#786b55;--pj-soft:#8a806f;--pj-dark:#292e27;--pj-ease:cubic-bezier(.2,.7,.2,1);
 background:var(--pj-paper);color:var(--pj-ink);overflow-x:clip
}
.premium-home .pj-page h1,.premium-home .pj-page h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500}
.premium-home .pj-page h1 em,.premium-home .pj-page h2 em{font-style:normal;color:var(--pj-soft)}
.pj-page .premium-eyebrow{color:var(--pj-accent)}
.pj-page a:focus-visible,.pj-page button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.pj-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Project spread ---------------------------------------------------------------- */
.pj{padding:110px var(--premium-gutter);scroll-margin-top:var(--site-header-h-compact)}
/* The page opens directly with the first project. */
.pj-visually-hidden+.pj{padding-top:72px}
.pj:not(.pj--dark)+.pj:not(.pj--dark){padding-top:0}
.pj:not(.pj--dark)+.pj:not(.pj--dark)>.pj-head{padding-top:110px;border-top:1px solid var(--pj-line)}
.pj--dark{background:var(--pj-dark);color:#ece9e1;--pj-line:#ffffff24;--pj-muted:#b9bcb0;--pj-accent:#cbbfa6}

.pj-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:28px 40px;margin-bottom:44px}
.pj-num{font-size:var(--type-ui);letter-spacing:.08em;line-height:1;color:var(--pj-accent);padding-bottom:14px;font-variant-numeric:tabular-nums}
.premium-home .pj h2{font-size:clamp(2.6rem,4.4vw,4.25rem);line-height:1;letter-spacing:-.02em}
.pj-facts{display:grid;grid-template-columns:repeat(3,auto);gap:0 40px;margin:0;padding-bottom:6px}
.pj-facts dt{font-size:var(--type-small);letter-spacing:.06em;color:var(--pj-muted);margin-bottom:4px}
.pj-facts dd{margin:0;font-size:var(--type-ui);line-height:1.5}
.pj-facts a{border-bottom:1px solid var(--pj-line);transition:border-color .25s}
.pj-facts a:hover{border-color:currentColor}

/* Lead photograph spans two rows; two details sit beside it (mirrored on even projects). */
.pj-media{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px}
.pj-photo{display:block;position:relative;width:100%;padding:0;border:0;overflow:hidden;cursor:zoom-in;background:#d9d5cb}
.pj--dark .pj-photo{background:#353b33}
.pj-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--pj-ease)}
.pj-photo:hover img{transform:scale(1.03)}
.pj-lead{grid-column:1/9;grid-row:1/3;aspect-ratio:1376/1080}
.pj-detail{grid-column:9/13}
/* Details fill their grid cell; only the lead photograph's aspect ratio sets the row heights. */
.pj-detail img{position:absolute;inset:0}
.pj-detail:nth-child(2){grid-row:1}
.pj-detail:nth-child(3){grid-row:2}
.pj--mirror .pj-lead{grid-column:5/13}
.pj--mirror .pj-detail{grid-column:1/5}

.pj-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px;margin-top:34px}
.premium-home .pj-foot>p{color:var(--pj-muted);max-width:58ch}
.pj-gallery-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;border:0;border-bottom:1px solid currentColor;background:none;color:inherit;font:inherit;font-size:var(--type-ui);white-space:nowrap;cursor:pointer}
.pj-gallery-link>span{color:var(--pj-muted)}
.pj-gallery-link svg{transition:transform .3s var(--pj-ease)}
.pj-gallery-link:hover svg{transform:translateX(3px)}

.pj-invitation{border-top:1px solid #c8c2b6}

/* Reveals (enabled by projects.js, so content stays visible without JavaScript). */
.pj-js .pj-reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--pj-ease),transform .9s var(--pj-ease)}
.pj-js .pj-photo.pj-reveal{transform:none;clip-path:inset(0 0 12% 0);transition:opacity .9s var(--pj-ease),clip-path 1.1s var(--pj-ease)}
.pj-js .pj-reveal.is-in{opacity:1;transform:none;clip-path:inset(0)}
.pj-js .pj-detail.pj-reveal{transition-delay:.08s}
.pj-js .pj-detail.pj-reveal+.pj-detail.pj-reveal{transition-delay:.16s}

/* Tablet ------------------------------------------------------------------------- */
@media(max-width:1000px){
 .pj{padding-top:90px;padding-bottom:90px}
 .pj:not(.pj--dark)+.pj:not(.pj--dark)>.pj-head{padding-top:90px}
 .pj-head{grid-template-columns:auto minmax(0,1fr)}
 .pj-facts{grid-column:1/-1}
}

/* Phone -------------------------------------------------------------------------- */
@media(max-width:700px){
 .pj{padding:70px var(--premium-gutter)}
 .pj-visually-hidden+.pj{padding-top:44px}
 .pj:not(.pj--dark)+.pj:not(.pj--dark)>.pj-head{padding-top:70px}
 .pj-head{gap:16px 18px;margin-bottom:28px}
 .pj-num{padding-bottom:8px}
 .premium-home .pj h2{font-size:clamp(2.1rem,10vw,2.8rem)}
 .pj-facts{grid-template-columns:1fr;border-top:1px solid var(--pj-line)}
 .pj-facts>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--pj-line)}
 .pj-facts dt{margin:0}
 .pj-facts dd{text-align:right}
 .pj-media{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:8px}
 .pj-lead,.pj--mirror .pj-lead{grid-column:1/-1;grid-row:1;width:calc(100% + var(--premium-gutter)*2);margin:0 calc(var(--premium-gutter)*-1);aspect-ratio:4/3}
 .pj-detail,.pj--mirror .pj-detail,.pj-detail:nth-child(2),.pj-detail:nth-child(3){grid-column:auto;grid-row:2;aspect-ratio:1}
 .pj-foot{grid-template-columns:1fr;gap:20px;margin-top:26px}
 .pj-gallery-link{justify-self:start}
}

@media(prefers-reduced-motion:reduce){
 .pj-js .pj-reveal,.pj-js .pj-photo.pj-reveal{opacity:1;transform:none;clip-path:none;transition:none}
 .pj-photo img,.pj-gallery-link svg{transition:none}
 .pj-photo:hover img{transform:none}
}
