/* Session state UI shared by Studio. Theme colors come from characters.json. */

/* Keep the hero shadow tied to the active theme instead of the old global red. */
.studio-card {
  box-shadow: 12px 15px 0 color-mix(in srgb, var(--theme-accent) 38%, transparent);
}

/* The ticket CTA now lives in normal document flow beneath the hero. */
.studio-cta-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.studio-ticket--cta {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 62px;
  justify-content: center;
  padding: 15px 22px;
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 16px;
  color: #fff;
  background: var(--theme-accent);
  box-shadow: 6px 7px 0 var(--theme-accent-dark);
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: .035em;
  text-align: center;
  text-transform: uppercase;
}

.studio-org-ig {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 62px;
  min-height: 62px;
  padding: 0;
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 16px;
  color: #fff;
  background: var(--theme-accent);
  box-shadow: 6px 7px 0 var(--theme-accent-dark);
  text-decoration: none;
}

.studio-org-ig svg {
  width: 26px;
  height: 26px;
}

.studio-org-ig[hidden] {
  display: none;
}

.studio-ticket--cta:hover,
.studio-ticket--cta:focus-visible,
.studio-org-ig:hover,
.studio-org-ig:focus-visible {
  transform: translate(-2px,-2px);
  box-shadow: 8px 9px 0 var(--theme-accent-dark);
}

.studio-ticket--cta[aria-disabled="true"] {
  cursor: default;
  color: rgba(255,255,255,.9);
  background: color-mix(in srgb, var(--theme-bg-a) 78%, var(--theme-accent) 22%);
  border-color: color-mix(in srgb, var(--theme-accent) 64%, #fff 36%);
  box-shadow: 5px 6px 0 color-mix(in srgb, var(--theme-bg-c) 78%, #000 22%);
  pointer-events: none;
}

.studio-event-status {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 10px;
  padding: 5px 8px 4px;
  border: 2px solid #0a090d;
  color: #fff;
  background: var(--theme-accent);
  box-shadow: 3px 3px 0 #0a090d;
  font-size: .58rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.studio-event-status[hidden] {
  display: none !important;
}

body[data-event-status="past"] .studio-details,
body[data-event-status="unannounced"] .studio-details {
  background: color-mix(in srgb, var(--studio-cream) 94%, var(--theme-accent) 6%);
}

body[data-event-status="past"] .studio-note,
body[data-event-status="unannounced"] .studio-note {
  opacity: .6;
}

/* Four dev characters fit better as a 2x2 grid. */
.studio-character-choice {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Past sessions remain selectable but clearly read as archive entries. */
.studio-character-card[data-event-status="past"] {
  opacity: .68;
  filter: saturate(.72);
}

.studio-character-card[data-event-status="past"]::after {
  position: absolute;
  top: 5px;
  left: 7px;
  content: "PAST";
  color: currentColor;
  font-size: .38rem;
  font-weight: 900;
  letter-spacing: .12em;
  opacity: .7;
  transform: translateY(-1px);
}

.studio-character-card[data-event-status="past"] .studio-character-card__date {
  padding-top: 8px;
}

.studio-character-card[data-event-status="past"][aria-pressed="true"] {
  opacity: 1;
  filter: none;
}

.studio-character-card[data-event-status="soldout"]::after {
  position: absolute;
  top: 5px;
  left: 7px;
  content: "WAITLIST";
  color: currentColor;
  font-size: .38rem;
  font-weight: 900;
  letter-spacing: .12em;
  opacity: .7;
  transform: translateY(-1px);
}

.studio-character-card[data-event-status="soldout"] .studio-character-card__date {
  padding-top: 8px;
}

.studio-character-card[data-event-status="unannounced"] {
  opacity: .78;
}

body.studio-portrait-missing .studio-portrait-window {
  background: linear-gradient(155deg, rgba(255,255,255,.035), transparent 58%);
}

@media (max-width: 760px) {
  .studio-card {
    box-shadow: 6px 7px 0 color-mix(in srgb, var(--theme-accent) 38%, transparent);
  }

  .studio-ticket--cta,
  .studio-org-ig {
    min-height: 56px;
    padding: 13px 18px;
    border-radius: 14px;
    font-size: .92rem;
    box-shadow: 5px 6px 0 var(--theme-accent-dark);
  }

  .studio-org-ig {
    width: 56px;
    padding: 0;
  }

  .studio-org-ig svg {
    width: 22px;
    height: 22px;
  }

  .studio-event-status {
    margin-bottom: 7px;
    padding: 4px 7px 3px;
    font-size: .5rem;
  }
}