/* DWEBMEDIA V35 — shared project selection, top-cropped screenshots, linked hero slider. */

/* Homepage project cards: the one full-page screenshot always starts from the top. */
.card-thumb{
  overflow:hidden;
}
.card-thumb img{
  display:block;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:100%;
  object-fit:initial!important;
  object-position:top left!important;
  transform-origin:center top;
  border-radius:0!important;
}
.work-card:hover .card-thumb img{
  transform:scale(1.022);
}

/* Project detail hero: browser frame stays rounded, the screenshot itself stays square. */
.project-v25 .pv26-hero-browser{
  overflow:hidden;
}
.project-v25 .pv26-hero-browser .dweb-hero-crop{
  width:100%;
  height:clamp(360px,35vw,560px);
  display:block;
  overflow:hidden;
  border-radius:0!important;
  background:#d6e2e3;
}
.project-v25 .pv26-hero-browser .dweb-hero-crop img{
  display:block;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  object-fit:initial!important;
  object-position:top left!important;
  margin:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
  position:static!important;
}

/* Full project preview stays a complete scrollable screenshot. */
.project-v25 .pv25-browser-scroll img{
  display:block;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  object-fit:contain!important;
  object-position:top!important;
  border-radius:0!important;
}

/* Homepage featured project: make the whole visual a project link. */
.hero-image.is-web-concept{
  position:relative;
}
.dweb-hero-slide-link{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  color:inherit;
  text-decoration:none;
  border-radius:inherit;
  overflow:hidden;
}
.dweb-hero-slide-link:focus-visible{
  outline:3px solid #E94B2B;
  outline-offset:4px;
}
.hero-image.is-web-concept .hero-web-scene{
  z-index:1;
}
.hero-image.is-web-concept .hero-project-tag{
  z-index:3;
  pointer-events:none;
}

/* The hero browser also uses the top of the same long screenshot. */
.hero-web-scene .web-browser-screen{
  overflow:hidden;
}
.hero-web-scene .web-browser-screen img{
  display:block!important;
  position:static!important;
  inset:auto!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:100%;
  object-fit:initial!important;
  object-position:top left!important;
  transform:none!important;
  transition:opacity .2s ease!important;
  border-radius:0!important;
}
.hero-web-scene .web-mobile-window img{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:100%;
  object-fit:initial!important;
  object-position:top left!important;
  border-radius:12px;
}

/* Slider controls fit the existing editorial footer below the hero visual. */
.hero-slider-controls{
  display:flex;
  align-items:center;
  gap:9px;
  margin-left:auto;
}
.hero-slider-controls .hero-indicators{
  margin-left:0;
}
.hero-slider-arrow{
  width:31px;
  height:31px;
  display:inline-grid;
  place-items:center;
  border:1px solid #B8C8C8;
  border-radius:50%;
  padding:0;
  background:transparent;
  color:#0B2324;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.hero-slider-arrow:hover,
.hero-slider-arrow:focus-visible{
  background:#0B2324;
  color:#fff;
  border-color:#0B2324;
  transform:translateY(-1px);
}
.hero-slider-arrow:focus-visible{
  outline:2px solid #E94B2B;
  outline-offset:2px;
}
.hero-indicators button{
  cursor:pointer;
}

/* Keep the large diagonal project CTA in sync with the active slide. */
#dweb-hero-corner-link{
  z-index:4;
}

@media(max-width:760px){
  .project-v25 .pv26-hero-browser .dweb-hero-crop{
    height:320px;
  }
  .hero-slider-controls{
    gap:6px;
    margin-left:auto;
  }
  .hero-slider-arrow{
    width:28px;
    height:28px;
    font-size:13px;
  }
  .hero-slider-controls .hero-indicators{
    gap:5px;
  }
  .hero-slider-controls .hero-indicators button{
    width:18px;
    min-width:18px;
    height:4px;
    min-height:4px;
  }
  .hero-slider-controls .hero-indicators button.active{
    width:28px;
  }
}

@media(max-width:430px){
  .hero-under-image{
    align-items:flex-start;
  }
  .hero-slider-arrow{
    display:none;
  }
}


/* V35 — homepage editorial project picker + portfolio archive polish. */
small#hero-project-type{
  display:none;
}

/* Portfolio list: keep excerpts visually even and give pagination its own rhythm. */
.dweb-archive .card-info small{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.dweb-pagination{
  margin-top:clamp(72px,8vw,120px);
  padding-top:26px;
  border-top:1px solid #cbd6d6;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.dweb-pagination-state{
  flex:0 0 auto;
  font-size:10px;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#7e8d8d;
}
.dweb-pagination-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}
.dweb-pagination .page-numbers{
  min-width:42px;
  height:42px;
  padding:0 13px;
  border:1px solid #bdcaca;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#0b2324;
  background:transparent;
  font-size:12px;
  line-height:1;
  text-decoration:none;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.dweb-pagination a.page-numbers:hover{
  background:#0b2324;
  border-color:#0b2324;
  color:#fff;
  transform:translateY(-1px);
}
.dweb-pagination .page-numbers.current{
  background:#0b2324;
  border-color:#0b2324;
  color:#fff;
}
.dweb-pagination .page-numbers.prev,
.dweb-pagination .page-numbers.next{
  min-width:auto;
  padding-inline:18px;
}
.dweb-pagination .page-numbers.dots{
  border-color:transparent;
  min-width:26px;
  padding:0;
}

@media(max-width:760px){
  .dweb-pagination{
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
    margin-top:62px;
  }
  .dweb-pagination-links{
    justify-content:flex-start;
  }
  .dweb-pagination .page-numbers{
    min-width:38px;
    height:38px;
    padding:0 11px;
  }
  .dweb-pagination .page-numbers.prev,
  .dweb-pagination .page-numbers.next{
    padding-inline:14px;
  }
}