/* The Studio side of the landing page and the Events or Studio switch above
 * the nav (GTS108-52). Loaded after site.css on the home page only.
 */

/* ------------------------------------------------- events or studio --- */
/* GTS108-52. A slim bar above the nav with the two-way switch. html carries
   data-mode="studio" while Studio is chosen: the Events sections hide, the
   Studio ones show, and the palette moves to the brand colours the Pro pages
   wear, because Studio is not one audience. Without script the page is the
   Events page it always was. */

.mode-bar { display: flex; justify-content: center; padding: 10px var(--gutter) 0; background: color-mix(in srgb, var(--tint) 72%, transparent); }
.mode-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--card); box-shadow: 0 1px 0 rgba(var(--ink-rgb), .04), 0 8px 24px rgba(var(--ink-rgb), .06); }
.mode-switch button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 9px 22px; border-radius: var(--r-pill); font: inherit; font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; }
.mode-switch button[aria-pressed='true'] { background: var(--ink); color: #fff; }
.mode-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode-beta { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--r-pill); background: var(--tint); color: var(--accent-text, var(--accent)); }
.mode-switch button[aria-pressed='true'] .mode-beta { background: rgba(255, 255, 255, .18); color: #fff; }

[data-for='studio'] { display: none; }
html[data-mode='studio'] [data-for='events'] { display: none; }
html[data-mode='studio'] [data-for='studio'] { display: revert; }
html[data-mode='studio'] .nav-right a.btn[data-for='studio'] { display: inline-flex; color: #fff; }
html[data-mode='studio'] section[data-for='studio'] { display: block; }

html[data-mode='studio'] {
  --accent: #5729E0;
  --accent-hover: #4720C2;
  --accent-text: #5729E0;
  --accent-text-hover: #4720C2;
  --second: #DB337D;
  --second-soft: #FCE7F1;
  --tint: #F1EBFD;
  --ground: #FBF9FE;
  --ink: #211229;
  --ink-rgb: 33, 18, 41;
  --muted: #5B5566;
  --wash-mid: #F7F2FD;
  --mark: url('/marks/brand.svg');
}

/* ------------------------------------------------------- studio hero --- */

/* No display here: it would outrank [data-for='studio'] and show this hero in Events mode. */
.st-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; text-align: left; padding-bottom: 72px; max-width: none; }
html[data-mode='studio'] section.st-hero { display: grid; }
.st-hero-copy { margin: 0; max-width: 600px; justify-self: end; }
.st-hero .hero-actions { justify-content: flex-start; }
.st-hero p.lede { margin-left: 0; }
.st-hero .hero-inner > p.small { margin-left: 0; }

.st-stage { position: relative; justify-self: start; width: min(520px, 100%); padding: 24px 24px 40px; }
.st-gallery { background: var(--card); border-radius: var(--r-card); padding: 18px; box-shadow: 0 1px 0 rgba(var(--ink-rgb), .04), 0 30px 70px rgba(var(--ink-rgb), .12); }
.st-gallery-head { display: flex; align-items: center; gap: 12px; }
.st-logo { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.st-gallery-who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.st-gallery-who b { font-size: 16px; }
.st-gallery-title { margin: 14px 2px 12px; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.st-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 120px 120px; gap: 8px; }
.st-grid picture { display: block; border-radius: 14px; overflow: hidden; }
.st-grid picture.st-a { grid-row: span 2; }
.st-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-gallery-foot { margin-top: 12px; text-align: center; font-size: 11px; color: var(--muted); }

.st-float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 18px; background: var(--card); box-shadow: 0 18px 44px rgba(var(--ink-rgb), .14); animation: drift 7s ease-in-out infinite alternate; }
.st-float b { display: block; font-size: 14px; }
.st-float span span { display: block; font-size: 12px; color: var(--muted); }
.st-heart { right: -6px; top: 104px; --tilt: 3deg; }
.st-lock { left: -10px; bottom: 6px; --tilt: -3deg; animation-delay: 1.2s; }
.st-heart-icon, .st-lock-icon { flex: none; width: 34px; height: 34px; border-radius: 12px; background: var(--tint) center / 18px no-repeat; }
.st-heart-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DB337D'><path d='M12 21s-7.5-4.6-9.6-9.3C.9 8.2 3 4.5 6.6 4.5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.6 0 5.7 3.7 4.2 7.2C19.5 16.4 12 21 12 21z'/></svg>"); }
.st-lock-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235729E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='3'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg>"); }

/* ---------------------------------------------------- studio sections --- */

.st-kinds { padding-top: 8px; }
.st-chips { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; }
.st-chips li { padding: 10px 18px; border-radius: var(--r-pill); background: var(--card); font-weight: 700; font-size: 15px; box-shadow: 0 1px 0 rgba(var(--ink-rgb), .04), 0 8px 22px rgba(var(--ink-rgb), .05); }

.st-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.st-feature { padding: 28px; border-radius: var(--r-card); background: var(--card); display: flex; flex-direction: column; gap: 10px; }
.st-feature:nth-child(3n+2) { background: var(--tint); }
.st-feature-wide { grid-column: span 3; background: linear-gradient(120deg, var(--tint), var(--second-soft)); padding: 36px; }
.st-feature-wide h3 { font-size: 30px; }
.st-feature h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.015em; }
.st-feature p { color: var(--muted); font-size: 16px; }
.st-access { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.st-access li { font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 12px; background: var(--card); color: var(--muted); }
.st-access li.on { background: var(--ink); color: #fff; }

.st-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.st-steps li { display: flex; flex-direction: column; gap: 10px; }
.st-steps h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; margin-top: 6px; }
.st-steps p { color: var(--muted); font-size: 16px; }

.st-invite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; padding: 48px; border-radius: var(--r-card); background: linear-gradient(135deg, var(--tint), var(--second-soft)); }
.st-invite-copy { display: flex; flex-direction: column; gap: 16px; }
.st-invite-copy h2 { font-size: 46px; }
.st-invite-copy p:not(.eyebrow) { color: var(--muted); font-size: 18px; max-width: 40ch; }
.st-invite-copy .eyebrow { align-self: flex-start; background: var(--card); }
.st-form { display: grid; gap: 8px; padding: 28px; border-radius: 24px; background: var(--card); box-shadow: 0 1px 0 rgba(var(--ink-rgb), .04), 0 24px 60px rgba(var(--ink-rgb), .07); }
.st-form label { font-weight: 700; font-size: 14px; margin-top: 8px; }
.st-optional { font-weight: 500; color: var(--muted); }
.st-form input, .st-form select { width: 100%; min-height: 50px; border: 1.5px solid rgba(var(--ink-rgb), .16); border-radius: 14px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--card); }
.st-form input:focus-visible, .st-form select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.st-form .btn { margin-top: 16px; justify-content: center; border: 0; cursor: pointer; width: 100%; }
.st-note { min-height: 1.5em; font-size: 15px; color: var(--muted); }
.st-note.error { color: #b42318; }
.st-form.done { place-items: center; text-align: center; padding: 48px 28px; }
.st-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
  .mode-bar { padding-top: 8px; }
  .mode-switch button { padding: 8px 18px; }
  .st-hero { grid-template-columns: 1fr; gap: 28px; padding-bottom: 40px; }
  .st-hero-copy { justify-self: stretch; }
  .st-stage { justify-self: center; padding: 8px 4px 36px; }
  .st-grid { grid-template-rows: 92px 92px; }
  .st-heart { right: -4px; top: 70px; }
  .st-lock { left: -4px; bottom: -8px; }
  .st-features { grid-template-columns: 1fr; }
  .st-feature-wide { grid-column: auto; padding: 28px; }
  .st-feature-wide h3 { font-size: 24px; }
  .st-steps { grid-template-columns: 1fr; gap: 22px; }
  .st-invite { grid-template-columns: 1fr; gap: 24px; padding: 24px 16px; }
  .st-invite-copy h2 { font-size: 34px; }
  .st-form { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-float { animation: none; }
}