/*
 * Hilive Homepage Draft — Rotating Student Portfolio / Motion-only reel gallery.
 * Scoped to #student-work; no global theme or checkout changes.
 */
.hilive-home-v3 .hl-work-v4__grid.hl-work-v4__rotator{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(190px,17vw,260px);
  gap:13px;
  overflow:visible;
  padding:0;
}
.hilive-home-v3 .hl-work-v4__rotator>.hl-work-v4__item--featured{
  grid-column:span 2;
  grid-row:span 2;
  min-height:0;
  position:relative;
}
.hilive-home-v3 .hl-work-v4__rotator>.hl-work-v4__item--featured>a::before{
  background-image:var(--hl-featured-bg,linear-gradient(140deg,#203c3e,#142b2d));
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.hilive-home-v3 .hl-work-v4__rotator .hl-work-v4__featured-image{
  display:block;width:100%;height:100%;
  object-fit:contain;object-position:center;
  position:relative;z-index:1;
  transition:opacity .23s ease,transform .45s ease;
}
.hilive-home-v3 .hl-work-v4__rotator .hl-work-v4__item--thumb{
  position:relative;
  cursor:pointer;
}
.hilive-home-v3 .hl-work-v4__thumb-button{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  overflow:hidden;
  padding:0;margin:0;
  border:0;
  border-radius:inherit;
  color:#fff;background:#233b3d;
  cursor:pointer;
  text-align:left;
}
.hilive-home-v3 .hl-work-v4__thumb-button img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .3s ease;
}
.hilive-home-v3 .hl-work-v4__thumb-button::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  inset:32% 0 0;
  background:linear-gradient(0deg,rgba(5,20,22,.84),rgba(5,20,22,0));
}
.hilive-home-v3 .hl-work-v4__item--thumb figcaption{
  z-index:2;inset:auto 14px 13px;
}
.hilive-home-v3 .hl-work-v4__thumb-number{
  display:grid;place-items:center;
  position:absolute;top:12px;right:12px;z-index:2;
  min-width:50px;height:27px;padding:0 7px;
  border-radius:8px;
  background:rgba(8,33,35,.74);
  border:1px solid rgba(255,255,255,.20);
  color:#fbe084;
  font-size:10px;font-weight:850;
  font-family:Arial,Helvetica,sans-serif;
  direction:ltr;
  letter-spacing:.06em;
}
.hilive-home-v3 .hl-work-v4__thumb-button:focus-visible{
  outline:3px solid #f2c84b;outline-offset:-3px;
}
.hilive-home-v3 .hl-work-v4__rotator-controls{
  position:absolute;z-index:6;
  top:62px;left:15px;
  display:flex;align-items:center;gap:5px;
  direction:ltr;
}
.hilive-home-v3 .hl-work-v4__rotator-controls button{
  display:grid;place-items:center;
  width:33px;height:33px;
  padding:0;border-radius:9px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(10,30,33,.84);
  color:#fff;
  font:800 23px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}
.hilive-home-v3 .hl-work-v4__rotator-controls button[data-hl-project-toggle]{
  font-size:16px;
  color:#f5d56c;
}
.hilive-home-v3 .hl-work-v4__rotator-controls button:hover,
.hilive-home-v3 .hl-work-v4__rotator-controls button:focus-visible{
  background:#22777b;outline-color:#f2c84b;
}
.hilive-home-v3 .hl-work-v4__counter{
  padding:0 8px;
  font:800 12px/33px Arial,Helvetica,sans-serif;
  white-space:nowrap;
  letter-spacing:.06em;
  color:#fff;
  background:rgba(9,29,30,.79);
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
}
@media(hover:hover) and (pointer:fine){
  .hilive-home-v3 .hl-work-v4__item--thumb:hover img{transform:scale(1.045)}
  .hilive-home-v3 .hl-work-v4__rotator-controls button:hover{transform:translateY(-2px)}
}
/* Distinct final-reel presentation: NO static projects mixed into motion cards. */
.hilive-home-v3 .hl-work-v4__motion-head{
  margin:48px 0 19px;
  align-items:end;
}
.hilive-home-v3 .hl-work-v4__motion-head>div{
  max-width:750px;
}
.hilive-home-v3 .hl-work-v4__motion-head h3{
  margin-bottom:14px;
}
.hilive-home-v3 .hl-work-v4__motion-description{
  color:#b9d2d1;
  font-size:14px;
  line-height:1.95;
  font-weight:550;
  max-width:750px;
  margin:0;
}
.hilive-home-v3 .hl-work-v4__mixed.hl-work-v4__motion-only{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:clamp(365px,39vw,475px);
  gap:16px;
  width:min(100%,780px);
  margin-inline:auto;
  overflow:visible;
  padding:0;
}
.hilive-home-v3 .hl-work-v4__motion-only>.hl-work-v4__motion{
  min-width:0;
  height:auto;
}
.hilive-home-v3 .hl-work-v4__motion-only .hl-work-v4__motion video{
  object-fit:contain;
}
/* Keep architectural detail legible on tablets. */
@media(max-width:990px){
  .hilive-home-v3 .hl-work-v4__grid.hl-work-v4__rotator{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:clamp(180px,28vw,255px);
  }
  .hilive-home-v3 .hl-work-v4__rotator>.hl-work-v4__item--featured{
    grid-column:span 2;grid-row:span 2;
  }
  .hilive-home-v3 .hl-work-v4__mixed.hl-work-v4__motion-only{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:clamp(350px,53vw,470px);
  }
  .hilive-home-v3 .hl-work-v4__motion-head{align-items:start}
}
@media(max-width:640px){
  .hilive-home-v3 .hl-work-v4__grid.hl-work-v4__rotator{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:clamp(300px,92vw,435px) repeat(2,clamp(138px,43vw,200px));
    grid-auto-rows:auto;
    gap:9px;
    overflow:visible;
    padding:0;
    scroll-snap-type:none;
  }
  .hilive-home-v3 .hl-work-v4__rotator>.hl-work-v4__item--featured{
    grid-column:1/-1;grid-row:1;
    height:100%;min-height:0;
    flex-basis:auto;
  }
  .hilive-home-v3 .hl-work-v4__rotator>.hl-work-v4__item--thumb{
    grid-column:auto;grid-row:auto;
    flex-basis:auto;
    height:100%;min-height:0;
  }
  .hilive-home-v3 .hl-work-v4__item--thumb figcaption{
    inset:auto 10px 11px;
  }
  .hilive-home-v3 .hl-work-v4__item--thumb figcaption strong{font-size:12px}
  .hilive-home-v3 .hl-work-v4__item--thumb figcaption span{font-size:7px}
  .hilive-home-v3 .hl-work-v4__thumb-number{
    top:8px;right:8px;
    min-width:45px;height:24px;
    font-size:9px;
  }
  .hilive-home-v3 .hl-work-v4__rotator-controls{
    top:53px;left:10px;gap:4px;
  }
  .hilive-home-v3 .hl-work-v4__rotator-controls button{
    width:29px;height:29px;border-radius:7px;font-size:20px
  }
  .hilive-home-v3 .hl-work-v4__counter{
    padding:0 6px;font-size:10px;line-height:29px;
  }
  .hilive-home-v3 .hl-work-v4__motion-description{font-size:13px;line-height:1.9}
  .hilive-home-v3 .hl-work-v4__mixed.hl-work-v4__motion-only{
    display:flex;
    gap:11px;
    width:100%;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:12px;
  }
  .hilive-home-v3 .hl-work-v4__motion-only>.hl-work-v4__motion{
    flex:0 0 min(76vw,330px);
    height:clamp(355px,103vw,465px);
    scroll-snap-align:start;
    border-radius:14px;
  }
  .hilive-home-v3 .hl-work-v4__motion-head>span{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .hilive-home-v3 .hl-work-v4__rotator .hl-work-v4__featured-image,
  .hilive-home-v3 .hl-work-v4__thumb-button img,
  .hilive-home-v3 .hl-work-v4__rotator-controls button{
    transition:none!important;transform:none!important;
  }
}
/* Three real AI Motion reels: balanced single row on desktop/tablet;
   preserve the existing swipe experience on mobile. */
@media(min-width:641px){
  .hilive-home-v3 .hl-work-v4__mixed.hl-work-v4__motion-only{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:clamp(330px,32vw,475px);
    width:min(100%,1040px);
  }
}


/* Non-clickable artwork; two-frame horizontal slide for the main image. */
.hilive-home-v3 .hl-work-v4__rotator .hl-work-v4__featured-stage {
  display:block;position:relative;width:100%;height:100%;
  border-radius:inherit;overflow:hidden;background:#19383a;cursor:default;
}
.hilive-home-v3 .hl-work-v4__rotator .hl-work-v4__featured-stage::before {
  content:"";position:absolute;inset:-22px;z-index:0;
  background-image:var(--hl-featured-bg,linear-gradient(135deg,#214447,#0b292c));
  background-position:center;background-size:cover;
  filter:blur(15px) saturate(.8);opacity:.45;pointer-events:none;
}
.hilive-home-v3 .hl-work-v4__rotator .hl-work-v4__featured-stage::after {
  content:"";position:absolute;inset:48% 0 0;z-index:2;
  background:linear-gradient(0deg,rgba(0,16,18,.86),rgba(0,16,18,0));
  pointer-events:none;
}
.hilive-home-v3 .hl-work-v4__rotator .hl-work-v4__featured-stage .hl-work-v4__featured-image {
  display:block;position:absolute;z-index:1;inset:0;
  width:100%;height:100%;object-fit:contain;object-position:center;
  transform:translateX(0);transition:transform .65s cubic-bezier(.22,.61,.36,1);
  will-change:transform;pointer-events:none;
}
.hilive-home-v3 .hl-work-v4__rotator .hl-work-v4__featured-stage figcaption,
.hilive-home-v3 .hl-work-v4__rotator .hl-work-v4__featured-stage .hl-work-v4__label {
  z-index:4;pointer-events:none;
}
.hilive-home-v3 .hl-work-v4__rotator .hl-work-v4__item--thumb {cursor:default}
.hilive-home-v3 .hl-work-v4__rotator .hl-work-v4__thumb-display {
  display:block;position:absolute;inset:0;width:100%;height:100%;
  border-radius:inherit;overflow:hidden;background:#21383a;
  pointer-events:none;cursor:default;
}
.hilive-home-v3 .hl-work-v4__rotator .hl-work-v4__thumb-display img {
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  transform:none;transition:opacity .26s ease;
}
.hilive-home-v3 .hl-work-v4__rotator .hl-work-v4__thumb-display::after {
  content:"";position:absolute;z-index:1;inset:30% 0 0;
  background:linear-gradient(0deg,rgba(0,14,16,.86),transparent);
  pointer-events:none;
}
.hilive-home-v3 .hl-work-v4__rotator .hl-work-v4__thumb-display .hl-work-v4__thumb-number {z-index:2}
@media(hover:hover) and (pointer:fine) {
  .hilive-home-v3 .hl-work-v4__rotator .hl-work-v4__item--thumb:hover img {transform:none!important}
}
@media(prefers-reduced-motion:reduce) {
  .hilive-home-v3 .hl-work-v4__rotator .hl-work-v4__featured-stage .hl-work-v4__featured-image {
    transition:none!important;will-change:auto;
  }
}
/* The modal is moved under body to bypass transformed reveal ancestors. */
dialog.hl-video-dialog[data-hl-video-modal] {
  box-sizing:border-box!important;position:fixed!important;
  inset:auto!important;
  top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;padding:0!important;
  width:min(410px,calc(100vw - 28px))!important;
  max-width:calc(100vw - 28px)!important;
  max-height:calc(100dvh - 22px)!important;
  border:1px solid #347276!important;border-radius:17px!important;
  background:#071c1e!important;color:#fff!important;
  box-shadow:0 30px 90px rgba(0,0,0,.45)!important;
  overflow:hidden!important;z-index:2147480000!important;
}
body > dialog.hl-video-dialog[data-hl-video-modal]::backdrop {
  background:rgba(2,16,17,.84);backdrop-filter:blur(5px);
}
body > dialog.hl-video-dialog[data-hl-video-modal] .hl-video-dialog__top {
  box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:50px;padding:9px 13px;background:#164347;color:#fff;
}
body > dialog.hl-video-dialog[data-hl-video-modal] .hl-video-dialog__top strong {
  color:#fff;font-size:15px;font-weight:750;line-height:1.5;
}
body > dialog.hl-video-dialog[data-hl-video-modal] .hl-video-dialog__top button {
  flex:0 0 34px;width:34px;height:34px;border:0;border-radius:8px;
  background:#f2c84b;color:#174c50;font-size:18px;cursor:pointer;
}
body > dialog.hl-video-dialog[data-hl-video-modal] .hl-video-dialog__body {
  width:100%;height:min(71dvh,650px);max-height:calc(100dvh - 75px);
  aspect-ratio:auto!important;overflow:hidden;background:#071c1e;
}
body > dialog.hl-video-dialog[data-hl-video-modal] .hl-video-dialog__body video,
body > dialog.hl-video-dialog[data-hl-video-modal] .hl-video-dialog__body iframe {
  box-sizing:border-box;display:block;width:100%!important;height:100%!important;
  border:0;object-fit:contain;background:#071c1e;
}
@media(max-width:480px){
  body > dialog.hl-video-dialog[data-hl-video-modal] .hl-video-dialog__body {
    height:min(74dvh,650px);
  }
}
/* Four reels: 4 desktop columns, 2 tablet columns, swipeable mobile row. */
.hilive-home-v3 .hl-work-v4__motion-only>button.hl-work-v4__motion {
  -webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;
  width:100%;height:100%;margin:0;padding:0;
  font:inherit;text-align:inherit;cursor:pointer;
}
.hilive-home-v3 .hl-work-v4__motion-only>button.hl-work-v4__motion:focus-visible {
  outline:3px solid #f2c84b;outline-offset:4px;
}
.hilive-home-v3 .hl-work-v4__motion-only .hl-work-v4__motion-bottom small {
  white-space:normal;text-align:left;
}
.hilive-home-v3 .hl-work-v4__motion-only .hl-work-v4__motion-bottom strong {
  max-width:100%;min-width:0;
}
@media(min-width:1081px) {
  .hilive-home-v3 .hl-work-v4__mixed.hl-work-v4__motion-only {
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:clamp(365px,32vw,470px);
    gap:13px;width:min(100%,1090px);
  }
}
@media(min-width:641px) and (max-width:1080px) {
  .hilive-home-v3 .hl-work-v4__mixed.hl-work-v4__motion-only {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:clamp(345px,53vw,470px);
    gap:14px;width:min(100%,730px);
  }
}
@media(max-width:640px) {
  .hilive-home-v3 .hl-work-v4__mixed.hl-work-v4__motion-only {
    display:flex;overflow-x:auto;overflow-y:hidden;
    gap:11px;width:100%;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:12px;
  }
  .hilive-home-v3 .hl-work-v4__motion-only>button.hl-work-v4__motion {
    flex:0 0 min(76vw,330px);width:auto;
    height:clamp(355px,103vw,465px);
    scroll-snap-align:start;
  }
}