/* =========================================================
   hdm.css
   Heavy Duty Motorsports case study
   Unified lighter shadow system
   Dreamweaver-safe
   ========================================================= */

/* =========================================================
   INTRO
   ========================================================= */

.hdm-intro2{
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  margin-top:6px;
  margin-bottom:18px;
}

.hdm-intro-left{
  width:320px;
  max-width:100%;
}

.hdm-intro-right{
  flex:1;
  min-width:280px;
}

.hdm-client-logo{
  width:220px;
  height:auto;
  display:block;
  margin-bottom:12px;
}

.hdm-client-meta{
  font-size:13.5px;
  line-height:1.45;
  opacity:.88;
}

.hdm-meta-line{
  margin-bottom:2px;
}

.hdm-lead{
  margin:0 0 10px;
  max-width:900px;
  font-size:15px;
}

/* =========================================================
   SECTIONS
   ========================================================= */

.hdm-block{
  padding:2px 0 4px;
}

.hdm-kicker{
  margin:10px 0 6px;
  font-size:16px;
  font-weight:500;
  padding-bottom:6px;
  border-bottom:1px solid rgba(0,0,0,.12);
}

.hdm-subhead{
  margin:12px 0 10px;
  font-size:15px;
  font-weight:400;
}

.hdm-h4{
  margin:10px 0 0;
  font-size:14px;
  font-weight:400;
}

.hdm-small{
  margin:0;
  font-size:12px;
  font-weight:300;
}

/* =========================================================
   ROWS
   ========================================================= */

.hdm-row{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}

.hdm-row--four .hdm-card{
  width:calc(25% - 14px);
}

.hdm-row--three .hdm-card{
  width:calc(33.333% - 12px);
}

.hdm-row--two .hdm-card{
  width:calc(50% - 9px);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:980px){

  .hdm-row--four .hdm-card,
  .hdm-row--three .hdm-card{
    width:calc(50% - 9px);
  }
}

@media (max-width:700px){

  .hdm-card{
    width:100% !important;
  }
}

/* =========================================================
   CARDS
   ========================================================= */

.hdm-card{
  margin:0;
}

/* =========================================================
   TILES
   ========================================================= */

.hdm-box{
  position:relative;
  width:100%;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  background:#101114;
   border:1px solid #CCC;

}


.hdm-box:hover{
  opacity:0.985;

  opacity: 0.90;

}

.hdm-box:before{
  content:"";
  display:block;
}

.hdm-box--land:before{
  padding-top:56.25%;
}

.hdm-box--sq:before{
  padding-top:100%;
}

.hdm-box--tall:before{
  padding-top:140%;
}

/* Posters: 2000 x 1414 */

.hdm-box--poster:before{
  padding-top:70.7%;
}

.hdm-img{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================================================
   PLAY BADGE
   ========================================================= */

.hdm-play{
  position:absolute;
  left:14px;
  top:14px;
  width:54px;
  height:54px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
}

.hdm-play:before{
  content:"";
  position:absolute;
  left:21px;
  top:17px;
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:16px solid rgba(255,255,255,.9);
}

/* =========================================================
   CAPTIONS
   ========================================================= */

.hdm-cap{
  margin:10px 0 0;
  font-size:13px;
  line-height:1.35;
  opacity:0.78;
}

/* =========================================================
   MODALS
   ========================================================= */

.modal-lock{
  overflow:hidden;
}

/* Shared overlay shell */

.img-modal,
.vid-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9999;
}

.img-modal.is-open,
.vid-modal.is-open{
  display:flex;
}

/* Backdrop */

.img-modal__backdrop,
.vid-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.78);
}

/* Panel */

.img-modal__panel,
.vid-modal__panel{
  position:relative;
  z-index:2;
  background:#0f0f10;
  color:#fff;
  border-radius:14px;
  width:96%;
  max-width:1100px;
  padding:14px;
  box-shadow:0 18px 60px rgba(0,0,0,0.45);
}

/* Close button */

.img-modal__close,
.vid-modal__close{
  position:absolute;
  right:10px;
  top:8px;
  width:40px;
  height:40px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,0.14);
  color:#fff;
  font-size:26px;
  line-height:40px;
  cursor:pointer;
  z-index:100;
}

/* Image modal */

.img-modal__figure{
  margin:0;
}

.img-modal__img{
  display:block;
  width:100%;
  height:auto;
  max-height:88vh;
  object-fit:contain;
  border-radius:10px;
  background:#000;
}

.img-modal__caption{
  margin-top:10px;
  font-size:13px;
  line-height:1.35;
  opacity:0.85;
}

/* Video modal */

.vid-modal__wrap{
  position:relative;
  width:100%;
  padding-top:56.25%;
  overflow:hidden;
  border-radius:10px;
  background:#000;
}

.vid-modal__wrap iframe{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

.vid-modal__caption{
  margin-top:10px;
  font-size:13px;
  line-height:1.35;
  opacity:0.85;
}

/* Optional tall video mode */

.vid-modal.is-tall .vid-modal__wrap{
  padding-top:140%;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:520px){

  .img-modal,
  .vid-modal{
    padding:10px;
  }

  .img-modal__panel,
  .vid-modal__panel{
    padding:12px;
  }
}