/*
 * Guest home polish V410.
 * Semantic tokens are the stable contract for the planned theme manager.
 * Components consume these tokens instead of introducing new page colours.
 */
body.studio-theme{
  --theme-canvas:var(--studio-color-canvas,#020713);
  --theme-canvas-deep:color-mix(in srgb,var(--studio-color-canvas,#020713) 88%,var(--studio-color-surface,#071a35));
  --theme-surface:var(--studio-color-surface,#071a35);
  --theme-surface-raised:color-mix(in srgb,var(--studio-color-surface,#071a35) 90%,var(--studio-color-accent,#1798ff) 10%);
  --theme-border:color-mix(in srgb,var(--studio-color-accent,#1798ff) 28%,var(--studio-color-surface,#071a35));
  --theme-text:var(--studio-color-text,#f8fbff);
  --theme-text-muted:var(--studio-color-text-muted,#91a9c5);
  --theme-header:color-mix(in srgb,var(--studio-color-canvas,#020713) 84%,var(--studio-color-surface,#071a35));
  --theme-footer:color-mix(in srgb,var(--studio-color-surface,#071a35) 78%,var(--studio-color-canvas,#020713));
  --studio-page-bg:var(--theme-canvas);
  --studio-canvas-master:var(--theme-canvas);
  --studio-page-soft:var(--theme-surface);
  --studio-page-soft-2:var(--theme-surface-raised);
  --studio-header-bg:var(--theme-header);
  --studio-panel:var(--theme-surface-raised);
  --studio-panel-strong:var(--theme-surface);
  --studio-footer-b:var(--theme-footer);
}

body.is-studio-guest,
body.is-studio-guest main,
body.is-studio-guest .studio-page{
  background-color:var(--theme-canvas)!important;
}

/* The builder may deliberately request a panel/image/custom background. */
body.is-studio-guest .studio-page>.studio-responsive-section[data-section-background="seamless"],
body.is-studio-guest .studio-page>.studio-responsive-section[data-section-background="glow"]{
  background-color:transparent!important;
}
body.is-studio-guest .studio-page>.studio-responsive-section[data-section-background="seamless"] :is(
  .studio-exact-latest,.studio-exact-series,.studio-exact-premium,
  .studio-exact-cinema,.studio-exact-plans,.studio-content,.studio-promo
){
  background-color:transparent!important;
  background-image:none!important;
  border-block-color:transparent!important;
}

/* Keep the modal vocabulary on the same surface system. */
body.is-studio-guest .studio-work-modal>article{
  border-color:var(--theme-border);
  background:linear-gradient(145deg,var(--theme-surface-raised),var(--theme-canvas-deep));
}
body.is-studio-guest .studio-work-meta span,
body.is-studio-guest .studio-work-actions button{
  border-color:var(--theme-border);
  background:var(--theme-surface);
}
body.is-studio-guest .studio-work-info>p{color:var(--theme-text-muted)}

@media(max-width:720px){
  body.is-studio-guest .studio-work-modal{
    align-items:center;
    padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
  }
  body.is-studio-guest .studio-work-modal>article{
    width:min(430px,100%);
    height:auto;
    max-height:calc(100dvh - 24px);
    grid-template-columns:1fr;
    grid-template-rows:min(210px,29dvh) auto;
    border-width:1px;
    border-radius:22px;
    overflow:auto;
    overscroll-behavior:contain;
  }
  body.is-studio-guest .studio-work-art{
    min-height:170px;
    margin:0;
    border:0;
    border-radius:21px 21px 0 0;
  }
  body.is-studio-guest .studio-work-info{
    display:block;
    padding:18px 16px 16px;
    overflow:visible;
  }
  body.is-studio-guest .studio-work-info h2{
    margin-top:9px;
    font-size:clamp(25px,8vw,31px);
  }
  body.is-studio-guest .studio-work-info h3{margin-bottom:10px}
  body.is-studio-guest .studio-work-info>p{
    margin:12px 0;
    font-size:10.5px;
    line-height:1.75;
    -webkit-line-clamp:3;
  }
  body.is-studio-guest .studio-work-cast{display:none}
  body.is-studio-guest .studio-work-actions{
    margin-top:12px;
    padding-top:0;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  body.is-studio-guest .studio-work-actions>a{
    grid-column:1/-1;
    min-width:0;
  }
  body.is-studio-guest .studio-work-actions a,
  body.is-studio-guest .studio-work-actions button{height:42px}
  body.is-studio-guest .studio-work-close{
    position:absolute;
    top:10px;
    bottom:auto;
    left:10px;
  }
}

@media(max-width:390px){
  body.is-studio-guest .studio-work-modal>article{
    grid-template-rows:min(185px,26dvh) auto;
  }
  body.is-studio-guest .studio-work-meta span,
  body.is-studio-guest .studio-work-meta b{padding:5px 7px}
}