/* ==========================================================================
   ABOUT · hero — "Inside the Studio" (assets/s7-studio.js). A night-time
   cutaway of the Studio 7 building: seven rooms, one per discipline, light
   up one at a time, then wire together into Growth Ops on the ground floor.
   Desktop: one wide night scene the size of the homepage hero card (35px off
   each edge, screen-tall) with the hero copy laid over the sky on the left;
   the scene fills the card and stays pinned to its right edge, whatever the
   screen's shape. Small laptops: copy beside a square scene. Phones and
   tablets: copy, then the square scene. The script picks its composition
   from the box's shape.
   Without the script the box just shows the night sky.
   ========================================================================== */
.s7studio-box {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 26px;
  overflow: hidden;
  background: #120d2c;
  box-shadow: 0 40px 90px rgba(22, 13, 66, 0.28), 0 12px 30px rgba(22, 13, 66, 0.12);
}
.s7studio {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(180deg, #0d0a24 0%, #21185a 62%, #120d2c 78%);
}
.s7studio-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.s7studio:not(.is-live) .s7studio-svg { visibility: hidden; }
/* every room is a link: hover / tap / tab pulls it up (the script draws that), click / tap again opens it */
.s7studio-svg .s7studio-room { cursor: pointer; }
.s7studio-svg .s7studio-room:focus { outline: none; }

/* phones + small tablets: copy, then the square scene */
.svc-hero.s7studio-hero { grid-template-columns: 1fr; gap: 36px; }
@media (max-width: 620px) {
  .s7studio-box { border-radius: 20px; }
}

/* small laptops: copy on the left, the square scene on the right */
@media (min-width: 1001px) and (max-width: 1199px) {
  .svc-hero.s7studio-hero { grid-template-columns: 1fr 1fr; gap: 48px; }
  .s7studio-box { margin: 0 0 0 auto; }
}

/* desktop: one wide night scene, the copy over the sky on the left — sized
   exactly like the homepage hero card (35px off each edge, screen-tall) */
@media (min-width: 1200px) {
  .svc-hero.s7studio-hero { grid-template-columns: 1fr; gap: 0; max-width: none; padding: 120px 35px 35px; }
  .s7studio-hero .s7studio-box {
    max-width: none;
    aspect-ratio: auto;
    height: calc(100vh - 123px);
    min-height: 565px;
    max-height: 945px;
    border-radius: 32px;
  }
  .s7studio-hero > .svc-hero-copy,
  .s7studio-hero > .s7studio-box { grid-area: 1 / 1; }
  .s7studio-hero > .svc-hero-copy {
    position: relative;
    z-index: 4;
    align-self: center;
    justify-self: start;
    max-width: 40%;
    margin: 0;
    padding-left: 5%;
  }
  .s7studio-hero .svc-hero-eyebrow { color: #c4b5fd; margin-bottom: 18px; }
  .s7studio-hero .svc-hero-title { color: #ffffff; font-size: clamp(42px, 4.1vw, 62px); margin-bottom: 20px; }
  .s7studio-hero .svc-hero-title em { color: #b9a6ff; }
  .s7studio-hero .svc-hero-sub { color: rgba(255, 255, 255, 0.76); font-size: 17px; margin-bottom: 32px; }
  .s7studio-hero .svc-btn-primary { background: #ffffff; color: #16132e; }
  .s7studio-hero .svc-btn-primary:hover { box-shadow: 0 10px 28px rgba(185, 166, 255, 0.35); }
}