/* ============================================================
   WORKSHOPS (workshops.html only). Loads AFTER styles.css.
   <body class="btbhome wkpage">: btbhome supplies the rose / peach /
   ice buttons, sections and titles shared with the homepage and the
   calendar. This file adds the transparent hero art over the reel,
   the Barbie-pink workshop heading and the one workshop card.
   ============================================================ */

.wkpage {
  /* Hot pink lifted from the hero art, used only on the Barbie heading
     and as a glow. Everything else stays in the emblem palette. */
  --wk-pink: #FF5FB0;
  --wk-pink-deep: #D81B7A;
  --wk-pink-ink: #8F0B4C;
  --wk-pink-pale: #FFC2E3;
}

/* ============================================================
   HERO
   ============================================================ */
/* Lighter scrim than the homepage: the art carries its own glow, and the
   whole point of this hero is the dancing behind it. The bottom still goes
   dark so the pills and the info line stay readable. */
.wkpage .hero__overlay {
  background:
    radial-gradient(ellipse 70% 45% at 50% 55%, rgba(255, 95, 176, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(5, 5, 8, 0.5) 0%, rgba(5, 5, 8, 0.22) 42%, rgba(5, 5, 8, 0.86) 100%);
}
/* A touch more saturation than the About page's hero so the studio lights
   read pink and purple rather than grey behind the art. */
.wkpage .hero__video { filter: saturate(1.08) contrast(1.03); }

/* The art is 1.78:1. Capped by width AND height so it never crowds a phone
   in landscape or a short laptop screen, same idea as .hero__emblem. */
.wk-hero__art {
  display: block;
  width: min(760px, 94vw, 98vh);
  width: min(760px, 94vw, 98svh);
  margin: 0 auto 0.2rem;
}
.wk-hero__art img {
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 12px 36px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 28px rgba(255, 95, 176, 0.22));
}

/* This hero does not need to line up with the About page's, so the top
   padding comes down and the art sits closer to the nav on a phone. */
.wkpage .hero { padding-top: calc(var(--nav-h) + 1.25rem); }
/* Room under the info line for the scroll arrow (absolute, bottom 1.2rem):
   when the content is taller than 88svh the two collided on desktop. */
.wkpage .hero { padding-bottom: 3.8rem; }

/* The date is the one fact on the hero, so it is set well above eyebrow
   size, in peach, with a shadow to hold it over the brightest reels. */
