/* ==========================================================================
   PROJECTS PAGES — page-specific styles only.
   Everything else (tokens, header, footer, buttons, forms, modal, cursor)
   is inherited from assets/style.css and intentionally NOT duplicated here.
========================================================================== */

/* ---------- PAGE HERO (listing + detail intro) ---------- */
.page-hero{
  padding-top:calc(var(--section-y) + 60px);
  padding-bottom:40px;
}
.page-hero .eyebrow{ margin-bottom:18px; }
.page-hero h1{
  font-size:clamp(34px, 5vw, 58px);
  max-width:760px;
}
.page-hero p{
  margin-top:22px;
  max-width:600px;
  color:var(--text-muted);
  font-size:18px;
  line-height:1.65;
}
.page-hero-meta{
  display:flex;
  gap:36px;
  margin-top:44px;
  padding-top:28px;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}
.page-hero-meta .stat h3{ font-size:28px; }
.page-hero-meta .stat span{ display:block; color:var(--text-muted); font-size:13px; margin-top:4px; }

/* ---------- PROJECTS HERO (short, centered — mirrors the homepage hero) ---------- */
.projects-hero{
  padding-top:calc(var(--section-y) + 60px);
  padding-bottom:70px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.projects-hero h1{
  font-size:clamp(36px, 5.6vw, 60px);
  max-width:820px;
  font-weight:600;
}
.projects-hero .hero-desc{ margin-top:28px; }

/* ---------- PROJECTS MASONRY GRID ---------- */
.projects-showcase{ padding-top:0; }
.projects-masonry{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:150px;
  align-items:start;
}
.masonry-col{
  display:flex;
  flex-direction:column;
  gap:60px;
}
.masonry-col-offset{ margin-top:100px; }

@media (max-width:900px){
  .projects-masonry{ grid-template-columns:1fr; gap:26px; }
  .masonry-col{ gap:26px; }
  .masonry-col-offset{ margin-top:0; }
}

/* wide cursor label for longer hover copy, e.g. "Read the Case Study" */
.cursor-label.cursor-label--wide{
  width:130px; height:130px;
  font-size:11px;
  line-height:1.4;
  text-align:center;
  padding:0 16px;
  white-space:normal;
}

/* ---------- PROJECTS GRID (legacy, retained for compatibility) ---------- */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
  padding-bottom:20px;
}
@media (max-width:1100px){
  .projects-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .projects-grid{ grid-template-columns:1fr; gap:26px; }
}

.project-card{
  display:flex;
  flex-direction:column;
  border-radius:24px;
  background:var(--bg);
  overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
  opacity:0;
  transform:translateY(28px);
}
.project-card.in-view{ opacity:1; transform:translateY(0); }
.project-card-media{
  position:relative;
  aspect-ratio:2/2.2;
  max-width:100%;
  overflow:hidden;
  background:var(--bg-secondary);
}
.project-card-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  border-radius:24px;
}
.project-card-cat{
  position:absolute; top:16px; left:16px; z-index:2;
  font-size:12px; font-weight:500; letter-spacing:0.04em;
  padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(6px);
  color:var(--text);
}
.project-card-body{
  padding:26px 26px 28px;
  display:flex;
  flex-direction:column;
  flex:1;
}
@media (max-width:640px){
  .project-card-body{ padding:20px 18px 22px; }
  .project-card-body h3{ font-size:18px; }
}
.project-card-body h3{
  font-size:20px;
  font-weight:500;
  line-height:1.3;
}
.project-card-body p{
  margin-top:10px;
  color:var(--text-muted);
  font-size:14.5px;
  line-height:1.6;
  flex:1;
}
.tag-list{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:18px;
}
.tag{
  font-size:11.5px; font-weight:500; letter-spacing:0.02em;
  padding:6px 12px; border-radius:999px;
  background:var(--bg-secondary);
  color:var(--text-muted);
  border:1px solid var(--border);
  white-space:nowrap;
}
.tag.tag-service{ color:var(--accent1); border-color:rgba(0,91,252,0.22); background:rgba(0,91,252,0.06); }
.project-card-cta{
  margin-top:22px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:500;
  color:var(--text);
}
.project-card-cta .arrow-ico{ width:15px; height:15px; transition:transform .3s ease; }
.project-card:hover .project-card-cta .arrow-ico{ transform:translate(3px,-3px); }

/* ==========================================================================
   PROJECT DETAIL PAGE
========================================================================== */

/* ---------- BACK LINK ---------- */
.detail-back{
  padding-top:calc(var(--section-y) + 50px);
  padding-bottom:0;
}
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:500; color:var(--text-muted);
  transition:color .3s ease, gap .3s ease;
}
.back-link:hover{ color:var(--text); gap:12px; }
.back-link svg{ width:15px; height:15px; }

