/* Browser-style gallery for project screenshots */
.root-work-gallery {
  --browser-bg: linear-gradient(180deg,#0b0d0f,#0f1113);
  --browser-surface: #0b0c0d;
  --accent: #f7e600;
}

/* Ensure gallery container centers inside the page container */
.work-gallery-container { display:flex; justify-content:center; }

.browser-gallery {
  width: min(1200px, 100%);
  max-width: 1200px;
  box-sizing: border-box;
  margin: 0 auto; /* center */
  border-radius: 12px;
  background: var(--browser-bg);
  box-shadow: 0 22px 60px rgba(2,6,23,0.55), 0 5px 14px rgba(0,0,0,0.45);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
}
.browser-top { display:flex; align-items:center; gap:12px; padding:14px 16px; background: rgba(255,255,255,0.02); justify-content: space-between; }
.browser-controls { display:flex; gap:8px; align-items:center; }

.win-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:28px; padding:5px; border-radius:7px; background: transparent; border: none; color: var(--text-subtle); cursor: pointer; transition: background 140ms ease, color 140ms ease, transform 100ms ease; }
.win-btn:hover { background: rgba(255,255,255,0.02); color: var(--text-light); transform: translateY(-1px); }
.win-btn.win-close:hover { background: rgba(247,50,50,0.10); color: #ff7b7b; }
.win-btn svg { display:block; }

.browser-tabs { display:flex; gap:6px; margin:0; }
.browser-tab { background:transparent; color:var(--text-muted); border: none; padding:8px 12px; border-radius:8px; cursor:pointer; font-family:var(--font-display); font-weight:600; transition: background 220ms ease, color 220ms ease; }
.browser-tab.active { background: rgba(255,255,255,0.04); color:var(--text-light); box-shadow: inset 0 -2px 0 var(--accent); }
.browser-address { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.02); }
.address-input { width:100%; padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background: rgba(255,255,255,0.02); color:var(--text-subtle); font-family:var(--font-primary); }
.browser-content { padding: 14px; display:flex; justify-content:center; align-items:center; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.06)); position: relative; }
.browser-content .screenshot-wrap { width:100%; height:60vh; border-radius: 8px; overflow: hidden; box-shadow: 0 16px 40px rgba(2,6,23,0.72); background: linear-gradient(180deg, rgba(6,8,10,0.6), rgba(2,4,6,0.6)); border: 1px solid rgba(255,255,255,0.02); position: relative; flex: 0 0 auto; }

/* Overlay card that appears when hovering video gallery */
.gallery-overlay {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  bottom: 14px;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease, background 200ms ease;
  background: rgba(0,0,0,0.0);
  z-index: 10;
  border-radius: 8px;
  flex: none;
}
.gallery-overlay .overlay-card{
  min-width: 220px;
  max-width: 80%;
  padding: 18px 20px;
  border-radius: 12px;
  background: rgba(6,8,10,0.85);
  color: white;
  text-align: center;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
  transform: translateY(0) scale(1);
  transition: transform 220ms ease, opacity 220ms ease;
  pointer-events: auto;
}
.gallery-overlay .overlay-title{ display:block; font-weight:700; font-size:1.02rem; margin-bottom:6px; }
.gallery-overlay .overlay-sub{ display:block; font-size:0.9rem; opacity:0.85; }

/* Show overlay on hover */
.browser-content:hover .gallery-overlay{ opacity: 1; pointer-events: auto; background: rgba(0,0,0,0.55); }
.browser-content img,
.browser-content video { position: absolute; inset: 0; width:100%; height:100%; max-width:100%; max-height:100%; display:block; object-fit:cover; object-position: top center; border-radius:8px; box-shadow: 0 18px 50px rgba(2,6,23,0.7); background:#0a0a0a; transition: opacity 320ms ease, transform 360ms cubic-bezier(.2,.9,.2,1); }
.browser-footer { padding:12px 18px; color:var(--text-subtle); font-size:0.95rem; display:flex; justify-content:flex-end; }

/* Site-flavoured chrome */
.browser-gallery {
  border: 1px solid rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(7,9,11,0.9), rgba(10,11,13,0.98));
  box-shadow: 0 30px 80px rgba(2,6,23,0.7), 0 8px 24px rgba(11,17,23,0.6), 0 0 40px rgba(247,230,0,0.03) inset;
}

/* Light theme overrides for gallery chrome */
body.light-mode .root-work-gallery {
  --browser-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,249,252,0.98));
  --browser-surface: #ffffff;
  --accent: var(--accent);
}

body.light-mode .browser-gallery {
  background: var(--browser-bg);
  border: 1px solid rgba(11,17,23,0.06);
  box-shadow: 0 18px 36px rgba(11,17,23,0.06), 0 6px 20px rgba(11,17,23,0.04);
}

body.light-mode .browser-top { background: rgba(255,255,255,0.92); }

body.light-mode .browser-content { background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(247,249,252,0.96)); }

body.light-mode .browser-content .screenshot-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(249,250,252,0.94));
  border: 1px solid rgba(11,17,23,0.06);
  box-shadow: 0 12px 30px rgba(11,17,23,0.06);
}

