/* DWEBMEDIA V40 — mini browser frames for project cards
   Shared visual language with the project-detail hero, kept intentionally lighter. */

.dweb-browser-card{
  display:flex;
  flex-direction:column;
  background:#eef3f3;
  border:1px solid rgba(11,35,36,.20);
  border-radius:16px!important;
  overflow:hidden;
  isolation:isolate;
}

.dweb-browser-bar{
  position:relative;
  z-index:4;
  flex:0 0 42px;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  background:#f4f7f7;
  border-bottom:1px solid rgba(11,35,36,.10);
  color:#839091;
  font-size:11px;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
}

.dweb-browser-dots{
  flex:0 0 auto;
  display:flex;
  gap:6px;
  align-items:center;
}

.dweb-browser-dots i{
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ef776c;
}

.dweb-browser-dots i:nth-child(2){background:#dfbd62;}
.dweb-browser-dots i:nth-child(3){background:#75b89b;}

.dweb-browser-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dweb-browser-viewport{
  position:relative;
  display:block;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:#dce6e6;
}

/* The screenshot is a full-page capture. Always show it from the very top. */
.dweb-browser-viewport > img{
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  object-fit:initial!important;
  object-position:top left!important;
  border-radius:0!important;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
  transform-origin:center top;
}

.work-card:hover .dweb-browser-viewport > img{
  transform:scale(1.018);
}

/* On homepage the category badge belongs to the screenshot viewport, not the browser chrome. */
.dweb-browser-viewport .card-tags{
  top:14px;
  left:14px;
  z-index:3;
}

/* Placeholder must fill only the viewport area. */
.dweb-browser-viewport .dweb-card-placeholder{
  height:100%;
  min-height:100%;
}

/* Archive cards can be a touch more editorial, without becoming full project heroes. */
.dweb-archive .dweb-browser-bar{
  min-height:46px;
  flex-basis:46px;
  padding-inline:17px;
  font-size:11px;
}

/* Keep the existing overall card proportion; chrome is included inside it. */
.card-thumb.dweb-browser-card{
  aspect-ratio:1.43;
}

/* The generic top-crop rule from V35 should not force browser viewport images to full height. */
.card-thumb.dweb-browser-card .dweb-browser-viewport img{
  min-height:0!important;
}

@media(max-width:760px){
  .dweb-browser-bar,
  .dweb-archive .dweb-browser-bar{
    min-height:38px;
    flex-basis:38px;
    padding-inline:13px;
    gap:9px;
    font-size:10px;
  }

  .dweb-browser-dots{gap:5px;}
  .dweb-browser-dots i{
    width:7px;
    height:7px;
  }

  .dweb-browser-viewport .card-tags{
    top:11px;
    left:11px;
  }
}