/* ---------- HERO ---------- */
.project-hero{ padding-top:calc(var(--section-y) + 50px); padding-bottom:0; }
.project-hero-head{ max-width:820px; }
.project-hero-head .eyebrow{ margin-bottom:16px; }
.project-hero-head h1{ font-size:clamp(32px, 5vw, 56px); }
.project-hero-head p{ margin-top:20px; color:var(--text-muted); font-size:17px; line-height:1.6; max-width:640px; }
.project-hero-visual{
  margin-top:52px;
  margin-bottom:40px;
  border-radius:28px;
  overflow:hidden;
  aspect-ratio:21/9;
  box-shadow:0 40px 90px -30px rgba(9,29,57,0.28);
}
@media (max-width:900px){ .project-hero-visual{ aspect-ratio:4/3; border-radius:18px; } }
.project-hero-visual img{ width:100%; height:100%; object-fit:cover; }

/* ---------- OVERVIEW + FACTS ---------- */
.project-overview{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:70px;
  align-items:start;
}
@media (max-width:900px){ .project-overview{ grid-template-columns:1fr; gap:40px; } }
.project-overview h2{ font-size:clamp(24px,3vw,32px); font-weight:500; }
.project-overview .overview-copy p{ margin-top:18px; color:var(--text-muted); font-size:16.5px; line-height:1.75; }

.facts-card{
  border:1px solid var(--border);
  border-radius:22px;
  padding:32px;
  background:var(--bg-secondary);
}
@media (max-width:480px){
  .facts-card{ padding:22px 18px; }
  .facts-row{ flex-direction:column; gap:4px; padding:12px 0; }
  .facts-row span.value{ text-align:left; max-width:100%; }
}
.facts-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--border);
}
.facts-row:first-child{ padding-top:0; }
.facts-row:last-child{ border-bottom:none; padding-bottom:0; }
.facts-row span.label{ font-size:13px; color:var(--text-muted); }
.facts-row span.value{ font-size:14px; font-weight:500; text-align:right; max-width:60%; }
.facts-row a.value{ color:var(--accent1); }

/* ---------- TAG SECTIONS (services / tech stack) ---------- */
.tag-section{ margin-top:16px; }
.tag-section h4{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); font-weight:500; margin-bottom:12px; }
.tag-section .tag-list{ margin-top:0; }

/* ---------- DELIVERABLES CHECKLIST ---------- */
.deliverables-list{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.deliverables-list li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; color:var(--text); line-height:1.5;
}
.deliverables-list li::before{
  content:'';
  flex-shrink:0; width:16px; height:16px; margin-top:2px;
  border-radius:5px;
  background:rgba(0,91,252,0.1);
  border:1px solid rgba(0,91,252,0.3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5L9.5 17L19 7' stroke='%23005BFC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:11px;
}

/* ---------- CLIENT TESTIMONIAL QUOTE ---------- */
.quote-card{
  position:relative;
  max-width:820px; margin:0 auto;
  text-align:center;
  padding:56px 40px;
  border-radius:26px;
  background:var(--bg-secondary);
  border:1px solid var(--border);
}
.quote-mark{ width:36px; height:auto; color:var(--accent1); opacity:.5; margin:0 auto; }
.quote-card p{
  font-size:clamp(19px,2.4vw,26px); font-weight:500; line-height:1.5;
  margin-top:22px; color:var(--text);
}
.quote-person{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:26px; }
.quote-avatar{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent1), var(--accent2));
  color:#fff; font-weight:600; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.quote-name{ font-size:14.5px; font-weight:500; text-align:left; }
.quote-role{ font-size:13px; color:var(--text-muted); text-align:left; }

/* ---------- STORY SECTIONS: challenge / solution / results ---------- */
.story-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
@media (max-width:900px){ .story-grid{ grid-template-columns:1fr; } }
.story-card{
  border:1px solid var(--border);
  border-radius:22px;
  padding:34px;
  background:var(--bg);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.story-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -26px rgba(9,29,57,0.2); }
.story-card .num{ font-size:13px; color:var(--accent1); font-weight:600; letter-spacing:0.06em; }
.story-card h3{ font-size:21px; font-weight:500; margin-top:16px; }
.story-card p{ margin-top:12px; color:var(--text-muted); font-size:15px; line-height:1.7; }

/* ---------- RESULTS STRIP ---------- */
.results-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:24px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:44px 0;
}
@media (max-width:480px){
  .results-strip{ grid-template-columns:1fr 1fr; gap:20px 14px; padding:28px 0; }
  .results-strip .result h3{ font-size:24px; }
}
.results-strip .result{ text-align:center; }
.results-strip .result h3{ font-size:clamp(26px,3.4vw,40px); color:var(--accent1); }
.results-strip .result span{ display:block; margin-top:8px; color:var(--text-muted); font-size:13.5px; }

