/* global */
* { box-sizing:border-box; cursor:none; user-select:none; }
body, html { margin:0; padding:0; height:100%; font-family:'Epilogue', sans-serif; background:#000000; color:#222; }

/* container */
.container { display:flex; justify-content: space-between; height:100vh; overflow:hidden; }

/* left Sidebar */
.sidebar { width:200px; background:#ffffff; padding:1rem; display:flex; flex-direction:column; justify-content:space-between; font-size:0.8rem; color:#000000; position:sticky; top:0; height:100vh; overflow-y:auto; border-right-style: dashed; border-right: #ff6464; }
.sidebar-top { margin-bottom:1rem; }
.name a { text-decoration:none; color:inherit; font-weight:700; font-size:0.8rem; }
.name a:hover { text-decoration:underline; }
.bio { margin-top:0.5rem; font-size:0.75rem; line-height:1.5; color:#000000; }
.sidebar-bottom { display:flex; flex-direction:column; gap:0.7rem; }
.sidebar-bottom a { color:#0000CD; text-decoration:none; font-weight:500; font-size:13px; text-align:left; }
.sidebar-bottom a:hover { text-decoration: line-through; }
.made { margin-top:1rem; }

/* Right Sidebar */
.sidebar-right { width:200px; background: #0000CD ; padding:1rem; display:flex; flex-direction:column; font-size:0.8rem; color:#ffffff; position:sticky; top:0; height:100vh; overflow-y:auto; border-left: #000000; }

/* Middle Content */
.content { flex:1; background:#fff; padding:1rem; overflow-y:auto; position:relative; display:flex; flex-direction:column; }

/* Clock */
.clock { font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color:#0000CD; position:relative; top:1rem; margin-left:auto; z-index:1000; }

/* filters */
.filters { margin-bottom:1rem; display:flex; flex-wrap:wrap; gap:0.5rem; }
.filter-btn { padding:0.5rem 1rem; background:#ffffff; color:#0000CD; border:#000cd0; font-family:'Epilogue', sans-serif; font-size:0.8rem; border-width:4px; cursor:none; }
.filter-btn:hover, .filter-btn.active { background:#0000CD; color:#ffffff; border: #0000CD; }

/* case cards */
.cards { display:flex; flex-direction:column; gap:1rem; }
.case-card { display:flex; flex-direction:column; border:1px solid #0000CD; border-radius:0; overflow:hidden; text-decoration:none; color:#222; background:#fff; }
.case-card img { width:100%; height:300px; object-fit:cover; object-position: middle; display:block; }
.case-card .caption { padding: 0.5rem 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start; }
.case-card h3 { font-weight:600; margin:0; }
.desc { font-size:0.8rem; line-height:1.4; }

.view-cs {
  all: unset;
  font-size: 0.8rem;
  color: #0000CD;
  font-weight: 500;
  text-align: left;
  padding: 0;
  cursor: none;
  text-decoration: none; 
}

.view-cs:hover {
  all:unset;
  color: #0000CD;
  font-size: 0.8rem;
  text-decoration: line-through;
}

.view-cs:active{

  text-decoration: underline; 
}
 

/* overlay */
.overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); justify-content:center; align-items:center; z-index:2000; }
.overlay-content { background:#fff; padding:1rem; border-radius:6px; max-width:600px; width:90%; max-height:90%; overflow-y:auto; position:relative; }
.close-overlay { position:absolute; top:10px; right:10px; font-size:1.2rem; background:none; border:none; cursor:none; }

/* custom cursor */
#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #0000CD;      
  border: 1px solid #ffffff;      
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 10000;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}


/* Responsive */
@media (max-width:1024px){ 
  .container{ flex-direction:column; } 
  .sidebar, 
  .sidebar-right{ width:100%; height:auto; flex-direction:row; overflow-x:auto; } 
  .content{ width:100%; } }

/* Hide/show for detail view */
.hidden {
  display: none;
}

/* Breadcrumb */
.breadcrumb {
  display: inline-block;
  color: #0000CD;
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 1rem;
}
.breadcrumb:hover {
  text-decoration: underline;
}

/* Detail view styling */
.case-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}
.detail-content img {
  width: 100%;
  height: auto;
  border: 1px solid #0000CD;
}
.detail-content h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}
.detail-content #detail-tags {
  font-size: 0.75rem;
  color: #0000CD;
}
.detail-content p {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* container layout */
.container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* left sidebar */
.sidebar {
  width: 220px;
  background: #fff;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid #0000CD;
}

.sidebar .breadcrumb {
  font-weight: 500;
  margin-bottom: 1rem;
  display: inline-block;
  color: #0000CD;
  text-decoration: none;
}

.sidebar .breadcrumb:hover {
  text-decoration: underline;
}


.other-cases h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: #0000CD;
}

.other-cases ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.other-cases li a {
  text-decoration: none;
  color: #222;
  font-size: 0.85rem;
}

.other-cases li a:hover {
  text-decoration: underline;
}

/* middle content */
.content {
  flex: 1;
  background: #fff;
  padding: 2rem;
  overflow-y: auto;
  position: relative;
}

/* clock */
.clock {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: #0000CD;
  position: sticky;
  top: 1rem;
  right: 2rem;
  margin-left: auto;
  z-index: 1000;
}

/* case study sections */
h2 {
  margin-top: 0;
  color: #0000CD;
}
.tags {
  margin-bottom: 1rem;
}
.tags .tag {
  display: inline-block;
  font-size: 0.65rem;
  padding: 2px 6px;
  margin-right: 0.25rem;
  border: 1px solid #0000CD;
  border-radius: 3px;
  background: #f5f5f5;
  color: #0000CD;
}
.project-meta p {
  margin: 0.2rem 0;
}
section h3 {
  margin-top: 2rem;
}
section img {
  width: 100%;
  height: auto;
  margin: 1rem 0;
  border: 1px solid #0000CD;
}

/* 🎥 Masonry grid for videos */
.masonry-video {
  column-count: 2;           /* number of columns */
  column-gap: 1rem;          /* space between videos */
  margin-top: 2rem;
}

.masonry-video .masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  position: relative;
}

.masonry-video video {
  width: 100%;
  height: auto;
  display: block;
  background-color: #000;
  object-fit: cover;          /* fills each grid cell nicely */
  transition: transform 0.2s ease-in-out;
}

/* optional hover scaling, to match your image masonry */
.masonry-video video:hover {
  transform: scale(1.02);
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .masonry-video {
    column-count: 2;
  }
}

@media (max-width: 600px) {
  .masonry-video {
    column-count: 1;
  }
}