/* VANTRIX v8: photo proportions + visible hotspot information, End-User Devices ONLY.
   Intentionally avoids changes to the locked homepage. */

/* FINAL PHOTO — restore the original wide, short CINEMATIC strip from v5/v6.
   v7's object-fit:contain and 620px box created a tall portrait with empty sides. */
.devices-page .device-final-photo {
  height:clamp(265px,27vw,390px) !important;
  margin-bottom:clamp(40px,5.5vw,75px) !important;
  width:100%;
  overflow:hidden;
  background:#081421;
}
.devices-page .device-final-photo > img {
  width:100%; height:100%;
  object-fit:cover !important;
  object-position:center 53% !important;
}
.devices-page .device-final-photo > div {
  background:linear-gradient(to bottom,rgba(1,9,20,.04) 32%,rgba(1,9,20,.86) 100%) !important;
}
.devices-page .device-final-photo > span {bottom:25px !important;left:32px !important;}

/* WORKSPACE HOTSPOTS — let visitors see explanation BESIDE the selected point.
   The photo is now a natural-aspect, half-width image instead of a giant full-width billboard.
   Both hotspot selectors and text remain visible without a second scrolling journey. */
@media (min-width: 981px) {
  .devices-page .device-workspaces .device-width {
    display:grid;
    grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);
    column-gap:clamp(30px,4vw,64px);
    align-items:start;
  }
  .devices-page .device-workspaces .device-width > .device-eyebrow,
  .devices-page .device-workspaces .device-width > h2 {
    grid-column:1 / -1;
  }
  .devices-page .device-workspaces .device-width > h2 {
    margin-bottom:28px !important;
  }
  .devices-page .device-workspaces .device-width > .workspace-tabs {
    grid-column:1;
    grid-row:3;
    width:100%;
    min-width:0;
  }
  .devices-page .device-workspaces .device-width > .workspace-information {
    grid-column:2;
    grid-row:3;
    margin-top:69px;
    min-width:0;
    min-height:0 !important;
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    padding:28px;
    border:1px solid rgba(114,206,236,.28);
    border-radius:8px;
    background:linear-gradient(140deg,rgba(14,49,70,.90),rgba(5,21,37,.86));
    box-shadow:0 18px 48px rgba(0,0,0,.16);
  }
  .devices-page .workspace-information .hotspot-step {
    font-size:28px;
    line-height:1;
  }
  .devices-page .workspace-information .workspace-explanation {max-width:none;}
  .devices-page .workspace-information .workspace-explanation h3 {
    font-size:clamp(22px,2vw,29px);
    margin-bottom:13px;
  }
  .devices-page .workspace-information .workspace-explanation p {
    font-size:15px;
    line-height:1.7;
  }
  .devices-page .workspace-information .hotspot-selector {
    grid-column:1;
    margin-top:8px;
  }
  .devices-page .device-workspaces .device-width > .device-photo-note {
    grid-column:1 / -1;
    margin-top:16px !important;
  }
}
.devices-page .workspace-photo {
  aspect-ratio:1600 / 1068 !important; /* the actual source-photo aspect ratio */
  height:auto !important;
  max-height:none !important;
  width:100%;
  border-radius:4px;
}
.devices-page .workspace-photo > img {
  width:100%;height:100%;
  object-fit:contain !important;
  object-position:center !important;
  display:block;
}
.devices-page .workspace-photo-title {
  left:clamp(14px,2.2vw,28px) !important;
  bottom:clamp(14px,2vw,24px) !important;
  font-size:clamp(20px,2vw,27px) !important;
}
.devices-page .workspace-list {margin-bottom:18px !important;}
.devices-page .workspace-list button {gap:10px !important;padding:12px 0 !important;}

/* Medium screens: keep layout short and readable, with detail immediately below. */
@media (min-width: 651px) and (max-width:980px) {
  .devices-page .workspace-photo {aspect-ratio:1600 / 1068 !important;}
  .devices-page .workspace-information {
    min-height:0 !important;
    padding:18px 0 !important;
    gap:14px;
  }
  .devices-page .device-final-photo {height:clamp(210px,31vw,315px) !important;}
}
@media (max-width:650px) {
  .devices-page .device-workspaces .device-width {display:block;}
  .devices-page .workspace-photo {
    aspect-ratio:1600 / 1068 !important;
    height:auto !important;
  }
  .devices-page .workspace-photo-title {font-size:20px !important;}
  .devices-page .workspace-photo-title small {font-size:10px !important;}
  .devices-page .workspace-information {
    min-height:0 !important;
    padding:18px 0 !important;
    row-gap:12px !important;
  }
  .devices-page .device-final-photo {height:clamp(165px,42vw,245px) !important;}
  .devices-page .device-final-photo > span {
    font-size:9px !important;left:14px !important;bottom:12px !important;
  }
}