/* ============================================================================
   Scout Your Stars — the workshop pages' batch: countdown, closed notice,
   dates line (premium/workshops.js; marks by tools/v2_workshops.py).
   Colours from unify.css tokens, so each piece suits the mocha hero and the
   beige page alike.
   ========================================================================== */

/* Anything hidden stays hidden, whatever display the theme gives it. */
[data-ws][hidden],
[data-ws-icon][hidden] {
  display: none !important;
}

/* Until the batch has been read, what it changes is held back (never for
   more than 2.5 seconds). */
.ws-wait [data-ws],
.ws-wait [data-ws-cta],
.ws-wait [data-ws-pay] {
  visibility: hidden;
  animation: ws-show 0s linear 2.5s forwards;
}

@keyframes ws-show {
  to {
    visibility: visible;
  }
}

/* ------------------------------------------------------------ countdown */

.ws-count {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ws-count__u {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 62px;
  padding: 8px 10px 7px;
  border: 1px solid var(--u-line);
  border-radius: 10px;
  background: transparent;           /* a light tint took the gold labels to 4.0:1 on mocha */
  line-height: 1;
}

.ws-count__u b {
  font-family: var(--v2-display);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--u-head);
  font-variant-numeric: tabular-nums;
}

.ws-count__u i {
  margin-top: 5px;
  font-family: var(--v2-body);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--u-gold-text);
}

/* In the masterclass's offer bars: smaller, in line with the bar. */
.ws-count-widget .ws-count {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.ws-count-widget .ws-count__u {
  min-width: 50px;
  padding: 6px 8px 5px;
}

.ws-count-widget .ws-count__u b {
  font-size: 1.3rem;
}

/* --------------------------------------------- the workshop hero's status */

.ws-status {
  display: grid;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
}

.ws-status p {
  margin: 0 !important;
}

.ws-status__batch {
  font-family: var(--v2-body);
  font-size: var(--u-fs-body);
  color: var(--u-text);
}

.ws-status__batch span:first-child {
  margin-right: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--u-gold-text);
}

.ws-status__batch b {
  font-weight: 600;
  color: var(--u-head);
}

.ws-status__count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.ws-status__label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--u-gold-text);
}

.ws-status__closed {
  padding: 14px 16px;
  border: 1px solid var(--u-line);
  border-left: 3px solid var(--u-gold);
  border-radius: 10px;
  background: transparent;           /* a light tint took the text to 4.2:1 on mocha */
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--u-head);
}

.ws-status__closed--card {
  margin: 12px 0 4px !important;
  text-align: left;
}

/* ----------------------------------------------- the masterclass's dates */

.ws-when {
  margin: 10px 0 0 !important;
  font-family: var(--v2-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--u-gold-text);
}

/* ------------------------------ the masterclass's profile card photo */
/* Sanidhya in Amsterdam (2026-09-30, the client: "keep the full picture,
   not just circle"): the whole photo, crisp, with the site's rounded corner
   and gold hairline, in place of the 160px circle the card had. */
.elementor-element-59de451 .profile-header {
  height: auto !important;
  overflow: visible !important;
}

.elementor-element-59de451 .profile-header img.u-profile-photo {
  display: block;
  width: min(100%, 380px) !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto;
  aspect-ratio: 1122 / 1167;
  object-fit: contain !important;
  border: 1px solid var(--u-gold-soft) !important;
  border-radius: 14px !important;
  box-shadow: var(--u-shadow-card);
}

@media (max-width: 640px) {
  .ws-count__u {
    min-width: 54px;
    padding: 7px 8px 6px;
  }
  .ws-count__u b {
    font-size: 1.45rem;
  }
}