/* ---------- GALLERY ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.gallery-grid a{ display:block; border-radius:18px; overflow:hidden; aspect-ratio:4/3; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.gallery-grid a:hover img{ transform:scale(1.06); }
@media (max-width:900px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .gallery-grid{ grid-template-columns:1fr; } }

/* ---------- PREV / NEXT NAVIGATION ---------- */
.project-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
@media (max-width:700px){ .project-nav{ grid-template-columns:1fr; } }
.project-nav-link{
  display:flex;
  align-items:center;
  gap:20px;
  padding:24px;
  border:1px solid var(--border);
  border-radius:20px;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.project-nav-link:hover{ border-color:transparent; transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(9,29,57,0.24); }
.project-nav-link.next{ justify-content:flex-end; text-align:right; flex-direction:row-reverse; }
.project-nav-thumb{ width:76px; height:76px; border-radius:14px; overflow:hidden; flex-shrink:0; }
.project-nav-thumb img{ width:100%; height:100%; object-fit:cover; }
.project-nav-text .label{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
.project-nav-link.next .label{ justify-content:flex-end; }
.project-nav-text .label svg{ width:13px; height:13px; }
.project-nav-text h4{ font-size:16px; font-weight:500; margin-top:8px; }

/* ---------- PREV / NEXT — CIRCULAR MAGNETIC REVEAL ---------- */
.project-nav-section{ padding-top:40px; padding-bottom:70px; }
.project-nav-circles{
  display:flex; align-items:center; justify-content:space-between;
  min-height:260px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.nav-circle-zone{
  position:relative;
  display:flex; align-items:center; gap:24px;
  flex:1; height:260px;
  cursor:pointer;
}
.nav-circle-zone.next{ justify-content:flex-end; }
.nav-circle-center{ flex-shrink:0; padding:0 30px; text-align:center; }
.nav-circle-center .bp-coord{
  font-family:'Courier New', monospace; font-size:11px; letter-spacing:0.1em;
  color:var(--text-muted); opacity:.55; white-space:nowrap;
}
@media (max-width:640px){ .nav-circle-center{ display:none; } }

.nav-circle-track{
  position:relative;
  width:88px; height:88px; border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  background:var(--dark);
  box-shadow:0 20px 44px -22px rgba(9,29,57,0.35);
  opacity:1; transform:scale(1);
  transition:opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.34,1.56,.64,1);
}
.nav-circle-zone:hover .nav-circle-track{ transform:scale(1.08); }
.nav-circle-track img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.nav-circle-zone:hover .nav-circle-track img{ transform:scale(1.1); }
.nav-circle-track::after{ content:''; position:absolute; inset:0; background:rgba(9,29,57,0.35); }
.nav-circle-arrow{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
}
.nav-circle-arrow svg{ width:22px; height:22px; }

/* ripple, injected on click */
.nav-circle-ripple{
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.5);
  transform:scale(0); opacity:.8;
  animation:navCircleRipple .6s ease-out forwards;
  pointer-events:none; z-index:3;
}
@keyframes navCircleRipple{ to{ transform:scale(1); opacity:0; } }

.nav-circle-label{
  display:flex; flex-direction:column; gap:6px;
  opacity:1; transform:translateX(0);
  transition:opacity .4s ease, transform .4s ease;
}
.nav-circle-label.align-right{ align-items:flex-end; text-align:right; }
.nav-circle-label .tag{
  font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted);
}
.nav-circle-label strong{ font-size:19px; font-weight:500; color:var(--text); max-width:260px; }
@media (max-width:760px){
  .nav-circle-label strong{ font-size:15px; max-width:150px; }
  .nav-circle-track{ width:64px; height:64px; }
}
@media (max-width:640px){
  .project-nav-circles{ flex-direction:column; min-height:auto; padding:24px 0; gap:20px; }
  .nav-circle-zone{ height:auto; padding:12px 0; gap:16px; width:100%; }
  .nav-circle-zone.next{ justify-content:flex-start; flex-direction:row-reverse; }
  .nav-circle-label.align-right{ align-items:flex-end; text-align:right; }
}

/* ---------- CONTACT CTA ---------- */
.contact-cta{
  text-align:center;
  background:var(--bg-secondary);
}
.contact-cta h2{
  font-size:clamp(34px, 5.4vw, 64px);
  font-weight:600;
  max-width:820px;
  margin:0 auto;
}
.contact-cta p{
  margin-top:22px;
  color:var(--text-muted);
  font-size:18px;
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}
.contact-cta .btn-wrap{
  margin-top:40px;
  display:flex;
  justify-content:center;
}

/* ---------- SECTION LABEL HELPER ---------- */
.section-label{ margin-bottom:44px; }
.section-label h2{ font-size:clamp(26px,3.4vw,40px); font-weight:500; margin-top:16px; max-width:640px; }

/* ---------- SKELETON / LAZY IMAGE FADE-IN ---------- */
img[loading="lazy"]{
  background:var(--bg-secondary);
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .project-card, .story-card, .nav-circle-track, .nav-circle-track img{ transition:none; }
  .project-card{ opacity:1; transform:none; }
}