/* DESIGN IRON R56 — REAL 100" TV INSTALLATION */

/* Home: real project feature using the two uploaded installation photos */
.r56-tv100-feature{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);
  gap:0;
  margin:0 0 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  overflow:hidden;
  background:#0f1215;
  color:#fff;
  text-decoration:none;
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}
.r56-tv100-media{min-height:420px;background:#090b0d;overflow:hidden}
.r56-tv100-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.r56-tv100-copy{padding:34px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.r56-tv100-copy small{color:#efa173;font-size:11px;font-weight:900;letter-spacing:.08em}
.r56-tv100-copy strong{display:block;margin:8px 0 12px;font-size:clamp(30px,3.6vw,54px);line-height:.96;letter-spacing:-.04em}
.r56-tv100-copy span{color:#c0c4c7;line-height:1.65;max-width:34ch}
.r56-tv100-copy b{margin-top:24px;display:inline-flex;min-height:46px;align-items:center;padding:0 15px;border-radius:13px;background:#efa173;color:#160d09;font-size:13px}

/* Projects: portrait project card keeps the real installation framing. */
.card.portrait-project{aspect-ratio:4/5;min-height:0}
.card.portrait-project img{object-fit:cover;object-position:center}

/* Project modal media supports the two uploaded photos, not just a single image. */
.r56-modal-media{
  background:#090b0d;
  min-width:0;
  display:grid;
  grid-template-columns:1fr;
  align-content:start;
  gap:8px;
  padding:8px;
  overflow:auto;
  max-height:92svh;
}
.r56-modal-media.multi{grid-template-columns:1fr 1fr}
.r56-modal-media figure{position:relative;margin:0;background:#0b0d0f;border-radius:15px;overflow:hidden;min-width:0}
.r56-modal-media img,
.modalbox .r56-modal-media img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(92svh - 16px)!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  background:#090b0d!important;
}
.r56-modal-media figcaption{
  position:absolute;
  left:9px;
  bottom:9px;
  min-width:30px;
  min-height:26px;
  display:grid;
  place-items:center;
  border-radius:999px;
  padding:0 8px;
  background:rgba(6,7,8,.72);
  color:#fff;
  font-size:10px;
  font-weight:850;
  backdrop-filter:blur(8px);
}
.r56-modal-media figcaption:empty{display:none}

@media(max-width:900px){
  .r56-tv100-feature{grid-template-columns:1fr}
  .r56-tv100-media{min-height:0;aspect-ratio:16/10}
  .r56-tv100-copy{padding:20px}
  .r56-tv100-copy strong{font-size:34px}
  .r56-modal-media.multi{grid-template-columns:1fr 1fr}
}

@media(max-width:620px){
  .r56-tv100-feature{margin-bottom:10px;border-radius:17px}
  .r56-tv100-media{aspect-ratio:16/10}
  .r56-tv100-copy{padding:15px 16px 17px}
  .r56-tv100-copy small{font-size:9px}
  .r56-tv100-copy strong{font-size:28px;margin:6px 0 8px}
  .r56-tv100-copy span{font-size:12.5px;line-height:1.5}
  .r56-tv100-copy b{margin-top:12px;min-height:42px;font-size:11.5px}

  /* On mobile the two real photos are swipeable at their natural portrait ratio. */
  .modalbox{overflow:hidden!important}
  .r56-modal-media,
  .r56-modal-media.multi{
    display:flex!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    max-height:none!important;
    padding:7px!important;
    gap:7px!important;
    scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .r56-modal-media figure{
    flex:0 0 88vw;
    max-width:430px;
    scroll-snap-align:center;
    border-radius:14px;
  }
  .r56-modal-media img,
  .modalbox .r56-modal-media img{
    width:100%!important;
    height:auto!important;
    max-height:55svh!important;
    object-fit:contain!important;
  }
  .card.portrait-project{aspect-ratio:4/5!important}
}