.wkpage .hero__eyebrow {
  margin-top: 0.6rem;
  font-size: clamp(1rem, 3.9vw, 1.4rem);
  letter-spacing: 0.2em;
  color: var(--btb-peach);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
.wkpage .hero__tag {
  font-size: clamp(2.3rem, 9.5vw, 3.2rem);
  margin-top: 0;
  line-height: 1;
}

/* "Contact Kamryn for more information" is a long label for a pill. On a
   phone it is tracked tighter and set a little smaller so it stays on one
   line instead of becoming a two-line slab. */
@media (max-width: 430px) {
  .wk-cta,
  .wkpage .sticky-cta .wk-cta {
    display: block;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.76rem;
    letter-spacing: 0.02em;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
}

/* The one-line promise under the tag, same voice as the homepage's
   .hero__promise. Defined here so this page does not depend on it. */
.wk-hero__line {
  color: var(--mist);
  font-size: 0.98rem;
  max-width: 420px;
  margin: 0.45rem auto 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}

.wkpage .hero__ctas { margin-top: 1.1rem; }
/* Wide enough for the long label on one line at desktop sizes. */
.wkpage .hero__ctas .btn { max-width: 460px; }
.wkpage .hero__info { color: var(--btb-peach); }

/* Current page in the nav, rose like the brand name. */
.wkpage .nav__links a[aria-current="page"] { color: var(--btb-rose); }

/* ============================================================
   TICKER — rose instead of the homepage blue
   ============================================================ */
.wkpage .ticker {
  border-top-color: rgba(250, 167, 170, 0.35);
  border-bottom-color: rgba(250, 167, 170, 0.35);
}
.wkpage .ticker__track { color: var(--btb-rose); }

/* ============================================================
   THE WORKSHOP SECTION
   ============================================================ */
.wk-section { text-align: center; }
.wk-section .eyebrow { color: var(--btb-rose); }
.wk-lead { margin: 0 auto; }

/* ---------- Barbie-pink heading ----------
   Italianno (the brand script) in a light pink gradient with a THIN darker
   stroke painted behind the fill (paint-order), so the letters gain a
   little weight without closing up. A dark hairline halo separates it
   from the navy, then a soft offset shadow and a faint glow. The earlier
   fat stroke + white gloss version was hard to read (James, 2026-10-28). */
.wk-barbie {
  position: relative;
  display: inline-block;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(3.4rem, 14vw, 7.2rem);
  line-height: 1.1;
  letter-spacing: 0.015em;
  margin: 0.1rem auto 1.1rem;
  padding: 0 0.12em 0.08em;
  color: var(--wk-pink-pale);
  background: linear-gradient(180deg, #FFEAF6 0%, #FFC8E6 40%, #FF9BD1 70%, #FF7AC2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.022em var(--wk-pink-deep);
  paint-order: stroke fill;
  /* A text-shadow would paint over clipped text, so depth is a filter. */
  filter:
    drop-shadow(0 0 1px rgba(40, 6, 24, 0.95))
    drop-shadow(0.03em 0.04em 0 rgba(110, 10, 62, 0.85))
    drop-shadow(0 0 14px rgba(255, 95, 176, 0.4));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .wk-barbie { color: var(--wk-pink-pale); -webkit-text-fill-color: var(--wk-pink-pale); }
}

/* ---------- The workshop card ----------
   Pink sea glass with a rose hairline, the same material as the
   calendar cards, so the page reads as one site. */
.wk-card {
  max-width: 560px;
  margin: 2.2rem auto 0;
  padding: 1.8rem 1.4rem 1.6rem;
  border: 1px solid rgba(250, 167, 170, 0.42);
  border-radius: 20px;
  background: var(--seaglass);
  background-origin: border-box;
  background-repeat: no-repeat;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 230, 0.12),
    0 0 30px rgba(255, 95, 176, 0.16),
    0 18px 44px rgba(0, 0, 0, 0.45);
}
.wk-card__kicker {
  font-family: "Courier Prime", "Courier New", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--btb-rose);
  margin-bottom: 0.4rem;
}
.wk-card__title {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(3rem, 12vw, 4.8rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  background: linear-gradient(100deg, #FEE6C8 8%, #FAA7AA 48%, #B8FBFF 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.6));
  padding: 0 0.08em 0.06em;
  margin-bottom: 0.3rem;
}
.wk-card__date {
  font-family: "Courier Prime", "Courier New", ui-monospace, monospace;
  font-size: clamp(0.95rem, 3.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--btb-peach);
}
.wk-card__spots {
  display: inline-block;
  margin: 0.9rem 0 1rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid rgba(184, 246, 255, 0.45);
  border-radius: var(--radius-pill);
  background: rgba(184, 246, 255, 0.08);
  font-family: "Courier Prime", "Courier New", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--btb-ice);
}
/* styles.css paints every <strong> blue; the count stays white on ice. */
.wk-card__spots strong { color: #FFFFFF; font-weight: 700; }
.wk-card__text {
  color: rgba(245, 241, 232, 0.85);
  max-width: 40ch;
  margin: 0 auto 1.3rem;
}
.wk-card .btn { width: 100%; max-width: 460px; }

/* ============================================================
   CLOSING BAND + STICKY BAR
   ============================================================ */
.wkpage .section--band .section__lead { margin-bottom: 1.6rem; }
.wkpage .sticky-cta { border-top-color: rgba(250, 167, 170, 0.4); }

/* ============================================================
   MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .wkpage .hero__video { filter: none; }
}

/* ============================================================
   LARGER SCREENS
   ============================================================ */
@media (min-width: 620px) {
  .wk-card { padding: 2.2rem 2.4rem 2rem; }
}