/* ============================================================
   Filip Lazic — pages.css
   Shared by every /pages/*.html case-study page.
   Loaded after base.css.
   ============================================================ */

body { line-height: 1.7; }

.p-header{padding:24px 56px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(16px);z-index:10;}
.back-link{font-size:0.9rem;font-weight:800;text-decoration:none;letter-spacing:-0.02em;text-transform:uppercase;color:var(--black);}
.back-link span{color:var(--accent);}
.p-hero{max-width:900px;margin:0 auto;padding:64px 24px 32px;}
.p-eyebrow{font-size:0.65rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}
.p-hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;letter-spacing:-0.02em;line-height:1.05;margin-bottom:28px;}
.p-media{max-width:900px;margin:0 auto;padding:0 24px 8px;}
.p-video-wrap{position:relative;width:100%;padding-top:56.25%;background:var(--black);overflow:hidden;border-radius:4px;}
.p-video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.p-main-img{width:100%;display:block;border-radius:4px;object-fit:cover;max-height:600px;cursor:pointer;transition:opacity .2s;}
.p-main-img:hover{opacity:0.92;}
.p-gallery img.active{outline:3px solid var(--accent);outline-offset:-3px;opacity:1;}
.p-cta{display:inline-block;margin-top:20px;padding:12px 24px;background:var(--black);color:var(--white);text-decoration:none;font-size:0.7rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;transition:background .2s;}
.p-cta:hover{background:var(--accent);}
.p-gallery{max-width:1100px;margin:40px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.p-gallery img{width:100%;height:260px;object-fit:cover;border-radius:3px;cursor:pointer;transition:opacity .2s;}
.p-gallery img:hover{opacity:0.85;}
.p-article{max-width:720px;margin:56px auto 0;padding:0 24px 100px;}
.p-article h2{font-size:1.5rem;font-weight:800;margin-bottom:20px;letter-spacing:-0.01em;}
.p-article p{margin-bottom:20px;font-size:1rem;color:var(--ink);}
.p-article p strong{font-weight:700;}
.p-article p a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.p-article p a:hover{color:var(--ink);}
.p-cat-tag{display:inline-block;font-size:0.65rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--dark-mid);border:1px solid var(--border);padding:6px 12px;margin-bottom:20px;}
.p-client-credit{display:flex;align-items:center;gap:14px;}
.p-client-credit-label{font-size:0.65rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--dark-mid);white-space:nowrap;}
.p-client-credit a{display:block;line-height:0;border:1px solid var(--border);border-radius:6px;overflow:hidden;transition:border-color 0.2s;}
.p-client-credit a:hover{border-color:var(--accent);}
.p-client-credit img{height:40px;width:auto;display:block;}
footer{text-align:center;padding:40px 24px;border-top:1px solid var(--border);font-size:0.75rem;color:var(--dark-mid);}
.p-lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.95);z-index:9000;align-items:center;justify-content:center;}
.p-lightbox img{max-width:90vw;max-height:88vh;object-fit:contain;}
.p-lightbox button{position:absolute;top:16px;right:20px;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;}
.p-eyebrow{padding-left:16px;position:relative;}
.p-eyebrow::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;background:var(--accent);border-radius:50%;}
.p-video-thumb{position:relative;display:block;border-radius:6px;overflow:hidden;background:var(--black);text-decoration:none;}
.p-video-thumb img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease, filter .3s ease;}
.p-video-thumb:hover img{transform:scale(1.04);filter:brightness(0.7);}
.p-play-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78px;height:78px;background:rgba(255,255,255,0.96);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,0.35);transition:transform .3s ease, background .3s ease;}
.p-video-thumb:hover .p-play-circle{transform:translate(-50%,-50%) scale(1.1);background:var(--accent);}
.p-play-circle svg{width:26px;height:26px;margin-left:4px;fill:var(--black);transition:fill .3s ease;}
.p-video-thumb:hover .p-play-circle svg{fill:var(--white);}
.p-video-badge{position:absolute;bottom:18px;left:18px;color:var(--white);font-size:0.65rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;background:rgba(13,12,11,0.6);padding:7px 14px;border-radius:3px;backdrop-filter:blur(4px);}
.p-article p:first-of-type{font-size:1.05rem;}
.p-video-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:700px){.p-video-grid{grid-template-columns:1fr;}}

/* ---- "More Work" cross-links, shown at the bottom of every case study ---- */
.p-related { max-width: 1100px; margin: 0 auto; padding: 0 24px 90px; }
.p-related-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 24px;
}
.p-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.p-related-item { display: block; text-decoration: none; color: inherit; }
.p-related-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  filter: brightness(0.95);
  transition: transform 0.3s, filter 0.3s;
}
.p-related-item:hover img { transform: scale(1.02); filter: brightness(0.75); }
.p-related-info { padding-top: 10px; }
.p-related-cat {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}
.p-related-title { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
@media (max-width: 700px) {
  .p-related-grid { grid-template-columns: 1fr; }
}