body.light-mode .browser-tab { background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,249,250,0.96)); color: var(--text-light); border-color: rgba(11,17,23,0.04); }


/* Tabs styled for LyfePixels — compact, uppercase feel */
.browser-tabs { display:flex; gap:10px; margin:0; align-items:center; padding:0 4px; }
.browser-tab {
  position: relative;
  z-index: 1;
  padding: 8px 14px;
  border-radius: 12px;
  color: var(--text-subtle);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.03));
  border: 1px solid rgba(255,255,255,0.02);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: none;
  box-shadow: 0 5px 14px rgba(0,0,0,0.55);
  transition: transform 180ms cubic-bezier(.2,.9,.2,1), box-shadow 180ms ease, color 140ms ease, background 140ms ease;
}
.browser-tab:hover { transform: translateY(-2px); color: var(--text-light); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }
.browser-tab:focus { outline: none; box-shadow: 0 6px 20px rgba(11,17,23,0.5), 0 0 0 3px rgba(183,12,217,0.05); }
.browser-tab.active {
  color: var(--text-light);
  background: transparent;
  box-shadow: none;
  transform: none;
  border-color: rgba(255,255,255,0.03);
}
.browser-tab.active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(190,12,215,0.95), rgba(247,230,0,0.95));
  opacity: 0.95;
  box-shadow: none;
}

/* Address bar matches site monospace aesthetic */
.address-input { font-family: var(--font-primary); font-size: 0.9rem; color: var(--text-subtle); background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.06)); border: 1px solid rgba(255,255,255,0.03); padding: 8px 10px; }

/* Content surface: subtle glass card with accent glow when active */
.browser-content { padding: 14px; }

/* Win buttons — a touch of colour tied to the brand */
.win-btn.win-min { color: #ffd54a; }
.win-btn.win-max { color: #7be49a; }
.win-btn.win-close { color: #ff8b8b; }

@media (max-width:720px){
  .browser-gallery{ width: 96vw; }
  .browser-tabs { overflow:auto; }
  .browser-content img { max-height:55vh; }
}

@media (max-width:720px){
  .browser-gallery{ width: 96vw; }
  .browser-tabs { overflow:auto; }
  .browser-content img { max-height:55vh; }
}

/* Mobile-specific tweaks */
@media (max-width:480px){
  .browser-gallery{ width: 98vw; max-width: 98vw; border-radius:8px; }
  .browser-top { padding: 8px; gap:8px; }
  .browser-controls { gap:6px; }
  .win-btn { width:26px; height:22px; padding:4px; border-radius:6px; }
  .browser-tabs { gap:8px; }
  .browser-tab { padding:6px 10px; font-size:0.86rem; border-radius:8px; box-shadow:none; }
  .browser-address { padding:8px; }
  .address-input { padding:8px 10px; font-size:0.9rem; }
  .browser-content { padding:10px; }
  .browser-content .screenshot-wrap { height:45vh; border-radius:6px; }
  .browser-content img, .browser-content video { border-radius:6px; box-shadow:none; }
  .browser-footer { padding:8px 12px; font-size:0.92rem; }
  .browser-gallery { box-shadow: 0 10px 28px rgba(11,17,23,0.06); }
}

/* Improve very small phone layouts */
@media (max-width:420px){
  /* keep tabs and window controls on one row, address bar below */
  .browser-top { display:flex; flex-direction:row; align-items:center; gap:8px; padding:8px; }
  .browser-tabs { order:1; display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; padding-bottom:4px; flex:1 1 auto; }
  .browser-tab { flex:0 0 auto; padding:8px 12px; font-size:0.86rem; border-radius:999px; background: rgba(255,255,255,0.02); box-shadow:none; border: 1px solid rgba(255,255,255,0.03); }
  .browser-tab.active { background: linear-gradient(90deg, rgba(190,12,215,0.12), rgba(247,230,0,0.08)); color: var(--text-light); border-color: rgba(255,255,255,0.06); }
  .browser-tab::after { display:none; }

  .browser-controls { order:2; flex:0 0 auto; display:flex; gap:8px; align-items:center; margin-left:8px; }
  .win-btn { display:inline-flex !important; width:26px; height:22px; padding:4px; border-radius:6px; }

  .browser-address { order:3; width:100%; margin-top:6px; padding:6px 0 0 0; }
  .address-input { width:100%; box-sizing:border-box; padding:8px 10px; }

  /* Reserve space for the video using aspect-ratio so absolute children can overlay */
  .browser-content .screenshot-wrap { width:100%; aspect-ratio: 16 / 9; height: auto; min-height: 0; max-height: 80vh; position: relative; overflow: hidden; display:flex; align-items:flex-start; justify-content:center; }
  /* Keep both videos stacked (absolute) but show them with contain scaling */
  .browser-content .screenshot-wrap video {
    position: absolute !important;
    inset: 0;
    width:100% !important;
    height:100% !important;
    max-width:100%;
    object-fit: contain !important;
    object-position: center top !important;
    margin: 0;
  }
  .browser-gallery { margin-top: 6px; box-shadow: 0 10px 28px rgba(11,17,23,0.06); }

  /* scrollbar for tabs */
  .browser-tabs::-webkit-scrollbar { height:6px; }
  .browser-tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.04); border-radius: 6px; }
}