/* Studio pages only (studio/brands, studio/retailers, studio/showrooms and their locale copies), linked after
   styles.css. A page stylesheet on purpose, like trust.css and home.css: styles.css has no room left in the asset
   budget of the Connect pages (scripts/check-asset-budget.mjs). CORE-748, 22.10.2026 (Tobi: "überall schauen, dass
   die Studio-Mockups perfekt sind und in den Space passen … gerne farbig, damit die Seiten nicht langweilig wirken").
   The rules of DESIGN.md "Studio pages" stand; this file only adds the colour stage and the fit fixes below. */

/* Colour stage: behind every module's mock stage a very faint light in the section's tone (warm = neutral white since
   22.10.2026, Tobi: "warum ist der so beige"; rose, olive = sage, cool-amber = slate; alpha .07-.12, no gold second glow; the same hues as the page light's blobs in styles.css), so each module reads
   in its own colour. Flat: no plate edge, no outline; closest-side ellipses fade to nothing inside their box, so the
   section's overflow clip never cuts a visible edge. The glow stands still; the mocks keep their own entrance. */
body.st-dark .st-lay > [data-slide] { position: relative; isolation: isolate; --st-glow: rgba(240, 232, 220, .07); --st-glow-2: rgba(240, 232, 220, .04); }
body.st-dark .st-lay > [data-slide]::before { content: ""; position: absolute; inset: -20% -9% -16%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side at 42% 46%, var(--st-glow) 40%, transparent),
              radial-gradient(closest-side at 72% 74%, var(--st-glow-2) 25%, transparent); }
body.st-dark [data-tone="rose"] .st-lay > [data-slide] { --st-glow: rgba(218, 118, 140, .12); }
body.st-dark [data-tone="olive"] .st-lay > [data-slide] { --st-glow: rgba(184, 196, 150, .09); }
body.st-dark [data-tone="cool-amber"] .st-lay > [data-slide] { --st-glow: rgba(128, 150, 206, .12); }

/* Depth only where mocks overlap (the rule of the home Studio track): the front mock of a stack and the newsletter
   sheet over the lookbook spread carry the ground shadow; a mock standing alone stays flat. */
.st-row--stack.st-row--sheet > .st-mock:nth-child(2) .st-mock__img { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
@media (min-width: 761px) {
  .st-row--stack:not(.st-row--sheet) > .st-mock:nth-child(2) .st-mock__img { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
}

/* Tablets (761-1199px, text above the stage): the stage spanned the whole container, so a two-mock stack stood
   680-810px high at 1024 and never fitted the screen. It now keeps the width a laptop split gives it and centres. */
@media (min-width: 761px) and (max-width: 1199px) {
  [data-layout] .st-lay > [data-slide] { width: 100%; max-width: 760px; justify-self: center; }
}

/* Phones: the three newsletter sheets stood side by side at 100px each, too small to read. Now they fan like the
   home strip (middle one on top and 12% lower, as on desktop, so the outer mastheads stay readable; the outer two
   turned ±2°), each 40% of the column with 10% overlap, so every sheet is a quarter larger and the row is centred.
   rotate composes with the slide entrance's transform. The order mail under the portal is centred instead of
   hanging on the left. */
@media (max-width: 760px) {
  .st-lay .st-row--sheets { display: flex; justify-content: center; align-items: flex-start; gap: 0; padding: 4px 0 14px; }
  .st-lay .st-row--sheets > .st-mock { flex: none; width: 40%; margin: 0; }
  .st-lay .st-row--sheets > .st-mock:nth-child(1) { rotate: -2deg; }
  .st-lay .st-row--sheets > .st-mock:nth-child(2) { z-index: 2; margin: 12% -10% 0; }
  .st-lay .st-row--sheets > .st-mock:nth-child(3) { rotate: 2deg; }
  .st-lay .st-row--sheets > .st-mock:is(:nth-child(2), :nth-child(3)) .st-mock__img { box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .85); }
  .st-row--portal .st-mock--mail { width: 62%; margin: 20px auto 0; }
}

/* Studio offer (22.10.2026, Tobi, CORE-753): Studio prices are never public, so #prices ends in one centred
   button that asks for an offer instead of the former "from" price plate. */
.section-head:has(+ .st-offer) { margin-bottom: 28px; }
.st-offer { display: flex; justify-content: center; }