/* ICODE MEDIA · Portfolio Clickthrough V34
   Scoped to Website Development, Brand Identity and Company Profile direct-link cards.
   No global site.css edits.
*/

.archive-grid.archive-website-development .icode-v34-direct-card,
.archive-grid.archive-branding-identity .icode-v34-direct-card,
.archive-grid.archive-company-profile .icode-v34-direct-card{
  border:1px solid rgba(15,41,51,.10);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(15,41,51,.045);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.archive-grid.archive-website-development .icode-v34-direct-card:hover,
.archive-grid.archive-branding-identity .icode-v34-direct-card:hover,
.archive-grid.archive-company-profile .icode-v34-direct-card:hover{
  transform:translateY(-3px);
  border-color:rgba(221,160,110,.55);
  box-shadow:0 16px 38px rgba(15,41,51,.085);
}

.icode-v34-project-media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4/3;
  padding:0;
  margin:0;
  overflow:hidden;
  background:#eef1f1;
  text-decoration:none!important;
  cursor:pointer;
}

.icode-v34-project-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  transition:transform .28s ease!important;
}

.icode-v34-direct-card:hover .icode-v34-project-media img{
  transform:scale(1.025);
}

.icode-v34-project-media>span{
  position:absolute;
  right:10px;
  top:10px;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(15,41,51,.92);
  color:#fff;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  opacity:0;
  transform:translateY(-3px);
  transition:opacity .2s ease,transform .2s ease;
}

.icode-v34-direct-card:hover .icode-v34-project-media>span{
  opacity:1;
  transform:none;
}

.icode-v34-project-meta{
  display:block!important;
  padding:0!important;
  margin:0!important;
}

.icode-v34-project-cta{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  min-height:72px;
  padding:13px 15px!important;
  background:#fff;
  color:#0f2933!important;
  text-decoration:none!important;
  white-space:normal!important;
  border-top:1px solid rgba(15,41,51,.08);
}

.icode-v34-project-cta>span{
  display:grid;
  gap:4px;
  min-width:0;
}

.icode-v34-project-cta small{
  color:#c86f3d;
  font-size:8px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.12em;
}

.icode-v34-project-cta strong{
  color:#0f2933;
  font-size:13px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.015em;
  overflow-wrap:anywhere;
}

.icode-v34-project-cta>b{
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f7eee7;
  color:#c86f3d;
  font-size:17px;
  transition:transform .2s ease,background .2s ease;
}

.icode-v34-project-cta:hover>b{
  transform:translate(2px,-2px);
  background:#dda06e;
  color:#0f2933;
}

/* Featured/hero studio pieces become actual direct links for these pages. */
.icode-v34-direct-piece{
  text-decoration:none!important;
  cursor:pointer!important;
}

.icode-v34-direct-piece span{
  text-decoration:none!important;
}

/* Mobile keeps the same visual rhythm, only the CTA becomes easier to read/tap. */
@media(max-width:700px){
  .icode-v34-project-cta{
    min-height:66px;
    padding:11px 12px!important;
  }
  .icode-v34-project-cta strong{
    font-size:11px;
  }
  .icode-v34-project-cta>b{
    flex-basis:30px;
    width:30px;
    height:30px;
    font-size:15px;
  }
  .icode-v34-project-media>span{
    opacity:1;
    transform:none;
  }
}