/* =========================================================
   DanielBelai – Archive Layout (FINAL)
   ========================================================= */

*, *::before, *::after{
  box-sizing:border-box !important;
}

html, body{
  overflow-x:hidden !important;
}

.db-archive-page{
  min-height:100vh !important;
  padding:20px !important;
  padding-bottom:0 !important;

  background:#f1ede7 !important;
  color:#bf0101 !important;

  font-family:"Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
              Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-weight:500 !important;
  font-size:14px !important;
  line-height:1.35 !important;
  letter-spacing:.02em !important;
}

/* TOP NAV – Desktop original */
.db-archive-topnav{
  position:static !important;
  width:100% !important;
  text-align:center !important;
  white-space:nowrap !important;

  padding-top:120px !important;
  margin:0 !important;

  background:transparent !important;
  opacity:1 !important;
}

.db-archive-topnav a{
  color:inherit !important;
  text-decoration:none !important;
  font-weight:500 !important;
}

.db-archive-topnav a:hover{
  opacity:.6 !important;
}

.db-archive-gap{
  display:inline-block !important;
  width:28px !important;
}

body.page-template-template-archive .db-archive-archive{
  font-weight:700 !important;
}

/* GRID – Desktop original */
.db-archive-grid-wrap{
  width:100vw !important;
  display:flex !important;
  justify-content:center !important;
  padding:0 20px !important;
}

.db-archive-grid{
  padding-top:120px !important;
  padding-bottom:40px !important;

  display:grid !important;
  grid-template-columns:repeat(3, max-content) !important;

  justify-content:center !important;
  justify-items:center !important;
  align-items:start !important;

  column-gap:110px !important;
  row-gap:90px !important;

  margin:0 auto !important;
}

/* ITEMS */
.db-archive-item{
  display:block !important;
  position:relative !important;
  text-decoration:none !important;
  cursor:pointer !important;
  overflow:visible !important;
}

.db-archive-item.db-portrait{
  width:240px !important;
}

.db-archive-item.db-landscape{
  width:320px !important;
  margin-top:70px !important;
}

.db-archive-item img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:cover !important;

  transform:scale(1) !important;
  transition:transform .22s ease !important;
}

.db-archive-item.db-portrait img{
  height:360px !important;
}

.db-archive-item.db-landscape img{
  height:180px !important;
}

.db-archive-item:hover img{
  transform:scale(1.03) !important;
}

/* PLAY ICON */
.db-play{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) scale(.96) !important;

  width:96px !important;
  height:96px !important;

  opacity:0 !important;
  transition:opacity .18s ease, transform .18s ease !important;
  pointer-events:none !important;
}

.db-play::before{
  content:"" !important;
  position:absolute !important;
  left:38px !important;
  top:28px !important;

  border-top:20px solid transparent !important;
  border-bottom:20px solid transparent !important;
  border-left:32px solid #fff !important;
}

.db-archive-item:hover .db-play{
  opacity:1 !important;
  transform:translate(-50%, -50%) scale(1) !important;
}

/* TITLES */
.db-archive-title{
  display:block !important;
  margin-top:14px !important;
  text-align:center !important;

  font-family:"Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
              Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:1.25 !important;
  letter-spacing:.02em !important;
  color:#111 !important;
}

/* FOOTER */
.db-archive-footer{
  position:static !important;

  margin-left:-20px !important;
  margin-right:-20px !important;
  width:calc(100% + 40px) !important;

  margin-top:80px !important;
  padding:44px 20px !important;

  background:#000 !important;
  color:#fff !important;
  text-align:center !important;
}

.db-archive-footer a{
  color:#fff !important;
  text-decoration:none !important;
  font-weight:300 !important;
}

.db-archive-footer a:hover{
  opacity:.7 !important;
}

.db-archive-sep{
  margin:0 10px !important;
  opacity:.7 !important;
}

/* TABLET */
@media (max-width:1024px){
  .db-archive-topnav{
    padding-top:56px !important;
  }

  .db-archive-grid{
    grid-template-columns:repeat(2, max-content) !important;
    column-gap:70px !important;
    row-gap:70px !important;
    padding-top:70px !important;
  }

  .db-archive-item.db-portrait{
    width:220px !important;
  }

  .db-archive-item.db-landscape{
    width:300px !important;
    margin-top:60px !important;
  }

  .db-archive-item.db-portrait img{
    height:330px !important;
  }

  .db-archive-item.db-landscape img{
    height:169px !important;
  }
}

/* MOBILE */
@media (max-width:640px){
  .db-archive-topnav{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    z-index:100 !important;

    padding:20px 0 12px 0 !important;
    margin:0 !important;

    background:rgba(241,237,231,.90) !important;
    backdrop-filter:blur(6px) !important;
    -webkit-backdrop-filter:blur(6px) !important;
    opacity:1 !important;
  }

  .db-archive-grid-wrap{
    width:100% !important;
    padding:0 !important;
    justify-content:center !important;
  }

  .db-archive-grid{
    width:100% !important;
    grid-template-columns:1fr !important;
    justify-items:center !important;
    row-gap:50px !important;
    padding-top:110px !important;
    padding-bottom:40px !important;
    margin:0 auto !important;
  }

  .db-archive-item.db-portrait{
    width:64vw !important;
  }

  .db-archive-item.db-landscape{
    width:72vw !important;
    margin-top:0 !important;
  }

  .db-archive-item.db-portrait img{
    height:calc(64vw * 1.5) !important;
  }

  .db-archive-item.db-landscape img{
    height:calc(72vw * 0.5625) !important;
  }

  .db-archive-title{
    margin-top:12px !important;
  }
}

/* MODAL */
.db-modal{
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,.72) !important;
  display:none !important;
  z-index:9999 !important;
}

.db-modal.is-open{
  display:block !important;
}

.db-modal-lock{
  overflow:hidden !important;
}

.db-modal-inner{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
}

.db-modal-video{
  width:min(1100px,92vw) !important;
  aspect-ratio:16/9 !important;
  background:#000 !important;
}

.db-modal-video iframe{
  width:100% !important;
  height:100% !important;
}

.db-modal-close{
  position:absolute !important;
  top:18px !important;
  left:18px !important;

  width:44px !important;
  height:44px !important;
  background:transparent !important;
  border:0 !important;

  color:#fff !important;
  font-size:38px !important;
  line-height:44px !important;
  cursor:pointer !important;
  z-index:10000 !important;
}